goorm-devgoorm-devOfficialยท1 Agent Skills Included

vapor-ui

Figma-to-React conversion, design token audits, and component docs

Converts Figma designs into production-ready Vapor UI React code with correct components, icons, and design tokens. Audits color and typography token usage in Figma files and catches misspelled CSS variable references in code. Generates component JSDoc and visual regression test stories, eliminating manual documentation and review work.
npx skills add goorm-dev/vapor-ui --all -g -y
Available:

Explains the Vapor UI monorepo structure, packages, and commands so your agent can navigate the codebase and follow its component, styling, and release conventions.

All Skills in This Repository (1)

Pure Emerald Level Indicators

Frequently Asked Questions

FAQPage Schema
How 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โ†’