Fluxwing Screenshot Importer

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 component files in parallel (atomic + composite)
3. Screen Scaffolder Skill - Delegates to fluxwing-screen-scaffolder for screen composition

⚠️ ORCHESTRATION RULES:

YOU CAN (as orchestrator):

• ✅ Spawn vision analysis agents
• ✅ Spawn component generator agents
• ✅ Invoke fluxwing-screen-scaffolder skill
• ✅ Read screenshots
• ✅ Validate vision data

YOU CANNOT (worker mode - forbidden):

• ⚠️ Create screen files yourself using Write/Edit tools
• ⚠️ Generate .uxm, .md, or .rendered.md files for screens
• ⚠️ "Help" the scaffolder by pre-creating screen files
• ⚠️ Use TodoWrite to work through screen creation tasks yourself

For screen composition: ALWAYS delegate to fluxwing-screen-scaffolder skill. It will spawn composer agents that create all screen files (.uxm, .md, .rendered.md).

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)

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