Fluxwing Component Creator

Fluxwing Component Creator

You are helping the user create uxscii component(s) using the uxscii standard by orchestrating the designer agent.

Data Location Rules

READ from (bundled templates - reference only):

• {SKILL_ROOT}/templates/ - 11 component templates
• {SKILL_ROOT}/docs/ - Documentation

INVENTORY sources:

• ./fluxwing/components/ - User components
• ./fluxwing/library/ - Customized templates
• {SKILL_ROOT}/templates/ - Bundled templates (READ-ONLY)

WRITE to (project workspace - via designer agent):

• ./fluxwing/components/ - Your created components

NEVER write to skill directory - it's read-only!

LOAD for copy-on-update logic:

• {SKILL_ROOT}/../shared/docs/copy-versioning.md - Versioning pattern for existing components

Your Task

Help the user create uxscii component(s) by gathering requirements and spawning designer agent(s).

Supports both single and multi-component creation:

• Single: "Create a submit button"
• Multiple: "Create submit-button, cancel-button, and email-input" (agents run in parallel)

Speed Modes

Fluxwing supports two creation modes optimized for different use cases:

Fast Mode (Scaffolding)

When: Scaffolder creates multiple components in parallel Speed: ~10 seconds per component Output: .uxm only (fidelity: sketch) Method: Template-based variable substitution

Fast mode skips:

• Documentation loading
• ASCII art generation
• Detailed metadata

Detailed Mode (Standalone)

When: User explicitly creates single component Speed: ~60-90 seconds per component Output: .uxm + .md (fidelity: detailed) Method: Full docs, careful ASCII generation

Detailed mode includes:

• Complete documentation reference
• Hand-crafted ASCII art
• Rich metadata with examples

Default: Fast mode when called by scaffolder, detailed mode otherwise

Workflow

Step 1: Determine Creation Mode & Parse Request

First, determine creation mode:

Check context to decide fast vs detailed mode:

Use Fast Mode if:

• Called by scaffolder skill (check for "screen context" in request)
• User explicitly requests "fast" or "quick" component
• Creating multiple components (6+ components)

Use Detailed Mode if:

• User creating single component interactively
• User requests "detailed" or "production" quality
• No screen context provided

Default: Detailed mode (safer, better quality)

Then, detect if user wants single or multiple components:

1. Single component request:
2. "Create a submit button"
3. "I need a card component"
4. Proceed with single-component workflow (Steps 2-4)

1. Multiple component request:
2. "Create submit-button, cancel-button, and email-input"
3. "I need a button, input, and card"
4. "Create these components: [list]"
5. Proceed with multi-component workflow (see Step 3b)

For each component, gather:

• Component name (will be converted to kebab-case, e.g., "Submit Button" → "submit-button")
• Component type: button, input, card, navigation, form, list, modal, table, badge, alert, container, text, image, divider, or custom
• Key properties: What should be configurable? (text, colors, sizes, etc.)
• Visual style preferences: rounded, sharp, minimal, detailed, etc.

If details are missing: Make reasonable assumptions based on component type and common patterns. Don't over-ask.

Note: Components are created with default state only for fast MVP prototyping. Users can expand components later to add interactive states (hover, focus, disabled, etc.).

Step 2: Check for Similar Templates

Browse available templates to offer starting points:

// Check bundled templates
const bundledTemplates = glob('{SKILL_ROOT}/templates/*.uxm');
// Check user library
const libraryTemplates = glob('./fluxwing/library/*.uxm');

// Suggest similar templates if found
if (similarTemplates.length > 0) {
  console.log(`Similar templates found: ${similarTemplates.join(', ')}`);
  console.log('Would you like to base this on an existing template or create from scratch?');
}

Step 3: Pre-Creation Validation (Check for Existing Component)

IMPORTANT: Before creating any component, check if it already exists to prevent data loss.

For each component you plan to create:

1. Convert to kebab-case ID:

`` "Submit Button" → "submit-button" "User Profile Card" → "user-profile-card" ``

1. Check if component exists:

``bash # Check for existing component test -f ./fluxwing/components/{component-id}.uxm ``

1. If component EXISTS:

Inform user and offer choices: ``` Component '{component-id}' already exists (version {current-version}).

Options: (a) Create new version (copy-on-update: {component-id}-v{N+1}) (b) Create with different name (c) Cancel operation

What would you like to do? ```

Handle user response:

• Choice (a) - Create new version:
• Load copy-versioning logic from {SKILL_ROOT}/../shared/docs/copy-versioning.md
• Read existing {component-id}.uxm
• Find highest version (check for {component-id}-v2, -v3, etc.)
• Calculate next version: v{N+1}
• Pass to designer agent with versioning parameters:
• baseComponentId: Original ID (e.g., "submit-button")
• newComponentId: Versioned ID (e.g., "submit-button-v2")
• baseOnExisting: true
• sourceVersion: Highest existing version
• Designer creates {component-id}-v{N+1}.uxm and .md
• Metadata: Increment minor version (1.0.0 → 1.1.0), update modified, preserve created

• Choice (b) - Different name:
• Ask: "What would you like to name this component?"
• Wait for user response
• Use new name for component ID
• Proceed with normal creation

• Choice (c) - Cancel:
• Do not create any files
• Inform user: "Operation cancelled. No files were created."
• Exit workflow

1. If component DOES NOT exist:
2. Proceed with normal creation workflow (no versioning needed)
3. Component will be created as {component-id}.uxm (no version suffix)
4. Initial version: 1.0.0

For multiple components: Check existence for EACH component individually. Some may need versioning, others may not.

Agent Prompts

Fast Mode Agent (For Scaffolder)

Use this when creating multiple components quickly:

Task({
  subagent_type: "general-purpose",
  // Note: model parameter not yet supported by Task tool
  description: "Create ${componentName} (fast)",
  prompt: `Create sketch-fidelity uxscii component from template.

Component: ${componentName}
Type: ${componentType}
Screen context: ${screenContext}
${baseOnExisting ? `
VERSIONING MODE:
- Base on existing: ${baseComponentId}
- New component ID: ${newComponentId}
- Source version: ${sourceVersion}
- Copy-on-update: Increment minor version, preserve created timestamp
` : ''}

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

Your task:
1. ${baseOnExisting ? `Load existing: ./fluxwing/components/${sourceVersion}.uxm` : `Load minimal template: {SKILL_ROOT}/templates/minimal/${componentType}.uxm.template`}
2. ${baseOnExisting ? `Read current version number and metadata.created timestamp` : `If template not found, FAIL with error: "No template found for type: ${componentType}"`}
3. Replace template variables (component type specific):

   **Common variables (all types):**
   - {{id}} = "${componentId}"
   - {{name}} = "${componentName}"
   - {{description}} = "${description || 'Component for ' + screenContext}"
   - {{timestamp}} = "${new Date().toISOString()}"

   **Component-specific variables:**
   | Type       | Variables                                  |
   |------------|-------------------------------------------|
   | button     | {{label}}, {{variant}}                    |
   | input      | {{placeholder}}, {{type}}, {{value}}      |