Agent skill · software engineering · aiskillstore
design-to-production
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.
Why this skill is useful
Adds 3 executable scripts for analyzing, scaffolding, and validating React components from HTML prototypes, which are not standard knowledge.
What it needs
Requires bash installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 --- 5-Step Workflow Example: Implementing glassmorphismhintspanel1.html Step 1: ANALYZE User provides: HTML file path (e.g., .superdesign/designiterations/glassmorphismhintspanel1.html) Script runs: 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: <button class="btn-glass">Show Hint</button> Suggestion: Use Button from @shared/ui/button Confirm: User approves or overrides Common mappings: HTML Element shadcn Component -------------- ------------------ <button class="btn-"> Button <div class="glass-card"> Card <input type="text"> Input <select> Select Badge/chip Badge 2.4 Glassmorphism Class Mapping Extracted from HTML: class="glass-card neon-glow-purple text-glow" Maps to React: className="glass-card neon-glow-purple text-glow" Validation: Checks against approved classes in styles/glassmorphism.css Step 3: SCAFFOLD Script generates .tsx file using template: Output: modules/practice/components/HintsPanel.tsx with: ✅ TypeScript interface (I prefix) ✅ Proper imports (@shared/ui/, gl …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-to-production