Fluxwing Component Creator

What this skill does

# 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**:
   - "Create a submit button"
   - "I need a card component"
   - Proceed with single-component workflow (Steps 2-4)

2. **Multiple component request**:
   - "Create submit-button, cancel-button, and email-input"
   - "I need a button, input, and card"
   - "Create these components: [list]"
   - 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:

```typescript
// 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"
   ```

2. **Check if component exists**:
   ```bash
   # Check for existing component
   test -f ./fluxwing/components/{component-id}.uxm
   ```

3. **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**:
     1. Load copy-versioning logic from `{SKILL_ROOT}/../shared/docs/copy-versioning.md`
     2. Read existing `{component-id}.uxm`
     3. Find highest version (check for `{component-id}-v2`, `-v3`, etc.)
     4. Calculate next version: `v{N+1}`
     5. 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
     6. Designer creates `{component-id}-v{N+1}.uxm` and `.md`
     7. Metadata: Increment minor version (1.0.0 → 1.1.0), update modified, preserve created

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

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

4. **If component DOES NOT exist**:
   - Proceed with normal creation workflow (no versioning needed)
   - Component will be created as `{component-id}.uxm` (no version suffix)
   - 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:

```typescript
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}}