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

2. Determine Vapor UI version (in order of priority):

   1. User-provided version: If user specifies a version, use it directly
   2. Auto-detect from codebase:

      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

detect-version.mjs

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}
   

2. 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)
   

3. 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

4. Convert layout properties:

   • layoutMode: VERTICAL

     → VStack

   • layoutMode: HORIZONTAL

     → HStack

   • itemSpacing

     → gap token

   • padding*

     → padding tokens
   • See

     references/token-mapping.md

     for full mapping

5. 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

6. 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

get-component-list.mjs

detect-version.mjs

token-mapping.md

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

detect-version.mjs

get-component-list.mjs

get-component-info.mjs

get-component-examples.mjs

get-icon-list.mjs

MCP Tools

mcp__figma-dev-mode-mcp-server__get_design_context

mcp__figma-dev-mode-mcp-server__get_screenshot

mcp__figma-dev-mode-mcp-server__get_metadata