Fluxwing Library Browser

Fluxwing Library Browser

Browse all available uxscii components: bundled templates, user-created components, and complete screens.

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)
• {SKILL_ROOT}/docs/ - Documentation

READ from (project workspace):

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

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

Your Task

Show the user what uxscii components are available across four sources:

1. Bundled Templates - 11 curated examples from skill templates (read-only reference)
2. Project Components - User/agent-created reusable components in ./fluxwing/components/ (editable)
3. Project Library - Customized template copies in ./fluxwing/library/ (editable)
4. Project Screens - Complete screen compositions in ./fluxwing/screens/ (editable)

Key Distinction: Bundled templates are READ-ONLY reference materials. To customize them, copy to your project workspace first.

Fast Browsing with Pre-Built Index

IMPORTANT: Use the pre-built template index for instant browsing (10x faster than globbing):

// Load the pre-built index (1 file read = instant results!)
const index = JSON.parse(read('{SKILL_ROOT}/data/template-index.json'));

// Browse by type
const buttons = index.by_type.button; // ["primary-button", "secondary-button"]
const inputs = index.by_type.input; // ["email-input"]

// Search by tag
const formComponents = index.by_tag.form; // All form-related components
const interactiveComponents = index.by_tag.interactive; // All interactive components

// Get component info instantly (no file reads needed!)
const buttonInfo = index.bundled_templates.find(t => t.id === "primary-button");
console.log(buttonInfo.name); // "Primary Button"
console.log(buttonInfo.description); // Full description
console.log(buttonInfo.preview); // ASCII preview already extracted!
console.log(buttonInfo.states); // ["default", "hover", "active", "disabled"]
console.log(buttonInfo.props); // ["text", "variant", "size"]
console.log(buttonInfo.tags); // ["button", "primary", "action", "interactive"]