version: "1.0.1" name: vapor-ui description: Vapor UI design system component and icon guide, UI mockup generator, and Figma design converter. Provides component catalog, icon lookup, usage patterns, props documentation, and converts Figma designs to production-ready vapor-ui code. Use when user asks "vapor-ui components", "vapor-ui icons", "아이콘 찾기", "vapor-ui 사용법", "vapor-ui를 사용해서 시안 구현", "convert figma", "figma to code", "implement design from figma", provides a Figma URL, or mentions specific components like "Button", "Input", "Modal".

Vapor UI Design Skill

Instructions

Step 1: Identify User Intent & Detect Version

Run these checks in parallel:

1. Determine user intent:

• Component lookup: User wants to know available components or specific component details
• Usage guidance: User needs props, variants, or example code
• Mockup generation: User wants to create a UI prototype
• Figma conversion: User wants to convert Figma design to code

1. Determine Vapor UI version (in order of priority):
2. User-provided version: If user specifies a version, use it directly
3. Auto-detect from codebase:

``bash node scripts/detect-version.mjs [start-path] ` Output: CORE: x.x.x and ICONS: x.x.x`

Use CORE version for component scripts, ICONS version for icon scripts.

Step 2: Component Information

Get component list:

node scripts/get-component-list.mjs <VERSION>

Example: node scripts/get-component-list.mjs 1.0.0-beta.12

Get component details (props, description):

node scripts/get-component-info.mjs <VERSION> <COMPONENT> [PART]

Example: node scripts/get-component-info.mjs 1.0.0-beta.12 avatar

For detailed component structure, refer to references/component-structure.md.

Step 3: Component Examples

Get example code:

node scripts/get-component-examples.mjs <VERSION> <COMPONENT> [EXAMPLE_NAME]

Example: node scripts/get-component-examples.mjs 1.0.0-beta.12 avatar default-avatar

Step 3.5: Icon Lookup

Get icon list:

node scripts/get-icon-list.mjs <ICONS_VERSION> [search-keyword]

Examples:

• node scripts/get-icon-list.mjs 1.0.0-beta.12 - List all icons
• node scripts/get-icon-list.mjs 1.0.0-beta.12 arrow - Search icons containing "arrow"
• node scripts/get-icon-list.mjs 1.0.0-beta.12 --outline - List only outline icons
• node scripts/get-icon-list.mjs 1.0.0-beta.12 --filled - List only filled icons

Note: Use ICONS version from detect-version.mjs output for icon queries.

Step 4: Mockup Generation

For mockup requests:

1. Run get-component-list.mjs to identify available components
2. Run get-component-info.mjs for each needed component's props
3. Run get-component-examples.mjs for usage patterns
4. Generate code using Vapor UI components only
5. Provide complete, copy-paste ready code

Step 5: Figma Design Conversion

For Figma conversion requests:

1. Parse Figma URL to extract file_key and node_id:

`` https://www.figma.com/design/{file_key}/...?node-id={node_id} ``

1. Get design context using MCP:

``` mcp__figma-dev-mode-mcp-server__get_design_context

• file_key: extracted from URL
• node_id: extracted from URL (format: "X-Y" or "X:Y")
• depth: 5 (or higher for complex designs)

```

1. Analyze node tree:

• 💙 prefix nodes: Design system components (see references/design-system-recognition.md)
• Auto-layout frames: Convert to VStack/HStack/Box/Grid (see references/figma-layout-mapping.md)
• TEXT nodes: Extract text content

1. Convert layout properties:

• layoutMode: VERTICAL → VStack
• layoutMode: HORIZONTAL → HStack
• itemSpacing → gap token
• padding* → padding tokens
• See references/token-mapping.md for full mapping

1. Recognize design system components:

• Nodes starting with 💙 are vapor-ui components
• Extract componentProperties for variant → props mapping
• Example: 💙Button with Size: md, ColorPalette: primary → <Button size="md" colorPalette="primary">
• Important: Layout props (gap, padding, margin, backgroundColor, etc.) must be inside $css prop

1. Generate code:

• Build JSX from node tree (bottom-up)
• Apply style utility props using design tokens
• Output production-ready code

Examples

Example 1: Component Usage Query

User: "How do I use the Button component?"

Action:

1. Run node scripts/get-component-info.mjs 1.0.0-beta.12 button
2. Run node scripts/get-component-examples.mjs 1.0.0-beta.12 button
3. Provide props, variants, and example code

Result: Complete Button usage guide with code examples

Example 2: Mockup Generation

User: "Create a login page mockup"

Action:

1. Run get-component-list.mjs to check available components
2. Run get-component-info.mjs for text-input, button, card, form
3. Run get-component-examples.mjs for form patterns
4. Generate responsive layout using Vapor UI

Result: Production-ready login page code

Example 3: Component Discovery

User: "What form components are available?"

Action:

1. Run node scripts/get-component-list.mjs 1.0.0-beta.12
2. Filter output for form-related components (text-input, textarea, checkbox, radio, select, etc.)

Result: Categorized list of form-related components

For Figma conversion examples, see references/conversion-examples.md.

Troubleshooting

References

Component Documentation

• references/url-patterns.md: GitHub URL patterns for fetching component data
• references/component-structure.md: Component file structure and JSON schema

Figma Conversion

• references/figma-layout-mapping.md: Auto-layout to component mapping
• references/design-system-recognition.md: 💙 prefix component recognition
• references/token-mapping.md: Figma values to vapor-ui tokens
• references/conversion-examples.md: Figma to code conversion examples

Scripts

MCP Tools