Vapor UI Design System

What it does

Vapor UI Design System skill equips the agent to answer component-level questions, generate UI mockups, and convert Figma designs into production-ready Vapor UI React code. It exposes scripts to detect library versions, list components, fetch component props/examples, and map Figma auto-layout and design tokens into Vapor UI primitives so the agent can output copy-pasteable JSX. Use cases include answering "how to use" queries, generating mockups from a brief, and transforming Figma frames into componentized, tokenized code.

When to use it

Invoke this skill when a user asks about Vapor UI components (e.g. "Button", "Input", "Modal"), requests icon lookup, asks for mockup generation, or provides a Figma URL and asks to convert designs to code. Also use it when the user specifies a Vapor UI version, or when codebase auto-detection is needed to choose component behavior.

What's included

• Scripts: version detector, component list/info/example extractors, icon search scripts (present in scripts/).
• References: design-system recognition, figma-to-token mappings, conversion examples (present in references/).
• Instructions: procedural steps for intent detection, version resolution, component lookup, mockup assembly, and Figma node-to-JSX conversion.

Compatible agents

Best used by code-capable assistant agents (Copilot/Codex/Claude Code/Gemini-like models) that can run small node scripts or call MCP tools to fetch Figma node trees.