Fluxwing Component Viewer

View detailed information about a specific uxscii component from any source.

Data Location Rules

READ from (bundled templates - reference only):

• {SKILL_ROOT}/../uxscii-component-creator/templates/ - 11 component templates
• {SKILL_ROOT}/../uxscii-screen-scaffolder/templates/ - 2 screen examples (if available)

READ from (project workspace):

• ./fluxwing/components/ - Your created components
• ./fluxwing/library/ - Customized template copies
• ./fluxwing/screens/ - Your created screens

NEVER write - this is a read-only viewer!

Your Task

Display comprehensive details about a single uxscii component, including metadata, ASCII template preview, and context-appropriate actions.

Component Lookup Process

1. Parse Component Name

• Extract component name from user request
• If no name provided: Ask "Which component would you like to view?"
• Normalize name to lowercase with hyphens

2. Search Priority Order (Stop at First Match)

Search these locations in order and stop at the first match:

1. Project Components: ./fluxwing/components/[name].uxm

   • User/agent-created custom components
   • Fully editable
   • Tag as: "Your Component"

2. Project Library: ./fluxwing/library/[name].uxm

   • Customized copies of bundled templates
   • Fully editable
   • Tag as: "Your Library"

3. Bundled Templates: {SKILL_ROOT}/../uxscii-component-creator/templates/[name].uxm

   • Read-only reference templates
   • Must be copied to edit
   • Tag as: "Bundled Template"

Important: Stop searching after first match. If found in bundled templates, check if it also exists in user's project and add a note: "💡 You also have a customized version in ./fluxwing/library/"

3. Read Component Files

For the matched component, read both files:

• [name].uxm - JSON metadata
• [name].md - ASCII template

Display Format

Concise View (Default)

Present component information in a clean, scannable format:

📄 PRIMARY-BUTTON
─────────────────────────────────────────────────────
📦 Source: Bundled Template
📍 Location: Component Creator Templates
⏱️  Modified: 2024-10-11 10:30:00
🔖 Version: 1.0.0

Description:
Standard clickable button with hover, focus, and disabled states

Component Details:
• Type: button
• Props: text (string), variant (string), disabled (boolean)
• States: default, hover, focus, disabled
• Accessibility: ✓ Role (button), ✓ Focusable, ✓ Keyboard (Space, Enter)

ASCII Template Preview (first 20 lines):

Default State:
▓▓▓▓▓▓▓▓▓▓▓▓
▓ {{text}} ▓
▓▓▓▓▓▓▓▓▓▓▓▓

Hover State:
░▓▓▓▓▓▓▓▓▓▓▓░
░▓ {{text}} ▓░
░▓▓▓▓▓▓▓▓▓▓░

Disabled State:
┌ ─ ─ ─ ─ ─┐
│ {{text}} │
└ ─ ─ ─ ─ ─┘

[... 1 more state]

Template has 4 states total. View full template?
─────────────────────────────────────────────────────

Format Guidelines

Header Section:

• Component name in CAPS
• Emoji indicators:
  • 📦 = Bundled Template
  • ✏️ = Your Library
  • 🎨 = Your Component
• Full file path for clarity
• Last modified timestamp (if available)
• Version from metadata

Description:

• Use the metadata.description field from .uxm file
• Keep it concise (1-2 lines)

Component Details:

• Type: Direct from .uxm type field
• Props: List prop names with types in parentheses
  • Format: propName (type)
  • Example: text (string), disabled (boolean)
• States: Comma-separated list of state names
• Accessibility: Show checkmarks for present features
  • Role, Focusable, Keyboard shortcuts, ARIA labels

ASCII Template Preview:

• Show first 20 lines by default
• If template has multiple states, show state labels
• If template exceeds 20 lines, add: [... N more states/lines]
• Preserve exact spacing and box-drawing characters
• Show variables as {{variableName}}

Truncation Logic

If .md template exceeds 20 lines:

1. Count total states/sections in template
2. Show first 2-3 states completely
3. Add summary line: [... N more states]
4. Offer: "View full template?" as interactive option

Interactive Options

After displaying the component, offer context-appropriate actions:

For Bundled Templates (read-only)

What would you like to do?

1️⃣ Copy to project library (makes it editable)
2️⃣ View full template file (all states)
3️⃣ View full metadata (complete .uxm)
4️⃣ Browse all components

Action Details:

• Copy: Copy both .uxm and .md to ./fluxwing/library/
• View full template: Display complete .md file (no truncation)
• View full metadata: Display complete .uxm JSON
• Browse: Return to library browser

For Project Files (./fluxwing/library/ or ./fluxwing/components/)

What would you like to do?

1️⃣ Edit component (modify .uxm and .md)
2️⃣ View full template file (all states)
3️⃣ View full metadata (complete .uxm)
4️⃣ Delete component (manual: remove files from filesystem)
5️⃣ Browse all components

Action Details:

• Edit: Open both .uxm and .md for editi

...