From f36878e939085d3e1e5ad168c13d013b0a76a2ab Mon Sep 17 00:00:00 2001
From: spivakov83 <spivakov83@gmail.com>
Date: Tue, 27 Jan 2026 17:23:31 +0200
Subject: [PATCH 1/2] skills added

---
 app/page.tsx                      |   3 +
 app/skills/page.tsx               |  55 +++++++++
 components/skill-builder-form.tsx | 185 ++++++++++++++++++++++++++++++
 components/ui/label.tsx           |  23 ++++
 components/ui/textarea.tsx        |  23 ++++
 file-templates/skill-template.md  |   9 ++
 lib/skill-templates.ts            | 131 +++++++++++++++++++++
 7 files changed, 429 insertions(+)
 create mode 100644 app/skills/page.tsx
 create mode 100644 components/skill-builder-form.tsx
 create mode 100644 components/ui/label.tsx
 create mode 100644 components/ui/textarea.tsx
 create mode 100644 file-templates/skill-template.md
 create mode 100644 lib/skill-templates.ts

diff --git a/app/page.tsx b/app/page.tsx
index 3715200..8972680 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -61,6 +61,9 @@ export default function LandingPage() {
             <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
               <Link href="/stacks">Browse stacks</Link>
             </Button>
+            <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
+              <Link href="/skills">Skill builder</Link>
+            </Button>
             <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
               <Link href="/new">Launch wizard</Link>
             </Button>
diff --git a/app/skills/page.tsx b/app/skills/page.tsx
new file mode 100644
index 0000000..f3e864b
--- /dev/null
+++ b/app/skills/page.tsx
@@ -0,0 +1,55 @@
+import { Github } from "lucide-react"
+import Link from "next/link"
+import type { Metadata } from "next"
+
+import { Button } from "@/components/ui/button"
+import { SkillBuilderForm } from "@/components/skill-builder-form"
+import { AnimatedBackground } from "@/components/AnimatedBackground"
+
+export const metadata: Metadata = {
+    title: "Claude Skill Builder | DevContext",
+    description: "Create custom skills for Claude AI. Generate properly formatted Skill.md files with metadata and instructions.",
+}
+
+export default function SkillsPage() {
+    return (
+        <div className="relative min-h-screen bg-background text-foreground">
+            <AnimatedBackground />
+
+            <div className="relative z-10 flex min-h-screen flex-col">
+                <header className="flex items-center justify-between px-6 py-6 lg:px-12 lg:py-8 border-b bg-background/50 backdrop-blur-sm">
+                    <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
+                        DevContext
+                    </Link>
+                    <div className="flex items-center gap-3">
+                        <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
+                            <Link href="https://support.claude.com/en/articles/12512198-how-to-create-custom-skills" target="_blank" rel="noreferrer">
+                                Claude Skills Docs
+                            </Link>
+                        </Button>
+                        <Button asChild variant="outline" size="sm">
+                            <Link href="https://github.com/spivx/devcontext" rel="noreferrer" target="_blank">
+                                <Github className="size-4" />
+                                GitHub
+                            </Link>
+                        </Button>
+                    </div>
+                </header>
+
+                <main className="container mx-auto max-w-7xl px-4 py-8 lg:px-8 flex-1">
+                    <div className="mb-8 space-y-4">
+                        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+                            Claude Custom Skill Builder
+                        </h1>
+                        <p className="max-w-2xl text-muted-foreground text-lg">
+                            Create <code>Skill.md</code> files to give Claude new capabilities. Define metadata,
+                            dependencies, and instructions in a standardized format.
+                        </p>
+                    </div>
+
+                    <SkillBuilderForm />
+                </main>
+            </div>
+        </div>
+    )
+}
diff --git a/components/skill-builder-form.tsx b/components/skill-builder-form.tsx
new file mode 100644
index 0000000..b31e2b2
--- /dev/null
+++ b/components/skill-builder-form.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Download, Wand2 } from "lucide-react"
+import { skillTemplates, type SkillTemplate } from "@/lib/skill-templates"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+
+interface SkillData {
+    name: string
+    description: string
+    dependencies: string
+    content: string
+}
+
+const DEFAULT_CONTENT = `## Steps
+1. [Step 1]
+2. [Step 2]
+
+## Examples
+User: [Input]
+Assistant: [Output]
+`
+
+export function SkillBuilderForm() {
+    const [data, setData] = useState<SkillData>({
+        name: "",
+        description: "",
+        dependencies: "",
+        content: DEFAULT_CONTENT,
+    })
+
+    const [preview, setPreview] = useState("")
+
+    useEffect(() => {
+        // Generate preview
+        let output = `name: ${data.name || "My Skill"}\n`
+        output += `description: ${data.description || "Skill description"}\n`
+
+        if (data.dependencies) {
+            output += `dependencies: ${data.dependencies}\n`
+        }
+
+        output += `\n${data.content}`
+
+        setPreview(output)
+    }, [data])
+
+    const handleChange = (field: keyof SkillData, value: string) => {
+        setData((prev) => ({ ...prev, [field]: value }))
+    }
+
+    const handleDownload = () => {
+        const blob = new Blob([preview], { type: "text/markdown" })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement("a")
+        link.href = url
+        // Use the skill name for filename, replacing spaces with dashes, or default
+        const safeName = (data.name || "skill").toLowerCase().replace(/[^a-z0-9]+/g, "-")
+        link.download = `${safeName}.md`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+    }
+
+    const loadTemplate = (template: SkillTemplate) => {
+        setData({
+            name: template.skillData.name,
+            description: template.skillData.description,
+            dependencies: template.skillData.dependencies,
+            content: template.skillData.content,
+        })
+    }
+
+    return (
+        <div className="space-y-8">
+            <section className="space-y-4">
+                <div className="flex items-center gap-2">
+                    <h2 className="text-xl font-semibold">Start with a template</h2>
+                </div>
+                <p className="text-muted-foreground">Select a template to pre-fill the skill configuration.</p>
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                    {skillTemplates.map((template) => (
+                        <Button
+                            key={template.id}
+                            variant="outline"
+                            className="h-auto w-full flex-col items-start gap-2 p-4 text-left hover:border-primary hover:bg-primary/5 whitespace-normal"
+                            onClick={() => loadTemplate(template)}
+                        >
+                            <span className="font-semibold">{template.name}</span>
+                            <span className="text-xs font-normal text-muted-foreground">
+                                {template.description}
+                            </span>
+                        </Button>
+                    ))}
+                </div>
+            </section>
+
+            <div className="grid gap-6 lg:grid-cols-2">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Skill Configuration</CardTitle>
+                        <CardDescription>
+                            Define metadata and instructions for your custom Claude skill.
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="name">Name (max 64 chars)</Label>
+                            <Input
+                                id="name"
+                                placeholder="e.g., Brand Guidelines"
+                                maxLength={64}
+                                value={data.name}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange("name", e.target.value)}
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="description">Description (max 200 chars)</Label>
+                            <Textarea
+                                id="description"
+                                placeholder="Critical: Defines when Claude should use this skill."
+                                maxLength={200}
+                                className="resize-none"
+                                rows={3}
+                                value={data.description}
+                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => handleChange("description", e.target.value)}
+                            />
+                            <p className="text-xs text-muted-foreground text-right">
+                                {data.description.length}/200
+                            </p>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="dependencies">Dependencies (Optional)</Label>
+                            <Input
+                                id="dependencies"
+                                placeholder="e.g., python>=3.8, pandas>=1.5.0"
+                                value={data.dependencies}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange("dependencies", e.target.value)}
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="content">Markdown Body</Label>
+                            <Textarea
+                                id="content"
+                                placeholder="## Overview..."
+                                className="min-h-[300px] font-mono text-sm"
+                                value={data.content}
+                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => handleChange("content", e.target.value)}
+                            />
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card className="flex flex-col h-full">
+                    <CardHeader>
+                        <CardTitle>Preview</CardTitle>
+                        <CardDescription>
+                            This is how your <code>Skill.md</code> file will look.
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex-1">
+                        <div className="h-full rounded-md border bg-muted/50 p-4 font-mono text-sm whitespace-pre-wrap overflow-auto max-h-[600px]">
+                            {preview}
+                        </div>
+                    </CardContent>
+                    <CardFooter className="border-t p-6">
+                        <Button onClick={handleDownload} className="w-full sm:w-auto ml-auto">
+                            <Download className="mr-2 size-4" />
+                            Download Skill.md
+                        </Button>
+                    </CardFooter>
+                </Card>
+            </div>
+        </div>
+    )
+}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..04da1b0
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+    HTMLLabelElement,
+    React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <label
+        ref={ref}
+        className={cn(labelVariants(), className)}
+        {...props}
+    />
+))
+Label.displayName = "Label"
+
+export { Label }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..dbf3e09
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/file-templates/skill-template.md b/file-templates/skill-template.md
new file mode 100644
index 0000000..ae80c89
--- /dev/null
+++ b/file-templates/skill-template.md
@@ -0,0 +1,9 @@
+name: {{name}}
+description: {{description}}
+{{#if dependencies}}
+dependencies: {{dependencies}}
+{{/if}}
+
+{{#if content}}
+{{content}}
+{{/if}}
diff --git a/lib/skill-templates.ts b/lib/skill-templates.ts
new file mode 100644
index 0000000..02ad5e5
--- /dev/null
+++ b/lib/skill-templates.ts
@@ -0,0 +1,131 @@
+export interface SkillTemplate {
+    id: string
+    name: string
+    description: string
+    skillData: {
+        name: string
+        description: string
+        dependencies: string
+        content: string
+    }
+}
+
+export const skillTemplates: SkillTemplate[] = [
+    {
+        id: "code-style",
+        name: "Code Style Enforcer",
+        description: "Standardize code style and formatting rules for consistency.",
+        skillData: {
+            name: "Code Style",
+            description: "Enforce project-specific coding standards and best practices.",
+            dependencies: "",
+            content: `## Principles
+- Clarity over cleverness
+- Consistent naming conventions
+- Early returns for guard clauses
+
+## Naming Conventions
+- specific_variable_names (snake_case for Python)
+- camelCaseVariableNames (camelCase for JS/TS)
+- PascalCaseComponentNames (PascalCase for React components)
+
+## Examples
+User: How should I name this variable?
+Assistant: Since this is a boolean flag in TypeScript, use \`is\` or \`has\` prefix, e.g., \`isValidUser\` or \`hasPermission\`.`
+        }
+    },
+    {
+        id: "documentation",
+        name: "Docstring Generator",
+        description: "Generate comprehensive documentation for functions and classes.",
+        skillData: {
+            name: "Documentation Generator",
+            description: "Generate JSDoc/Docstring for code automatically.",
+            dependencies: "",
+            content: `## Goal
+Produce high-quality documentation comments for all exported functions and classes.
+
+## Format
+For TypeScript/JavaScript, use JSDoc:
+/**
+ * Short description.
+ *
+ * @param {Type} name - Description
+ * @returns {Type} Description
+ */
+
+## Examples
+User: Document this function
+Assistant:
+/**
+ * Calculates the total sum of an array of numbers.
+ *
+ * @param {number[]} numbers - The list of numbers to sum.
+ * @returns {number} The total sum.
+ */
+function sum(numbers: number[]): number { ... }`
+        }
+    },
+    {
+        id: "react-component",
+        name: "React Component",
+        description: "Scaffold a new React component with best practices.",
+        skillData: {
+            name: "React Component Generator",
+            description: "Create modern, accessible, and typed React components.",
+            dependencies: "react, lucide-react, clsx, tailwind-merge",
+            content: `## Structure
+- Use functional components with named exports.
+- Use explicit return types.
+- Destructure props.
+- Use 'cn' utility for class merging.
+
+## Template
+\`\`\`tsx
+import { cn } from "@/lib/utils"
+
+interface MyComponentProps {
+    className?: string
+    children?: React.ReactNode
+}
+
+export function MyComponent({ className, children }: MyComponentProps) {
+    return (
+        <div className={cn("base-styles", className)}>
+            {children}
+        </div>
+    )
+}
+\`\`\``
+        }
+    },
+    {
+        id: "unit-testing",
+        name: "Unit Testing",
+        description: "Generate robust unit tests for your code.",
+        skillData: {
+            name: "Test Generator",
+            description: "Create comprehensive unit tests covering edge cases.",
+            dependencies: "jest, vitest, @testing-library/react",
+            content: `## Guidelines
+- Test behavior, not implementation details.
+- Use descriptive test names ("should do X when Y").
+- Arrange, Act, Assert pattern.
+- Mock external dependencies.
+
+## Checklist
+- [ ] Happy path tested?
+- [ ] Error states tested?
+- [ ] Edge cases (empty arrays, nulls) tested?
+
+## Example
+\`\`\`ts
+describe("calculator", () => {
+    it("should add two numbers correctly", () => {
+        expect(add(1, 2)).toBe(3)
+    })
+})
+\`\`\``
+        }
+    }
+]

From e1e08fede723600452a9a7e2c41c95989aecfdb8 Mon Sep 17 00:00:00 2001
From: spivakov83 <spivakov83@gmail.com>
Date: Tue, 27 Jan 2026 17:58:07 +0200
Subject: [PATCH 2/2] skills added

---
 app/layout.tsx                     |   9 +
 app/sitemap.ts                     |  13 +-
 app/skills/page.tsx                |  77 ++++++-
 components/Hero.tsx                |   2 +-
 components/skill-builder-form.tsx  | 338 ++++++++++++++++++++---------
 components/ui/collapsible.tsx      |  12 +
 lib/skill-templates.ts             | 131 -----------
 lib/skills.ts                      |  49 +++++
 package-lock.json                  | 280 +++++++++++++++++++++++-
 package.json                       |   4 +-
 skills/accessibility-audit.md      |  25 +++
 skills/angular-component.md        |  46 ++++
 skills/api-endpoint-nextjs.md      |  47 ++++
 skills/bug-analysis.md             |  19 ++
 skills/code-style.md               |  19 ++
 skills/commit-message.md           |  22 ++
 skills/design-system-tokens.md     |  26 +++
 skills/dockerfile-generator.md     |  35 +++
 skills/documentation.md            |  28 +++
 skills/fastapi-route.md            |  38 ++++
 skills/github-action.md            |  37 ++++
 skills/kubernetes-manifest.md      |  52 +++++
 skills/nginx-config.md             |  28 +++
 skills/performance-optimization.md |  32 +++
 skills/playwright-e2e.md           |  36 +++
 skills/react-component.md          |  29 +++
 skills/readme-generator.md         |  44 ++++
 skills/release-notes.md            |  25 +++
 skills/security-audit.md           |  26 +++
 skills/svelte-component.md         |  37 ++++
 skills/technical-specs.md          |  19 ++
 skills/tsconfig-generator.md       |  42 ++++
 skills/unit-testing.md             |  25 +++
 skills/vue-component.md            |  51 +++++
 34 files changed, 1452 insertions(+), 251 deletions(-)
 create mode 100644 components/ui/collapsible.tsx
 delete mode 100644 lib/skill-templates.ts
 create mode 100644 lib/skills.ts
 create mode 100644 skills/accessibility-audit.md
 create mode 100644 skills/angular-component.md
 create mode 100644 skills/api-endpoint-nextjs.md
 create mode 100644 skills/bug-analysis.md
 create mode 100644 skills/code-style.md
 create mode 100644 skills/commit-message.md
 create mode 100644 skills/design-system-tokens.md
 create mode 100644 skills/dockerfile-generator.md
 create mode 100644 skills/documentation.md
 create mode 100644 skills/fastapi-route.md
 create mode 100644 skills/github-action.md
 create mode 100644 skills/kubernetes-manifest.md
 create mode 100644 skills/nginx-config.md
 create mode 100644 skills/performance-optimization.md
 create mode 100644 skills/playwright-e2e.md
 create mode 100644 skills/react-component.md
 create mode 100644 skills/readme-generator.md
 create mode 100644 skills/release-notes.md
 create mode 100644 skills/security-audit.md
 create mode 100644 skills/svelte-component.md
 create mode 100644 skills/technical-specs.md
 create mode 100644 skills/tsconfig-generator.md
 create mode 100644 skills/unit-testing.md
 create mode 100644 skills/vue-component.md

diff --git a/app/layout.tsx b/app/layout.tsx
index 705b549..1c1d24b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -38,6 +38,8 @@ const structuredData = {
     "Scan a GitHub repo to auto-detect stack, frameworks, and tooling",
     "Context-aware questions with best-practice suggestions",
     "Instant boilerplate generation with smart defaults",
+    "Claude Skill Builder for custom AI capabilities",
+    "Generate Skill.md files for Claude AI",
   ],
   keywords: [
     "AI coding guidelines",
@@ -51,6 +53,10 @@ const structuredData = {
     "AI repo analyzer",
     "GitHub repo scanner for Copilot",
     "repo-aware coding guidelines",
+    "Claude Skill Builder",
+    "generate Skill.md file",
+    "Claude custom skills",
+    "AI agent capabilities",
   ],
 };
 
@@ -83,6 +89,9 @@ export const metadata: Metadata = {
     "generate coding standards from GitHub repo",
     "repo-aware AI coding guidelines",
     "auto-detect framework coding rules",
+    "Claude skills",
+    "Skill.md generator",
+    "custom AI capabilities",
   ],
   authors: [{ name: "DevContext" }],
   creator: "DevContext",
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 5ce6b7b..51b5a54 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -9,12 +9,13 @@ const STATIC_ENTRIES: Array<{
   priority: number
   changeFrequency: MetadataRoute.Sitemap[number]["changeFrequency"]
 }> = [
-  { path: "", priority: 1, changeFrequency: "weekly" },
-  { path: "/new", priority: 0.9, changeFrequency: "weekly" },
-  { path: "/existing", priority: 0.6, changeFrequency: "monthly" },
-  { path: "/stacks", priority: 0.7, changeFrequency: "monthly" },
-  { path: "/new/stack", priority: 0.8, changeFrequency: "weekly" },
-]
+    { path: "", priority: 1, changeFrequency: "weekly" },
+    { path: "/new", priority: 0.9, changeFrequency: "weekly" },
+    { "path": "/skills", "priority": 0.85, "changeFrequency": "weekly" },
+    { path: "/existing", priority: 0.6, changeFrequency: "monthly" },
+    { path: "/stacks", priority: 0.7, changeFrequency: "monthly" },
+    { path: "/new/stack", priority: 0.8, changeFrequency: "weekly" },
+  ]
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const lastModified = new Date()
diff --git a/app/skills/page.tsx b/app/skills/page.tsx
index f3e864b..e51c582 100644
--- a/app/skills/page.tsx
+++ b/app/skills/page.tsx
@@ -5,15 +5,41 @@ import type { Metadata } from "next"
 import { Button } from "@/components/ui/button"
 import { SkillBuilderForm } from "@/components/skill-builder-form"
 import { AnimatedBackground } from "@/components/AnimatedBackground"
+import { getAllSkills } from "@/lib/skills"
 
 export const metadata: Metadata = {
-    title: "Claude Skill Builder | DevContext",
-    description: "Create custom skills for Claude AI. Generate properly formatted Skill.md files with metadata and instructions.",
+    title: "Claude Skills Marketplace - Free AI Agent Skills Library",
+    description: "Browse and download high-quality Skill.md files for Claude and other AI agents. Enhance your AI with capabilities for Coding, DevOps, Testing, and more.",
+    keywords: ["Claude skills", "skills marketplace", "Skill.md", "AI agent capabilities", "coding skills", "devops skills"],
+    alternates: {
+        canonical: "/skills",
+    },
 }
 
+const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    "name": "Claude Skills Marketplace",
+    "description": "A marketplace of custom Skill.md files for Claude AI to enhance its capabilities.",
+    "url": "https://devcontext.xyz/skills",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Web",
+    "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+    }
+};
+
 export default function SkillsPage() {
+    const skills = getAllSkills();
+
     return (
         <div className="relative min-h-screen bg-background text-foreground">
+            <script
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+            />
             <AnimatedBackground />
 
             <div className="relative z-10 flex min-h-screen flex-col">
@@ -38,16 +64,51 @@ export default function SkillsPage() {
 
                 <main className="container mx-auto max-w-7xl px-4 py-8 lg:px-8 flex-1">
                     <div className="mb-8 space-y-4">
-                        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
-                            Claude Custom Skill Builder
-                        </h1>
+                        <div className="flex flex-col gap-2">
+                            <span className="text-sm font-semibold uppercase tracking-wider text-primary">Beta</span>
+                            <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+                                Skills Marketplace
+                            </h1>
+                        </div>
                         <p className="max-w-2xl text-muted-foreground text-lg">
-                            Create <code>Skill.md</code> files to give Claude new capabilities. Define metadata,
-                            dependencies, and instructions in a standardized format.
+                            Download ready-to-use <code>Skill.md</code> files or customize them to give Claude new capabilities.
+                            Community-driven skills for Frameworks, DevOps, Testing, and Quality Assurance.
                         </p>
                     </div>
 
-                    <SkillBuilderForm />
+                    <SkillBuilderForm initialSkills={skills} />
+
+                    <section className="mt-16 space-y-8 border-t pt-12">
+                        <div className="space-y-4">
+                            <h2 className="text-2xl font-bold tracking-tight">Frequently Asked Questions</h2>
+                            <div className="grid gap-8 sm:grid-cols-2">
+                                <div className="space-y-2">
+                                    <h3 className="font-semibold text-lg text-primary">What&apos;s in the Marketplace?</h3>
+                                    <p className="text-muted-foreground">
+                                        You&apos;ll find dozens of pre-configured skills covering everything from React Component generation to Docker configurations and Security Audits. All free to use and modify.
+                                    </p>
+                                </div>
+                                <div className="space-y-2">
+                                    <h3 className="font-semibold text-lg text-primary">How do I contribute?</h3>
+                                    <p className="text-muted-foreground">
+                                        DevContext is open source! You can contribute new skills by adding a markdown file to the <code>skills/</code> directory in our GitHub repository.
+                                    </p>
+                                </div>
+                                <div className="space-y-2">
+                                    <h3 className="font-semibold text-lg text-primary">How do I use a Skill.md file?</h3>
+                                    <p className="text-muted-foreground">
+                                        Download the file and upload it to your Claude project, or reference it in your AI agent configuration (like local LLMs or Cursor).
+                                    </p>
+                                </div>
+                                <div className="space-y-2">
+                                    <h3 className="font-semibold text-lg text-primary">Can I use these skills in IDEs?</h3>
+                                    <p className="text-muted-foreground">
+                                        Yes! Many IDE extensions and AI agents (like Cline, Roo Code, or Cursor) support custom skill definitions. By providing a structured <code>Skill.md</code>, you ensure consistent behavior across different environments.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
                 </main>
             </div>
         </div>
diff --git a/components/Hero.tsx b/components/Hero.tsx
index f128273..539c73e 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -98,7 +98,7 @@ export function Hero() {
           className="mx-auto max-w-2xl text-sm text-muted-foreground md:text-lg"
           variants={itemVariants}
         >
-          Start from scratch with a guided wizard or analyze a public GitHub repo. DevContext detects languages, frameworks, tooling, and tests to generate Copilot instructions, Cursor rules, and onboarding docs you can edit and export.
+          Start from scratch with a guided wizard or analyze a public GitHub repo. DevContext detects languages, frameworks, tooling, and tests to generate Copilot instructions, Cursor rules, onboarding docs, and custom Claude skills you can edit and export.
         </motion.p>
 
 
diff --git a/components/skill-builder-form.tsx b/components/skill-builder-form.tsx
index b31e2b2..f9d8dfe 100644
--- a/components/skill-builder-form.tsx
+++ b/components/skill-builder-form.tsx
@@ -1,14 +1,15 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Download, Wand2 } from "lucide-react"
-import { skillTemplates, type SkillTemplate } from "@/lib/skill-templates"
+import { Download, Search, Check, FileText, X, Settings2, Eye } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+import { type Skill } from "@/lib/skills"
 
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
+import { cn } from "@/lib/utils"
 
 interface SkillData {
     name: string
@@ -26,7 +27,13 @@ User: [Input]
 Assistant: [Output]
 `
 
-export function SkillBuilderForm() {
+interface SkillBuilderFormProps {
+    initialSkills: Skill[]
+}
+
+type Tab = "editor" | "preview"
+
+export function SkillBuilderForm({ initialSkills }: SkillBuilderFormProps) {
     const [data, setData] = useState<SkillData>({
         name: "",
         description: "",
@@ -35,6 +42,15 @@ export function SkillBuilderForm() {
     })
 
     const [preview, setPreview] = useState("")
+    const [searchQuery, setSearchQuery] = useState("")
+    const [selectedSkillId, setSelectedSkillId] = useState<string | null>(null)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [activeTab, setActiveTab] = useState<Tab>("editor")
+
+    const filteredSkills = initialSkills.filter(skill =>
+        skill.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        skill.description.toLowerCase().includes(searchQuery.toLowerCase())
+    )
 
     useEffect(() => {
         // Generate preview
@@ -50,6 +66,18 @@ export function SkillBuilderForm() {
         setPreview(output)
     }, [data])
 
+    // Prevent body scroll when drawer is open
+    useEffect(() => {
+        if (isDrawerOpen) {
+            document.body.style.overflow = "hidden"
+        } else {
+            document.body.style.overflow = "unset"
+        }
+        return () => {
+            document.body.style.overflow = "unset"
+        }
+    }, [isDrawerOpen])
+
     const handleChange = (field: keyof SkillData, value: string) => {
         setData((prev) => ({ ...prev, [field]: value }))
     }
@@ -68,118 +96,222 @@ export function SkillBuilderForm() {
         URL.revokeObjectURL(url)
     }
 
-    const loadTemplate = (template: SkillTemplate) => {
+    const loadTemplate = (skill: Skill) => {
         setData({
-            name: template.skillData.name,
-            description: template.skillData.description,
-            dependencies: template.skillData.dependencies,
-            content: template.skillData.content,
+            name: skill.name,
+            description: skill.description,
+            dependencies: skill.dependencies || "",
+            content: skill.content,
         })
+        setSelectedSkillId(skill.id)
+        setIsDrawerOpen(true)
+        setActiveTab("editor")
+    }
+
+    const handleCreateNew = () => {
+        setData({
+            name: "",
+            description: "",
+            dependencies: "",
+            content: DEFAULT_CONTENT,
+        })
+        setSelectedSkillId(null)
+        setIsDrawerOpen(true)
+        setActiveTab("editor")
+    }
+
+    const handleCloseDrawer = () => {
+        setIsDrawerOpen(false)
+        setSelectedSkillId(null)
     }
 
     return (
         <div className="space-y-8">
-            <section className="space-y-4">
-                <div className="flex items-center gap-2">
-                    <h2 className="text-xl font-semibold">Start with a template</h2>
-                </div>
-                <p className="text-muted-foreground">Select a template to pre-fill the skill configuration.</p>
-                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-                    {skillTemplates.map((template) => (
-                        <Button
-                            key={template.id}
-                            variant="outline"
-                            className="h-auto w-full flex-col items-start gap-2 p-4 text-left hover:border-primary hover:bg-primary/5 whitespace-normal"
-                            onClick={() => loadTemplate(template)}
-                        >
-                            <span className="font-semibold">{template.name}</span>
-                            <span className="text-xs font-normal text-muted-foreground">
-                                {template.description}
-                            </span>
-                        </Button>
-                    ))}
-                </div>
-            </section>
-
-            <div className="grid gap-6 lg:grid-cols-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Skill Configuration</CardTitle>
-                        <CardDescription>
-                            Define metadata and instructions for your custom Claude skill.
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                        <div className="space-y-2">
-                            <Label htmlFor="name">Name (max 64 chars)</Label>
+            <section className="space-y-6">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div>
+                        <h2 className="text-2xl font-bold tracking-tight">Browse Skills Library</h2>
+                        <p className="text-muted-foreground mt-1">Select a skill to customize and download.</p>
+                    </div>
+                    <div className="flex items-center gap-2 w-full sm:w-auto">
+                        <div className="relative w-full sm:w-[300px]">
+                            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                             <Input
-                                id="name"
-                                placeholder="e.g., Brand Guidelines"
-                                maxLength={64}
-                                value={data.name}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange("name", e.target.value)}
+                                placeholder="Search skills..."
+                                className="pl-9"
+                                value={searchQuery}
+                                onChange={(e) => setSearchQuery(e.target.value)}
                             />
                         </div>
+                        <Button onClick={handleCreateNew} variant="secondary">
+                            Create Custom
+                        </Button>
+                    </div>
+                </div>
 
-                        <div className="space-y-2">
-                            <Label htmlFor="description">Description (max 200 chars)</Label>
-                            <Textarea
-                                id="description"
-                                placeholder="Critical: Defines when Claude should use this skill."
-                                maxLength={200}
-                                className="resize-none"
-                                rows={3}
-                                value={data.description}
-                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => handleChange("description", e.target.value)}
-                            />
-                            <p className="text-xs text-muted-foreground text-right">
-                                {data.description.length}/200
-                            </p>
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                    {filteredSkills.length > 0 ? (
+                        filteredSkills.map((skill) => (
+                            <div
+                                key={skill.id}
+                                className={cn(
+                                    "group relative flex flex-col gap-3 rounded-lg border p-4 hover:border-primary/50 hover:bg-muted/50 transition-all cursor-pointer",
+                                    selectedSkillId === skill.id && "border-primary bg-primary/5 ring-1 ring-primary"
+                                )}
+                                onClick={() => loadTemplate(skill)}
+                            >
+                                <div className="flex items-start justify-between gap-2">
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary/10 text-primary">
+                                            <FileText className="h-4 w-4" />
+                                        </div>
+                                        <h3 className="font-semibold leading-none">{skill.name}</h3>
+                                    </div>
+                                    {selectedSkillId === skill.id && <Check className="h-4 w-4 text-primary" />}
+                                </div>
+                                <p className="text-sm text-muted-foreground line-clamp-2">
+                                    {skill.description}
+                                </p>
+                            </div>
+                        ))
+                    ) : (
+                        <div className="col-span-full py-12 text-center text-muted-foreground">
+                            No skills found matching your search.
                         </div>
+                    )}
+                </div>
+            </section>
 
-                        <div className="space-y-2">
-                            <Label htmlFor="dependencies">Dependencies (Optional)</Label>
-                            <Input
-                                id="dependencies"
-                                placeholder="e.g., python>=3.8, pandas>=1.5.0"
-                                value={data.dependencies}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange("dependencies", e.target.value)}
-                            />
-                        </div>
+            <AnimatePresence>
+                {isDrawerOpen && (
+                    <>
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            onClick={handleCloseDrawer}
+                            className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm"
+                        />
+                        <motion.div
+                            initial={{ x: "100%" }}
+                            animate={{ x: 0 }}
+                            exit={{ x: "100%" }}
+                            transition={{ type: "spring", damping: 20, stiffness: 300 }}
+                            className="fixed inset-y-0 right-0 z-50 flex h-full w-full max-w-2xl flex-col border-l bg-background shadow-xl sm:max-w-[800px]"
+                        >
+                            {/* Drawer Header */}
+                            <div className="flex items-center justify-between border-b px-6 py-4">
+                                <div>
+                                    <h2 className="text-lg font-semibold">
+                                        {selectedSkillId ? "Edit Skill" : "Create New Skill"}
+                                    </h2>
+                                    <p className="text-sm text-muted-foreground">
+                                        Customize metadata and content before downloading.
+                                    </p>
+                                </div>
+                                <Button variant="ghost" size="icon" onClick={handleCloseDrawer}>
+                                    <X className="h-5 w-5" />
+                                </Button>
+                            </div>
 
-                        <div className="space-y-2">
-                            <Label htmlFor="content">Markdown Body</Label>
-                            <Textarea
-                                id="content"
-                                placeholder="## Overview..."
-                                className="min-h-[300px] font-mono text-sm"
-                                value={data.content}
-                                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => handleChange("content", e.target.value)}
-                            />
-                        </div>
-                    </CardContent>
-                </Card>
-
-                <Card className="flex flex-col h-full">
-                    <CardHeader>
-                        <CardTitle>Preview</CardTitle>
-                        <CardDescription>
-                            This is how your <code>Skill.md</code> file will look.
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent className="flex-1">
-                        <div className="h-full rounded-md border bg-muted/50 p-4 font-mono text-sm whitespace-pre-wrap overflow-auto max-h-[600px]">
-                            {preview}
-                        </div>
-                    </CardContent>
-                    <CardFooter className="border-t p-6">
-                        <Button onClick={handleDownload} className="w-full sm:w-auto ml-auto">
-                            <Download className="mr-2 size-4" />
-                            Download Skill.md
-                        </Button>
-                    </CardFooter>
-                </Card>
-            </div>
+                            {/* Tabs / Toolbar */}
+                            <div className="border-b px-6 py-2 flex items-center justify-between bg-muted/30">
+                                <div className="flex items-center p-1 bg-muted rounded-lg">
+                                    <button
+                                        onClick={() => setActiveTab("editor")}
+                                        className={cn(
+                                            "flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-all",
+                                            activeTab === "editor"
+                                                ? "bg-background shadow text-foreground"
+                                                : "text-muted-foreground hover:text-foreground"
+                                        )}
+                                    >
+                                        <Settings2 className="h-4 w-4" />
+                                        Editor
+                                    </button>
+                                    <button
+                                        onClick={() => setActiveTab("preview")}
+                                        className={cn(
+                                            "flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-all",
+                                            activeTab === "preview"
+                                                ? "bg-background shadow text-foreground"
+                                                : "text-muted-foreground hover:text-foreground"
+                                        )}
+                                    >
+                                        <Eye className="h-4 w-4" />
+                                        Preview
+                                    </button>
+                                </div>
+
+                                <Button onClick={handleDownload} size="sm">
+                                    <Download className="mr-2 h-4 w-4" />
+                                    Download
+                                </Button>
+                            </div>
+
+                            {/* Drawer Content */}
+                            <div className="flex-1 overflow-y-auto p-6">
+                                {activeTab === "editor" ? (
+                                    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                                        <div className="grid gap-4 sm:grid-cols-2">
+                                            <div className="space-y-2">
+                                                <Label htmlFor="name">Name (max 64 chars)</Label>
+                                                <Input
+                                                    id="name"
+                                                    placeholder="e.g., Brand Guidelines"
+                                                    maxLength={64}
+                                                    value={data.name}
+                                                    onChange={(e) => handleChange("name", e.target.value)}
+                                                />
+                                            </div>
+                                            <div className="space-y-2">
+                                                <Label htmlFor="dependencies">Dependencies (Optional)</Label>
+                                                <Input
+                                                    id="dependencies"
+                                                    placeholder="e.g., python>=3.8, pandas>=1.5.0"
+                                                    value={data.dependencies}
+                                                    onChange={(e) => handleChange("dependencies", e.target.value)}
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="space-y-2">
+                                            <Label htmlFor="description">Description (max 200 chars)</Label>
+                                            <Textarea
+                                                id="description"
+                                                placeholder="Critical: Defines when Claude should use this skill."
+                                                maxLength={200}
+                                                className="resize-none"
+                                                rows={2}
+                                                value={data.description}
+                                                onChange={(e) => handleChange("description", e.target.value)}
+                                            />
+                                            <p className="text-xs text-muted-foreground text-right">
+                                                {data.description.length}/200
+                                            </p>
+                                        </div>
+
+                                        <div className="space-y-2">
+                                            <Label htmlFor="content">Markdown Body</Label>
+                                            <Textarea
+                                                id="content"
+                                                placeholder="## Overview..."
+                                                className="min-h-[400px] font-mono text-sm leading-relaxed"
+                                                value={data.content}
+                                                onChange={(e) => handleChange("content", e.target.value)}
+                                            />
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className="h-full rounded-lg border bg-muted/30 p-6 font-mono text-sm whitespace-pre-wrap animate-in fade-in slide-in-from-bottom-2 duration-300">
+                                        {preview}
+                                    </div>
+                                )}
+                            </div>
+                        </motion.div>
+                    </>
+                )}
+            </AnimatePresence>
         </div>
     )
 }
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 0000000..0a71997
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/lib/skill-templates.ts b/lib/skill-templates.ts
deleted file mode 100644
index 02ad5e5..0000000
--- a/lib/skill-templates.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-export interface SkillTemplate {
-    id: string
-    name: string
-    description: string
-    skillData: {
-        name: string
-        description: string
-        dependencies: string
-        content: string
-    }
-}
-
-export const skillTemplates: SkillTemplate[] = [
-    {
-        id: "code-style",
-        name: "Code Style Enforcer",
-        description: "Standardize code style and formatting rules for consistency.",
-        skillData: {
-            name: "Code Style",
-            description: "Enforce project-specific coding standards and best practices.",
-            dependencies: "",
-            content: `## Principles
-- Clarity over cleverness
-- Consistent naming conventions
-- Early returns for guard clauses
-
-## Naming Conventions
-- specific_variable_names (snake_case for Python)
-- camelCaseVariableNames (camelCase for JS/TS)
-- PascalCaseComponentNames (PascalCase for React components)
-
-## Examples
-User: How should I name this variable?
-Assistant: Since this is a boolean flag in TypeScript, use \`is\` or \`has\` prefix, e.g., \`isValidUser\` or \`hasPermission\`.`
-        }
-    },
-    {
-        id: "documentation",
-        name: "Docstring Generator",
-        description: "Generate comprehensive documentation for functions and classes.",
-        skillData: {
-            name: "Documentation Generator",
-            description: "Generate JSDoc/Docstring for code automatically.",
-            dependencies: "",
-            content: `## Goal
-Produce high-quality documentation comments for all exported functions and classes.
-
-## Format
-For TypeScript/JavaScript, use JSDoc:
-/**
- * Short description.
- *
- * @param {Type} name - Description
- * @returns {Type} Description
- */
-
-## Examples
-User: Document this function
-Assistant:
-/**
- * Calculates the total sum of an array of numbers.
- *
- * @param {number[]} numbers - The list of numbers to sum.
- * @returns {number} The total sum.
- */
-function sum(numbers: number[]): number { ... }`
-        }
-    },
-    {
-        id: "react-component",
-        name: "React Component",
-        description: "Scaffold a new React component with best practices.",
-        skillData: {
-            name: "React Component Generator",
-            description: "Create modern, accessible, and typed React components.",
-            dependencies: "react, lucide-react, clsx, tailwind-merge",
-            content: `## Structure
-- Use functional components with named exports.
-- Use explicit return types.
-- Destructure props.
-- Use 'cn' utility for class merging.
-
-## Template
-\`\`\`tsx
-import { cn } from "@/lib/utils"
-
-interface MyComponentProps {
-    className?: string
-    children?: React.ReactNode
-}
-
-export function MyComponent({ className, children }: MyComponentProps) {
-    return (
-        <div className={cn("base-styles", className)}>
-            {children}
-        </div>
-    )
-}
-\`\`\``
-        }
-    },
-    {
-        id: "unit-testing",
-        name: "Unit Testing",
-        description: "Generate robust unit tests for your code.",
-        skillData: {
-            name: "Test Generator",
-            description: "Create comprehensive unit tests covering edge cases.",
-            dependencies: "jest, vitest, @testing-library/react",
-            content: `## Guidelines
-- Test behavior, not implementation details.
-- Use descriptive test names ("should do X when Y").
-- Arrange, Act, Assert pattern.
-- Mock external dependencies.
-
-## Checklist
-- [ ] Happy path tested?
-- [ ] Error states tested?
-- [ ] Edge cases (empty arrays, nulls) tested?
-
-## Example
-\`\`\`ts
-describe("calculator", () => {
-    it("should add two numbers correctly", () => {
-        expect(add(1, 2)).toBe(3)
-    })
-})
-\`\`\``
-        }
-    }
-]
diff --git a/lib/skills.ts b/lib/skills.ts
new file mode 100644
index 0000000..9caad40
--- /dev/null
+++ b/lib/skills.ts
@@ -0,0 +1,49 @@
+import fs from 'fs'
+import path from 'path'
+import matter from 'gray-matter'
+
+const skillsDirectory = path.join(process.cwd(), 'skills')
+
+export interface Skill {
+    id: string
+    name: string
+    description: string
+    dependencies?: string
+    content: string
+}
+
+export function getAllSkills(): Skill[] {
+    // Create directory if it doesn't exist
+    if (!fs.existsSync(skillsDirectory)) {
+        return []
+    }
+
+    const fileNames = fs.readdirSync(skillsDirectory)
+    const allSkillsData = fileNames
+        .filter((fileName) => fileName.endsWith('.md'))
+        .map((fileName) => {
+            const id = fileName.replace(/\.md$/, '')
+            const fullPath = path.join(skillsDirectory, fileName)
+            const fileContents = fs.readFileSync(fullPath, 'utf8')
+            const { data, content } = matter(fileContents)
+
+            return {
+                id,
+                name: data.name || id,
+                description: data.description || '',
+                dependencies: data.dependencies || '',
+                content: content.trim(),
+            }
+        })
+
+    // Sort skills by name
+    return allSkillsData.sort((a, b) => {
+        if (a.name < b.name) {
+            return -1
+        }
+        if (a.name > b.name) {
+            return 1
+        }
+        return 0
+    })
+}
diff --git a/package-lock.json b/package-lock.json
index 96ba171..475b89a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,12 @@
       "name": "devcontext",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-collapsible": "^1.1.12",
         "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^11.18.2",
+        "gray-matter": "^4.0.3",
         "lucide-react": "^0.544.0",
         "mixpanel-browser": "^2.70.0",
         "next": "15.5.7",
@@ -2016,6 +2018,42 @@
         "node": ">=18"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -2031,6 +2069,86 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -2049,6 +2167,58 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.35",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.35.tgz",
@@ -2888,7 +3058,7 @@
       "version": "19.1.9",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
       "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "peerDependencies": {
@@ -5223,6 +5393,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -5289,6 +5472,18 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5670,6 +5865,43 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -6032,6 +6264,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6471,6 +6712,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -7919,6 +8169,19 @@
       "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
       "license": "MIT"
     },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -8168,6 +8431,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -8326,6 +8595,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
diff --git a/package.json b/package.json
index 0bdd771..ca48c48 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,12 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.18.2",
+    "gray-matter": "^4.0.3",
     "lucide-react": "^0.544.0",
     "mixpanel-browser": "^2.70.0",
     "next": "15.5.7",
@@ -29,10 +31,10 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
-    "@playwright/test": "^1.50.1",
     "@types/mixpanel-browser": "^2.60.0",
     "@types/node": "^20",
     "@types/react": "^19",
diff --git a/skills/accessibility-audit.md b/skills/accessibility-audit.md
new file mode 100644
index 0000000..f6706d8
--- /dev/null
+++ b/skills/accessibility-audit.md
@@ -0,0 +1,25 @@
+---
+name: Accessibility (a11y) Check
+description: Review code for WCAG accessibility compliance.
+dependencies: ""
+---
+
+## Guidelines
+- Ensure all images have \`alt\` text.
+- Verify color contrast (minimum 4.5:1 for text).
+- Check heading hierarchy (h1 -> h2 -> h3).
+- Verify interactive elements have aria-labels if no text.
+- Ensure keyboard navigability.
+
+## Checklist
+- [ ] Images have descriptive alt text?
+- [ ] Forms have labels connected to inputs?
+- [ ] Buttons are reachable by Tab key?
+- [ ] Focus states are visible?
+- [ ] Semantic HTML is used (nav, main, footer)?
+
+## Example Issues
+User: check this snippet
+Assistant:
+1. \`<div onclick="...">\` should be a \`<button>\` for keyboard access.
+2. \`<img>\` is missing \`alt\` tag.
diff --git a/skills/angular-component.md b/skills/angular-component.md
new file mode 100644
index 0000000..5de67b0
--- /dev/null
+++ b/skills/angular-component.md
@@ -0,0 +1,46 @@
+---
+name: Angular Component Generator
+description: Scaffold a standalone Angular component with best practices (SCSS, typed inputs).
+dependencies: "@angular/core, @angular/common"
+---
+
+## Guidelines
+- Follow the Angular Style Guide.
+- Use standalone components.
+- Use typed inputs and outputs.
+- Implement OnPush change detection.
+
+## Template
+\`\`\`typescript
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-custom-card',
+  standalone: true,
+  imports: [CommonModule],
+  template: \`
+    <div class="card" [class.highlighted]="isHighlighted">
+      <header>
+        <h2>{{ title }}</h2>
+      </header>
+      <div class="content">
+        <ng-content></ng-content>
+      </div>
+      <footer>
+        <button (click)="onAction.emit()">Action</button>
+      </footer>
+    </div>
+  \`,
+  styles: [\`
+    .card { border: 1px solid #ccc; padding: 1rem; border-radius: 4px; }
+    .highlighted { border-color: blue; }
+  \`],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CustomCardComponent {
+  @Input({ required: true }) title!: string;
+  @Input() isHighlighted = false;
+  @Output() onAction = new EventEmitter<void>();
+}
+\`\`\`
diff --git a/skills/api-endpoint-nextjs.md b/skills/api-endpoint-nextjs.md
new file mode 100644
index 0000000..3fc5130
--- /dev/null
+++ b/skills/api-endpoint-nextjs.md
@@ -0,0 +1,47 @@
+---
+name: Next.js API Route (App Router)
+description: Create a type-safe Next.js Route Handler.
+dependencies: "next, zod"
+---
+
+## Guidelines
+- Use \`NextResponse\`.
+- Use \`zod\` for request validation.
+- Handle errors gracefully.
+- Check authentication if needed.
+
+## Template
+\`\`\`typescript
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const schema = z.object({
+  email: z.string().email(),
+  role: z.enum(["admin", "user"]),
+});
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const result = schema.safeParse(body);
+
+    if (!result.success) {
+      return NextResponse.json(
+        { error: "Invalid request", details: result.error.flatten() },
+        { status: 400 }
+      );
+    }
+
+    // Perform database operation here
+    // const user = await db.user.create({ ... })
+
+    return NextResponse.json({ success: true, data: result.data });
+  } catch (error) {
+    console.error("API Error:", error);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 }
+    );
+  }
+}
+\`\`\`
diff --git a/skills/bug-analysis.md b/skills/bug-analysis.md
new file mode 100644
index 0000000..2e37f51
--- /dev/null
+++ b/skills/bug-analysis.md
@@ -0,0 +1,19 @@
+---
+name: Bug Analysis & Fix
+description: Analyze error logs/descriptions and propose fixes.
+dependencies: ""
+---
+
+## Process
+1. Reproduce: Understand the steps to trigger the bug.
+2. Isolate: Identify the component or function responsible.
+3. Root Cause: Why is it happening? (Race condition, null pointer, logic error).
+4. Fix: Propose a solution that handles the root cause, not just a patch.
+
+## Request Format
+User: Here is the stack trace and the code snippet.
+Assistant:
+**Analysis**: The error `Cannot read properties of undefined (reading 'map')` occurs on line 12.
+**Root Cause**: The API response `users` is sometimes null if no users are found.
+**Fix**: Add a default value or optional chaining.
+\`users?.map(...)\` or \`const safeUsers = users || [];\`
diff --git a/skills/code-style.md b/skills/code-style.md
new file mode 100644
index 0000000..ad562b6
--- /dev/null
+++ b/skills/code-style.md
@@ -0,0 +1,19 @@
+---
+name: Code Style Enforcer
+description: Standardize code style and formatting rules for consistency.
+dependencies: ""
+---
+
+## Principles
+- Clarity over cleverness
+- Consistent naming conventions
+- Early returns for guard clauses
+
+## Naming Conventions
+- specific_variable_names (snake_case for Python)
+- camelCaseVariableNames (camelCase for JS/TS)
+- PascalCaseComponentNames (PascalCase for React components)
+
+## Examples
+User: How should I name this variable?
+Assistant: Since this is a boolean flag in TypeScript, use \`is\` or \`has\` prefix, e.g., \`isValidUser\` or \`hasPermission\`.
diff --git a/skills/commit-message.md b/skills/commit-message.md
new file mode 100644
index 0000000..0af2232
--- /dev/null
+++ b/skills/commit-message.md
@@ -0,0 +1,22 @@
+---
+name: Commit Message Formatter
+description: Format commit messages using Conventional Commits.
+dependencies: ""
+---
+
+## Format
+\`<type>(<scope>): <subject>\`
+
+## Types
+- \`feat\`: New feature.
+- \`fix\`: Bug fix.
+- \`docs\`: Documentation only.
+- \`style\`: Formatting, missing semi colons, etc.
+- \`refactor\`: Code change that neither fixes a bug nor adds a feature.
+- \`test\`: Adding missing tests.
+- \`chore\`: Build process or aux updates.
+
+## Examples
+- \`feat(auth): add google oauth login\`
+- \`fix(api): handle null user response\`
+- \`docs(readme): update installation steps\`
diff --git a/skills/design-system-tokens.md b/skills/design-system-tokens.md
new file mode 100644
index 0000000..6d6fdc6
--- /dev/null
+++ b/skills/design-system-tokens.md
@@ -0,0 +1,26 @@
+---
+name: Design System Tokens
+description: Manage and explain design tokens (colors, spacing, typography).
+dependencies: ""
+---
+
+## Concept
+Use semantic names (what it is used for) over primitive names (what it looks like).
+
+## Format (CSS Variables)
+\`\`\`css
+:root {
+  /* Primitive */
+  --blue-500: #3b82f6;
+  
+  /* Semantic */
+  --color-primary: var(--blue-500);
+  --color-text-body: #1f2937;
+  --spacing-unit: 4px;
+  --spacing-md: calc(var(--spacing-unit) * 4); /* 16px */
+}
+\`\`\`
+
+## Usage
+- Don't use hex codes in components.
+- Use \`var(--color-primary)\`.
diff --git a/skills/dockerfile-generator.md b/skills/dockerfile-generator.md
new file mode 100644
index 0000000..7d750e3
--- /dev/null
+++ b/skills/dockerfile-generator.md
@@ -0,0 +1,35 @@
+---
+name: Dockerfile Generator
+description: Create optimized multi-stage Dockerfiles for various apps.
+dependencies: ""
+---
+
+## Best Practices
+- Use multi-stage builds to reduce image size.
+- Use explicit tag versions for base images (`node:18-alpine`).
+- Run as non-root user.
+- Layer ordering (copy package.json -> install -> copy source).
+
+## Template (Node.js)
+\`\`\`dockerfile
+# Stage 1: Build
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Stage 2: Production
+FROM node:18-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+USER node
+EXPOSE 3000
+CMD ["npm", "start"]
+\`\`\`
diff --git a/skills/documentation.md b/skills/documentation.md
new file mode 100644
index 0000000..530a578
--- /dev/null
+++ b/skills/documentation.md
@@ -0,0 +1,28 @@
+---
+name: Docstring Generator
+description: Generate comprehensive documentation for functions and classes.
+dependencies: ""
+---
+
+## Goal
+Produce high-quality documentation comments for all exported functions and classes.
+
+## Format
+For TypeScript/JavaScript, use JSDoc:
+/**
+ * Short description.
+ *
+ * @param {Type} name - Description
+ * @returns {Type} Description
+ */
+
+## Examples
+User: Document this function
+Assistant:
+/**
+ * Calculates the total sum of an array of numbers.
+ *
+ * @param {number[]} numbers - The list of numbers to sum.
+ * @returns {number} The total sum.
+ */
+function sum(numbers: number[]): number { ... }
diff --git a/skills/fastapi-route.md b/skills/fastapi-route.md
new file mode 100644
index 0000000..0ed74a3
--- /dev/null
+++ b/skills/fastapi-route.md
@@ -0,0 +1,38 @@
+---
+name: FastAPI Route Generator
+description: Create a Python FastAPI API endpoint with Pydantic models.
+dependencies: "fastapi, pydantic"
+---
+
+## Guidelines
+- Use Pydantic models for request/response schemas.
+- Use dependency injection for DB sessions or services.
+- Include proper status codes and error handling.
+
+## Template
+\`\`\`python
+from fastapi import APIRouter, HTTPException, status
+from pydantic import BaseModel, EmailStr
+
+router = APIRouter()
+
+class UserCreate(BaseModel):
+    email: EmailStr
+    full_name: str | None = None
+    age: int
+
+class UserResponse(UserCreate):
+    id: int
+
+@router.post("/users/", response_model=UserResponse, status_code=status.HTTP_201_CREATED)
+async def create_user(user: UserCreate):
+    # Simulate DB lookup
+    if user.email == "exists@example.com":
+        raise HTTPException(
+            status_code=400, 
+            detail="Email already registered"
+        )
+    
+    # Simulate saving
+    return {**user.dict(), "id": 123}
+\`\`\`
diff --git a/skills/github-action.md b/skills/github-action.md
new file mode 100644
index 0000000..d4fa0d2
--- /dev/null
+++ b/skills/github-action.md
@@ -0,0 +1,37 @@
+---
+name: GitHub Action Workflow
+description: Create GitHub Actions for CI/CD pipelines.
+dependencies: ""
+---
+
+## Components
+- Triggers (`on: push`, `pull_request`).
+- Jobs (build, test, deploy).
+- Steps (checkout, setup-node, run scripts).
+
+## Template (CI)
+\`\`\`yaml
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm test
+\`\`\`
diff --git a/skills/kubernetes-manifest.md b/skills/kubernetes-manifest.md
new file mode 100644
index 0000000..91758f8
--- /dev/null
+++ b/skills/kubernetes-manifest.md
@@ -0,0 +1,52 @@
+---
+name: Kubernetes Manifest
+description: Generate K8s Deployment and Service YAMLs.
+dependencies: ""
+---
+
+## Basics
+- Deployment: Defines Pods, Replicas, Container specs.
+- Service: Exposes Pods (ClusterIP, NodePort, LoadBalancer).
+- ConfigMap/Secret: Environment variables.
+
+## Template
+\`\`\`yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: my-app
+  labels:
+    app: my-app
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: my-app
+  template:
+    metadata:
+      labels:
+        app: my-app
+    spec:
+      containers:
+      - name: my-app
+        image: myregistry/my-app:v1
+        ports:
+        - containerPort: 8080
+        resources:
+          limits:
+            memory: "512Mi"
+            cpu: "500m"
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: my-app-service
+spec:
+  selector:
+    app: my-app
+  ports:
+    - protocol: TCP
+      port: 80
+      targetPort: 8080
+  type: ClusterIP
+\`\`\`
diff --git a/skills/nginx-config.md b/skills/nginx-config.md
new file mode 100644
index 0000000..56554c6
--- /dev/null
+++ b/skills/nginx-config.md
@@ -0,0 +1,28 @@
+---
+name: Nginx Configuration
+description: Create Nginx server blocks for reverse proxy or static serving.
+dependencies: ""
+---
+
+## Common directives
+- \`listen\`: Port.
+- \`server_name\`: Domain.
+- \`location\`: Routing rules.
+- \`proxy_pass\`: Reverse proxy.
+
+## Template (Reverse Proxy)
+\`\`\`nginx
+server {
+    listen 80;
+    server_name example.com;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+\`\`\`
diff --git a/skills/performance-optimization.md b/skills/performance-optimization.md
new file mode 100644
index 0000000..fd71b00
--- /dev/null
+++ b/skills/performance-optimization.md
@@ -0,0 +1,32 @@
+---
+name: Performance Optimization
+description: Identify bottlenecks and optimize React/Node code.
+dependencies: ""
+---
+
+## Areas to Inspect
+- React: Unnecessary re-renders, large bundles, missing memoization.
+- Node/DB: N+1 queries, missing indexes, heavy synchronous computation.
+- Network: Large payloads, waterfall requests.
+
+## Checklist
+- [ ] Is data fetching parallelized where possible?
+- [ ] Are heavy computations memoized (useMemo)?
+- [ ] Are images optimized/lazy loaded?
+- [ ] Is code splitting implemented?
+
+## Refactoring Pattern
+Bad:
+\`\`\`js
+props.items.forEach(item => {
+  // Database call inside loop (N+1)
+  await db.getDetails(item.id);
+})
+\`\`\`
+
+Good:
+\`\`\`js
+// Batch fetch
+const itemIds = props.items.map(i => i.id);
+const details = await db.getDetailsForIds(itemIds);
+\`\`\`
diff --git a/skills/playwright-e2e.md b/skills/playwright-e2e.md
new file mode 100644
index 0000000..01ea9e1
--- /dev/null
+++ b/skills/playwright-e2e.md
@@ -0,0 +1,36 @@
+---
+name: Playwright E2E Tests
+description: Write end-to-end tests using Playwright.
+dependencies: "@playwright/test"
+---
+
+## Guidelines
+- Use page objects where complex interactions occur.
+- Test user-visible behavior (clicks, navigation).
+- Use distinct locators (test-id preferred).
+
+## Template
+\`\`\`typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Login Flow', () => {
+  test('should allow user to login', async ({ page }) => {
+    await page.goto('/login');
+    
+    await page.fill('input[name="email"]', 'user@example.com');
+    await page.fill('input[name="password"]', 'password');
+    await page.click('button[type="submit"]');
+    
+    await expect(page).toHaveURL('/dashboard');
+    await expect(page.getByText('Welcome back')).toBeVisible();
+  });
+
+  test('should show error on invalid credentials', async ({ page }) => {
+    await page.goto('/login');
+    await page.fill('input[name="email"]', 'wrong@example.com');
+    await page.click('button[type="submit"]');
+    
+    await expect(page.getByRole('alert')).toContainText('Invalid credentials');
+  });
+});
+\`\`\`
diff --git a/skills/react-component.md b/skills/react-component.md
new file mode 100644
index 0000000..75f2ddc
--- /dev/null
+++ b/skills/react-component.md
@@ -0,0 +1,29 @@
+---
+name: React Component
+description: Scaffold a new React component with best practices.
+dependencies: "react, lucide-react, clsx, tailwind-merge"
+---
+
+## Structure
+- Use functional components with named exports.
+- Use explicit return types.
+- Destructure props.
+- Use 'cn' utility for class merging.
+
+## Template
+\`\`\`tsx
+import { cn } from "@/lib/utils"
+
+interface MyComponentProps {
+    className?: string
+    children?: React.ReactNode
+}
+
+export function MyComponent({ className, children }: MyComponentProps) {
+    return (
+        <div className={cn("base-styles", className)}>
+            {children}
+        </div>
+    )
+}
+\`\`\`
diff --git a/skills/readme-generator.md b/skills/readme-generator.md
new file mode 100644
index 0000000..091895a
--- /dev/null
+++ b/skills/readme-generator.md
@@ -0,0 +1,44 @@
+---
+name: README Generator
+description: Create a comprehensive README.md for a project.
+dependencies: ""
+---
+
+## Sections to Include
+- Project Title & Badges.
+- Description (What problem does it solve?).
+- Tech Stack.
+- Installation & Running.
+- Usage / Features.
+- Contributing.
+- License.
+
+## Template
+\`\`\`markdown
+# Project Name
+
+![License](https://img.shields.io/badge/license-MIT-blue)
+
+Brief description of the project.
+
+## Features
+- Feature A
+- Feature B
+
+## Getting Started
+
+### Prerequisites
+- Node.js >= 18
+
+### Installation
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+## Contributing
+Pull requests are welcome. For major changes, please open an issue first.
+
+## License
+[MIT](LICENSE)
+\`\`\`
diff --git a/skills/release-notes.md b/skills/release-notes.md
new file mode 100644
index 0000000..6b007da
--- /dev/null
+++ b/skills/release-notes.md
@@ -0,0 +1,25 @@
+---
+name: Release Notes Generator
+description: Generate release notes from a list of changes.
+dependencies: ""
+---
+
+## Structure
+- Version Number & Date.
+- **Breaking Changes** (Highlight these!).
+- **Features**: New capabilities.
+- **Bug Fixes**: Resolved issues.
+- **Internal**: Refactors or dependency updates.
+
+## Example
+### v2.1.0 (2025-01-27)
+
+**Features**
+- Added dark mode support to all pages.
+- New "Skills Marketplace" launched.
+
+**Bug Fixes**
+- Fixed crash on Safari when resizing window.
+
+**Breaking Changes**
+- Deprecated \`getUserV1\`, please use \`getUserV2\`.
diff --git a/skills/security-audit.md b/skills/security-audit.md
new file mode 100644
index 0000000..99c829d
--- /dev/null
+++ b/skills/security-audit.md
@@ -0,0 +1,26 @@
+---
+name: Security Audit Helper
+description: Analyze code for common security vulnerabilities (OWASP Top 10).
+dependencies: ""
+---
+
+## Scope
+- Injection (SQL, NoSQL, Command)
+- Broken Authentication
+- Sensitive Data Exposure
+- XSS (Cross-Site Scripting)
+
+## Instructions
+1. Identify input sources (params, changes, body).
+2. Check if inputs are sanitized/validated.
+3. Look for hardcoded secrets.
+4. Verify authorization checks on sensitive actions.
+
+## Examples
+User: Audit this function
+Assistant:
+Potential Issue:
+\`const query = "SELECT * FROM users WHERE name = '" + userName + "'";\`
+Risk: SQL Injection.
+Fix: Use parameterized queries:
+\`const query = "SELECT * FROM users WHERE name = ?";\`
diff --git a/skills/svelte-component.md b/skills/svelte-component.md
new file mode 100644
index 0000000..c587d04
--- /dev/null
+++ b/skills/svelte-component.md
@@ -0,0 +1,37 @@
+---
+name: Svelte Component Generator
+description: Scaffold a Svelte 5 component (Runes mode).
+dependencies: "svelte"
+---
+
+## Guidelines
+- Use Svelte 5 syntax (Runes) if applicable, or standard Svelte 3/4.
+- Use \`$props()\` and \`$state()\` for Svelte 5.
+- Scoped styles by default.
+
+## Template (Svelte 5)
+\`\`\`svelte
+<script lang="ts">
+	let { title, count = 0, onupdate }: { title: string, count?: number, onupdate?: (n: number) => void } = $props();
+
+	let doubled = $derived(count * 2);
+
+	function handleClick() {
+		if (onupdate) onupdate(count + 1);
+	}
+</script>
+
+<div class="card">
+	<h2>{title}</h2>
+	<p>Value: {count} (2x: {doubled})</p>
+	<button onclick={handleClick}>Update</button>
+</div>
+
+<style>
+	.card {
+		padding: 1rem;
+		border-radius: 8px;
+		background: #f5f5f5;
+	}
+</style>
+\`\`\`
diff --git a/skills/technical-specs.md b/skills/technical-specs.md
new file mode 100644
index 0000000..3b52744
--- /dev/null
+++ b/skills/technical-specs.md
@@ -0,0 +1,19 @@
+---
+name: Technical Spec writer
+description: Draft technical specifications for new features.
+dependencies: ""
+---
+
+## Sections
+1. **Background**: Context and problem statement.
+2. **Goals**: What are we trying to achieve? (Non-goals too).
+3. **Proposed Solution**: High-level approach.
+4. **Data Model**: Schema changes.
+5. **API Changes**: Endpoints modified/added.
+6. **UI/UX**: Component hierarchy or mockups described.
+7. **Risks/Alternatives**: What could go wrong?
+
+## Example
+**Goal**: Add user avatars.
+**Data Model**: Add \`avatar_url\` string to \`users\` table.
+**API**: Update \`POST /user/profile\` to accept file upload or URL.
diff --git a/skills/tsconfig-generator.md b/skills/tsconfig-generator.md
new file mode 100644
index 0000000..096b5fc
--- /dev/null
+++ b/skills/tsconfig-generator.md
@@ -0,0 +1,42 @@
+---
+name: TSConfig Generator
+description: Create or update tsconfig.json for different environments.
+dependencies: "typescript"
+---
+
+## Options
+- \`target\`: JS version output.
+- \`module\`: Module system (ESNext, CommonJS).
+- \`strict\`: Enable strict type checking.
+- \`lib\`: Library files (DOM, ES2020).
+
+## Template (Strict Next.js)
+\`\`\`json
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+\`\`\`
diff --git a/skills/unit-testing.md b/skills/unit-testing.md
new file mode 100644
index 0000000..504e082
--- /dev/null
+++ b/skills/unit-testing.md
@@ -0,0 +1,25 @@
+---
+name: Unit Testing
+description: Generate robust unit tests for your code.
+dependencies: "jest, vitest, @testing-library/react"
+---
+
+## Guidelines
+- Test behavior, not implementation details.
+- Use descriptive test names ("should do X when Y").
+- Arrange, Act, Assert pattern.
+- Mock external dependencies.
+
+## Checklist
+- [ ] Happy path tested?
+- [ ] Error states tested?
+- [ ] Edge cases (empty arrays, nulls) tested?
+
+## Example
+\`\`\`ts
+describe("calculator", () => {
+    it("should add two numbers correctly", () => {
+        expect(add(1, 2)).toBe(3)
+    })
+})
+\`\`\`
diff --git a/skills/vue-component.md b/skills/vue-component.md
new file mode 100644
index 0000000..8b7c4a6
--- /dev/null
+++ b/skills/vue-component.md
@@ -0,0 +1,51 @@
+---
+name: Vue 3 Component Generator
+description: Create a Vue 3 component using Composition API and TypeScript.
+dependencies: "vue"
+---
+
+## Guidelines
+- Use \`<script setup lang="ts">\`.
+- Define props and emits using type-only declarations.
+- Keep template simple and logic in script.
+
+## Template
+\`\`\`vue
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  title: string;
+  count?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: 0
+});
+
+const emit = defineEmits<{
+  (e: 'update', value: number): void;
+}>();
+
+const doubleCount = computed(() => props.count * 2);
+
+function increment() {
+  emit('update', props.count + 1);
+}
+</script>
+
+<template>
+  <div class="vue-component">
+    <h2>{{ title }}</h2>
+    <p>Count: {{ count }} (Double: {{ doubleCount }})</p>
+    <button @click="increment">Increment</button>
+  </div>
+</template>
+
+<style scoped>
+.vue-component {
+  padding: 1rem;
+  border: 1px solid #eee;
+}
+</style>
+\`\`\`