vapor-ui
Figma-to-React conversion, design token audits, and component docs
All Skills in This Repository (1)
Pure Emerald Level IndicatorsFrequently Asked Questions
FAQPage SchemaHow to install vapor-ui skills?โผ
Run `npx skills add goorm-dev/vapor-ui --all -g -y` in your terminal to install all skills in this suite globally.
How to convert a Figma design to React code?โผ
Paste a Figma URL and the vapor-ui skill reads the design via Figma MCP, maps auto-layouts to VStack/HStack, recognizes design system components, and outputs production-ready JSX.
How to check if Figma designs use the right design tokens?โผ
The figma-token-review skill extracts every color and typography token from your Figma file and reports raw, misused, or unbound values with suggested replacements.
How to catch design token typos in CSS code?โผ
Run the token-lint skill on any folder to scan var(--vapor-...) references and get up to three closest valid token suggestions for each unknown name.
Do these skills work with Claude Code?โผ
Yes. All skills follow the standard SKILL.md format and run directly in Claude Code and other compatible coding agents.
Related Repositories in Design & Creative
View All in Design & Creativeโui-ux-pro-max-skill
AI design intelligence for professional UI, brands, and presentations
ui
Build and customize beautiful React component libraries with AI
open-design
Open-source AI design studio for decks, prototypes, images, and video