Command Reference

Overview

Fluxwing Skills activate automatically based on natural language. Just ask Claude what you want to do, and the appropriate skill will handle it.

UXscii Component Creator

Skill #1

Purpose

Create new uxscii components with ASCII art and structured metadata. Supports both single and multi-component creation.

Triggers

• "Create a button"
• "I need an input component"
• "Make a card component"
• "Create submit-button, cancel-button, and email-input" (parallel creation)

What It Does

1. Gathers requirements (name, type, properties, visual style)
2. Checks for similar templates to offer starting points
3. Spawns designer agent(s) to create component files
4. Generates two files: .uxm (JSON metadata) + .md (ASCII template)
5. Saves to ./fluxwing/components/

Component Types

Output

./fluxwing/components/
├── submit-button.uxm      # JSON metadata
└── submit-button.md       # ASCII template

Example

You: "Create a submit button"

Claude: [Activates uxscii-component-creator]
        [Creates submit-button.uxm and submit-button.md]

Component created successfully!

UXscii Library Browser

Skill #2

Purpose

Browse all available uxscii components from four sources: bundled templates, user components, library copies, and complete screens.

Triggers

• "Show me all components"
• "Browse the library"
• "List available templates"
• "What components do I have?"

What It Does

1. Loads pre-built template index for instant browsing (10x faster)
2. Scans project workspace for custom components
3. Groups components by type and tags
4. Displays hierarchical structure with ASCII previews

Data Sources

Bundled Templates (11 components)

Starter templates you can copy and customize:

• primary-button, secondary-button
• email-input, password-input
• login-form
• user-profile-card
• success-alert
• loading-spinner
• navigation-menu
• And more...

UXscii Component Expander

Skill #3

Purpose

Add interaction states (hover, focus, disabled, active, error) to existing uxscii components.

Triggers

• "Add hover state to my button"
• "Make this component interactive"
• "Add focus and disabled states"
• "Expand the email-input component"

What It Does

1. Locates the component in ./fluxwing/components/ or ./fluxwing/library/
2. Determines which states to add (smart defaults by component type)
3. Generates state definitions in .uxm file
4. Creates ASCII representations in .md file
5. Updates both files in place

Smart Defaults by Type

Example

You: "Add hover and focus states to submit-button"

Claude: [Activates uxscii-component-expander]
        [Reads submit-button.uxm and submit-button.md]
        [Adds hover and focus states with visual variations]

States added successfully!

UXscii Screen Scaffolder

Skill #4

Purpose

Build complete UI screens by composing multiple components. Creates missing components in parallel, then assembles them into a cohesive screen.

Triggers

• "Create a login screen"
• "Build a dashboard"
• "Make a user profile page"
• "Scaffold a checkout flow"

What It Does

1. Understands screen requirements (name, purpose, components, layout)
2. Checks component inventory (user components → library → bundled templates)
3. Creates missing components in parallel (6 components = 6 agents = ~6x faster)
4. Composes screen from available + newly created components
5. Generates three files: .uxm, .md, and .rendered.md

Parallel Component Creation

The Screen Scaffolder spawns multiple designer agents in parallel:

Missing: email-input, password-input, submit-button

→ Spawn 3 agents simultaneously
→ Wait for all to complete
→ Compose screen from results

Time: ~30s (vs ~90s sequential)

Output

./fluxwing/screens/
├── login-screen.uxm        # Screen metadata
├── login-screen.md         # ASCII template with {{variables}}
└── login-screen.rendered.md # Example with REAL data

Screen Structure

Screens use type: "container" and reference child components:

{
  "id": "login-screen",
  "type": "container",
  "components": [
    { "ref": "email-input" },
    { "ref": "password-input" },
    { "ref": "submit-button" }
  ],
  "layout": "vertical"
}

UXscii Component Viewer

Skill #5

Purpose

View detailed information about a specific uxscii component including metadata, states, props, and ASCII preview.

Triggers

• "Show me the submit-button"
• "View component details for primary-button"
• "Inspect the email-input"
• "Display the login-form component"

What It Does

1. Searches for component in priority order (project → library → bundled)
2. Reads both .uxm and .md files
3. Extracts all metadata, states, and properties
4. Displays formatted view with ASCII preview

Search Priority

1. ./fluxwing/components/[name].uxm - Your components
2. ./fluxwing/library/[name].uxm - Your library
3. {"{SKILL_ROOT}"}/templates/[name].uxm - Bundled templates

Display Format

📄 PRIMARY-BUTTON
─────────────────────────────────────
📦 Source: Bundled Template
📍 Location: Component Creator Templates
🔖 Version: 1.0.0

Description:
Standard clickable button with interactive states

Component Details:
• Type: button
• Props: text, variant, disabled
• States: default, hover, focus, disabled
• Accessibility: ✓ Role, ✓ Focusable, ✓ Keyboard

ASCII Template Preview:
[Shows first 20 lines of all states]

UXscii Screenshot Importer

Skill #6

Purpose

Import UI screenshots and automatically generate uxscii components using vision analysis.

Triggers

• "Import this screenshot: /path/to/design.png"
• "Convert screenshot to uxscii"
• "Generate components from image"
• "Extract UI from screenshot.jpg"

What It Does

1. Reads screenshot image file (PNG, JPG, JPEG, WebP, GIF)
2. Spawns vision coordinator agent for parallel analysis
3. Analyzes layout structure, detects components, extracts properties
4. Generates atomic components in parallel
5. Creates composite components and screen composition
6. Outputs to ./fluxwing/components/ and ./fluxwing/screens/

Vision Analysis Pipeline

Screenshot → Vision Coordinator
              ├─ Layout Discovery (structure, hierarchy)
              ├─ Component Detection (buttons, inputs, cards)
              └─ Visual Properties (colors, spacing, borders)

Results → Component Generators (parallel)
              ├─ Atomic Components (buttons, inputs)
              ├─ Composite Components (forms, cards)
              └─ Screen Composition (full layout)

What Gets Detected

• Navigation elements (top, left, right, bottom)
• Interactive components (buttons, inputs, links)
• Content containers (cards, panels, modals)
• Small elements (icons, badges, status indicators)
• Layout relationships (grid, flex, sidebar)

Output

./fluxwing/
├── components/
│   ├── submit-button.uxm      # Extracted from screenshot
│   ├── email-input.uxm
│   └── ...
└── screens/
    ├── extracted-screen.uxm   # Full screen composition
    ├── extracted-screen.md
    └── extracted-screen.rendered.md

Common Patterns

Sequential Workflow

Build up from components to screens:

1. "Create a button"              → component-creator
2. "Add hover state"              → component-expander
3. "Show me the button"           → component-viewer
4. "Create a login screen"        → screen-scaffolder

Import & Customize

Start with a screenshot, then refine:

1. "Import screenshot.png"        → screenshot-importer
2. "Show all components"          → library-browser
3. "Add focus to email-input"     → component-expander
4. "View the submit-button"       → component-viewer

Browse & Derive

Explore templates, then create variations:

1. "Show all components"          → library-browser
2. "Create a large primary button" → component-creator
3. "Add disabled state"           → component-expander

Next Steps

• Getting Started - Installation and first component
• Architecture Overview - How Fluxwing works
• How Skills Work - Understanding the agent system
• Back to Home