Fluxwing Screenshot Importer

{
  "description": "Import UI screenshots and generate uxscii components automatically using vision analysis. Use when user wants to import, convert, or generate .uxm components from screenshots or images.",
  "metadata": {
    "version": "0.0.1",
    "author": "Trabian",
    "allowedTools": "Read, Write, Task, TodoWrite, Glob"
  },
  "content": "Import UI screenshots and convert them to the **uxscii standard** by orchestrating specialized vision agents.\r\n\r\n\r\n### Phase 1: Get Screenshot Path\r\n\r\nAsk the user for the screenshot path if not provided:\r\n- \"Which screenshot would you like to import?\"\r\n- Validate file exists and is a supported format (PNG, JPG, JPEG, WebP, GIF)\r\n\r\n```typescript\r\n// Example\r\nconst screenshotPath = \"/path/to/screenshot.png\";\r\n```\r\n\r\n### Phase 2: Spawn Vision Coordinator Agent\r\n\r\n**CRITICAL**: Spawn the `screenshot-vision-coordinator` agent to orchestrate parallel vision analysis.\r\n\r\nThis agent will:\r\n- Spawn 3 vision agents in parallel (layout discovery + component detection + visual properties)\r\n- Wait for all agents to complete\r\n- Merge results into unified component data structure\r\n- Return JSON with screen metadata, components array, and composition\r\n\r\n```typescript\r\nTask({\r\n  subagent_type: \"general-purpose\",\r\n  description: \"Analyze screenshot with vision analysis\",\r\n  prompt: `You are a UI screenshot analyzer extracting component structure for uxscii.\r\n\r\nScreenshot path: ${screenshotPath}\r\n\r\nYour task:\r\n1. Read the screenshot image file\r\n2. Analyze the UI layout structure (vertical, horizontal, grid, sidebar+main)\r\n3. Detect all UI components (buttons, inputs, navigation, cards, etc.)\r\n4. Extract visual properties (colors, spacing, borders, typography)\r\n5. Identify component hierarchy (atomic vs composite)\r\n6. Merge all findings into a unified data structure\r\n7. Return valid JSON output\r\n\r\nCRITICAL detection requirements:\r\n- Do NOT miss navigation elements (check all edges - top, left, right, bottom)\r\n- Do NOT miss small elements (icons, badges, close buttons, status indicators)\r\n- Identify composite components (forms, cards with multiple elements)\r\n- Note spatial relationships between components\r\n\r\nExpected output format (valid JSON only, no markdown):\r\n{\r\n  \"success\": true,\r\n  \"screen\": {\r\n    \"id\": \"screen-name\",\r\n    \"type\": \"dashboard|login|profile|settings\",\r\n    \"name\": \"Screen Name\",\r\n    \"description\": \"What this screen does\",\r\n    \"layout\": \"vertical|horizontal|grid|sidebar-main\"\r\n  },\r\n  \"components\": [\r\n    {\r\n      \"id\": \"component-id\",\r\n      \"type\": \"button|input|navigation|etc\",\r\n      \"name\": \"Component Name\",\r\n      \"description\": \"What it does\",\r\n      \"visualProperties\": {...},\r\n      \"isComposite\": false\r\n    }\r\n  ],\r\n  \"composition\": {\r\n    \"atomicComponents\": [\"id1\", \"id2\"],\r\n    \"compositeComponents\": [\"id3\"],\r\n    \"screenComponents\": [\"screen-id\"]\r\n  }\r\n}\r\n\r\nUse your vision capabilities to analyze the screenshot carefully.`\r\n})\r\n```\r\n\r\n**Wait for the vision coordinator to complete and return results.**\r\n\r\n### Phase 3: Validate Vision Data\r\n\r\nCheck the returned data structure:\r\n\r\n```typescript\r\nconst visionData = visionCoordinatorResult;\r\n\r\n// Required fields\r\nif (!visionData.success) {\r\n  throw new Error(`Vision analysis failed: ${visionData.error}`);\r\n}\r\n\r\nif (!visionData.components || visionData.components.length === 0) {\r\n  throw new Error(\"No components detected in screenshot\");\r\n}\r\n\r\n// Navigation check (CRITICAL)\r\nconst hasNavigation = visionData.components.some(c =>\r\n  c.type === 'navigation' || c.id.includes('nav') || c.id.includes('header')\r\n);\r\n\r\nif (visionData.screen.type === 'dashboard' && !hasNavigation) {\r\n  console.warn(\"⚠️ Dashboard detected but no navigation found - verify all nav elements were detected\");\r\n}\r\n```\r\n\r\n### Phase 4: Spawn Component Generator Agents (Parallel)\r\n\r\n**CRITICAL**: YOU MUST spawn ALL component generator agents in a SINGLE message with multiple Task tool calls. This is the ONLY way to achieve true parallel execution.\r\n\r\n**DO THIS**: Send ONE message containing ALL Task calls for all components\r\n**DON'T DO THIS**: Send separate messages for each component (this runs them sequentially)\r\n\r\nFor each atomic component, create a Task call in the SAME message:\r\n\r\n```\r\nTask({\r\n  subagent_type: \"general-purpose\",\r\n  description: \"Generate email-input component\",\r\n  prompt: \"You are a uxscii component generator. Generate component files from vision data.\r\n\r\nComponent data: {id: 'email-input', type: 'input', visualProperties: {...}}\r\n\r\nYour task:\r\n1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json\r\n2. Load docs from {SKILL_ROOT}/docs/screenshot-import-helpers.md\r\n3. Generate .uxm file (valid JSON with default state only)\r\n4. Generate .md file (ASCII template matching visual properties)\r\n5. Save to ./fluxwing/components/\r\n6. Return success with file paths\r\n\r\nFollow uxscii standard strictly.\"\r\n})\r\n\r\nTask({\r\n  subagent_type: \"general-purpose\",\r\n  description: \"Generate password-input component\",\r\n  prompt: \"You are a uxscii component generator. Generate component files from vision data.\r\n\r\nComponent data: {id: 'password-input', type: 'input', visualProperties: {...}}\r\n\r\nYour task:\r\n1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json\r\n2. Load docs from {SKILL_ROOT}/docs/screenshot-import-helpers.md\r\n3. Generate .uxm file (valid JSON with default state only)\r\n4. Generate .md file (ASCII template matching visual properties)\r\n5. Save to ./fluxwing/components/\r\n6. Return success with file paths\r\n\r\nFollow uxscii standard strictly.\"\r\n})\r\n\r\nTask({\r\n  subagent_type: \"general-purpose\",\r\n  description: \"Generate submit-button component\",\r\n  prompt: \"You are a uxscii component generator. Generate component files from vision data.\r\n\r\nComponent data: {id: 'submit-button', type: 'button', visualProperties: {...}}\r\n\r\nYour task:\r\n1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json\r\n2. Load docs from {SKILL_ROOT}/docs/screenshot-import-helpers.md\r\n3. Generate .uxm file (valid JSON with default state only)\r\n4. Generate .md file (ASCII template matching visual properties)\r\n5. Save to ./fluxwing/components/\r\n6. Return success with file paths\r\n\r\nFollow uxscii standard strictly.\"\r\n})\r\n\r\n... repeat for ALL atomic components in the SAME message ...\r\n\r\n... then for composite components in the SAME message:\r\n\r\nTask({\r\n  subagent_type: \"general-purpose\",\r\n  description: \"Generate login-form composite\",\r\n  prompt: \"You are a uxscii component generator. Generate composite component from vision data.\r\n\r\nComponent data: {id: 'login-form', type: 'form', components: [...], visualProperties: {...}}\r\n\r\nIMPORTANT: Include component references in props.components array.\r\n\r\nYour task:\r\n1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json\r\n2. Generate .uxm with components array in props\r\n3. Generate .md with {{component:id}} references\r\n4. Save to ./fluxwing/components/\r\n5. Return success\r\n\r\nFollow uxscii standard strictly.\"\r\n})\r\n```\r\n\r\n**Remember**: ALL Task calls must be in a SINGLE message for parallel execution!\r\n\r\n### Phase 5: Generate Screen Files\r\n\r\nAfter all components are created, generate the screen files directly (screen generation is fast, no need for agent):\r\n\r\n```typescript\r\nconst screenData = visionData.screen;\r\nconst screenId = visionData.composition.screenComponents[0];\r\n\r\n// Create screen .uxm\r\nconst screenUxm = {\r\n  \"id\": screenId,\r\n  \"type\": \"container\",\r\n  \"version\": \"1.0.0\",\r\n  \"metadata\": {\r\n    \"name\": screenData.name,\r\n    \"description\": screenData.description,\r\n    \"created\": new Date().toISOString(),\r\n    \"modified\": new Date().toISOString(),\r\n    \"tags\": [\"screen\", screenData.type, \"imported\"],\r\n    \"category\": \"layout\"\r\n  },\r\n  \"props\": {\r\n    \"title\": screenData.name,\r\n    \"layout\": screenData.layout,\r\n    \"components\": visionData.composition.atomicComponents.concat(\r\n      visionData.composition.compositeComponents\r\n    )\r\n  },\r\n  \"ascii\": {\r\n    \"templateFile\": `${screenId}.md`,\r\n    \"width\": 80,\r\n    \"height\": 50\r\n  }\r\n};\r\n\r\n// Create screen .md and .rendered.md files\r\n```\r\n\r\n### Phase 6: Report Results\r\n\r\nCreate comprehensive summary:\r\n\r\n```markdown\r\n\r\n```\r\nUser: Import this screenshot at /Users/me/Desktop/login.png\r\n\r\nSkill: I'll import the UI screenshot and generate uxscii components!\r\n\r\n[Validates screenshot exists]\r\n\r\nStep 1: Analyzing screenshot with vision agents...\r\n[Spawns vision coordinator]\r\n\r\n✓ Vision analysis complete:\r\n  - Detected 5 components\r\n  - Screen type: login\r\n  - Layout: vertical-center\r\n\r\nStep 2: Generating component files in parallel...\r\n[Spawns 5 component generator agents in parallel]\r\n\r\n✓ All components generated!",
  "name": "Fluxwing Screenshot Importer",
  "id": "fluxwing-screenshot-importer",
  "sections": {
    "Vision Agents Used": "This skill orchestrates 5 specialized vision agents:\r\n\r\n1. **screenshot-vision-coordinator** - Orchestrates parallel analysis\r\n2. **screenshot-component-detection** - Finds UI elements\r\n3. **screenshot-layout-discovery** - Understands structure\r\n4. **screenshot-visual-properties** - Extracts styling\r\n5. **screenshot-component-generator** - Creates .uxm/.md files",
    "Screenshot Analysis": "- File: ${screenshotPath}\r\n- Screen type: ${screenData.type}\r\n- Layout: ${screenData.layout}",
    "Quality Standards": "Ensure imported components include:\r\n- ✓ Valid JSON schema compliance\r\n- ✓ Complete metadata (name, description, tags)\r\n- ✓ Proper component types\r\n- ✓ ASCII art matches detected visual properties\r\n- ✓ All detected components extracted\r\n- ✓ Screen composition includes all components\r\n- ✓ Rendered example with realistic data",
    "Performance": "- Vision analysis: Parallel (3 agents) ⚡\r\n- Component generation: Parallel (${atomicCount + compositeCount} agents) ⚡\r\n- Total time: ~${estimatedTime}s",
    "Files Created": "- 10 component files\r\n- 3 screen files\r\nTotal: 13 files\r\n\r\nPerformance: ~45s (5 agents in parallel) ⚡\r\n\r\nNext steps:\r\n- Review: cat ./fluxwing/screens/login-screen.rendered.md\r\n- Add states to make components interactive\r\n```",
    "Example Interaction": "",
    "Resources": "See `{SKILL_ROOT}/docs/` for detailed documentation on:\r\n- screenshot-import-ascii.md - ASCII generation patterns\r\n- screenshot-import-examples.md - Example imports\r\n- screenshot-import-helpers.md - Helper functions\r\n- screenshot-data-merging.md - Data structure merging\r\n- screenshot-screen-generation.md - Screen file creation\r\n- screenshot-validation-functions.md - Data validation\r\n\r\nYou're helping users rapidly convert visual designs into uxscii components!",
    "Workflow": "",
    "Important Notes": "- **Parallel execution is critical**: All agents must be spawned in a single message\r\n- **Navigation elements**: Verify top nav, side nav, footer nav are detected\r\n- **Small elements**: Don't miss icons, badges, close buttons, status indicators\r\n- **Composite components**: Forms, cards with multiple elements\r\n- **Screen files**: Always create 3 files (.uxm, .md, .rendered.md)\r\n- **Validation**: Check vision data before generating components",
    "Components Generated": "✓ email-input (input)\r\n✓ password-input (input)\r\n✓ submit-button (button)\r\n✓ cancel-link (link)\r\n✓ login-form (form)",
    "Next Steps": "1. Review screen: `cat ./fluxwing/screens/${screenId}.rendered.md`\r\n2. Add interaction states to components\r\n3. Customize components as needed\r\n4. View all components\r\n```",
    "Your Task": "Import a screenshot of a UI design and automatically generate uxscii components and screens by **orchestrating specialized agents**:\r\n\r\n1. **Vision Coordinator Agent** - Spawns 3 parallel vision agents (layout + components + properties)\r\n2. **Component Generator Agents** - Generate files in parallel (atomic + composite + screen)",
    "Error Handling": "**If vision analysis fails:**\r\n```\r\n✗ Vision analysis failed: [error message]\r\n\r\nPlease check:\r\n- Screenshot file exists and is readable\r\n- File format is supported (PNG, JPG, JPEG, WebP, GIF)\r\n- Screenshot contains visible UI elements\r\n```\r\n\r\n**If component generation fails:**\r\n```\r\n⚠️ Partial success: 3 of 5 components generated\r\n\r\nSuccessful:\r\n✓ email-input\r\n✓ password-input\r\n✓ submit-button\r\n\r\nFailed:\r\n✗ cancel-link: [error]\r\n✗ login-form: [error]\r\n\r\nYou can retry failed components or create them manually.\r\n```\r\n\r\n**If no components detected:**\r\n```\r\n✗ No components detected in screenshot.\r\n\r\nThis could mean:\r\n- Screenshot is blank or unclear\r\n- UI elements are too small to detect\r\n- Screenshot is not a UI design\r\n\r\nPlease try a different screenshot or create components manually.\r\n```",
    "Data Location Rules": "**READ from (bundled templates - reference only):**\r\n- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - 11 component templates (for reference)\r\n- `{SKILL_ROOT}/docs/` - Screenshot processing documentation\r\n\r\n**WRITE to (project workspace):**\r\n- `./fluxwing/components/` - Extracted components (.uxm + .md)\r\n- `./fluxwing/screens/` - Screen composition (.uxm + .md + .rendered.md)\r\n\r\n**NEVER write to skill directories - they are read-only!**"
  }
}

---
name: Fluxwing Screenshot Importer
description: Import UI screenshots and generate uxscii components automatically using vision analysis. Use when user wants to import, convert, or generate .uxm components from screenshots or images.
version: 0.0.1
author: Trabian
allowed-tools: Read, Write, Task, TodoWrite, Glob
---

# Fluxwing Screenshot Importer

Import UI screenshots and convert them to the **uxscii standard** by orchestrating specialized vision agents.

## Data Location Rules

**READ from (bundled templates - reference only):**
- `{SKILL_ROOT}/../uxscii-component-creator/templates/` - 11 component templates (for reference)
- `{SKILL_ROOT}/docs/` - Screenshot processing documentation

**WRITE to (project workspace):**
- `./fluxwing/components/` - Extracted components (.uxm + .md)
- `./fluxwing/screens/` - Screen composition (.uxm + .md + .rendered.md)

**NEVER write to skill directories - they are read-only!**

## Your Task

Import a screenshot of a UI design and automatically generate uxscii components and screens by **orchestrating specialized agents**:

1. **Vision Coordinator Agent** - Spawns 3 parallel vision agents (layout + components + properties)
2. **Component Generator Agents** - Generate files in parallel (atomic + composite + screen)

## Workflow

### Phase 1: Get Screenshot Path

Ask the user for the screenshot path if not provided:
- "Which screenshot would you like to import?"
- Validate file exists and is a supported format (PNG, JPG, JPEG, WebP, GIF)

```typescript
// Example
const screenshotPath = "/path/to/screenshot.png";
```

### Phase 2: Spawn Vision Coordinator Agent

**CRITICAL**: Spawn the `screenshot-vision-coordinator` agent to orchestrate parallel vision analysis.

This agent will:
- Spawn 3 vision agents in parallel (layout discovery + component detection + visual properties)
- Wait for all agents to complete
- Merge results into unified component data structure
- Return JSON with screen metadata, components array, and composition

```typescript
Task({
  subagent_type: "general-purpose",
  description: "Analyze screenshot with vision analysis",
  prompt: `You are a UI screenshot analyzer extracting component structure for uxscii.

Screenshot path: ${screenshotPath}

Your task:
1. Read the screenshot image file
2. Analyze the UI layout structure (vertical, horizontal, grid, sidebar+main)
3. Detect all UI components (buttons, inputs, navigation, cards, etc.)
4. Extract visual properties (colors, spacing, borders, typography)
5. Identify component hierarchy (atomic vs composite)
6. Merge all findings into a unified data structure
7. Return valid JSON output

CRITICAL detection requirements:
- Do NOT miss navigation elements (check all edges - top, left, right, bottom)
- Do NOT miss small elements (icons, badges, close buttons, status indicators)
- Identify composite components (forms, cards with multiple elements)
- Note spatial relationships between components

Expected output format (valid JSON only, no markdown):
{
  "success": true,
  "screen": {
    "id": "screen-name",
    "type": "dashboard|login|profile|settings",
    "name": "Screen Name",
    "description": "What this screen does",
    "layout": "vertical|horizontal|grid|sidebar-main"
  },
  "components": [
    {
      "id": "component-id",
      "type": "button|input|navigation|etc",
      "name": "Component Name",
      "description": "What it does",
      "visualProperties": {...},
      "isComposite": false
    }
  ],
  "composition": {
    "atomicComponents": ["id1", "id2"],
    "compositeComponents": ["id3"],
    "screenComponents": ["screen-id"]
  }
}

Use your vision capabilities to analyze the screenshot carefully.`
})
```

**Wait for the vision coordinator to complete and return results.**

### Phase 3: Validate Vision Data

Check the returned data structure:

```typescript
const visionData = visionCoordinatorResult;

// Required fields
if (!visionData.success) {
  throw new Error(`Vision analysis failed: ${visionData.error}`);
}

if (!visionData.components || visionData.components.length === 0) {
  throw new Error("No components detected in screenshot");
}

// Navigation check (CRITICAL)
const hasNavigation = visionData.components.some(c =>
  c.type === 'navigation' || c.id.includes('nav') || c.id.includes('header')
);

if (visionData.screen.type === 'dashboard' && !hasNavigation) {
  console.warn("⚠️ Dashboard detected but no navigation found - verify all nav elements were detected");
}
```

### Phase 4: Spawn Component Generator Agents (Parallel)

**CRITICAL**: YOU MUST spawn ALL component generator agents in a SINGLE message with multiple Task tool calls. This is the ONLY way to achieve true parallel execution.

**DO THIS**: Send ONE message containing ALL Task calls for all components
**DON'T DO THIS**: Send separate messages for each component (this runs them sequentially)

For each atomic component, create a Task call in the SAME message:

```
Task({
  subagent_type: "general-purpose",
  description: "Generate email-input component",
  prompt: "You are a uxscii component generator. Generate component files from vision data.

Component data: {id: 'email-input', type: 'input', visualProperties: {...}}

Your task:
1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json
2. Load docs from {SKILL_ROOT}/docs/screenshot-import-helpers.md
3. Generate .uxm file (valid JSON with default state only)
4. Generate .md file (ASCII template matching visual properties)
5. Save to ./fluxwing/components/
6. Return success with file paths

Follow uxscii standard strictly."
})

Task({
  subagent_type: "general-purpose",
  description: "Generate password-input component",
  prompt: "You are a uxscii component generator. Generate component files from vision data.

Component data: {id: 'password-input', type: 'input', visualProperties: {...}}

Your task:
1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json
2. Load docs from {SKILL_ROOT}/docs/screenshot-import-helpers.md
3. Generate .uxm file (valid JSON with default state only)
4. Generate .md file (ASCII template matching visual properties)
5. Save to ./fluxwing/components/
6. Return success with file paths

Follow uxscii standard strictly."
})

Task({
  subagent_type: "general-purpose",
  description: "Generate submit-button component",
  prompt: "You are a uxscii component generator. Generate component files from vision data.

Component data: {id: 'submit-button', type: 'button', visualProperties: {...}}

Your task:
1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json
2. Load docs from {SKILL_ROOT}/docs/screenshot-import-helpers.md
3. Generate .uxm file (valid JSON with default state only)
4. Generate .md file (ASCII template matching visual properties)
5. Save to ./fluxwing/components/
6. Return success with file paths

Follow uxscii standard strictly."
})

... repeat for ALL atomic components in the SAME message ...

... then for composite components in the SAME message:

Task({
  subagent_type: "general-purpose",
  description: "Generate login-form composite",
  prompt: "You are a uxscii component generator. Generate composite component from vision data.

Component data: {id: 'login-form', type: 'form', components: [...], visualProperties: {...}}

IMPORTANT: Include component references in props.components array.

Your task:
1. Load schema from {SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json
2. Generate .uxm with components array in props
3. Generate .md with {{component:id}} references
4. Save to ./fluxwing/components/
5. Return success

Follow uxscii standard strictly."
})
```

**Remember**: ALL Task calls must be in a SINGLE message for parallel execution!

### Phase 5: Generate Screen Files

After all components are created, generate the screen files directly (screen generation is fast, no need for agent):

```typescript
const screenData = visionData.screen;
const screenId = visionData.composition.screenComponents[0];

// Create screen .uxm
const screenUxm = {
  "id": screenId,
  "type": "container",
  "version": "1.0.0",
  "metadata": {
    "name": screenData.name,
    "description": screenData.description,
    "created": new Date().toISOString(),
    "modified": new Date().toISOString(),
    "tags": ["screen", screenData.type, "imported"],
    "category": "layout"
  },
  "props": {
    "title": screenData.name,
    "layout": screenData.layout,
    "components": visionData.composition.atomicComponents.concat(
      visionData.composition.compositeComponents
    )
  },
  "ascii": {
    "templateFile": `${screenId}.md`,
    "width": 80,
    "height": 50
  }
};

// Create screen .md and .rendered.md files
```

### Phase 6: Report Results

Create comprehensive summary:

```markdown
# Screenshot Import Complete ✓

## Screenshot Analysis
- File: ${screenshotPath}
- Screen type: ${screenData.type}
- Layout: ${screenData.layout}

## Components Generated

### Atomic Components (${atomicCount})
${atomicComponents.map(c => `✓ ${c.id} (${c.type})`).join('\n')}

### Composite Components (${compositeCount})
${compositeComponents.map(c => `✓ ${c.id} (${c.type})`).join('\n')}

### Screen
✓ ${screenId}

## Files Created

**Components** (./fluxwing/components/):
- ${totalComponentFiles} files (.uxm + .md)

**Screen** (./fluxwing/screens/):
- ${screenId}.uxm
- ${screenId}.md
- ${screenId}.rendered.md

**Total: ${totalFiles} files created**

## Performance
- Vision analysis: Parallel (3 agents) ⚡
- Component generation: Parallel (${atomicCount + compositeCount} agents) ⚡
- Total time: ~${estimatedTime}s

## Next Steps

1. Review screen: `cat ./fluxwing/screens/${screenId}.rendered.md`
2. Add interaction states to components
3. Customize components as needed
4. View all components
```

## Vision Agents Used

This skill orchestrates 5 specialized vision agents:

1. **screenshot-vision-coordinator** - Orchestrates parallel analysis
2. **screenshot-component-detection** - Finds UI elements
3. **screenshot-layout-discovery** - Understands structure
4. **screenshot-visual-properties** - Extracts styling
5. **screenshot-component-generator** - Creates .uxm/.md files

## Example Interaction

```
User: Import this screenshot at /Users/me/Desktop/login.png

Skill: I'll import the UI screenshot and generate uxscii components!

[Validates screenshot exists]

Step 1: Analyzing screenshot with vision agents...
[Spawns vision coordinator]

✓ Vision analysis complete:
  - Detected 5 components
  - Screen type: login
  - Layout: vertical-center

Step 2: Generating component files in parallel...
[Spawns 5 component generator agents in parallel]

✓ All components generated!

# Screenshot Import Complete ✓

## Components Generated
✓ email-input (input)
✓ password-input (input)
✓ submit-button (button)
✓ cancel-link (link)
✓ login-form (form)

## Files Created
- 10 component files
- 3 screen files
Total: 13 files

Performance: ~45s (5 agents in parallel) ⚡

Next steps:
- Review: cat ./fluxwing/screens/login-screen.rendered.md
- Add states to make components interactive
```

## Quality Standards

Ensure imported components include:
- ✓ Valid JSON schema compliance
- ✓ Complete metadata (name, description, tags)
- ✓ Proper component types
- ✓ ASCII art matches detected visual properties
- ✓ All detected components extracted
- ✓ Screen composition includes all components
- ✓ Rendered example with realistic data

## Important Notes

- **Parallel execution is critical**: All agents must be spawned in a single message
- **Navigation elements**: Verify top nav, side nav, footer nav are detected
- **Small elements**: Don't miss icons, badges, close buttons, status indicators
- **Composite components**: Forms, cards with multiple elements
- **Screen files**: Always create 3 files (.uxm, .md, .rendered.md)
- **Validation**: Check vision data before generating components

## Error Handling

**If vision analysis fails:**
```
✗ Vision analysis failed: [error message]

Please check:
- Screenshot file exists and is readable
- File format is supported (PNG, JPG, JPEG, WebP, GIF)
- Screenshot contains visible UI elements
```

**If component generation fails:**
```
⚠️ Partial success: 3 of 5 components generated

Successful:
✓ email-input
✓ password-input
✓ submit-button

Failed:
✗ cancel-link: [error]
✗ login-form: [error]

You can retry failed components or create them manually.
```

**If no components detected:**
```
✗ No components detected in screenshot.

This could mean:
- Screenshot is blank or unclear
- UI elements are too small to detect
- Screenshot is not a UI design

Please try a different screenshot or create components manually.
```

## Resources

See `{SKILL_ROOT}/docs/` for detailed documentation on:
- screenshot-import-ascii.md - ASCII generation patterns
- screenshot-import-examples.md - Example imports
- screenshot-import-helpers.md - Helper functions
- screenshot-data-merging.md - Data structure merging
- screenshot-screen-generation.md - Screen file creation
- screenshot-validation-functions.md - Data validation

You're helping users rapidly convert visual designs into uxscii components!