Fluxwing Screen Scaffolder

Fluxwing Screen Scaffolder

Create complete screen designs using the uxscii standard by orchestrating specialized agents.

Data Location Rules

READ from (bundled templates - reference only):

• {SKILL_ROOT}/../uxscii-component-creator/templates/ - 11 component templates
• {SKILL_ROOT}/templates/ - 2 screen examples
• {SKILL_ROOT}/docs/ - Documentation

INVENTORY sources (check all for available components):

• ./fluxwing/components/ - User-created components (FIRST PRIORITY)
• ./fluxwing/library/ - Customized template copies
• {SKILL_ROOT}/../uxscii-component-creator/templates/ - Bundled templates (READ-ONLY)

WRITE to (project workspace):

• ./fluxwing/screens/ - Your created screens (via composer agent)

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

Your Task

⚠️ YOU ARE AN ORCHESTRATOR - DO NOT DO THE WORK YOURSELF! ⚠️

Your role is to spawn agents using the Task tool. You coordinate agents, you don't create components directly.

Help the user scaffold a complete screen by orchestrating agents in two phases:

1. Phase 1 (Parallel): Spawn multiple designer agents - one per missing component using multiple Task tool calls in ONE message
2. Phase 2 (Sequential): After all components exist, spawn composer agent

Concurrency Model:

• If 6 components are missing → spawn 6 agents in parallel using 6 Task tool calls in ONE message (~6x faster)
• Then wait for all to complete before composing screen

CRITICAL: Use the Task tool to spawn agents. Do NOT use TodoWrite and work through tasks yourself. Do NOT create files yourself.

Quality Presets

Scaffolder supports different quality levels for speed vs fidelity tradeoffs:

fast (60-90s)

• Create components (sketch fidelity)
• Compose screen
• Skip enhancement
• Use when: Rapid prototyping, early iteration

Output:

• Components: sketch fidelity (.uxm only initially, .md by composer)
• Screen: .rendered.md with basic quality
• Time: ~60-90s for 6 components

balanced (90-150s)

• Create components (sketch fidelity)
• Compose screen
• Enhance to basic fidelity
• Use when: Quick iteration with decent quality

Output:

• Components: basic fidelity (.uxm + improved .md)
• Screen: .rendered.md with good quality
• Time: ~90-150s for 6 components

detailed (180-240s) [DEFAULT]

• Create components (sketch fidelity)
• Compose screen
• Enhance to detailed fidelity (hover + focus states)
• Use when: Production-ready screens, demos

Output:

• Components: detailed fidelity (.uxm + polished .md + states)
• Screen: .rendered.md with high quality
• Time: ~180-240s for 6 components

production (300-400s)

• Create components (sketch fidelity)
• Compose screen
• Enhance to production fidelity (all states + full a11y)
• Use when: Final polish, publication

Output:

• Components: production fidelity (complete)
• Screen: .rendered.md with publication quality
• Time: ~300-400s for 6 components

Default: detailed (best balance of quality and speed)

Workflow

Step 1: Understand the Screen

Ask about the screen they want to create:

Screen details:

• Screen name and purpose: login, dashboard, profile, settings, checkout, etc.
• Required components: forms, navigation, cards, modals, lists, etc.
• Layout structure: vertical, horizontal, grid, sidebar+main, etc.

Quality preset (optional):

• fast - Quick prototype (60-90s)
• balanced - Good quality (90-150s)
• detailed - High quality (180-240s) [DEFAULT]
• production - Publication ready (300-400s)

If user doesn't specify, use detailed preset.

Step 2: Component Inventory

Check what components are available in this order:

1. User-created: ./fluxwing/components/ (FIRST PRIORITY)
2. Library: ./fluxwing/library/ (customized templates)
3. Bundled examples: {SKILL_ROOT}/../uxscii-component-creator/templates/ (READ-ONLY)

List what exists vs what needs to be created.

// Example inventory check
const userComponents = glob('./fluxwing/components/*.uxm');
const libraryComponents = glob('./fluxwing/library/*.uxm');
const bundledComponents = glob('{SKILL_ROOT}/../uxscii-component-creator/templates/*.uxm');

const available = [...userComponents, ...libraryComponents, ...bundledComponents];
const missing = requiredComponents.filter(c => !available.includes(c));

Step 3: Create Missing Components (Fast Mode)

If missing components exist, spawn designer agents in FAST MODE - one agent per component:

CRITICAL ORCHESTRATION RULES:

1. ⚠️ DO NOT create TodoWrite list and work through it yourself
2. ⚠️ DO NOT create components yourself using Write/Edit tools
3. ✅ DO use Task tool to spawn one agent per missing component
4. ✅ DO send ONE message with ALL Task calls (parallel execution)
5. ✅ DO use FAST MODE (creates .uxm only, <10s per component)

Fast Mode Creates:

• Component .uxm files (sketch fidelity)
• NO .md files (composer will create these)

Example: 6 missing components for banking-chat

Task({
  subagent_type: "general-purpose",
  model: "haiku", // Fast model
  description: "Create message-bubble (fast)",
  prompt: "Create sketch-fidelity uxscii component from template.

Component: message-bubble
Type: container
Screen context: banking-chat

FAST MODE - Speed is critical! <10 seconds target.

Your task:
1. Load minimal template: {SKILL_ROOT}/../fluxwing-component-creator/templates/minimal/container.uxm.template
2. Replace variables:
   - {{id}} = 'message-bubble'
   - {{name}} = 'Message Bubble'
   - {{description}} = 'Chat message container for banking-chat'
   - {{timestamp}} = '${new Date().toISOString()}'
   - {{screenContext}} = 'banking-chat'

3. CRITICAL: Set metadata.fidelity = "sketch"

   **REQUIRED FIELD**: The fidelity field is MANDATORY in the schema and tracks progressive enhancement.
   Fast mode MUST set fidelity to "sketch" to indicate initial scaffolding quality.

4. Verify JSON is well-formed
5. Save to ./fluxwing/components/message-bubble.uxm
6. DO NOT create .md file
7. DO NOT load documentation

VERIFICATION:
- [ ] metadata.fidelity = "sketch"
- [ ] All required fields present (name, description, created, modified, tags, category, fidelity)

Return: 'Created message-bubble.uxm (sketch fidelity)'

Target: <10 seconds"
})

Task({
  subagent_type: "general-purpose",
  model: "haiku",
  description: "Create message-input (fast)",
  prompt: "Create sketch-fidelity uxscii component from template.

Component: message-input
Type: input
Screen context: banking-chat

FAST MODE - Speed is critical! <10 seconds target.

Your task:
1. Load minimal template: {SKILL_ROOT}/../fluxwing-component-creator/templates/minimal/input.uxm.template
2. Replace variables:
   - {{id}} = 'message-input'
   - {{name}} = 'Message Input'
   - {{description}} = 'Chat input field for banking-chat'
   - {{timestamp}} = '${new Date().toISOString()}'
   - {{placeholder}} = 'Type a message...'
   - {{label}} = 'Message'
   - {{screenContext}} = 'banking-chat'

3. CRITICAL: Set metadata.fidelity = "sketch"

   **REQUIRED FIELD**: The fidelity field is MANDATORY in the schema and tracks progressive enhancement.
   Fast mode MUST set fidelity to "sketch" to indicate initial scaffolding quality.

4. Verify JSON is well-formed
5. Save to ./fluxwing/components/message-input.uxm
6. DO NOT create .md file
7. DO NOT load documentation

VERIFICATION:
- [ ] metadata.fidelity = "sketch"
- [ ] All required fields present (name, description, created, modified, tags, category, fidelity)

Return: 'Created message-input.uxm (sketch fidelity)'

Target: <10 seconds"
})

// ... spawn ONE Task per missing component in SAME message ...

Performance: 6 components × 10s = ~60 seconds (was 120-180s)

Wait for ALL component agents to complete before Step 4.

Step 4: Compose Screen with Component .md Generation

Once all components exist, spawn the composer ag