--- name: design-to-production description: Guided workflow for implementing HTML design prototypes as production React components with glassmorphism styling and quality standards enforcement. Use when converting design prototypes to production code. allowed-tools: [Read, Write, Edit, Bash, Glob, Grep] --- # Design to Production Guided workflow for converting HTML prototypes to production React components. **TL;DR**: Provide HTML file path → analyze → map components → scaffold → implement → validate --- ## Auto-Triggers Auto-triggered by keywords: - "implement design", "prototype to production", "convert HTML" - "glassmorphism component", "design prototype", "HTML to React" --- ## Quick Commands ```bash # Step 1: Analyze HTML prototype .\/.claude\/skills\/design-to-production\/scripts\/extract-structure.sh # Step 3: Scaffold component (after interactive mapping) .\/.claude\/skills\/design-to-production\/scripts\/scaffold-component.sh \ --name "ComponentName" \ --module "practice" \ --template "interactive-card" # Step 5: Validate implementation .\/.claude\/skills\/design-to-production\/scripts\/validate.sh ``` --- ## 5-Step Workflow ### Example: Implementing `glassmorphism_hints_panel_1.html` ``` 1. ANALYZE → Extract structure from HTML 2. MAP → Choose shadcn components + glassmorphism classes 3. SCAFFOLD → Generate .tsx file with boilerplate 4. IMPLEMENT → Write component logic (guided by TODOs) 5. VALIDATE → Check quality standards ``` ### Step 1: ANALYZE **User provides**: HTML file path (e.g., `.superdesign\/design_iterations\/glassmorphism_hints_panel_1.html`) **Script runs**: ```bash .\/scripts\/extract-structure.sh .superdesign\/design_iterations\/glassmorphism_hints_panel_1.html ``` **Output**: `hints-panel-structure.json` with: - Component hierarchy - CSS classes (glassmorphism utilities) - Interactive elements (buttons, forms, inputs) - Layout patterns (grid, flex, vertical-stack) **SKILL.md presents**: Summary of detected structure ### Step 2: MAP (Interactive) **SKILL.md guides you through 4 decisions**: #### 2.1 Component Identification - **Question**: "What should we call this component?" - **Suggested**: Extracted from HTML filename or title - **Example**: `HintsPanel` #### 2.2 Module Placement - **Question**: "Which module does this belong to?" - **Options**: practice, assessment, results, profile, questions, home - **Example**: `practice` #### 2.3 shadcn\/ui Component Mapping For each interactive element: - **Detected**: `