prototype-to-production

# Prototype to Production Skill Convert design prototypes into production-ready, typed components by analyzing structure, extracting patterns, and generating clean code. ## When to Use - Converting HTML prototypes to React components - Transforming super-design outputs (`.superdesign/design_iterations/*.html`) to production code - Breaking down Figma exports into reusable components - Extracting design tokens from prototype CSS/inline styles - Productionizing a mockup or proof-of-concept UI ## Conversion Workflow ``` ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Analyze │──▶│ Detect │──▶│ Decompose │──▶│ Generate │ │ Input │ │ Tech Stack │ │ Components │ │ Code │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ ▼ ▼ ▼ ▼ Identify type package.json Atomic design TypeScript & structure scan + patterns methodology components ``` ### Step 1: Analyze Input **Detect prototype type and structure:** | Input Type | Detection Method | Key Patterns | |------------|------------------|--------------| | Super-design | Path: `.superdesign/design_iterations/*.html` | Flowbite, Tailwind CDN, theme CSS references | | Generic HTML | Any `.html` file | Standard HTML structure, inline/external CSS | | Figma Export | Figma-specific class names | `figma-`, absolute po...