design-to-production
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
More from ariegoldkin/devprepai
ascii-visualizer
Creates beautiful ASCII art visualizations for plans, architectures, workflows, and data. This skill should be used when explaining system architecture, creating implementation plans, showing workflows, visualizing comparisons, or documenting file structures. NOT for code syntax highlighting or markdown tables. User explicitly loves ASCII art - use liberally for visual communication.
4trpc-scaffolder
Scaffolds tRPC routers, procedures, and Zod schemas with full type safety following DevPrep AI patterns
4quality-reviewer
Automatically reviews DevPrep AI code for quality standards including ESLint compliance, TypeScript strict mode, 180-line file limits, complexity under 15, proper naming conventions, import patterns, and architectural compliance with the 6-folder structure
3architecture-navigator
Understand and navigate the DevPrep AI 7-folder architecture. Use this skill when asked about code organization, where to place new features, what modules exist, or when starting development tasks that need architecture context. Auto-triggers on keywords like "where should", "add module", "architecture", "structure", "organize", "place code", "what modules".
3module-scaffolder
Scaffolds new feature modules in DevPrep AI following the 6-folder architecture with proper TypeScript interfaces, path aliases, and quality standards. Use when creating new domains like 'analytics', 'notifications', or any new feature module.
3brainstorming
Use when creating or developing anything, before writing code or implementation plans - refines rough ideas into fully-formed designs through structured Socratic questioning, alternative exploration, and incremental validation
2