real-prototypes-skill 2.0.0

package/.claude/skills/real-prototypes-skill/docs/schemas/manifest.md

@@ -0,0 +1,169 @@
+# Manifest Schema
+
+The `manifest.json` file is generated by the capture engine and describes all captured pages, their assets, and metadata.
+
+## Complete Example
+
+```json
+{
+  "platform": {
+    "name": "My Platform",
+    "baseUrl": "https://app.example.com",
+    "capturedAt": "2024-01-15T10:30:00.000Z"
+  },
+  "pages": [
+    {
+      "name": "dashboard",
+      "url": "/dashboard",
+      "screenshot": "screenshots/dashboard-desktop.png",
+      "html": "html/dashboard.html",
+      "description": "Main dashboard page",
+      "captures": [
+        {
+          "viewport": "desktop",
+          "screenshot": "screenshots/dashboard-desktop.png"
+        },
+        {
+          "viewport": "tablet",
+          "screenshot": "screenshots/dashboard-tablet.png"
+        },
+        {
+          "viewport": "mobile",
+          "screenshot": "screenshots/dashboard-mobile.png"
+        }
+      ],
+      "tabs": [
+        {
+          "name": "Overview",
+          "screenshot": "screenshots/dashboard-tab-overview.png"
+        },
+        {
+          "name": "Activity",
+          "screenshot": "screenshots/dashboard-tab-activity.png"
+        }
+      ],
+      "interactions": [
+        {
+          "type": "dropdown",
+          "name": "Actions",
+          "screenshot": "screenshots/dashboard-dropdown-actions.png"
+        }
+      ]
+    },
+    {
+      "name": "accounts-list",
+      "url": "/accounts",
+      "screenshot": "screenshots/accounts-list-desktop.png",
+      "html": "html/accounts-list.html",
+      "description": "accounts list page",
+      "captures": [
+        {
+          "viewport": "desktop",
+          "screenshot": "screenshots/accounts-list-desktop.png"
+        }
+      ],
+      "tabs": [],
+      "interactions": []
+    }
+  ],
+  "stats": {
+    "pagesDiscovered": 12,
+    "pagesCaptured": 12,
+    "screenshotsTaken": 36,
+    "htmlCaptured": 12,
+    "interactionsPerformed": 8,
+    "errorsEncountered": 0
+  },
+  "designTokens": "design-tokens.json"
+}
+```
+
+## Schema Reference
+
+### Root Object
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `platform` | object | Yes | Platform metadata |
+| `pages` | array | Yes | List of captured pages |
+| `stats` | object | Yes | Capture statistics |
+| `designTokens` | string | Yes | Path to design tokens file |
+
+### `platform`
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | Yes | Platform name |
+| `baseUrl` | string | Yes | Base URL of the platform |
+| `capturedAt` | string | Yes | ISO 8601 timestamp of capture |
+
+### `pages[]`
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | **Yes** | Unique page identifier (derived from URL path) |
+| `url` | string | Yes | URL path (relative to baseUrl) |
+| `screenshot` | string | Yes | Path to primary screenshot (relative to references dir) |
+| `html` | string | No | Path to HTML file |
+| `description` | string | No | Auto-generated page description |
+| `captures` | array | Yes | Screenshots at different viewports |
+| `tabs` | array | No | Tab state captures |
+| `interactions` | array | No | Interaction state captures |
+
+**Important:** The `name` field is required. Validation will fail if pages are missing names.
+
+### `pages[].captures[]`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `viewport` | string | Viewport name (e.g., "desktop", "mobile") |
+| `screenshot` | string | Path to screenshot file |
+
+### `pages[].tabs[]`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `name` | string | Tab label text |
+| `screenshot` | string | Path to screenshot of tab content |
+
+### `pages[].interactions[]`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `type` | string | Interaction type: `"dropdown"`, `"modal"`, `"expanded"` |
+| `name` | string | Element name/label |
+| `screenshot` | string | Path to screenshot of interaction state |
+
+### `stats`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `pagesDiscovered` | number | Total pages found during discovery |
+| `pagesCaptured` | number | Pages successfully captured |
+| `screenshotsTaken` | number | Total screenshots taken |
+| `htmlCaptured` | number | HTML files saved |
+| `interactionsPerformed` | number | Interactive elements captured |
+| `errorsEncountered` | number | Errors during capture |
+
+## Validation Requirements
+
+For validation to pass, the manifest must have:
+
+1. **All pages have a `name` field** - This is used for page identification
+2. **All referenced screenshots exist** - Paths in `screenshot` fields must be valid
+3. **Minimum page count** - Default is 5 pages (configurable)
+4. **List-detail pattern** - If list pages exist, detail pages should be captured
+
+## File Path Convention
+
+All paths in the manifest are relative to the references directory:
+
+```
+references/
+  manifest.json          # This file
+  design-tokens.json     # Referenced as "design-tokens.json"
+  screenshots/
+    dashboard-desktop.png  # Referenced as "screenshots/dashboard-desktop.png"
+  html/
+    dashboard.html         # Referenced as "html/dashboard.html"
+```

package/.claude/skills/real-prototypes-skill/examples/CLAUDE.md.example

@@ -0,0 +1,73 @@
+# Real Prototypes - Example CLAUDE.md Configuration
+
+Copy this to your project's CLAUDE.md and fill in your platform details.
+
+---
+
+## Platform Credentials
+
+```
+# Your platform's base URL (no trailing slash)
+PLATFORM_URL=https://app.example.com
+
+# Login credentials (if the platform requires authentication)
+PLATFORM_EMAIL=your-email@example.com
+PLATFORM_PASSWORD=your-secure-password
+```
+
+## Capture Settings
+
+```
+# Pages to capture
+# Option 1: Specify pages manually (comma-separated paths)
+PAGES_TO_CAPTURE=/dashboard,/settings,/profile,/users
+
+# Option 2: Auto-discover all pages
+# PAGES_TO_CAPTURE=auto
+
+# Option 3: Disable auto-capture (only capture specified pages)
+# PAGES_TO_CAPTURE=off
+
+# Capture mode
+# "full"   = capture all discovered pages up to MAX_PAGES
+# "manual" = only capture pages listed in PAGES_TO_CAPTURE
+CAPTURE_MODE=manual
+
+# Maximum pages to capture in auto/full mode
+MAX_PAGES=50
+
+# Viewport dimensions (pixels)
+VIEWPORT_WIDTH=1920
+VIEWPORT_HEIGHT=1080
+
+# Wait time after page load before capturing (milliseconds)
+# Increase this if pages have slow-loading content or animations
+WAIT_AFTER_LOAD=2000
+```
+
+## Advanced Settings (Optional)
+
+```
+# Maximum wait timeout (milliseconds)
+MAX_WAIT_TIMEOUT=10000
+
+# Retry settings
+MAX_RETRIES=3
+TIMEOUT_RETRIES=2
+RETRY_DELAY_BASE=1000
+
+# Validation thresholds
+MIN_SCREENSHOT_SIZE=102400
+MIN_HTML_SIZE=10240
+MIN_PAGE_HEIGHT=500
+
+# Exclude URL patterns from capture (comma-separated)
+# EXCLUDE_PATTERNS=/logout,/signout,/delete,/admin
+```
+
+## Usage Notes
+
+- The skill will read these values when running the capture phase
+- Credentials are only used locally for browser automation
+- Never commit this file to version control with real credentials
+- Add CLAUDE.md to your .gitignore

package/.claude/skills/real-prototypes-skill/examples/amazon-chatbot/CLAUDE.md

@@ -0,0 +1,136 @@
+# Amazon India Shopping Chatbot - Example
+
+This example demonstrates the Platform Prototype Skill by creating a fully functional shopping chatbot for Amazon India.
+
+## Project Configuration
+
+```
+PLATFORM_URL=https://www.amazon.in/
+PLATFORM_EMAIL=
+PLATFORM_PASSWORD=
+```
+
+## Capture Settings
+
+```
+PAGES_TO_CAPTURE=/homepage
+CAPTURE_MODE=manual
+VIEWPORT_WIDTH=1920
+VIEWPORT_HEIGHT=1080
+WAIT_AFTER_LOAD=2000
+```
+
+## Feature Request
+
+The original request was:
+
+> "I want to add a new chatbot window in Amazon where users can find any product and place order from there itself."
+
+## What Was Generated
+
+The skill generated a complete Next.js prototype with:
+
+### Components
+- **ChatbotWindow.tsx** - Main chatbot with AI-like conversation
+- **ChatbotButton.tsx** - Floating action button
+- **ProductCard.tsx** - Product display with images and pricing
+
+### Features
+- 🔍 **Smart Product Search** - 11 products across 4 categories (headphones, laptops, phones, watches)
+- 🛒 **Shopping Cart** - Add items, manage quantities, real-time counter
+- 📦 **Order Tracking** - Place orders and track status
+- 💰 **Price Filtering** - Search "laptop under 50000" works
+- ⚡ **Buy Now** - Quick checkout flow
+- 🎯 **Action Buttons** - Contextual quick actions
+
+### Design Accuracy
+- Exact Amazon colors captured (#FF9900, #131921, #FFD814)
+- Typography matched (Amazon Ember font family)
+- Spacing and layout from design tokens
+- Mobile responsive design
+
+## File Structure
+
+```
+amazon-chatbot/
+├── FEATURES.md                      ← Feature documentation
+├── references/
+│   ├── design-tokens.json          ← Captured colors, fonts, spacing
+│   └── screenshots/
+│       ├── homepage-viewport.png   ← Original Amazon homepage
+│       ├── prototype-chatbot-final.png  ← Generated chatbot
+│       └── prototype-fullpage-v2.png    ← Full prototype page
+└── prototype/
+    ├── src/
+    │   ├── app/
+    │   │   ├── page.tsx           ← Homepage with navbar
+    │   │   ├── layout.tsx
+    │   │   └── globals.css
+    │   └── components/
+    │       └── chatbot/
+    │           ├── ChatbotWindow.tsx   ← Main chatbot logic
+    │           ├── ChatbotButton.tsx   ← FAB button
+    │           ├── ProductCard.tsx     ← Product display
+    │           ├── types.ts            ← TypeScript interfaces
+    │           └── index.ts
+    ├── package.json
+    ├── tailwind.config.js
+    └── tsconfig.json
+```
+
+## How to Run
+
+```bash
+cd examples/amazon-chatbot/prototype
+npm install
+npm run dev
+```
+
+Open http://localhost:3000 and click the chatbot button!
+
+## Key Implementation Details
+
+### Product Database
+11 products with realistic data:
+- Sony WH-1000XM4 headphones
+- Apple AirPods Pro
+- Dell XPS 15 laptop
+- MacBook Pro M3
+- iPhone 15 Pro
+- Samsung Galaxy S24
+- Apple Watch Series 9
+- Samsung Galaxy Watch 6
+- Boat Airdopes
+- HP Pavilion
+- OnePlus 11
+
+### Smart Search Algorithm
+- Category detection (headphone → headphones)
+- Brand matching (Sony, Apple, Dell, etc.)
+- Price filtering with natural language
+- Relevance ranking
+
+### State Management
+- Cart stored in React state
+- Order history tracking
+- Real-time navbar counter updates
+
+## Try These Prompts
+
+In the chatbot, try:
+- "Show me headphones"
+- "I want a laptop under 50000"
+- "Show me iphone"
+- "Add to cart" (after seeing products)
+- "Show my cart"
+- "Track my orders" (after placing order)
+
+## Generated with Platform Prototype Skill
+
+This entire prototype was generated by describing the feature to Claude Code with the Platform Prototype Skill installed. The skill:
+1. Captured Amazon India's design
+2. Extracted colors and typography
+3. Generated matching React components
+4. Implemented full functionality
+
+Total development time: ~10 minutes

package/.claude/skills/real-prototypes-skill/examples/amazon-chatbot/FEATURES.md

@@ -0,0 +1,222 @@
+# Amazon Chatbot - Functional Features
+
+## Overview
+The Amazon Shopping Assistant chatbot now has full functionality for product search, cart management, order tracking, and checkout.
+
+---
+
+## ✨ Features Implemented
+
+### 1. **Smart Product Search**
+- **11 products** across 4 categories (Headphones, Laptops, Phones, Smartwatches)
+- **Intelligent category detection** from search queries:
+  - "laptop" → shows laptop products
+  - "wireless headphones" → shows headphone products
+  - "5G phone" → shows phone products
+  - "smartwatch" → shows watch products
+- **Brand search** - search by specific brands (Sony, Samsung, boAt, etc.)
+- **Price filtering** - search "laptop under 50000" to filter by price
+- **Relevance ranking** - products sorted by rating × review count
+
+### 2. **Shopping Cart Management**
+- **Add to Cart** functionality
+- **Cart counter** updates in chatbot header and main navbar
+- **View Cart** command shows all items with quantities and total
+- **Cart persistence** throughout the session
+- **Clear Cart** option
+- **Interactive cart actions**:
+  - "view cart" or "cart" → shows cart summary
+  - Quick action buttons after adding items
+
+### 3. **Order Tracking System**
+- **Order placement** with unique order IDs (e.g., ORD12345678)
+- **Order status** tracking (confirmed → shipped → delivered)
+- **Estimated delivery dates** (3 days from order)
+- **Order history** view with all past orders
+- **Quick order tracking**:
+  - Click "Track Order" button
+  - Type "track my order" or "orders"
+
+### 4. **Checkout Flow**
+- **Buy Now** button for instant purchase
+- **Delivery address** display (Bengaluru 562130)
+- **Payment method selection**:
+  - Cash on Delivery
+  - UPI
+  - Credit/Debit Card
+  - Net Banking
+- **Order confirmation** with all details
+- **Confirm/Cancel** action buttons
+
+### 5. **Interactive Action Buttons**
+All bot responses include contextual action buttons:
+- **After adding to cart**: "View Cart" | "Continue Shopping"
+- **Empty cart**: "Browse Laptops" | "Browse Phones" | "Browse Headphones"
+- **Checkout**: "Confirm Order" | "Cancel"
+- **Cart management**: "Proceed to Checkout" | "Clear Cart"
+
+### 6. **Quick Action Shortcuts**
+Two persistent buttons in the chatbot header:
+- **🔍 Find Products** - Shows search suggestions
+- **📦 Track Order** - Displays order history
+
+---
+
+## 🎯 Example Conversations
+
+### Product Search
+```
+User: wireless headphones
+Bot: I found 3 great options for "wireless headphones"
+     [Shows boAt, Sony, JBL headphones]
+```
+
+### Price Filter
+```
+User: laptop under 50000
+Bot: I found 3 great options for "laptop under 50000"
+     [Shows HP, Dell, Lenovo laptops under ₹50,000]
+```
+
+### Add to Cart
+```
+User: [Clicks "Add to Cart" on Sony headphones]
+Bot: ✓ Added "Sony WH-1000XM4..." to your cart! You now have 1 items.
+     [View Cart] [Continue Shopping]
+```
+
+### View Cart
+```
+User: view cart
+Bot: 🛒 Your Cart (2 items)
+     • Sony WH-1000XM4... (₹19,990 × 1)
+     • boAt Rockerz 450... (₹1,299 × 1)
+     Total: ₹21,289
+     [Proceed to Checkout] [Clear Cart]
+```
+
+### Place Order
+```
+User: [Clicks "Buy Now" on HP laptop]
+Bot: Processing checkout for "HP 15s Ryzen 5..." at ₹42,990
+
+     📍 Delivery Address
+     Bengaluru 562130
+
+     💳 Payment Method
+     Cash on Delivery / UPI / Card
+
+     Expected delivery: 2-3 days
+     Total: ₹42,990
+     [Confirm Order] [Cancel]
+
+User: [Clicks "Confirm Order"]
+Bot: 🎉 Order confirmed!
+     Order ID: ORD12345678
+     Product: HP 15s Ryzen 5...
+     Amount: ₹42,990
+     Expected Delivery: 1/31/2026
+```
+
+### Track Orders
+```
+User: track my order
+Bot: 📦 Your Orders
+
+     ✓ ORD12345678
+        HP 15s Ryzen 5 5500U 15.6 inch FHD...
+        Status: CONFIRMED
+        Delivery: 1/31/2026
+```
+
+---
+
+## 📊 Product Database
+
+### Categories & Counts
+- **Headphones**: 3 products (₹1,299 - ₹19,990)
+- **Laptops**: 3 products (₹38,490 - ₹49,990)
+- **Phones**: 3 products (₹12,990 - ₹17,999)
+- **Smartwatches**: 2 products (₹2,499 - ₹2,999)
+
+### Brands Available
+- boAt, Sony, JBL
+- HP, Dell, Lenovo
+- Samsung, OnePlus, Redmi
+- Fire-Boltt, Noise
+
+---
+
+## 🛠️ Technical Implementation
+
+### State Management
+- **Cart**: `CartItem[]` with product and quantity
+- **Orders**: `Order[]` with status and delivery tracking
+- **Messages**: `Message[]` with products and action buttons
+- **Price Filter**: Optional min/max price range
+
+### Search Algorithm
+1. **Keyword Matching**: Searches title, brand, category
+2. **Category Detection**: Maps keywords to product categories
+3. **Price Filtering**: Applies min/max price constraints
+4. **Relevance Ranking**: Sorts by `rating × log(reviewCount + 1)`
+5. **Limit Results**: Returns top 5 matches
+
+### Cart Updates
+- Updates chatbot header badge
+- Syncs with main navbar cart counter
+- Persists across searches
+- Supports quantity increment for duplicate products
+
+---
+
+## 🎨 UI Features
+
+### Cart Badge
+- Red notification badge on chatbot header
+- Shows total item count
+- Updates in real-time
+
+### Action Buttons
+- Yellow Amazon-style buttons
+- Contextual actions based on conversation
+- Hover effects matching Amazon design
+
+### Message Formatting
+- **User messages**: Dark navy background (right-aligned)
+- **Bot messages**: White background (left-aligned)
+- **Emojis**: ✓ (success), 🛒 (cart), 📦 (orders), 🎉 (celebration)
+- **Bold text**: Order IDs, totals, headers
+- **Multi-line formatting**: Preserved with `whiteSpace: 'pre-line'`
+
+---
+
+## 🚀 Usage
+
+```bash
+# Run the prototype
+cd projects/amazon-chatbot/prototype
+npm run dev
+```
+
+Visit http://localhost:3000 and click the orange chat button!
+
+### Try These Commands:
+- `wireless headphones`
+- `laptop under 50000`
+- `5G phone`
+- `view cart`
+- `track my order`
+
+---
+
+## 📈 Future Enhancements (Not Yet Implemented)
+- Product comparison
+- Save for later
+- Wishlist management
+- Product reviews in chat
+- Voice search
+- Image search
+- Live chat with support agent handoff
+- Personalized recommendations based on history
+- Multi-language support

package/.claude/skills/real-prototypes-skill/examples/amazon-chatbot/README.md

@@ -0,0 +1,82 @@
+# Amazon India Shopping Chatbot Example
+
+A fully functional shopping chatbot prototype generated using the Platform Prototype Skill.
+
+## What This Example Shows
+
+This example demonstrates how the Platform Prototype Skill can:
+- Capture an existing platform's design (Amazon India)
+- Extract exact colors, fonts, and spacing
+- Generate a pixel-perfect Next.js prototype
+- Implement complex functionality (search, cart, orders)
+
+## Quick View
+
+### Original Platform
+![Amazon India Homepage](references/screenshots/homepage-viewport.png)
+
+### Generated Chatbot
+![Shopping Chatbot](references/screenshots/prototype-chatbot-final.png)
+
+### Full Prototype
+![Full Page](references/screenshots/prototype-fullpage-v2.png)
+
+## Features
+
+- Smart product search across 11 products
+- Shopping cart with real-time counter
+- Order tracking system
+- Price filtering ("laptop under 50000")
+- Buy Now checkout flow
+- Action buttons for quick interactions
+
+## Design Tokens
+
+Captured from Amazon India:
+
+```json
+{
+  "colors": {
+    "primary": {
+      "orange": "#FF9900",
+      "dark": "#131921"
+    },
+    "accent": {
+      "yellow": "#FFD814"
+    }
+  },
+  "typography": {
+    "fontFamily": "Amazon Ember, Arial, sans-serif"
+  }
+}
+```
+
+See full tokens in [references/design-tokens.json](references/design-tokens.json)
+
+## Files Included
+
+- `FEATURES.md` - Complete feature documentation
+- `CLAUDE.md` - Project setup and configuration
+- `references/design-tokens.json` - Captured design tokens
+- `references/screenshots/` - Platform and prototype screenshots
+
+## Note
+
+The actual prototype code is not included in this repository to keep it lightweight. However, using the Platform Prototype Skill with the same configuration will generate an identical prototype.
+
+## How to Generate This
+
+1. Install the Platform Prototype Skill
+2. Create a project with this CLAUDE.md configuration:
+   ```markdown
+   PLATFORM_URL=https://www.amazon.in/
+   PAGES_TO_CAPTURE=/homepage
+   ```
+3. Tell Claude: "Create a shopping chatbot where users can search products and place orders"
+4. Claude will generate the complete prototype
+
+## Learn More
+
+- [Platform Prototype Skill Documentation](../../README.md)
+- [Quick Start Guide](../../QUICKSTART.md)
+- [Installation Instructions](../../INSTALL.md)