majiayu000 Prototype Conversion Skill
Purpose
Convert external prototypes, mockups, or codebases into production-ready code using your design system components, semantic design tokens, and proper module architecture.
Reference Files
| File | Purpose |
|---|---|
references/analysis-checklist.md |
Prototype inventory and framework detection |
references/component-mapping.md |
Map common patterns to klara-theme equivalents |
references/token-mapping.md |
Map hardcoded values to klara-theme tokens |
references/style-migration.md |
Migrate style systems to klara-theme |
references/data-migration.md |
Replace mock data with real API integration |
Conversion Workflow
- Analyze — Read
analysis-checklist.md, inventory prototype - Map Components — Read
component-mapping.md, map to klara-theme - Map Tokens — Read
token-mapping.md, replace hardcoded values - Migrate Styles — Read
style-migration.md, convert style system - Integrate Data — Read
data-migration.md, replace mock data - Module Structure — Place in correct module with
_components/etc.
Quick Reference
- Import:
@luz-next/klara-theme - Props:
styling(notvariant),size,mode,radius - Tokens:
bg-base-background,p-200,gap-100 - Data flow: Component -> Hook -> Action -> Service -> API
Related Skills
web-modules— Module integration patternsweb-ui-lib— klara-theme component referencedomain-b2b— Module knowledge