design-to-productionlisted

# 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 <html-file-path> # 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 <component-path> ``` --- ## 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.j