vapor-ui

# 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**: ```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:** ```bash node scripts/get-component-list.mjs <VERSION> ``` Example: `node scripts/get-component-list.mjs 1.0.0-beta.12` **Get component details (props, description):** ```bash 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:** ```bash node scripts/get-component-examples.mjs <VERSION> <COMPONENT> [EXAMPLE_NAME] ``` Example: `node scripts/get-component-examples.m...