chenaey/codify-dev-skill
Overview
This skill converts visual designs into production-ready UI code for any framework. It reproduces pixel-accurate styles while producing clean, data-driven component structure and clear interfaces. The workflow combines screenshots, skeletons, and JSON to ensure both visual fidelity and maintainable code.
How this skill works
The skill analyzes three inputs: screenshots for visual context, skeletons for layout and hierarchy, and JSON for exact CSS values and resource IDs. It decides implementation complexity, generates component interfaces separating business data from UI text, downloads required assets, and emits code that matches codegen rules. For complex designs it enforces a phased workflow with tracking and incremental delivery.
When to use it
- Turn static designs into reusable UI components or pages
- Need accurate visual fidelity plus maintainable, data-driven code
- Working with designs that include repeated elements or data-driven lists
- When assets (icons, images) must be downloaded and referenced precisely
- When implementation must follow a staged delivery for complex screens
Best practices
- Provide screenshots, skeletons, and JSON together for best results
- Design interfaces before code: mark business data as required props and keep static UI text hardcoded
- For repeated groups use array props and render templates instead of duplicating nodes
- Classify complexity early and follow the phased workflow for multi-region or deep-hierarchy pages
- Always download and reference real asset files (SVG/PNG) rather than placeholders
Example use cases
- Generate a product card component with props for image, title, price and loopable list support
- Convert a multi-section landing page into modular components with a phased delivery plan
- Turn icon-heavy toolbar designs into components that import SVG assets and expose actions via props
- Create data-driven list screens where JSON supplies exact CSS and resource IDs for faithful rendering
FAQ
Provide a screenshot (if available), the skeleton output, and the design JSON. Combining all three yields the most accurate visual and structural results.
How does the skill decide whether to implement everything at once?
It evaluates hierarchy depth and region count. Simple layouts (≤3 levels and ≤2 regions) use an overall implementation path; complex cases require the phased workflow and stepwise completion tracking.
