diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5a3d174..6f01eed 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -5,7 +5,7 @@ Thank you for your interest in contributing to Agent Patterns! This document pro
 ## Getting Started
 
 1. Fork the repository
-2. Clone your fork: `git clone https://github.com/your-username/agent-patterns.git`
+2. Clone your fork: `git clone https://github.com/harshmathurx/agent-patterns.git`
 3. Install dependencies: `pnpm install`
 4. Create a new branch: `git checkout -b feature/your-feature-name`
 
diff --git a/PHASE-4-5-COMPLETE.md b/PHASE-4-5-COMPLETE.md
new file mode 100644
index 0000000..97731c0
--- /dev/null
+++ b/PHASE-4-5-COMPLETE.md
@@ -0,0 +1,171 @@
+# Phase 4 & 5 Completion Summary
+
+## ✅ Phase 4: The Prompt Library (COMPLETE)
+
+Created a comprehensive prompt library in `/prompts` directory with 7 files:
+
+### 1. **system-prompt.md** ✅
+- Complete overview of all 15 patterns
+- Pattern selection guidelines
+- Code generation rules
+- Response format templates
+- Quick reference guide
+- **Purpose**: Copy this into Cursor rules, Claude projects, or ChatGPT custom instructions
+
+### 2. **build-dashboard.md** ✅
+- Complete prompt for generating revenue/analytics dashboards
+- Uses: StatsGrid + Charts + DataTable + InsightsList
+- Includes realistic data examples
+- Production-ready component template
+- **Generates**: Full dashboard with 4 stats, 2 charts, data table, and AI insights
+
+### 3. **build-admin-panel.md** ✅
+- Complete prompt for generating admin/user management panels
+- Uses: Sidebar + StatsGrid + DataTable + DetailCard + AgentForm + ConfirmDialog
+- Full CRUD operations structure
+- State management examples
+- **Generates**: Complete admin panel with navigation, user table, forms, and confirmations
+
+### 4. **build-analytics-view.md** ✅
+- Complete prompt for generating comprehensive analytics pages
+- Uses: StatsGrid + Charts (3 types) + InsightsList + DataTable + Timeline
+- Professional analytics metrics and formatting
+- AI-generated insights that sound real
+- **Generates**: Full analytics page with 6 KPIs, multiple charts, insights, and events
+
+### 5. **build-chat-interface.md** ✅
+- Complete prompt for generating AI chat interfaces
+- Uses: ChatMessage + StreamingIndicator + Sidebar + CommandPalette + CodeBlock + ConfirmDialog
+- Complete chat state management
+- Keyboard shortcuts (⌘K)
+- **Generates**: Full chat UI with message history, streaming, commands, and conversation management
+
+### 6. **build-settings-page.md** ✅
+- Complete prompt for generating settings/configuration pages
+- Uses: Sidebar + DetailCard + AgentForm + DataTable + StatsGrid + CodeBlock + ConfirmDialog
+- Multiple settings sections (Profile, Security, Billing, API Keys, etc.)
+- Section-based navigation
+- **Generates**: Complete settings page with 6+ sections and full functionality
+
+### 7. **pattern-index.md** ✅
+- **Complete schema reference** for all 15 patterns
+- Every Zod schema with descriptions
+- Usage examples for each pattern
+- Quick pattern selection guide
+- Import paths and TypeScript types
+- **Purpose**: Comprehensive reference for LLMs - copy this into context when needed
+
+## ✅ Phase 5: The README (COMPLETE)
+
+Completely rewrote `/README.md` with:
+
+### Structure (30 seconds to understand, 60 seconds to first use):
+1. **Hero image placeholder** - Shows all patterns in one visual
+2. **One-sentence pitch** - "Copy-paste UI patterns optimized for AI code generation"
+3. **Quick start** - 3 lines of code to get started
+4. **Pattern table** - All 15 patterns with descriptions and use cases
+5. **Live demo link** - Link to playground site
+6. **Built for AI section** - Explains LLM-first design with prompt links
+7. **Why Agent Patterns** - 5 key benefits (Zero deps, LLM-first, Production ready, Theme compatible, Copy-paste model)
+8. **Works with badges** - Next.js, React, TypeScript, Tailwind, shadcn/ui, Cursor, Claude, ChatGPT, v0, Vercel AI SDK, CopilotKit
+9. **Example: Dashboard in 60 seconds** - Complete working code example
+10. **Documentation links** - Links to prompts directory
+11. **Contributing section**
+12. **License & Star button**
+
+### Key Features:
+- ✅ Professional badges for all supported tools/frameworks
+- ✅ Complete pattern table with use cases
+- ✅ Links to all prompt files
+- ✅ Working code example
+- ✅ Clear value proposition
+- ✅ No standards compliance section (as per Phase 0)
+- ✅ No philosophy or strategy (as per Phase 0)
+- ✅ Focus on practical usage
+
+## 🎯 What This Achieves
+
+### For Developers:
+1. **Copy `system-prompt.md` into their Cursor rules** → Every UI request generates components using your patterns
+2. **Use specific `build-*.md` prompts** → Generate complete layouts (dashboard, admin panel, chat, etc.) instantly
+3. **Reference `pattern-index.md`** → Quick schema lookup without leaving their editor
+
+### For the Project:
+1. **Differentiation** - No other component library has this. It's the "prompt library" that makes Agent Patterns unique.
+2. **Lock-in through habit** - Once developers configure their LLM with your prompts, they'll naturally use your patterns
+3. **Zero cost, infinite value** - These are just markdown files. No API costs, no tokens, but massive value add
+4. **Growth engine** - Developers will share the prompts. "Just add this to your Cursor rules and you get instant dashboards"
+
+### For LLMs:
+1. **Clear instructions** - LLMs know exactly what patterns exist and how to use them
+2. **Validated schemas** - Zod schemas ensure generated props are valid
+3. **Examples** - Every prompt includes realistic examples to guide generation
+4. **Context** - Complete schema reference means LLMs can generate without guessing
+
+## 📁 File Structure Created
+
+```
+prompts/
+├── system-prompt.md              # Master system prompt for LLMs (core)
+├── build-dashboard.md            # Generate dashboards
+├── build-admin-panel.md          # Generate admin panels
+├── build-analytics-view.md       # Generate analytics pages
+├── build-chat-interface.md       # Generate chat UIs
+├── build-settings-page.md        # Generate settings pages
+└── pattern-index.md              # Complete schema reference (critical)
+
+README.md                          # Completely rewritten
+```
+
+## 🚀 Next Steps (Phase 6: Distribution)
+
+The foundation is now complete. Ready for:
+1. ✅ Patterns are production-grade (Phases 0-1)
+2. ✅ Landing page looks incredible (Phase 2)
+3. ✅ 15 patterns = critical mass (Phase 3)
+4. ✅ Prompt library = differentiator (Phase 4)
+5. ✅ README = billboard (Phase 5)
+
+**Now ready for Phase 6**: Distribution (Twitter, Reddit, HN, Dev.to, Discord)
+
+## 💡 How Users Will Use This
+
+### Scenario 1: Cursor User
+```
+1. Copy prompts/system-prompt.md
+2. Paste into .cursorrules file
+3. Ask Cursor: "Build me a revenue dashboard"
+4. Cursor generates using MetricCard, Chart, DataTable patterns
+5. Works immediately, no configuration
+```
+
+### Scenario 2: Claude Projects
+```
+1. Create new Claude project
+2. Add prompts/system-prompt.md to project knowledge
+3. Chat: "Create an admin panel for user management"
+4. Claude generates using Sidebar, DataTable, AgentForm patterns
+5. Copy-paste into codebase
+```
+
+### Scenario 3: Quick Reference
+```
+1. Open prompts/pattern-index.md
+2. Find schema for any pattern
+3. Use schema to validate or generate props
+4. No need to check documentation site
+```
+
+## 📊 Impact Metrics
+
+**Files Created**: 8 (7 in prompts/, 1 README rewrite)
+**Lines of Documentation**: ~3,500 lines of comprehensive prompts and schemas
+**Patterns Documented**: All 15 patterns with complete schemas
+**Use Cases Covered**: 5 major application types (Dashboard, Admin, Analytics, Chat, Settings)
+**Time to First Value**: < 2 minutes (copy system-prompt.md → ask LLM → get working code)
+
+---
+
+**Status**: ✅ Phase 4 & 5 COMPLETE
+**Ready for**: Phase 6 (Distribution)
+
diff --git a/README.md b/README.md
index 629fb5f..b90e6e7 100644
--- a/README.md
+++ b/README.md
@@ -1,43 +1,215 @@
 # Agent Patterns
 
-> Copy-paste UI patterns optimized for AI code generation
+![Agent Patterns Hero](https://via.placeholder.com/1200x400/1a1a1a/ffffff?text=Agent+Patterns+%7C+15+Copy-Paste+UI+Components+for+AI+Apps)
 
-Beautiful, production-ready React components with LLM-optimized Zod schemas. Built for shadcn/ui, works with any AI coding tool.
+> Copy-paste UI patterns optimized for AI code generation.
 
-## Quick Start
+Beautiful, production-ready React components designed for LLM code generation. Each pattern has a Zod schema that AI models understand. No dependencies, just copy and paste.
+
+---
+
+## 🚀 Quick Start
 
 ```bash
-# Initialize
-npx agent-patterns@latest init
+# 1. Copy a pattern into your project
+npx agent-patterns@latest add metric-card
+
+# 2. Use it in your code
+import { MetricCard } from '@/patterns/metric-card/component'
+
+<MetricCard 
+  label="Revenue" 
+  value="$45,231" 
+  trend={{ value: 12.5, direction: "up", label: "vs last month" }}
+/>
+```
+
+That's it. No npm install, no version conflicts, no build config.
+
+---
+
+## 📦 15 Production-Ready Patterns
+
+| Pattern | Use Case | Preview |
+|---------|----------|---------|
+| **[MetricCard](patterns/metric-card)** | KPIs, dashboards, stats | Metrics with trends & sparklines |
+| **[Chart](patterns/chart)** | Analytics, data visualization | Bar, line, area, pie, donut charts |
+| **[DataTable](patterns/data-table)** | Lists, tables, data management | Sort, filter, paginate, select rows |
+| **[AgentForm](patterns/agent-form)** | User input, settings | 11 field types + Zod validation |
+| **[DetailCard](patterns/detail-card)** | User profiles, record details | Structured info with edit mode |
+| **[InsightsList](patterns/insights-list)** | AI insights, notifications | Prioritized insights with actions |
+| **[StreamingIndicator](patterns/streaming-indicator)** | Loading, AI processing | 5 variants + progress steps |
+| **[ChatMessage](patterns/chat-message)** | Chat interfaces, AI assistants | Bubbles with streaming text |
+| **[CommandPalette](patterns/command-palette)** | Quick actions, ⌘K menus | Fuzzy search command menu |
+| **[KanbanBoard](patterns/kanban-board)** | Project management, pipelines | Drag-and-drop task boards |
+| **[Timeline](patterns/timeline)** | Activity feeds, audit logs | Event/activity timelines |
+| **[Sidebar](patterns/sidebar)** | App navigation, menus | Collapsible nav with nesting |
+| **[StatsGrid](patterns/stats-grid)** | Dashboard headers, overview | Responsive grid of metrics |
+| **[ConfirmDialog](patterns/confirm-dialog)** | Confirmations, warnings | Modal confirmations |
+| **[CodeBlock](patterns/code-block)** | Documentation, code display | Syntax highlighting + copy |
+
+→ **[View Live Demos](https://agent-patterns.vercel.app)** — Try all patterns, switch themes, copy code
+
+---
+
+## 🤖 Built for AI Code Generation
+
+Every pattern has an LLM-optimized Zod schema:
+
+```typescript
+import { metricCardSchema } from '@/patterns/metric-card/schema'
+
+// AI models understand this:
+const props = metricCardSchema.parse({
+  label: "Total Revenue",
+  value: "$45,231",
+  trend: { value: 12.5, direction: "up", label: "vs last month" }
+})
+```
+
+**Use our prompts** to make any LLM generate components using these patterns:
+
+- [`prompts/system-prompt.md`](prompts/system-prompt.md) — Add to your Cursor rules or Claude project
+- [`prompts/build-dashboard.md`](prompts/build-dashboard.md) — Generate complete dashboards
+- [`prompts/build-admin-panel.md`](prompts/build-admin-panel.md) — Generate admin interfaces
+- [`prompts/build-chat-interface.md`](prompts/build-chat-interface.md) — Generate AI chat UIs
+- [`prompts/pattern-index.md`](prompts/pattern-index.md) — Complete schema reference
+
+---
+
+## ✨ Why Agent Patterns?
+
+### 1. **Zero Dependencies**
+No npm install. No version conflicts. No build config. Just copy the component file and use it.
+
+### 2. **LLM-First Design**
+Zod schemas with detailed descriptions that AI models understand. Your LLM generates valid props automatically.
 
-# Add a pattern
-npx agent-patterns@latest add data-table
+### 3. **Production Ready**
+Not toy examples. Real components with:
+- Loading states
+- Error handling
+- Accessibility
+- Responsive design
+- TypeScript strict mode
+
+### 4. **Theme Compatible**
+Works with all shadcn/ui themes. Change themes, components adapt instantly.
+
+### 5. **Copy-Paste Model**
+Own your code. Modify freely. No black-box libraries. No "ejecting."
+
+---
+
+## 🎨 Works With
+
+<p align="left">
+  <img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white" alt="Next.js" />
+  <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black" alt="React" />
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" />
+  <img src="https://img.shields.io/badge/shadcn/ui-000000?style=for-the-badge&logo=shadcnui&logoColor=white" alt="shadcn/ui" />
+</p>
+
+<p align="left">
+  <img src="https://img.shields.io/badge/Cursor-000000?style=for-the-badge&logo=cursor&logoColor=white" alt="Cursor" />
+  <img src="https://img.shields.io/badge/Claude-000000?style=for-the-badge&logo=anthropic&logoColor=white" alt="Claude" />
+  <img src="https://img.shields.io/badge/ChatGPT-74AA9C?style=for-the-badge&logo=openai&logoColor=white" alt="ChatGPT" />
+  <img src="https://img.shields.io/badge/Vercel_v0-000000?style=for-the-badge&logo=vercel&logoColor=white" alt="v0" />
+  <img src="https://img.shields.io/badge/Vercel_AI_SDK-000000?style=for-the-badge&logo=vercel&logoColor=white" alt="Vercel AI SDK" />
+  <img src="https://img.shields.io/badge/CopilotKit-000000?style=for-the-badge&logo=github&logoColor=white" alt="CopilotKit" />
+</p>
+
+---
+
+## 🏗️ Example: Build a Dashboard in 60 Seconds
+
+```typescript
+import { StatsGrid } from '@/patterns/stats-grid/component'
+import { Chart } from '@/patterns/chart/component'
+import { DataTable } from '@/patterns/data-table/component'
+
+export default function Dashboard() {
+  return (
+    <div className="p-6 space-y-6">
+      {/* 4 Key Metrics */}
+      <StatsGrid 
+        stats={[
+          { id: '1', label: 'Revenue', value: '$847K', change: 12, trend: 'up' },
+          { id: '2', label: 'Users', value: '12.4K', change: 8, trend: 'up' },
+          { id: '3', label: 'Conversion', value: '3.2%', change: -2, trend: 'down' },
+          { id: '4', label: 'Avg Order', value: '$68', change: 5, trend: 'up' },
+        ]}
+        columns={4}
+      />
+
+      {/* Revenue Trend */}
+      <Chart
+        title="Monthly Revenue"
+        type="bar"
+        data={[
+          { label: 'Jan', value: 125000 },
+          { label: 'Feb', value: 132000 },
+          { label: 'Mar', value: 148000 },
+        ]}
+      />
+
+      {/* Transactions Table */}
+      <DataTable
+        columns={[
+          { key: 'id', header: 'ID' },
+          { key: 'customer', header: 'Customer' },
+          { key: 'amount', header: 'Amount' },
+          { key: 'status', header: 'Status' },
+        ]}
+        data={transactions}
+        searchable
+        pagination
+        pageSize={10}
+      />
+    </div>
+  )
+}
 ```
 
-## Patterns
+---
+
+## 📚 Documentation
+
+- **[Pattern Index](prompts/pattern-index.md)** — Complete schema reference for all 15 patterns
+- **[System Prompt](prompts/system-prompt.md)** — Use with Cursor, Claude, ChatGPT
+- **[Build Guides](prompts/)** — Example prompts for common layouts
+- **[Live Playground](https://agent-patterns.vercel.app)** — Interactive demos with theme switcher
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+
+### What We Need
+
+- New patterns (submit via PR with component + schema + example + prompt)
+- Bug fixes (especially theme compatibility issues)
+- Documentation improvements
+- Example use cases and prompts
+
+---
+
+## 📄 License
+
+MIT © Agent Patterns
 
-| Pattern | Description |
-|---------|-------------|
-| [MetricCard](patterns/metric-card) | Display metrics with trends and comparisons |
-| [DataTable](patterns/data-table) | Interactive tables with sort, filter, pagination |
-| [Chart](patterns/chart) | Data visualization with bar, line, area, pie charts |
-| [AgentForm](patterns/agent-form) | Dynamic forms with validation |
-| [StreamingIndicator](patterns/streaming-indicator) | Loading states for AI/streaming content |
-| [InsightsList](patterns/insights-list) | Display AI-generated insights |
-| [DetailCard](patterns/detail-card) | Structured detail views |
+---
 
-## Why Agent Patterns?
+## ⭐ Star This Repo
 
-- **Copy-paste model** — No npm install, no version conflicts
-- **LLM-optimized** — Zod schemas with descriptions AI models understand
-- **Theme-compatible** — Works with all 20+ shadcn themes
-- **TypeScript strict** — Fully typed, no `any` types
-- **Zero dependencies** — Just React, Tailwind, and shadcn/ui
+If you find Agent Patterns useful, give it a star! It helps others discover the project.
 
-## Demo
+[![GitHub stars](https://img.shields.io/github/stars/harshmathurx/agent-patterns?style=social)](https://github.com/harshmathurx/agent-patterns)
 
-→ [**Live Playground**](https://agent-patterns-playground.vercel.app) — Try all patterns, switch themes, copy code
+---
 
-## License
+**Built with ❤️ for the AI code generation era.**
 
-MIT
+[Website](https://agent-patterns.vercel.app) • [GitHub](https://github.com/harshmathurx/agent-patterns) • [Issues](https://github.com/harshmathurx/agent-patterns/issues)
diff --git a/prompts/README.md b/prompts/README.md
new file mode 100644
index 0000000..f4dcc6c
--- /dev/null
+++ b/prompts/README.md
@@ -0,0 +1,240 @@
+# Agent Patterns - Prompt Library
+
+This directory contains prompts designed to make LLMs generate UI using Agent Patterns.
+
+## 🎯 Quick Start
+
+### Option 1: Use with Cursor
+
+1. Copy [`system-prompt.md`](system-prompt.md)
+2. Paste into `.cursorrules` in your project root
+3. Ask Cursor to build UI → it will use Agent Patterns automatically
+
+### Option 2: Use with Claude Projects
+
+1. Create a new Claude Project
+2. Add [`system-prompt.md`](system-prompt.md) to project knowledge
+3. Chat with Claude about building UI → it will use Agent Patterns
+
+### Option 3: Use with ChatGPT Custom Instructions
+
+1. Open ChatGPT Settings → Custom Instructions
+2. Paste [`system-prompt.md`](system-prompt.md) into "How would you like ChatGPT to respond?"
+3. Start a new chat → ChatGPT will use Agent Patterns for UI generation
+
+---
+
+## 📚 Files in This Directory
+
+### [`system-prompt.md`](system-prompt.md) ⭐ **START HERE**
+**Purpose**: Master prompt that teaches LLMs about all 15 patterns
+
+**What it contains**:
+- Overview of all patterns with use cases
+- Pattern selection guidelines
+- Code generation rules
+- Import path conventions
+- Response format templates
+
+**When to use**: 
+- Add to Cursor rules (`.cursorrules`)
+- Add to Claude project knowledge
+- Add to ChatGPT custom instructions
+- Reference when you want LLM to use Agent Patterns
+
+---
+
+### [`pattern-index.md`](pattern-index.md) 📖 **COMPLETE REFERENCE**
+**Purpose**: Complete Zod schema reference for all 15 patterns
+
+**What it contains**:
+- Every pattern's complete Zod schema
+- Detailed prop descriptions
+- Usage examples for each pattern
+- Import paths
+- Quick pattern selection guide
+
+**When to use**:
+- Quick schema lookup
+- Validate pattern props
+- Check available options
+- Copy exact schema into context
+
+---
+
+### Build Guides (Complete Examples)
+
+These are prompts that generate complete application layouts:
+
+#### [`build-dashboard.md`](build-dashboard.md)
+**Generates**: Revenue/analytics dashboard
+**Patterns used**: StatsGrid + Chart + DataTable + InsightsList
+**Time to generate**: ~30 seconds
+**Best for**: Executive dashboards, analytics views, KPI tracking
+
+#### [`build-admin-panel.md`](build-admin-panel.md)
+**Generates**: Complete admin panel with user management
+**Patterns used**: Sidebar + DataTable + DetailCard + AgentForm + ConfirmDialog
+**Time to generate**: ~45 seconds
+**Best for**: Admin interfaces, user management, CRUD operations
+
+#### [`build-analytics-view.md`](build-analytics-view.md)
+**Generates**: Comprehensive analytics page with insights
+**Patterns used**: StatsGrid + Chart (3 types) + InsightsList + DataTable + Timeline
+**Time to generate**: ~45 seconds
+**Best for**: Data analytics, performance tracking, business intelligence
+
+#### [`build-chat-interface.md`](build-chat-interface.md)
+**Generates**: AI chat interface
+**Patterns used**: ChatMessage + StreamingIndicator + Sidebar + CommandPalette + CodeBlock
+**Time to generate**: ~60 seconds
+**Best for**: AI chatbots, support chat, conversational UIs
+
+#### [`build-settings-page.md`](build-settings-page.md)
+**Generates**: Settings/configuration page with multiple sections
+**Patterns used**: Sidebar + DetailCard + AgentForm + DataTable + CodeBlock
+**Time to generate**: ~60 seconds
+**Best for**: User settings, app configuration, account management
+
+---
+
+## 🎨 How to Use These Prompts
+
+### Method 1: Copy the Entire Prompt
+```
+1. Open a build-*.md file
+2. Copy the entire "Prompt" section
+3. Paste into your LLM chat
+4. LLM generates complete component
+5. Copy-paste into your codebase
+```
+
+### Method 2: Customize the Prompt
+```
+1. Open a build-*.md file
+2. Read the "Prompt" section
+3. Modify for your needs (change metrics, data, etc.)
+4. Paste modified prompt into LLM
+5. Get customized component
+```
+
+### Method 3: Learn the Pattern
+```
+1. Open a build-*.md file
+2. Read the "Expected Output" section
+3. See how patterns are combined
+4. Use as template for your own layouts
+```
+
+---
+
+## 💡 Examples
+
+### Example 1: Generate a Dashboard
+```
+User: "I need a sales dashboard"
+→ Uses build-dashboard.md as reference
+→ LLM generates complete dashboard with stats, charts, table
+→ Copy-paste into app
+```
+
+### Example 2: Generate Admin Panel
+```
+User: "Create a product management admin panel"
+→ Uses build-admin-panel.md as template
+→ LLM generates sidebar, product table, forms
+→ Copy-paste into app
+```
+
+### Example 3: Generate Custom Layout
+```
+User: "Build a monitoring dashboard with alerts and logs"
+→ LLM references system-prompt.md
+→ Selects appropriate patterns: MetricCard, InsightsList, Timeline, DataTable
+→ Generates custom layout
+→ Copy-paste into app
+```
+
+---
+
+## 🎯 Tips for Best Results
+
+### 1. **Be Specific**
+❌ Bad: "Build me a dashboard"
+✅ Good: "Build me a sales dashboard with revenue metrics, monthly chart, and recent transactions table"
+
+### 2. **Mention Patterns**
+❌ Bad: "Show user data"
+✅ Good: "Use DataTable to show user data with sorting and pagination"
+
+### 3. **Request Realistic Data**
+❌ Bad: "Add some data"
+✅ Good: "Add 15 rows of realistic user data with names, emails, and roles"
+
+### 4. **Use Build Guides as Templates**
+Instead of asking from scratch, say:
+"Use the build-dashboard.md approach but for an e-commerce store"
+
+---
+
+## 🔧 Customization
+
+You can modify these prompts for your needs:
+
+### Change the Tech Stack
+Currently assumes: Next.js + React + TypeScript + Tailwind + shadcn/ui
+
+To use with different stack:
+1. Edit `system-prompt.md`
+2. Update import paths
+3. Adjust component conventions
+
+### Add Custom Patterns
+If you create your own patterns:
+1. Add schema to `pattern-index.md`
+2. Add pattern description to `system-prompt.md`
+3. Create example in a new `build-*.md`
+
+### Change Styling
+The prompts generate shadcn/ui compatible code.
+
+To change styling:
+1. Update `system-prompt.md` code generation rules
+2. Replace Tailwind classes with your preferred system
+3. Update examples in build guides
+
+---
+
+## 📊 What Each File Does
+
+| File | Purpose | Use Case |
+|------|---------|----------|
+| `system-prompt.md` | Teach LLM about all patterns | Add to Cursor/Claude/ChatGPT |
+| `pattern-index.md` | Complete schema reference | Quick lookup, validation |
+| `build-dashboard.md` | Generate dashboards | Revenue, analytics, KPIs |
+| `build-admin-panel.md` | Generate admin UIs | User management, CRUD |
+| `build-analytics-view.md` | Generate analytics pages | Data analysis, insights |
+| `build-chat-interface.md` | Generate chat UIs | AI chatbots, support |
+| `build-settings-page.md` | Generate settings pages | Configuration, preferences |
+
+---
+
+## 🚀 Next Steps
+
+1. **Start with `system-prompt.md`** - Add it to your AI tool
+2. **Try a build guide** - Generate a complete layout
+3. **Reference `pattern-index.md`** - When you need schema details
+4. **Customize prompts** - Adapt for your specific needs
+
+---
+
+## 💬 Need Help?
+
+- **Issues**: [GitHub Issues](https://github.com/harshmathurx/agent-patterns/issues)
+- **Discussions**: [GitHub Discussions](https://github.com/harshmathurx/agent-patterns/discussions)
+- **Examples**: Check the build guides for working examples
+
+---
+
+**Remember**: These prompts cost nothing to use, work offline, and create zero lock-in. Once your LLM knows about Agent Patterns, it will naturally use them for any UI generation.
+
diff --git a/prompts/build-admin-panel.md b/prompts/build-admin-panel.md
new file mode 100644
index 0000000..22086af
--- /dev/null
+++ b/prompts/build-admin-panel.md
@@ -0,0 +1,250 @@
+# Build Admin Panel - Complete Prompt
+
+Use this prompt to generate a complete admin panel with user management using Agent Patterns.
+
+## Prompt
+
+```
+Build me a complete admin panel for user management using Agent Patterns. The admin panel should include:
+
+1. A Sidebar navigation with:
+   - Logo and app name at the top
+   - Navigation items: Dashboard, Users, Settings, Reports, Analytics
+   - User section at the bottom (avatar + name)
+   - Collapsible functionality
+
+2. Main content area with:
+   - Page header with title "User Management" and an "Add User" button
+   - A StatsGrid showing 4 user-related metrics (Total Users, Active Today, New This Month, Churned)
+   - A DataTable with user data including:
+     * Columns: Avatar, Name, Email, Role, Status, Last Active, Actions
+     * At least 20 users with realistic data
+     * Sorting, filtering, pagination (10 per page)
+     * Row selection with bulk action button
+   - When clicking a user row, show a DetailCard in a modal/side panel with:
+     * User profile information
+     * Edit mode enabled
+     * Account status badge
+     * Created/updated timestamps
+     * Action buttons (Reset Password, Deactivate Account)
+
+3. An "Add User" AgentForm that appears in a modal/side panel with:
+   - Fields: Name, Email, Role (select), Status (toggle), Password
+   - Proper Zod validation
+   - Submit handler that logs the data
+
+4. A ConfirmDialog for destructive actions like:
+   - "Are you sure you want to deactivate this user?"
+   - "Delete 5 selected users?"
+
+Use realistic data - actual names, emails, roles (Admin, Editor, Viewer).
+Make it production-ready with proper TypeScript types and responsive design.
+Use a clean, professional admin panel aesthetic.
+```
+
+## Expected Output
+
+The LLM should generate a complete React component that:
+
+1. **Imports all necessary patterns**:
+```typescript
+import { Sidebar } from '@/patterns/sidebar/component'
+import { StatsGrid } from '@/patterns/stats-grid/component'
+import { DataTable } from '@/patterns/data-table/component'
+import { DetailCard } from '@/patterns/detail-card/component'
+import { AgentForm } from '@/patterns/agent-form/component'
+import { ConfirmDialog } from '@/patterns/confirm-dialog/component'
+```
+
+2. **Implements state management**:
+```typescript
+const [selectedUser, setSelectedUser] = useState<User | null>(null)
+const [showAddUserForm, setShowAddUserForm] = useState(false)
+const [showConfirmDialog, setShowConfirmDialog] = useState(false)
+const [selectedRows, setSelectedRows] = useState<User[]>([])
+```
+
+3. **Contains realistic data**:
+```typescript
+const users = [
+  {
+    id: '1',
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@company.com',
+    role: 'Admin',
+    status: 'active',
+    lastActive: '2 hours ago',
+    created: '2023-01-15',
+  },
+  {
+    id: '2',
+    name: 'Michael Chen',
+    email: 'michael.chen@company.com',
+    role: 'Editor',
+    status: 'active',
+    lastActive: '5 minutes ago',
+    created: '2023-03-22',
+  },
+  // ... 20+ users
+]
+
+const userStats = [
+  { 
+    id: '1', 
+    label: 'Total Users', 
+    value: '2,847', 
+    change: 12, 
+    changeLabel: 'vs last month',
+    trend: 'up' as const 
+  },
+  { 
+    id: '2', 
+    label: 'Active Today', 
+    value: '1,423', 
+    change: -3, 
+    changeLabel: 'vs yesterday',
+    trend: 'down' as const 
+  },
+  // ... more stats
+]
+```
+
+4. **Implements complete layout**:
+```typescript
+export default function AdminPanel() {
+  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+  const [showAddForm, setShowAddForm] = useState(false)
+  const [confirmAction, setConfirmAction] = useState<'deactivate' | 'delete' | null>(null)
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <Sidebar
+        header={{ title: 'Admin Portal', logo: <Logo /> }}
+        items={navigationItems}
+        footer={<UserProfile />}
+        collapsible={true}
+      />
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-y-auto p-6">
+        <div className="max-w-7xl mx-auto space-y-6">
+          {/* Header */}
+          <div className="flex justify-between items-center">
+            <div>
+              <h1 className="text-3xl font-bold">User Management</h1>
+              <p className="text-muted-foreground">Manage users and permissions</p>
+            </div>
+            <Button onClick={() => setShowAddForm(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Add User
+            </Button>
+          </div>
+
+          {/* Stats */}
+          <StatsGrid stats={userStats} columns={4} />
+
+          {/* User Table */}
+          <DataTable
+            columns={userColumns}
+            data={users}
+            searchable={true}
+            pagination={true}
+            pageSize={10}
+            selectable={true}
+            onSelectionChange={setSelectedRows}
+          />
+
+          {/* Bulk Actions */}
+          {selectedRows.length > 0 && (
+            <div className="fixed bottom-6 right-6 bg-primary text-primary-foreground rounded-lg shadow-lg p-4">
+              <p>{selectedRows.length} users selected</p>
+              <Button variant="destructive" onClick={() => setConfirmAction('delete')}>
+                Delete Selected
+              </Button>
+            </div>
+          )}
+        </div>
+      </main>
+
+      {/* Detail Panel */}
+      {selectedUser && (
+        <div className="fixed inset-y-0 right-0 w-96 bg-background border-l shadow-lg overflow-y-auto">
+          <DetailCard
+            title="User Details"
+            fields={getUserDetailFields(selectedUser)}
+            editable={true}
+            onEdit={(data) => console.log('Update user:', data)}
+            actions={
+              <Button 
+                variant="destructive" 
+                onClick={() => setConfirmAction('deactivate')}
+              >
+                Deactivate
+              </Button>
+            }
+          />
+        </div>
+      )}
+
+      {/* Add User Form */}
+      {showAddForm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
+          <div className="bg-background rounded-lg p-6 max-w-md w-full">
+            <AgentForm
+              title="Add New User"
+              fields={addUserFields}
+              schema={userSchema}
+              submitLabel="Create User"
+              onSubmit={(data) => {
+                console.log('New user:', data)
+                setShowAddForm(false)
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Confirm Dialog */}
+      <ConfirmDialog
+        open={confirmAction !== null}
+        title={confirmAction === 'delete' ? 'Delete Users' : 'Deactivate User'}
+        description={
+          confirmAction === 'delete'
+            ? `Are you sure you want to delete ${selectedRows.length} user(s)?`
+            : 'Are you sure you want to deactivate this user account?'
+        }
+        variant="destructive"
+        onConfirm={() => {
+          console.log('Action confirmed:', confirmAction)
+          setConfirmAction(null)
+        }}
+        onCancel={() => setConfirmAction(null)}
+      />
+    </div>
+  )
+}
+```
+
+5. **Is production-ready** with:
+   - Complete CRUD operations structure
+   - State management for modals/panels
+   - Form validation with Zod
+   - Confirmation dialogs for destructive actions
+   - Bulk operations support
+   - Responsive sidebar layout
+   - Professional admin UI styling
+   - Proper TypeScript types throughout
+
+## Variations
+
+You can modify this prompt for different admin panel types:
+
+- **E-commerce Admin**: Product management, orders, inventory
+- **CMS Admin**: Content management, posts, pages, media
+- **SaaS Admin**: Tenant management, subscriptions, billing
+- **Support Admin**: Ticket management, customers, conversations
+- **Analytics Admin**: Reports, dashboards, data exports
+
+Simply replace the data model and business logic to match your domain.
+
diff --git a/prompts/build-analytics-view.md b/prompts/build-analytics-view.md
new file mode 100644
index 0000000..ed59f67
--- /dev/null
+++ b/prompts/build-analytics-view.md
@@ -0,0 +1,311 @@
+# Build Analytics View - Complete Prompt
+
+Use this prompt to generate a comprehensive analytics page with insights using Agent Patterns.
+
+## Prompt
+
+```
+Build me a comprehensive analytics page using Agent Patterns. The page should include:
+
+1. A page header with:
+   - Title "Analytics Overview"
+   - Date range selector (last 7 days, 30 days, 90 days, custom)
+   - Export button
+
+2. A StatsGrid with 6 key performance metrics:
+   - Total Views, Unique Visitors, Bounce Rate, Avg Session Duration, Conversions, Revenue
+   - Each with trend indicators and comparison to previous period
+
+3. Three charts in a 2-column grid:
+   - Large area chart (full width) showing daily traffic for the past 30 days
+   - Bar chart showing top 5 traffic sources
+   - Pie chart showing device distribution (Desktop, Mobile, Tablet)
+
+4. An InsightsList showing 5-6 AI-generated insights:
+   - Mix of all types (info, warning, success, error)
+   - Priority badges (high, medium, low)
+   - Specific, actionable insights about the data
+   - Each with 1-2 action buttons
+
+5. A DataTable showing "Top Pages" with:
+   - Columns: Page Path, Views, Unique Visitors, Avg Time, Bounce Rate, Conversions
+   - At least 15 rows with realistic URLs
+   - Sorting enabled on all columns
+   - Pagination with 10 rows per page
+
+6. A Timeline showing recent important events:
+   - Campaign launches, feature releases, incidents, milestones
+   - Last 2 weeks of events
+   - Status indicators (completed, in-progress, etc.)
+
+Use realistic analytics data - actual page paths, traffic numbers, percentages.
+Make it professional and data-driven with insights that sound like they came from an AI analyst.
+Use proper formatting for numbers (1.2K, 45.3%, $12.5K, etc.).
+```
+
+## Expected Output
+
+The LLM should generate a complete React component that:
+
+1. **Imports all necessary patterns**:
+```typescript
+import { StatsGrid } from '@/patterns/stats-grid/component'
+import { Chart } from '@/patterns/chart/component'
+import { InsightsList } from '@/patterns/insights-list/component'
+import { DataTable } from '@/patterns/data-table/component'
+import { Timeline } from '@/patterns/timeline/component'
+```
+
+2. **Contains comprehensive analytics data**:
+```typescript
+const performanceStats = [
+  {
+    id: '1',
+    label: 'Total Views',
+    value: '1.24M',
+    change: 18.2,
+    changeLabel: 'vs last period',
+    trend: 'up' as const,
+    color: 'success' as const,
+  },
+  {
+    id: '2',
+    label: 'Unique Visitors',
+    value: '847K',
+    change: 12.5,
+    changeLabel: 'vs last period',
+    trend: 'up' as const,
+    color: 'success' as const,
+  },
+  {
+    id: '3',
+    label: 'Bounce Rate',
+    value: '42.3%',
+    change: -5.1,
+    changeLabel: 'vs last period',
+    trend: 'down' as const,
+    color: 'success' as const, // Down is good for bounce rate
+  },
+  // ... more stats
+]
+
+const trafficData = [
+  { label: 'Jan 15', value: 28450 },
+  { label: 'Jan 16', value: 31200 },
+  { label: 'Jan 17', value: 29800 },
+  // ... 30 days of data
+]
+
+const trafficSources = [
+  { label: 'Organic Search', value: 45230 },
+  { label: 'Direct', value: 28940 },
+  { label: 'Social Media', value: 18650 },
+  { label: 'Referral', value: 12340 },
+  { label: 'Email', value: 8920 },
+]
+
+const deviceDistribution = [
+  { label: 'Desktop', value: 52, color: 'hsl(var(--primary))' },
+  { label: 'Mobile', value: 38, color: 'hsl(var(--secondary))' },
+  { label: 'Tablet', value: 10, color: 'hsl(var(--muted))' },
+]
+
+const insights = [
+  {
+    id: '1',
+    title: 'Traffic spike detected on mobile devices',
+    description: 'Mobile traffic increased by 34% in the last 3 days, primarily from organic search. This correlates with improved mobile page load times after recent optimization.',
+    type: 'success' as const,
+    priority: 'high' as const,
+    actions: [
+      { label: 'View Mobile Analytics', onClick: () => {} },
+      { label: 'Export Report', onClick: () => {} },
+    ],
+  },
+  {
+    id: '2',
+    title: 'High bounce rate on product pages',
+    description: 'Product category pages show 58% bounce rate, 12% higher than site average. Users are leaving without viewing product details.',
+    type: 'warning' as const,
+    priority: 'high' as const,
+    actions: [
+      { label: 'View Problem Pages', onClick: () => {} },
+      { label: 'A/B Test Suggestions', onClick: () => {} },
+    ],
+  },
+  {
+    id: '3',
+    title: 'Conversion rate improving',
+    description: 'Overall conversion rate reached 3.2%, up from 2.8% last month. Checkout flow optimization is showing positive results.',
+    type: 'success' as const,
+    priority: 'medium' as const,
+    actions: [
+      { label: 'View Funnel', onClick: () => {} },
+    ],
+  },
+  // ... more insights
+]
+
+const topPages = [
+  {
+    path: '/products/wireless-headphones',
+    views: 124500,
+    uniqueVisitors: 98200,
+    avgTime: '3:24',
+    bounceRate: '38.2%',
+    conversions: 2847,
+  },
+  {
+    path: '/blog/best-productivity-apps-2024',
+    views: 89300,
+    uniqueVisitors: 76400,
+    avgTime: '5:12',
+    bounceRate: '42.8%',
+    conversions: 1243,
+  },
+  // ... 15+ pages
+]
+
+const recentEvents = [
+  {
+    id: '1',
+    title: 'Summer Campaign Launch',
+    description: 'Launched summer sale campaign across all channels',
+    timestamp: '2024-02-14T10:00:00',
+    status: 'completed' as const,
+    user: 'Marketing Team',
+  },
+  {
+    id: '2',
+    title: 'Mobile App Update',
+    description: 'Released v2.1 with performance improvements',
+    timestamp: '2024-02-12T14:30:00',
+    status: 'completed' as const,
+    user: 'Product Team',
+  },
+  // ... more events
+]
+```
+
+3. **Implements complete layout**:
+```typescript
+export default function AnalyticsView() {
+  const [dateRange, setDateRange] = useState('30d')
+
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-3xl font-bold">Analytics Overview</h1>
+            <p className="text-muted-foreground">
+              Comprehensive insights into your performance
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Select value={dateRange} onValueChange={setDateRange}>
+              <SelectOption value="7d">Last 7 days</SelectOption>
+              <SelectOption value="30d">Last 30 days</SelectOption>
+              <SelectOption value="90d">Last 90 days</SelectOption>
+              <SelectOption value="custom">Custom range</SelectOption>
+            </Select>
+            <Button>
+              <Download className="w-4 h-4 mr-2" />
+              Export
+            </Button>
+          </div>
+        </div>
+
+        {/* Performance Stats */}
+        <StatsGrid 
+          stats={performanceStats} 
+          columns={3} 
+          showDividers={true}
+        />
+
+        {/* Charts Section */}
+        <div className="space-y-6">
+          {/* Main Traffic Chart - Full Width */}
+          <Chart
+            title="Daily Traffic Trend"
+            type="area"
+            data={trafficData}
+            showLegend={false}
+            showGrid={true}
+          />
+
+          {/* Secondary Charts - 2 Column */}
+          <div className="grid md:grid-cols-2 gap-6">
+            <Chart
+              title="Top Traffic Sources"
+              type="bar"
+              data={trafficSources}
+              showLegend={false}
+            />
+            <Chart
+              title="Device Distribution"
+              type="donut"
+              data={deviceDistribution}
+              showLegend={true}
+            />
+          </div>
+        </div>
+
+        {/* AI Insights */}
+        <InsightsList
+          insights={insights}
+          sortByPriority={true}
+          showFilters={true}
+        />
+
+        {/* Top Pages Table */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Top Pages</h2>
+          <DataTable
+            columns={topPagesColumns}
+            data={topPages}
+            searchable={true}
+            pagination={true}
+            pageSize={10}
+          />
+        </div>
+
+        {/* Recent Events Timeline */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">Recent Events</h2>
+          <Timeline
+            events={recentEvents}
+            orientation="vertical"
+            showTime={true}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+4. **Is production-ready** with:
+   - Realistic analytics metrics and trends
+   - Proper number formatting (K, M, %, time formats)
+   - AI-generated insights that sound professional
+   - Actionable recommendations with context
+   - Complete data visualization mix
+   - Responsive grid layouts
+   - Professional analytics dashboard styling
+   - Date range selection capability
+   - Export functionality hook
+
+## Variations
+
+You can modify this prompt for different analytics types:
+
+- **Marketing Analytics**: Campaign performance, ROI, lead attribution
+- **Product Analytics**: Feature usage, user flows, engagement metrics
+- **Sales Analytics**: Pipeline, deals, revenue forecasting
+- **Content Analytics**: Article performance, engagement, SEO metrics
+- **E-commerce Analytics**: Orders, revenue, cart abandonment, product performance
+
+Simply replace the metrics, charts, and insights to match your analytics domain.
+
diff --git a/prompts/build-chat-interface.md b/prompts/build-chat-interface.md
new file mode 100644
index 0000000..b08e74b
--- /dev/null
+++ b/prompts/build-chat-interface.md
@@ -0,0 +1,408 @@
+# Build Chat Interface - Complete Prompt
+
+Use this prompt to generate a complete AI chat interface using Agent Patterns.
+
+## Prompt
+
+```
+Build me a complete AI chat interface using Agent Patterns. The interface should include:
+
+1. A full-screen layout with:
+   - A Sidebar on the left showing:
+     * App logo and name at top
+     * "New Chat" button
+     * List of recent conversations (10+ chats with titles and timestamps)
+     * Settings button at bottom
+   - Main chat area on the right
+
+2. In the main chat area:
+   - Header with conversation title and a CommandPalette trigger button (⌘K)
+   - Chat messages list showing a realistic conversation:
+     * 10-15 messages alternating between user and assistant
+     * Conversation about "analyzing sales data and generating insights"
+     * Include system messages for important events
+     * Show timestamps on messages
+     * The last assistant message should be streaming (isStreaming: true)
+   - A StreamingIndicator showing "AI is typing..." when assistant is responding
+   - Input area at bottom with:
+     * Multi-line textarea for user input
+     * Send button
+     * File attachment button
+     * Stop generation button (when streaming)
+
+3. A CommandPalette that opens with ⌘K showing:
+   - Common AI commands: "Summarize conversation", "Export chat", "Change model"
+   - Quick actions: "Clear history", "New chat", "Settings"
+   - Recent commands
+   - Groups: Actions, History, Settings
+
+4. When streaming a response, show:
+   - StreamingIndicator with progress steps:
+     * "Analyzing request..." (completed)
+     * "Generating response..." (active)
+     * "Formatting output..." (pending)
+   - Token counter showing tokens used/remaining
+   - Stop button to cancel generation
+
+5. A ConfirmDialog for:
+   - "Clear conversation history?"
+   - "Delete this chat?"
+
+Use realistic chat messages - actual questions about data analysis and thoughtful AI responses.
+Include code blocks in some messages using CodeBlock pattern.
+Make it look like a professional AI assistant interface (ChatGPT, Claude-style).
+```
+
+## Expected Output
+
+The LLM should generate a complete React component that:
+
+1. **Imports all necessary patterns**:
+```typescript
+import { ChatMessage } from '@/patterns/chat-message/component'
+import { StreamingIndicator } from '@/patterns/streaming-indicator/component'
+import { Sidebar } from '@/patterns/sidebar/component'
+import { CommandPalette } from '@/patterns/command-palette/component'
+import { CodeBlock } from '@/patterns/code-block/component'
+import { ConfirmDialog } from '@/patterns/confirm-dialog/component'
+```
+
+2. **Implements state management**:
+```typescript
+const [messages, setMessages] = useState<ChatMessage[]>(conversationHistory)
+const [inputValue, setInputValue] = useState('')
+const [isStreaming, setIsStreaming] = useState(false)
+const [showCommandPalette, setShowCommandPalette] = useState(false)
+const [showConfirm, setShowConfirm] = useState(false)
+const [tokenCount, setTokenCount] = useState(0)
+```
+
+3. **Contains realistic conversation data**:
+```typescript
+const conversationHistory = [
+  {
+    role: 'user' as const,
+    content: 'Can you analyze my sales data from last quarter and identify the top trends?',
+    avatar: 'JD',
+    timestamp: '10:32 AM',
+    status: 'sent' as const,
+  },
+  {
+    role: 'assistant' as const,
+    content: 'I\'ll analyze your sales data for Q4 2023. Let me break this down into key trends...\n\n**Top 3 Trends:**\n\n1. **Mobile Sales Growth**: 42% increase in mobile transactions\n2. **Geographic Expansion**: West region outperformed by 28%\n3. **Product Category Shift**: Electronics sales up 35%\n\nWould you like me to dive deeper into any of these trends?',
+    avatar: 'AI',
+    timestamp: '10:33 AM',
+    status: 'sent' as const,
+  },
+  {
+    role: 'user' as const,
+    content: 'Yes, can you show me the code to visualize the geographic data?',
+    avatar: 'JD',
+    timestamp: '10:35 AM',
+    status: 'sent' as const,
+  },
+  {
+    role: 'assistant' as const,
+    content: 'Here\'s a React component using Recharts to visualize your geographic sales data:',
+    avatar: 'AI',
+    timestamp: '10:35 AM',
+    status: 'sent' as const,
+    actions: [
+      { label: 'Copy Code', onClick: () => {} },
+      { label: 'Run in Sandbox', onClick: () => {} },
+    ],
+  },
+  {
+    role: 'system' as const,
+    content: 'Code block generated successfully',
+    timestamp: '10:35 AM',
+  },
+  {
+    role: 'user' as const,
+    content: 'This is great! Can you also create a summary report I can share with my team?',
+    avatar: 'JD',
+    timestamp: '10:38 AM',
+    status: 'sent' as const,
+  },
+  {
+    role: 'assistant' as const,
+    content: 'I\'ll create a comprehensive executive summary of your Q4 sales performance...',
+    avatar: 'AI',
+    timestamp: '10:38 AM',
+    isStreaming: true,
+  },
+]
+
+const recentChats = [
+  { 
+    id: '1', 
+    title: 'Q4 Sales Analysis', 
+    timestamp: '2 hours ago',
+    active: true 
+  },
+  { 
+    id: '2', 
+    title: 'Marketing Campaign Ideas', 
+    timestamp: 'Yesterday' 
+  },
+  { 
+    id: '3', 
+    title: 'Customer Segmentation Strategy', 
+    timestamp: '2 days ago' 
+  },
+  // ... more chats
+]
+
+const commands = [
+  {
+    id: 'summarize',
+    label: 'Summarize conversation',
+    description: 'Get a summary of this chat',
+    group: 'actions',
+    shortcut: '⌘S',
+    onSelect: () => {},
+  },
+  {
+    id: 'export',
+    label: 'Export chat',
+    description: 'Download as markdown or PDF',
+    group: 'actions',
+    shortcut: '⌘E',
+    onSelect: () => {},
+  },
+  {
+    id: 'model',
+    label: 'Change model',
+    description: 'Switch between GPT-4, Claude, etc.',
+    group: 'actions',
+    onSelect: () => {},
+  },
+  // ... more commands
+]
+
+const streamingSteps = [
+  { label: 'Analyzing request...', status: 'completed' as const },
+  { label: 'Generating response...', status: 'active' as const },
+  { label: 'Formatting output...', status: 'pending' as const },
+]
+```
+
+4. **Implements complete chat layout**:
+```typescript
+export default function ChatInterface() {
+  const [messages, setMessages] = useState(conversationHistory)
+  const [input, setInput] = useState('')
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [showCommandPalette, setShowCommandPalette] = useState(false)
+  const [confirmAction, setConfirmAction] = useState<'clear' | 'delete' | null>(null)
+  const [tokenCount, setTokenCount] = useState(1247)
+
+  useEffect(() => {
+    // Handle ⌘K shortcut
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setShowCommandPalette(true)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  const handleSend = () => {
+    if (!input.trim()) return
+
+    // Add user message
+    const userMessage = {
+      role: 'user' as const,
+      content: input,
+      avatar: 'JD',
+      timestamp: new Date().toLocaleTimeString(),
+      status: 'sent' as const,
+    }
+    
+    setMessages([...messages, userMessage])
+    setInput('')
+    setIsStreaming(true)
+
+    // Simulate AI response
+    setTimeout(() => {
+      const aiMessage = {
+        role: 'assistant' as const,
+        content: 'Processing your request...',
+        avatar: 'AI',
+        timestamp: new Date().toLocaleTimeString(),
+        isStreaming: true,
+      }
+      setMessages(prev => [...prev, aiMessage])
+    }, 500)
+  }
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <Sidebar
+        header={{
+          title: 'AI Assistant',
+          subtitle: 'Powered by Agent Patterns',
+        }}
+        items={[
+          {
+            id: 'new',
+            label: 'New Chat',
+            icon: <Plus />,
+            onClick: () => setMessages([]),
+          },
+          ...recentChats.map(chat => ({
+            id: chat.id,
+            label: chat.title,
+            badge: chat.timestamp,
+            active: chat.active,
+          })),
+        ]}
+        footer={
+          <Button variant="ghost" onClick={() => {}}>
+            <Settings className="w-4 h-4 mr-2" />
+            Settings
+          </Button>
+        }
+        collapsible={true}
+        className="w-64"
+      />
+
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {/* Header */}
+        <header className="border-b p-4 flex justify-between items-center">
+          <h1 className="text-lg font-semibold">Q4 Sales Analysis</h1>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowCommandPalette(true)}
+          >
+            <Command className="w-4 h-4 mr-2" />
+            ⌘K
+          </Button>
+        </header>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          {messages.map((message, i) => (
+            <ChatMessage key={i} {...message} />
+          ))}
+
+          {/* Streaming Indicator */}
+          {isStreaming && (
+            <StreamingIndicator
+              variant="progress"
+              steps={streamingSteps}
+              tokenCount={tokenCount}
+              showTokenCounter={true}
+            />
+          )}
+        </div>
+
+        {/* Input Area */}
+        <div className="border-t p-4">
+          <div className="max-w-3xl mx-auto">
+            <div className="flex gap-2">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault()
+                    handleSend()
+                  }
+                }}
+                placeholder="Ask me anything..."
+                className="flex-1 min-h-[60px] max-h-[200px] resize-none rounded-lg border p-3"
+                disabled={isStreaming}
+              />
+              <div className="flex flex-col gap-2">
+                <Button size="sm" variant="ghost">
+                  <Paperclip className="w-4 h-4" />
+                </Button>
+                {isStreaming ? (
+                  <Button
+                    size="sm"
+                    variant="destructive"
+                    onClick={() => setIsStreaming(false)}
+                  >
+                    <Square className="w-4 h-4" />
+                  </Button>
+                ) : (
+                  <Button 
+                    size="sm" 
+                    onClick={handleSend}
+                    disabled={!input.trim()}
+                  >
+                    <Send className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
+            </div>
+            <div className="mt-2 text-xs text-muted-foreground">
+              Press Enter to send, Shift+Enter for new line, ⌘K for commands
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Command Palette */}
+      <CommandPalette
+        isOpen={showCommandPalette}
+        onClose={() => setShowCommandPalette(false)}
+        commands={commands}
+        placeholder="Search commands..."
+      />
+
+      {/* Confirm Dialog */}
+      <ConfirmDialog
+        open={confirmAction !== null}
+        title={confirmAction === 'clear' ? 'Clear History' : 'Delete Chat'}
+        description={
+          confirmAction === 'clear'
+            ? 'Are you sure you want to clear this conversation? This action cannot be undone.'
+            : 'Are you sure you want to delete this chat? This action cannot be undone.'
+        }
+        variant="destructive"
+        onConfirm={() => {
+          if (confirmAction === 'clear') {
+            setMessages([])
+          }
+          setConfirmAction(null)
+        }}
+        onCancel={() => setConfirmAction(null)}
+      />
+    </div>
+  )
+}
+```
+
+5. **Is production-ready** with:
+   - Complete chat state management
+   - Keyboard shortcuts (⌘K, Enter, Shift+Enter)
+   - Streaming message simulation
+   - Token counting
+   - Stop generation functionality
+   - Recent chats sidebar
+   - Command palette integration
+   - Professional chat UI styling
+   - Message status indicators
+   - Code block rendering support
+   - Confirmation dialogs for destructive actions
+   - Responsive layout
+   - Accessibility features
+
+## Variations
+
+You can modify this prompt for different chat interface types:
+
+- **Customer Support Chat**: Add agent info, ticket linking, canned responses
+- **Code Assistant Chat**: Add code execution, file tree, terminal integration
+- **Documentation Chat**: Add document search, citation links, source references
+- **Team Chat**: Add mentions, channels, thread replies, reactions
+
+Simply adjust the sidebar items, commands, and message content to match your use case.
+
diff --git a/prompts/build-dashboard.md b/prompts/build-dashboard.md
new file mode 100644
index 0000000..4c99a55
--- /dev/null
+++ b/prompts/build-dashboard.md
@@ -0,0 +1,173 @@
+# Build Dashboard - Complete Prompt
+
+Use this prompt to generate a complete analytics/revenue dashboard using Agent Patterns.
+
+## Prompt
+
+```
+Build me a complete revenue dashboard using Agent Patterns. The dashboard should show:
+
+1. A StatsGrid at the top with 4 key metrics:
+   - Total Revenue (with upward trend)
+   - Active Users (with trend indicator)
+   - Conversion Rate (with comparison)
+   - Average Order Value (with sparkline)
+
+2. Two Charts side-by-side:
+   - A bar chart showing monthly revenue for the last 6 months
+   - A line chart showing user growth over the same period
+
+3. A DataTable showing recent transactions with:
+   - Columns: ID, Customer, Amount, Status, Date
+   - At least 15 rows of data
+   - Enable sorting, searching, and pagination (10 rows per page)
+   - Row selection enabled
+
+4. An InsightsList showing 3-4 AI-generated insights about the data:
+   - Mix of info, success, and warning types
+   - Each with a relevant action button
+   - Enable priority sorting
+
+Use realistic data - actual customer names, dollar amounts, dates from the last month.
+Make it responsive and production-ready.
+Use a professional color scheme with proper spacing.
+```
+
+## Expected Output
+
+The LLM should generate a complete React component that:
+
+1. **Imports all necessary patterns**:
+```typescript
+import { StatsGrid } from '@/patterns/stats-grid/component'
+import { Chart } from '@/patterns/chart/component'
+import { DataTable } from '@/patterns/data-table/component'
+import { InsightsList } from '@/patterns/insights-list/component'
+```
+
+2. **Contains realistic data** (not Lorem ipsum):
+```typescript
+const statsData = [
+  {
+    id: '1',
+    label: 'Total Revenue',
+    value: '$847,392',
+    change: 14.2,
+    changeLabel: 'vs last month',
+    trend: 'up' as const,
+    color: 'success' as const,
+  },
+  // ... more stats
+]
+
+const revenueData = [
+  { label: 'Jan', value: 125000 },
+  { label: 'Feb', value: 132000 },
+  { label: 'Mar', value: 148000 },
+  // ... more months
+]
+
+const transactions = [
+  { 
+    id: 'TXN-001', 
+    customer: 'Acme Corp', 
+    amount: '$12,450', 
+    status: 'Completed', 
+    date: '2024-02-15' 
+  },
+  // ... 15+ rows
+]
+
+const insights = [
+  {
+    id: '1',
+    title: 'Revenue growth accelerating',
+    description: 'Monthly revenue increased by 14.2% compared to last month, indicating strong market demand.',
+    type: 'success' as const,
+    priority: 'high' as const,
+    actions: [
+      { label: 'View Details', onClick: () => console.log('View details') }
+    ]
+  },
+  // ... more insights
+]
+```
+
+3. **Implements proper layout**:
+```typescript
+export default function RevenueDashboard() {
+  return (
+    <div className="min-h-screen bg-background p-6 space-y-6">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold">Revenue Dashboard</h1>
+          <p className="text-muted-foreground">Track your revenue, users, and performance metrics</p>
+        </div>
+
+        {/* Stats Grid */}
+        <StatsGrid 
+          stats={statsData} 
+          columns={4} 
+          showDividers={true}
+        />
+
+        {/* Charts Row */}
+        <div className="grid md:grid-cols-2 gap-6">
+          <Chart
+            title="Monthly Revenue"
+            type="bar"
+            data={revenueData}
+            showLegend={false}
+          />
+          <Chart
+            title="User Growth"
+            type="line"
+            data={userGrowthData}
+            showLegend={false}
+          />
+        </div>
+
+        {/* Data Table */}
+        <DataTable
+          columns={transactionColumns}
+          data={transactions}
+          searchable={true}
+          pagination={true}
+          pageSize={10}
+          selectable={true}
+          onSelectionChange={(selected) => console.log('Selected:', selected)}
+        />
+
+        {/* Insights */}
+        <InsightsList
+          insights={insights}
+          sortByPriority={true}
+          showFilters={true}
+        />
+      </div>
+    </div>
+  )
+}
+```
+
+4. **Is production-ready** with:
+   - Proper TypeScript types
+   - Responsive design (md: breakpoints)
+   - Realistic data with variety
+   - Proper spacing and layout
+   - Clean, professional styling
+   - Working callbacks and handlers
+
+## Variations
+
+You can modify this prompt for different dashboard types:
+
+- **Sales Dashboard**: Focus on deals, pipeline, conversion metrics
+- **E-commerce Dashboard**: Focus on products, orders, inventory
+- **Analytics Dashboard**: Focus on traffic, engagement, user behavior  
+- **Operations Dashboard**: Focus on tasks, tickets, system health
+- **Marketing Dashboard**: Focus on campaigns, leads, ROI
+
+Simply replace the metrics, chart data, and table columns to match your use case.
+
diff --git a/prompts/build-settings-page.md b/prompts/build-settings-page.md
new file mode 100644
index 0000000..29af721
--- /dev/null
+++ b/prompts/build-settings-page.md
@@ -0,0 +1,538 @@
+# Build Settings Page - Complete Prompt
+
+Use this prompt to generate a complete settings/configuration page using Agent Patterns.
+
+## Prompt
+
+```
+Build me a complete settings page using Agent Patterns. The settings page should include:
+
+1. A Sidebar navigation with settings sections:
+   - Profile
+   - Account
+   - Security
+   - Notifications
+   - Billing
+   - API Keys
+   - Team
+   - Preferences
+   - Each with appropriate icons
+
+2. Main content area that changes based on selected section:
+
+**Profile Section:**
+- DetailCard showing current profile information (name, email, avatar, bio, role)
+- Edit mode enabled
+- AgentForm to update profile with fields: name, email, bio, avatar URL
+- Save button that shows confirmation
+
+**Account Section:**
+- DetailCard with account details (plan, created date, account ID)
+- StatsGrid showing account usage (API calls, storage, users, etc.)
+- AgentForm to update account settings (company name, timezone, language)
+
+**Security Section:**
+- DetailCard showing security info (2FA status, last password change, active sessions)
+- AgentForm to change password (current password, new password, confirm password)
+- Button to enable 2FA
+- DataTable showing active sessions with device, location, last active
+- ConfirmDialog for "Revoke all sessions?"
+
+**Notifications Section:**
+- AgentForm with notification preferences:
+  - Email notifications (toggle)
+  - Push notifications (toggle)
+  - Marketing emails (toggle)
+  - Security alerts (checkbox, required)
+  - Weekly digest (radio: Never, Weekly, Daily)
+  - Notification types (checkboxes: Comments, Mentions, Updates)
+
+**API Keys Section:**
+- DataTable showing API keys with columns: Name, Key (masked), Created, Last Used, Actions
+- Button to "Generate New Key"
+- AgentForm modal to create new key (name, expiration, permissions)
+- CodeBlock showing the newly generated key
+- ConfirmDialog for "Revoke this API key?"
+
+**Billing Section:**
+- DetailCard showing current plan details and billing info
+- MetricCard showing usage this month
+- DataTable with invoice history (date, amount, status, download)
+
+Use realistic data throughout.
+Make the navigation sticky on the left.
+Each section should feel complete and production-ready.
+Include proper form validation and confirmation dialogs for destructive actions.
+```
+
+## Expected Output
+
+The LLM should generate a complete React component that:
+
+1. **Imports all necessary patterns**:
+```typescript
+import { Sidebar } from '@/patterns/sidebar/component'
+import { DetailCard } from '@/patterns/detail-card/component'
+import { AgentForm } from '@/patterns/agent-form/component'
+import { DataTable } from '@/patterns/data-table/component'
+import { StatsGrid } from '@/patterns/stats-grid/component'
+import { MetricCard } from '@/patterns/metric-card/component'
+import { CodeBlock } from '@/patterns/code-block/component'
+import { ConfirmDialog } from '@/patterns/confirm-dialog/component'
+```
+
+2. **Implements section-based navigation**:
+```typescript
+const [activeSection, setActiveSection] = useState('profile')
+const [showConfirm, setShowConfirm] = useState<string | null>(null)
+const [showKeyModal, setShowKeyModal] = useState(false)
+const [generatedKey, setGeneratedKey] = useState<string | null>(null)
+
+const settingsSections = [
+  { id: 'profile', label: 'Profile', icon: <User /> },
+  { id: 'account', label: 'Account', icon: <Building /> },
+  { id: 'security', label: 'Security', icon: <Shield /> },
+  { id: 'notifications', label: 'Notifications', icon: <Bell /> },
+  { id: 'api-keys', label: 'API Keys', icon: <Key /> },
+  { id: 'billing', label: 'Billing', icon: <CreditCard /> },
+]
+```
+
+3. **Contains realistic data for each section**:
+```typescript
+// Profile Data
+const profileData = {
+  name: 'Sarah Johnson',
+  email: 'sarah.johnson@company.com',
+  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah',
+  bio: 'Product Manager at Tech Corp. Passionate about building great products.',
+  role: 'Admin',
+  timezone: 'America/New_York',
+  joined: 'January 15, 2023',
+}
+
+// Account Stats
+const accountStats = [
+  { 
+    id: '1', 
+    label: 'API Calls', 
+    value: '12.4K', 
+    change: 8, 
+    changeLabel: 'this month',
+    trend: 'up' as const 
+  },
+  { 
+    id: '2', 
+    label: 'Storage Used', 
+    value: '4.2 GB', 
+    change: 12, 
+    changeLabel: 'vs last month',
+    trend: 'up' as const 
+  },
+  { 
+    id: '3', 
+    label: 'Team Members', 
+    value: '12', 
+    change: 2, 
+    changeLabel: 'new this month',
+    trend: 'up' as const 
+  },
+]
+
+// Security Data
+const activeSessions = [
+  {
+    id: '1',
+    device: 'Chrome on MacBook Pro',
+    location: 'New York, US',
+    ipAddress: '192.168.1.1',
+    lastActive: '5 minutes ago',
+    current: true,
+  },
+  {
+    id: '2',
+    device: 'Safari on iPhone 14',
+    location: 'New York, US',
+    ipAddress: '192.168.1.2',
+    lastActive: '2 hours ago',
+    current: false,
+  },
+  // ... more sessions
+]
+
+// API Keys
+const apiKeys = [
+  {
+    id: '1',
+    name: 'Production API',
+    key: 'sk_prod_••••••••••••••1234',
+    created: '2024-01-15',
+    lastUsed: '2 minutes ago',
+    status: 'active',
+  },
+  {
+    id: '2',
+    name: 'Development API',
+    key: 'sk_dev_••••••••••••••5678',
+    created: '2024-01-10',
+    lastUsed: '3 days ago',
+    status: 'active',
+  },
+  // ... more keys
+]
+
+// Billing Data
+const invoices = [
+  {
+    id: 'INV-001',
+    date: '2024-02-01',
+    amount: '$99.00',
+    status: 'Paid',
+    description: 'Pro Plan - Monthly',
+  },
+  {
+    id: 'INV-002',
+    date: '2024-01-01',
+    amount: '$99.00',
+    status: 'Paid',
+    description: 'Pro Plan - Monthly',
+  },
+  // ... more invoices
+]
+```
+
+4. **Implements complete settings layout**:
+```typescript
+export default function SettingsPage() {
+  const [activeSection, setActiveSection] = useState('profile')
+  const [showConfirm, setShowConfirm] = useState<string | null>(null)
+  const [showKeyModal, setShowKeyModal] = useState(false)
+  const [generatedKey, setGeneratedKey] = useState<string | null>(null)
+
+  const renderSection = () => {
+    switch (activeSection) {
+      case 'profile':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h1 className="text-3xl font-bold">Profile</h1>
+              <p className="text-muted-foreground">
+                Manage your personal information
+              </p>
+            </div>
+
+            <DetailCard
+              title="Profile Information"
+              fields={[
+                { label: 'Name', value: profileData.name },
+                { label: 'Email', value: profileData.email },
+                { label: 'Role', value: profileData.role, badge: { text: 'Admin', variant: 'default' } },
+                { label: 'Joined', value: profileData.joined },
+                { label: 'Bio', value: profileData.bio, span: 2 },
+              ]}
+              editable={true}
+              onEdit={(data) => console.log('Update profile:', data)}
+            />
+
+            <AgentForm
+              title="Update Profile"
+              fields={[
+                { name: 'name', label: 'Name', type: 'text', defaultValue: profileData.name, required: true },
+                { name: 'email', label: 'Email', type: 'email', defaultValue: profileData.email, required: true },
+                { name: 'bio', label: 'Bio', type: 'textarea', defaultValue: profileData.bio },
+                { 
+                  name: 'timezone', 
+                  label: 'Timezone', 
+                  type: 'select',
+                  options: [
+                    { label: 'Eastern Time', value: 'America/New_York' },
+                    { label: 'Pacific Time', value: 'America/Los_Angeles' },
+                    { label: 'Central European', value: 'Europe/Paris' },
+                  ],
+                  defaultValue: 'America/New_York',
+                },
+              ]}
+              submitLabel="Save Changes"
+              onSubmit={(data) => console.log('Profile updated:', data)}
+            />
+          </div>
+        )
+
+      case 'account':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h1 className="text-3xl font-bold">Account</h1>
+              <p className="text-muted-foreground">
+                Manage your account settings and usage
+              </p>
+            </div>
+
+            <DetailCard
+              title="Account Details"
+              fields={[
+                { label: 'Account ID', value: 'acc_1234567890', copyable: true },
+                { label: 'Plan', value: 'Pro Plan', badge: { text: 'Active', variant: 'success' } },
+                { label: 'Created', value: 'January 15, 2023' },
+              ]}
+            />
+
+            <div>
+              <h2 className="text-xl font-semibold mb-4">Usage This Month</h2>
+              <StatsGrid stats={accountStats} columns={3} />
+            </div>
+          </div>
+        )
+
+      case 'security':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h1 className="text-3xl font-bold">Security</h1>
+              <p className="text-muted-foreground">
+                Manage your security settings and active sessions
+              </p>
+            </div>
+
+            <DetailCard
+              title="Security Status"
+              fields={[
+                { label: '2FA Status', value: 'Enabled', badge: { text: 'Active', variant: 'success' } },
+                { label: 'Last Password Change', value: '30 days ago' },
+                { label: 'Active Sessions', value: activeSessions.length.toString() },
+              ]}
+            />
+
+            <AgentForm
+              title="Change Password"
+              description="Choose a strong password that you haven't used before"
+              fields={[
+                { name: 'current', label: 'Current Password', type: 'password', required: true },
+                { name: 'new', label: 'New Password', type: 'password', required: true },
+                { name: 'confirm', label: 'Confirm Password', type: 'password', required: true },
+              ]}
+              submitLabel="Update Password"
+              onSubmit={(data) => console.log('Password updated:', data)}
+            />
+
+            <div>
+              <div className="flex justify-between items-center mb-4">
+                <h2 className="text-xl font-semibold">Active Sessions</h2>
+                <Button 
+                  variant="destructive" 
+                  size="sm"
+                  onClick={() => setShowConfirm('revoke-sessions')}
+                >
+                  Revoke All
+                </Button>
+              </div>
+              <DataTable
+                columns={sessionColumns}
+                data={activeSessions}
+                pageSize={5}
+              />
+            </div>
+          </div>
+        )
+
+      case 'notifications':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h1 className="text-3xl font-bold">Notifications</h1>
+              <p className="text-muted-foreground">
+                Configure how you receive notifications
+              </p>
+            </div>
+
+            <AgentForm
+              title="Notification Preferences"
+              fields={[
+                { name: 'email', label: 'Email Notifications', type: 'toggle', defaultValue: true },
+                { name: 'push', label: 'Push Notifications', type: 'toggle', defaultValue: true },
+                { name: 'marketing', label: 'Marketing Emails', type: 'toggle', defaultValue: false },
+                { name: 'security', label: 'Security Alerts', type: 'checkbox', defaultValue: true, required: true },
+                {
+                  name: 'digest',
+                  label: 'Digest Frequency',
+                  type: 'radio',
+                  options: [
+                    { label: 'Never', value: 'never' },
+                    { label: 'Daily', value: 'daily' },
+                    { label: 'Weekly', value: 'weekly' },
+                  ],
+                  defaultValue: 'weekly',
+                },
+              ]}
+              submitLabel="Save Preferences"
+              onSubmit={(data) => console.log('Notifications updated:', data)}
+            />
+          </div>
+        )
+
+      case 'api-keys':
+        return (
+          <div className="space-y-6">
+            <div className="flex justify-between items-center">
+              <div>
+                <h1 className="text-3xl font-bold">API Keys</h1>
+                <p className="text-muted-foreground">
+                  Manage your API keys for integrations
+                </p>
+              </div>
+              <Button onClick={() => setShowKeyModal(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                Generate New Key
+              </Button>
+            </div>
+
+            <DataTable
+              columns={apiKeyColumns}
+              data={apiKeys}
+              pageSize={10}
+            />
+
+            {generatedKey && (
+              <div className="p-4 border rounded-lg bg-muted/50">
+                <h3 className="font-semibold mb-2">Your New API Key</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Save this key securely. You won't be able to see it again.
+                </p>
+                <CodeBlock
+                  code={generatedKey}
+                  language="text"
+                  copyable={true}
+                  showLineNumbers={false}
+                />
+              </div>
+            )}
+          </div>
+        )
+
+      case 'billing':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h1 className="text-3xl font-bold">Billing</h1>
+              <p className="text-muted-foreground">
+                Manage your subscription and billing
+              </p>
+            </div>
+
+            <DetailCard
+              title="Current Plan"
+              fields={[
+                { label: 'Plan', value: 'Pro Plan' },
+                { label: 'Billing Cycle', value: 'Monthly' },
+                { label: 'Next Billing Date', value: 'March 1, 2024' },
+                { label: 'Amount', value: '$99.00/month' },
+              ]}
+              actions={
+                <Button variant="outline">Upgrade Plan</Button>
+              }
+            />
+
+            <MetricCard
+              label="Usage This Month"
+              value="$87.50"
+              trend={{ value: 12, direction: 'up', label: 'vs last month' }}
+            />
+
+            <div>
+              <h2 className="text-xl font-semibold mb-4">Invoice History</h2>
+              <DataTable
+                columns={invoiceColumns}
+                data={invoices}
+                pagination={true}
+                pageSize={10}
+              />
+            </div>
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Settings Sidebar */}
+      <div className="w-64 border-r sticky top-0 h-screen">
+        <div className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Settings</h2>
+          <nav className="space-y-1">
+            {settingsSections.map((section) => (
+              <button
+                key={section.id}
+                onClick={() => setActiveSection(section.id)}
+                className={cn(
+                  'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
+                  activeSection === section.id
+                    ? 'bg-primary text-primary-foreground'
+                    : 'hover:bg-muted'
+                )}
+              >
+                {section.icon}
+                {section.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <main className="flex-1 p-6">
+        <div className="max-w-4xl mx-auto">
+          {renderSection()}
+        </div>
+      </main>
+
+      {/* Confirm Dialogs */}
+      <ConfirmDialog
+        open={showConfirm !== null}
+        title={
+          showConfirm === 'revoke-sessions'
+            ? 'Revoke All Sessions'
+            : 'Revoke API Key'
+        }
+        description={
+          showConfirm === 'revoke-sessions'
+            ? 'Are you sure you want to revoke all active sessions? You will be logged out.'
+            : 'Are you sure you want to revoke this API key? Applications using this key will stop working.'
+        }
+        variant="destructive"
+        onConfirm={() => {
+          console.log('Action confirmed:', showConfirm)
+          setShowConfirm(null)
+        }}
+        onCancel={() => setShowConfirm(null)}
+      />
+    </div>
+  )
+}
+```
+
+5. **Is production-ready** with:
+   - Complete settings sections
+   - Section-based navigation with sticky sidebar
+   - Realistic data for all sections
+   - Form validation
+   - Confirmation dialogs for destructive actions
+   - Secure key display with masking
+   - Proper TypeScript types
+   - Responsive design
+   - Professional settings page styling
+   - State management for modals and sections
+
+## Variations
+
+You can modify this prompt for different settings page types:
+
+- **SaaS App Settings**: Add workspace, integrations, webhooks sections
+- **E-commerce Settings**: Add payment methods, shipping, tax settings
+- **Developer Tools**: Add deployment, environments, logs sections
+- **Team Settings**: Add roles, permissions, invitations sections
+
+Simply add or modify sections to match your application's configuration needs.
+
diff --git a/prompts/pattern-index.md b/prompts/pattern-index.md
new file mode 100644
index 0000000..e98dd4e
--- /dev/null
+++ b/prompts/pattern-index.md
@@ -0,0 +1,936 @@
+# Agent Patterns - Complete Schema Index
+
+This document contains all Zod schemas for every pattern in the Agent Patterns library. Use this as a quick reference when generating UI components.
+
+## Table of Contents
+
+1. [MetricCard](#metriccard)
+2. [Chart](#chart)
+3. [DataTable](#datatable)
+4. [AgentForm](#agentform)
+5. [DetailCard](#detailcard)
+6. [InsightsList](#insightslist)
+7. [StreamingIndicator](#streamingindicator)
+8. [ChatMessage](#chatmessage)
+9. [CommandPalette](#commandpalette)
+10. [KanbanBoard](#kanbanboard)
+11. [Timeline](#timeline)
+12. [Sidebar](#sidebar)
+13. [StatsGrid](#statsgrid)
+14. [ConfirmDialog](#confirmdialog)
+15. [CodeBlock](#codeblock)
+
+---
+
+## MetricCard
+
+**Purpose**: Display key performance indicators with trends and comparisons
+
+**Import**: `import { metricCardSchema, type MetricCardProps } from '@/patterns/metric-card/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  label: z.string()
+    .describe("Display label for the metric (e.g., 'Total Revenue', 'Active Users')"),
+  
+  value: z.union([z.string(), z.number()])
+    .describe("The metric value to display (e.g., '$45,231' or 1250)"),
+  
+  trend: z.object({
+    value: z.number()
+      .describe("Percentage change value (can be positive, negative, or zero)"),
+    label: z.string()
+      .describe("Trend time period description (e.g., 'vs last month', 'from yesterday')"),
+    direction: z.enum(["up", "down", "neutral"])
+      .describe("Trend direction: 'up' (green with ↑), 'down' (red with ↓), 'neutral' (gray with →)")
+  }).optional(),
+  
+  icon: z.any().optional()
+    .describe("Optional React icon component displayed in the top-right corner"),
+  
+  sparkline: z.array(z.number()).optional()
+    .describe("Array of numbers for mini line chart. Example: [10, 15, 13, 18, 20, 25]"),
+  
+  loading: z.boolean().default(false)
+    .describe("Show loading skeleton state"),
+  
+  comparison: z.object({
+    value: z.union([z.string(), z.number()])
+      .describe("Comparison metric value"),
+    label: z.string()
+      .describe("Comparison time period label (e.g., 'last month', 'last year')")
+  }).optional(),
+  
+  size: z.enum(["sm", "md", "lg"]).default("md")
+    .describe("Card size: 'sm' (compact), 'md' (standard), 'lg' (large)"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  label: "Total Revenue",
+  value: "$45,231",
+  trend: { value: 12.5, direction: "up", label: "vs last month" },
+  sparkline: [10, 15, 13, 18, 20, 25]
+}
+```
+
+---
+
+## Chart
+
+**Purpose**: Data visualization using Recharts library
+
+**Import**: `import { chartSchema, type ChartProps } from '@/patterns/chart/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  title: z.string().optional()
+    .describe("Title displayed above the chart"),
+  
+  data: z.array(z.object({
+    label: z.string()
+      .describe("Label for this data point (e.g., month name, category)"),
+    value: z.number()
+      .describe("Numeric value for this data point"),
+    color: z.string().optional()
+      .describe("Custom color. Use CSS color or HSL variables like 'hsl(var(--primary))'")
+  })).min(1),
+  
+  type: z.enum(["bar", "line", "area", "pie", "donut"]).default("bar")
+    .describe("Chart type: bar (comparisons), line (trends), area (cumulative), pie/donut (proportions)"),
+  
+  showLegend: z.boolean().default(true),
+  
+  showGrid: z.boolean().default(true)
+    .describe("Display grid lines (for bar/line/area only)"),
+  
+  colors: z.array(z.string()).optional()
+    .describe("Array of colors for chart elements. Use HSL variables or direct colors"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  title: "Monthly Revenue",
+  type: "bar",
+  data: [
+    { label: "Jan", value: 1200 },
+    { label: "Feb", value: 1900 },
+    { label: "Mar", value: 1500 }
+  ],
+  showLegend: false
+}
+```
+
+---
+
+## DataTable
+
+**Purpose**: Advanced data tables with sorting, filtering, pagination, and selection
+
+**Import**: `import { dataTableSchema, type DataTableProps } from '@/patterns/data-table/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  columns: z.array(z.object({
+    key: z.string()
+      .describe("Column identifier matching data object keys"),
+    header: z.string()
+      .describe("Display text in column header"),
+    accessor: z.function().args(z.record(z.any())).returns(z.any()).optional()
+      .describe("Function to transform row data before display"),
+    className: z.string().optional(),
+    sortable: z.boolean().optional().default(true)
+      .describe("Whether column can be sorted. Click header to sort")
+  })),
+  
+  data: z.array(z.record(z.any()))
+    .describe("Array of data objects. Keys should match column 'key' values"),
+  
+  emptyMessage: z.string().optional().default("No data available"),
+  
+  caption: z.string().optional()
+    .describe("Accessible caption describing table purpose"),
+  
+  ariaLabel: z.string().optional(),
+  
+  searchable: z.boolean().optional().default(false)
+    .describe("Enable search/filter across all columns"),
+  
+  searchPlaceholder: z.string().optional().default("Search..."),
+  
+  pagination: z.boolean().optional().default(false),
+  
+  pageSize: z.number().optional().default(10)
+    .describe("Rows per page. Common: 10, 25, 50, 100"),
+  
+  selectable: z.boolean().optional().default(false)
+    .describe("Enable row selection with checkboxes and select-all"),
+  
+  onSelectionChange: z.function().args(z.array(z.record(z.any()))).returns(z.void()).optional()
+    .describe("Callback when selection changes. Receives array of selected rows"),
+  
+  loading: z.boolean().optional().default(false)
+    .describe("Show loading skeleton with animated placeholder rows"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  columns: [
+    { key: "id", header: "ID" },
+    { key: "name", header: "Name" },
+    { key: "email", header: "Email" }
+  ],
+  data: [
+    { id: 1, name: "John Doe", email: "john@example.com" },
+    { id: 2, name: "Jane Smith", email: "jane@example.com" }
+  ],
+  searchable: true,
+  pagination: true,
+  pageSize: 10,
+  selectable: true
+}
+```
+
+---
+
+## AgentForm
+
+**Purpose**: Forms with Zod validation and multiple field types
+
+**Import**: `import { agentFormSchema, type AgentFormProps } from '@/patterns/agent-form/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  title: z.string().optional(),
+  
+  description: z.string().optional(),
+  
+  fields: z.array(z.object({
+    name: z.string()
+      .describe("Unique field identifier used as key in form data"),
+    label: z.string(),
+    type: z.enum([
+      "text", "email", "number", "textarea", "select", 
+      "checkbox", "date", "password", "radio", "toggle", "file"
+    ]),
+    placeholder: z.string().optional(),
+    required: z.boolean().optional().default(false)
+      .describe("Shows asterisk (*) and validates on submit"),
+    options: z.array(z.object({
+      label: z.string(),
+      value: z.string()
+    })).optional()
+      .describe("Required for 'select' and 'radio' types"),
+    defaultValue: z.union([z.string(), z.number(), z.boolean()]).optional(),
+    validation: z.any().optional()
+      .describe("Optional Zod schema for field-level validation"),
+    description: z.string().optional()
+      .describe("Helper text shown below field")
+  })).min(1),
+  
+  onSubmit: z.function().args(z.record(z.any())).returns(z.union([z.void(), z.promise(z.void())])).optional()
+    .describe("Callback called with valid form data"),
+  
+  submitLabel: z.string().default("Submit"),
+  
+  schema: z.any().optional()
+    .describe("Zod schema for form-level validation. LLMs can generate both fields AND validation!"),
+  
+  showValidationErrors: z.boolean().default(true),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  title: "User Registration",
+  fields: [
+    { name: "name", label: "Name", type: "text", required: true },
+    { name: "email", label: "Email", type: "email", required: true },
+    { name: "role", label: "Role", type: "select", 
+      options: [
+        { label: "Admin", value: "admin" },
+        { label: "User", value: "user" }
+      ]
+    }
+  ],
+  submitLabel: "Register",
+  onSubmit: (data) => console.log(data)
+}
+```
+
+---
+
+## DetailCard
+
+**Purpose**: Display detailed entity information in a grid layout
+
+**Import**: `import { detailCardSchema, type DetailCardProps } from '@/patterns/detail-card/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  title: z.string().optional(),
+  
+  description: z.string().optional(),
+  
+  fields: z.array(z.object({
+    label: z.string()
+      .describe("Field label (e.g., 'Email', 'Created Date')"),
+    value: z.any()
+      .describe("Value to display. Can be string, number, or React element"),
+    span: z.enum([1, 2]).optional().default(1)
+      .describe("Column span: 1 (single) or 2 (full width)"),
+    copyable: z.boolean().optional().default(false)
+      .describe("Show copy button next to value (string values only)"),
+    badge: z.object({
+      text: z.string(),
+      variant: z.enum(["default", "success", "warning", "error"])
+        .describe("default (gray), success (green), warning (yellow), error (red)")
+    }).optional()
+  })).min(1),
+  
+  actions: z.any().optional()
+    .describe("React node for action buttons in header"),
+  
+  editable: z.boolean().default(false)
+    .describe("Enable edit mode with Edit button. Allows inline editing of string values"),
+  
+  onEdit: z.function().args(z.record(z.any())).returns(z.void()).optional()
+    .describe("Callback when Save clicked in edit mode"),
+  
+  loading: z.boolean().default(false),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  title: "User Details",
+  fields: [
+    { label: "Name", value: "John Doe" },
+    { label: "Email", value: "john@example.com", copyable: true },
+    { label: "Status", value: "Active", badge: { text: "Active", variant: "success" } },
+    { label: "Bio", value: "Software engineer", span: 2 }
+  ],
+  editable: true,
+  onEdit: (data) => console.log("Updated:", data)
+}
+```
+
+---
+
+## InsightsList
+
+**Purpose**: Display AI-generated insights with priorities and actions
+
+**Import**: `import { insightsListSchema, type InsightsListProps } from '@/patterns/insights-list/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  insights: z.array(z.object({
+    id: z.string(),
+    title: z.string()
+      .describe("Insight headline"),
+    description: z.string()
+      .describe("Detailed explanation"),
+    type: z.enum(["info", "warning", "success", "error"]).optional().default("info")
+      .describe("info (blue), warning (yellow), success (green), error (red)"),
+    icon: z.any().optional()
+      .describe("Custom icon. Uses default based on type if not provided"),
+    priority: z.enum(["high", "medium", "low"]).optional()
+      .describe("Priority badge. Use with sortByPriority for automatic sorting"),
+    collapsible: z.boolean().optional().default(false)
+      .describe("Can be collapsed/expanded for long descriptions"),
+    actions: z.array(z.object({
+      label: z.string(),
+      onClick: z.function().returns(z.void())
+    })).optional()
+      .describe("Action buttons below description")
+  })),
+  
+  emptyMessage: z.string().default("No insights available"),
+  
+  showFilters: z.boolean().default(false)
+    .describe("Show filter buttons: All, Info, Warnings, Success, Errors"),
+  
+  sortByPriority: z.boolean().default(false)
+    .describe("Auto-sort: high → medium → low"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  insights: [
+    {
+      id: "1",
+      title: "Revenue growth accelerating",
+      description: "Monthly revenue increased by 14.2%",
+      type: "success",
+      priority: "high",
+      actions: [
+        { label: "View Details", onClick: () => {} }
+      ]
+    }
+  ],
+  sortByPriority: true,
+  showFilters: true
+}
+```
+
+---
+
+## StreamingIndicator
+
+**Purpose**: Show processing states, LLM streaming, progress
+
+**Import**: `import { streamingIndicatorSchema, type StreamingIndicatorProps } from '@/patterns/streaming-indicator/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  message: z.string().optional()
+    .describe("Message next to indicator (e.g., 'Analyzing data...', 'Generating response...')"),
+  
+  variant: z.enum(["dots", "pulse", "spinner", "typing", "progress"]).default("dots")
+    .describe(
+      "dots: bouncing dots (general loading)\n" +
+      "pulse: pulsing circles (processing)\n" +
+      "spinner: rotating spinner (traditional)\n" +
+      "typing: 'AI is typing...' (chat/LLM)\n" +
+      "progress: step-by-step with checkmarks (requires 'steps')"
+    ),
+  
+  steps: z.array(z.object({
+    label: z.string()
+      .describe("Step description (e.g., 'Analyzing...', 'Generating...')"),
+    status: z.enum(["pending", "active", "completed"])
+      .describe("pending (gray circle), active (spinning), completed (green checkmark)")
+  })).optional()
+    .describe("Array of steps for 'progress' variant"),
+  
+  tokenCount: z.number().optional()
+    .describe("Number of tokens processed/generated by LLM"),
+  
+  showTokenCounter: z.boolean().default(false)
+    .describe("Show token counter (only if tokenCount provided)"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  variant: "progress",
+  steps: [
+    { label: "Analyzing request...", status: "completed" },
+    { label: "Generating response...", status: "active" },
+    { label: "Formatting output...", status: "pending" }
+  ],
+  tokenCount: 1247,
+  showTokenCounter: true
+}
+```
+
+---
+
+## ChatMessage
+
+**Purpose**: Chat message bubbles with streaming and actions
+
+**Import**: `import { chatMessageSchema, type ChatMessage } from '@/patterns/chat-message/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  role: z.enum(["user", "assistant", "system"])
+    .describe("user (human), assistant (AI), system (notifications)"),
+  
+  content: z.string()
+    .describe("Message text content"),
+  
+  avatar: z.string().optional()
+    .describe("URL or initials for avatar"),
+  
+  timestamp: z.union([z.string(), z.date()]).optional(),
+  
+  isStreaming: z.boolean().optional()
+    .describe("Show typewriter effect for streaming"),
+  
+  status: z.enum(["sending", "sent", "error"]).optional()
+    .describe("Message delivery status"),
+  
+  actions: z.array(z.object({
+    label: z.string(),
+    onClick: z.function().optional()
+  })).optional()
+    .describe("Action buttons below message"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  role: "assistant",
+  content: "I can help you analyze that data. Here's what I found...",
+  avatar: "AI",
+  timestamp: "10:32 AM",
+  actions: [
+    { label: "Copy", onClick: () => {} },
+    { label: "Export", onClick: () => {} }
+  ]
+}
+```
+
+---
+
+## CommandPalette
+
+**Purpose**: ⌘K command menu for quick actions
+
+**Import**: `import { commandPaletteSchema, type CommandPalette } from '@/patterns/command-palette/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  isOpen: z.boolean(),
+  
+  onClose: z.function().optional(),
+  
+  placeholder: z.string().optional()
+    .describe("Search input placeholder"),
+  
+  commands: z.array(z.object({
+    id: z.string(),
+    label: z.string()
+      .describe("Command display name"),
+    description: z.string().optional(),
+    icon: z.any().optional(),
+    keywords: z.array(z.string()).optional()
+      .describe("Keywords for search"),
+    shortcut: z.string().optional()
+      .describe("Keyboard shortcut display (e.g., '⌘K')"),
+    onSelect: z.function().optional(),
+    group: z.string().optional()
+      .describe("Command group/category")
+  })),
+  
+  groups: z.array(z.object({
+    id: z.string(),
+    label: z.string()
+  })).optional()
+    .describe("Command groups for organization"),
+  
+  recentCommands: z.array(z.string()).optional()
+    .describe("Recently used command IDs"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  isOpen: true,
+  onClose: () => {},
+  commands: [
+    {
+      id: "new",
+      label: "New Document",
+      description: "Create a new document",
+      shortcut: "⌘N",
+      group: "actions",
+      onSelect: () => {}
+    }
+  ]
+}
+```
+
+---
+
+## KanbanBoard
+
+**Purpose**: Drag-and-drop kanban boards
+
+**Import**: `import { kanbanBoardSchema, type KanbanBoard } from '@/patterns/kanban-board/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  columns: z.array(z.object({
+    id: z.string(),
+    title: z.string(),
+    color: z.string().optional()
+      .describe("Column color accent"),
+    limit: z.number().optional()
+      .describe("WIP limit for column")
+  })),
+  
+  cards: z.array(z.object({
+    id: z.string(),
+    columnId: z.string()
+      .describe("Current column ID"),
+    title: z.string(),
+    description: z.string().optional(),
+    labels: z.array(z.string()).optional()
+      .describe("Card labels/tags"),
+    assignee: z.string().optional()
+      .describe("Assigned user name or avatar"),
+    priority: z.enum(["low", "medium", "high", "urgent"]).optional()
+  })),
+  
+  onCardMove: z.function().optional()
+    .describe("Callback when card moved between columns"),
+  
+  onCardClick: z.function().optional(),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  columns: [
+    { id: "todo", title: "To Do" },
+    { id: "progress", title: "In Progress", limit: 3 },
+    { id: "done", title: "Done" }
+  ],
+  cards: [
+    {
+      id: "1",
+      columnId: "todo",
+      title: "Design landing page",
+      priority: "high",
+      assignee: "John"
+    }
+  ],
+  onCardMove: (cardId, newColumnId) => {}
+}
+```
+
+---
+
+## Timeline
+
+**Purpose**: Event feeds and activity logs
+
+**Import**: `import { timelineSchema, type Timeline } from '@/patterns/timeline/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  events: z.array(z.object({
+    id: z.string(),
+    title: z.string(),
+    description: z.string().optional(),
+    timestamp: z.union([z.string(), z.date()]),
+    icon: z.any().optional(),
+    status: z.enum(["completed", "in-progress", "pending", "cancelled"]).optional(),
+    user: z.string().optional()
+      .describe("User associated with event")
+  })),
+  
+  orientation: z.enum(["vertical", "horizontal"]).default("vertical"),
+  
+  showTime: z.boolean().default(true),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  events: [
+    {
+      id: "1",
+      title: "Project started",
+      description: "Kickoff meeting completed",
+      timestamp: "2024-02-15T10:00:00",
+      status: "completed",
+      user: "Sarah Johnson"
+    }
+  ],
+  orientation: "vertical",
+  showTime: true
+}
+```
+
+---
+
+## Sidebar
+
+**Purpose**: Navigation sidebar with nested items
+
+**Import**: `import { sidebarSchema, type Sidebar } from '@/patterns/sidebar/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  items: z.array(z.object({
+    id: z.string(),
+    label: z.string(),
+    icon: z.any().optional(),
+    href: z.string().optional()
+      .describe("Navigation link"),
+    badge: z.string().optional()
+      .describe("Badge text (count, status, etc)"),
+    children: z.array(z.any()).optional()
+      .describe("Nested sub-items"),
+    active: z.boolean().optional()
+  })),
+  
+  header: z.object({
+    title: z.string(),
+    subtitle: z.string().optional(),
+    logo: z.any().optional()
+  }).optional(),
+  
+  footer: z.any().optional()
+    .describe("Footer content component"),
+  
+  collapsible: z.boolean().default(true),
+  
+  defaultCollapsed: z.boolean().default(false),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  header: {
+    title: "My App",
+    subtitle: "Dashboard",
+    logo: <Logo />
+  },
+  items: [
+    {
+      id: "home",
+      label: "Home",
+      icon: <Home />,
+      href: "/",
+      active: true
+    },
+    {
+      id: "settings",
+      label: "Settings",
+      icon: <Settings />,
+      children: [
+        { id: "profile", label: "Profile", href: "/settings/profile" }
+      ]
+    }
+  ],
+  collapsible: true
+}
+```
+
+---
+
+## StatsGrid
+
+**Purpose**: Responsive grid of statistics
+
+**Import**: `import { statsGridSchema, type StatsGrid } from '@/patterns/stats-grid/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  stats: z.array(z.object({
+    id: z.string(),
+    label: z.string(),
+    value: z.union([z.string(), z.number()]),
+    change: z.number().optional()
+      .describe("Percentage change (e.g., 12.5 for +12.5%)"),
+    changeLabel: z.string().optional()
+      .describe("Change description (e.g., 'vs last month')"),
+    icon: z.any().optional(),
+    trend: z.enum(["up", "down", "neutral"]).optional(),
+    color: z.enum(["default", "success", "warning", "danger"]).optional()
+  })),
+  
+  columns: z.number().min(1).max(6).default(3)
+    .describe("Number of columns in grid"),
+  
+  showDividers: z.boolean().default(true),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  stats: [
+    {
+      id: "1",
+      label: "Total Users",
+      value: "12.5K",
+      change: 12,
+      changeLabel: "vs last month",
+      trend: "up",
+      color: "success"
+    }
+  ],
+  columns: 4,
+  showDividers: true
+}
+```
+
+---
+
+## ConfirmDialog
+
+**Purpose**: Confirmation modals for important actions
+
+**Import**: `import { confirmDialogSchema, type ConfirmDialog } from '@/patterns/confirm-dialog/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  title: z.string(),
+  
+  description: z.string()
+    .describe("Dialog description/message"),
+  
+  confirmLabel: z.string().default("Confirm"),
+  
+  cancelLabel: z.string().default("Cancel"),
+  
+  variant: z.enum(["default", "destructive", "warning"]).default("default")
+    .describe("Dialog visual style"),
+  
+  icon: z.any().optional(),
+  
+  open: z.boolean().default(false),
+  
+  onConfirm: z.function().optional(),
+  
+  onCancel: z.function().optional(),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  open: true,
+  title: "Delete User",
+  description: "Are you sure you want to delete this user? This action cannot be undone.",
+  variant: "destructive",
+  confirmLabel: "Delete",
+  cancelLabel: "Cancel",
+  onConfirm: () => console.log("Confirmed"),
+  onCancel: () => console.log("Cancelled")
+}
+```
+
+---
+
+## CodeBlock
+
+**Purpose**: Syntax-highlighted code display
+
+**Import**: `import { codeBlockSchema, type CodeBlock } from '@/patterns/code-block/schema'`
+
+**Schema**:
+```typescript
+z.object({
+  code: z.string()
+    .describe("Code content to display"),
+  
+  language: z.string().default("typescript")
+    .describe("Programming language for syntax highlighting"),
+  
+  filename: z.string().optional()
+    .describe("Optional filename to display"),
+  
+  showLineNumbers: z.boolean().default(true),
+  
+  highlightLines: z.array(z.number()).optional()
+    .describe("Line numbers to highlight (1-based)"),
+  
+  startLineNumber: z.number().default(1)
+    .describe("Starting line number"),
+  
+  copyable: z.boolean().default(true)
+    .describe("Show copy button"),
+  
+  collapsible: z.boolean().default(false)
+    .describe("Code block can be collapsed"),
+  
+  maxHeight: z.string().optional()
+    .describe("Maximum height (e.g., '400px')"),
+  
+  className: z.string().optional()
+})
+```
+
+**Example**:
+```typescript
+{
+  code: "const greeting = 'Hello, World!';\nconsole.log(greeting);",
+  language: "typescript",
+  filename: "example.ts",
+  showLineNumbers: true,
+  copyable: true,
+  highlightLines: [2]
+}
+```
+
+---
+
+## Usage Notes
+
+1. **All patterns use Tailwind CSS** and follow shadcn/ui design principles
+2. **Import paths** use `@/patterns/[pattern-name]/component` and `@/patterns/[pattern-name]/schema`
+3. **Zod validation** is built-in - use `.parse()` to validate props
+4. **TypeScript types** are exported from each schema file
+5. **Icons** can be any React component (lucide-react recommended)
+6. **Functions** should be properly typed with arguments and return values
+7. **Responsive design** is built into all patterns - use Tailwind responsive classes
+
+## Quick Pattern Selection
+
+- **Displaying metrics?** → MetricCard, StatsGrid
+- **Visualizing data?** → Chart (5 types available)
+- **Managing lists/tables?** → DataTable
+- **User input?** → AgentForm
+- **Showing details?** → DetailCard
+- **AI insights?** → InsightsList, StreamingIndicator
+- **Chat interface?** → ChatMessage, StreamingIndicator
+- **Navigation?** → Sidebar, CommandPalette
+- **Project management?** → KanbanBoard, Timeline
+- **Code display?** → CodeBlock
+- **Confirmations?** → ConfirmDialog
+
diff --git a/prompts/system-prompt.md b/prompts/system-prompt.md
new file mode 100644
index 0000000..ecb2d1d
--- /dev/null
+++ b/prompts/system-prompt.md
@@ -0,0 +1,191 @@
+# Agent Patterns - System Prompt for LLMs
+
+You are a UI generator that creates React components using the **Agent Patterns** library. This library provides 15 production-ready, copy-paste UI patterns specifically designed for AI-generated interfaces.
+
+## Core Principles
+
+1. **Zero Dependencies**: All patterns are self-contained. No external UI libraries required (except Recharts for charts).
+2. **Zod-First**: Every pattern has a Zod schema that defines its props. Use these schemas for validation.
+3. **Copy-Paste Ready**: Generate complete, working components that users can copy directly into their codebase.
+4. **Tailwind + shadcn/ui**: All styling uses Tailwind CSS and follows shadcn/ui design patterns.
+5. **TypeScript**: Always generate TypeScript code with proper types.
+
+## Available Patterns
+
+### 1. **MetricCard** - Display key metrics with trends
+Use for: KPIs, dashboards, stats, analytics
+Features: Trend indicators, sparklines, comparisons, loading states
+Common in: Executive dashboards, analytics views, monitoring panels
+
+### 2. **Chart** - Data visualization with Recharts
+Use for: Graphs, analytics, trends, data visualization
+Types: bar, line, area, pie, donut
+Features: Responsive, tooltips, legends, grid lines
+Common in: Analytics dashboards, reports, data exploration
+
+### 3. **DataTable** - Advanced data tables
+Use for: Lists, records, user management, content management
+Features: Sorting, filtering, pagination, row selection, loading states
+Common in: Admin panels, data management, CRM interfaces
+
+### 4. **AgentForm** - Forms with Zod validation
+Use for: User input, settings, configuration, data entry
+Field types: text, email, number, textarea, select, checkbox, date, password, radio, toggle, file
+Features: Automatic validation from Zod schema, error states, loading states
+Common in: Settings pages, user creation, data input forms
+
+### 5. **DetailCard** - Display detailed information
+Use for: User profiles, order details, entity information, record details
+Features: Grid layout, copyable values, badges, edit mode, loading states
+Common in: Profile pages, detail views, records display
+
+### 6. **InsightsList** - Display AI-generated insights
+Use for: Recommendations, alerts, analysis results, notifications
+Types: info, warning, success, error
+Features: Priority sorting, collapsible details, action buttons, filters
+Common in: AI dashboards, analytics views, monitoring alerts
+
+### 7. **StreamingIndicator** - Show processing/streaming states
+Use for: LLM responses, data processing, loading states, progress tracking
+Variants: dots, pulse, spinner, typing, progress
+Features: Multi-step progress, token counter, custom messages
+Common in: Chat interfaces, AI processing, background tasks
+
+### 8. **ChatMessage** - Chat bubbles with streaming
+Use for: Chat interfaces, messaging, conversation UIs, AI assistants
+Roles: user, assistant, system
+Features: Streaming text effect, avatars, timestamps, status indicators, action buttons
+Common in: AI chatbots, support chat, messaging apps
+
+### 9. **CommandPalette** - ⌘K command menu
+Use for: Quick actions, navigation, search, keyboard shortcuts
+Features: Fuzzy search, command groups, recent commands, keyboard shortcuts display
+Common in: Developer tools, productivity apps, admin panels
+
+### 10. **KanbanBoard** - Drag-and-drop boards
+Use for: Project management, workflow tracking, task organization
+Features: Draggable cards, multiple columns, WIP limits, priority badges
+Common in: Project management, CRM pipelines, issue tracking
+
+### 11. **Timeline** - Event/activity feeds
+Use for: Activity logs, history, event tracking, audit trails
+Orientations: vertical, horizontal
+Features: Status indicators, user attribution, timestamps, icons
+Common in: Activity feeds, audit logs, order tracking
+
+### 12. **Sidebar** - Navigation sidebar
+Use for: App navigation, menu, hierarchical navigation
+Features: Collapsible, nested items, badges, icons, active state
+Common in: Dashboard layouts, admin panels, multi-page apps
+
+### 13. **StatsGrid** - Grid of statistics
+Use for: Multiple metrics display, dashboard headers, overview sections
+Features: Responsive grid, trend indicators, icons, dividers
+Common in: Dashboard headers, overview pages, analytics sections
+
+### 14. **ConfirmDialog** - Confirmation modals
+Use for: Destructive actions, confirmations, warnings, important decisions
+Variants: default, destructive, warning
+Features: Custom icons, configurable buttons, accessibility
+Common in: Delete confirmations, action confirmations, warning dialogs
+
+### 15. **CodeBlock** - Syntax-highlighted code display
+Use for: Documentation, code examples, API responses, logs
+Features: Syntax highlighting, line numbers, copy button, collapsible, highlight specific lines
+Common in: Developer tools, documentation, API explorers, log viewers
+
+## Pattern Selection Guidelines
+
+When the user asks you to build a UI, select patterns based on:
+
+1. **Dashboard/Analytics** → MetricCard + Chart + DataTable + StatsGrid
+2. **Admin Panel** → Sidebar + DataTable + DetailCard + AgentForm + ConfirmDialog
+3. **AI Chat Interface** → ChatMessage + StreamingIndicator + CommandPalette
+4. **Settings/Configuration** → Sidebar + AgentForm + DetailCard
+5. **Data Management** → DataTable + DetailCard + AgentForm + ConfirmDialog
+6. **Monitoring/Alerts** → InsightsList + MetricCard + Timeline
+7. **Project Management** → KanbanBoard + Timeline + StatsGrid
+8. **Developer Tools** → CodeBlock + CommandPalette + DataTable
+
+## Code Generation Rules
+
+1. **Always import from the pattern directory**: 
+   ```typescript
+   import { MetricCard } from '@/patterns/metric-card/component'
+   import { metricCardSchema } from '@/patterns/metric-card/schema'
+   ```
+
+2. **Use Zod for validation when applicable**:
+   ```typescript
+   const props = metricCardSchema.parse({
+     label: "Revenue",
+     value: "$45,231",
+     trend: { value: 12, direction: "up", label: "vs last month" }
+   })
+   ```
+
+3. **Generate realistic, production-ready data** - Don't use placeholder text like "Lorem ipsum"
+
+4. **Use proper Tailwind classes** for layout and spacing
+
+5. **Include error boundaries and loading states** where appropriate
+
+6. **Make it responsive** - Use Tailwind's responsive classes (sm:, md:, lg:, xl:)
+
+## Example Response Pattern
+
+When a user asks: "Build me a revenue dashboard"
+
+Your response should:
+1. **Identify needed patterns**: MetricCard (3x for KPIs), Chart (revenue trend), DataTable (transactions)
+2. **Generate the component code** with proper imports
+3. **Include realistic data** (no placeholders)
+4. **Add proper TypeScript types**
+5. **Make it production-ready**
+
+## File Structure
+
+When generating a complete page/component:
+
+```
+my-dashboard.tsx          # Main component
+├── Imports from patterns
+├── Data/state management
+├── Component composition
+└── Exports
+```
+
+## Response Format
+
+When generating UI:
+
+```typescript
+// Brief description of what you're building
+// List of patterns used
+
+import { Pattern1 } from '@/patterns/...'
+import { Pattern2 } from '@/patterns/...'
+
+// Full component code here
+// With realistic data
+// Proper TypeScript types
+// Production-ready styling
+```
+
+## Remember
+
+- You have 15 patterns at your disposal
+- Each pattern has extensive features - use them!
+- Generate complete, working code - not pseudocode
+- Use realistic data - not placeholders
+- Make it look good - this is what users will screenshot and share
+- Always consider responsive design
+- Include proper accessibility attributes
+- Use loading states when data might be async
+- Add error handling where appropriate
+
+## Quick Reference
+
+See `pattern-index.md` for complete Zod schemas of all 15 patterns.
+See specific `build-*.md` files for complete examples of common layouts.
+