ASCII-first UX components for AI-native tooling.

Getting Started

Install Fluxwing Skills and create your first component in 30 seconds.

Quick Start

Get up and running with Fluxwing Skills in two simple steps:

1. Install Skills

For Claude Code (CLI):

/plugin marketplace add trabian/fluxwing-skills
/plugin install fluxwing-skills

The plugin system will automatically:

  • → Install all 6 skills to Claude Code
  • → Verify templates and schemas
  • → Make skills available immediately
  • → Enable easy updates with /plugin update

For Claude Desktop App (GUI):

Download ZIP files from releases and upload via Settings > Capabilities. See Installation Options below for details.

2. Start Designing

Open Claude and say:

"Create a button component"

The fluxwing-component-creator skill will activate and guide you through creating your first component with ASCII art and structured metadata.

Installation Options

Plugin Installation (Recommended)

/plugin marketplace add trabian/fluxwing-skills
/plugin install fluxwing-skills

Best for: Production use, automatic updates, managed installation

Location: Managed by Claude Code plugin system

Verify Installation

/plugin list

You should see fluxwing-skills in the installed plugins list.

Update Plugin

/plugin update fluxwing-skills

Keep your skills up to date with the latest features.

Claude Desktop App Installation

For the GUI Claude Desktop app (macOS/Windows):

  1. → Download ZIP files from latest release
  2. → Open Claude Desktop app
  3. → Go to Settings > Capabilities
  4. → Click "Upload skill"
  5. → Select a ZIP file to upload
  6. → Repeat for each skill you want to install

Best for: Claude Desktop app users (GUI)

Requirements: Pro, Max, Team, or Enterprise plan with code execution enabled

Available ZIPs: 6 files ranging from 6.6KB to 60KB

Note: You can install all 6 skills or just the ones you need:

  • → fluxwing-component-creator.zip (60KB) - Create components
  • → fluxwing-library-browser.zip (7.6KB) - Browse library
  • → fluxwing-component-expander.zip (9.3KB) - Add states
  • → fluxwing-screen-scaffolder.zip (15KB) - Build screens
  • → fluxwing-component-viewer.zip (6.6KB) - View details
  • → fluxwing-screenshot-importer.zip (24KB) - Import screenshots

Development Installation

For local development and testing only:

git clone https://github.com/trabian/fluxwing-skills.git
cd fluxwing-skills
./scripts/install.sh

Use when: You're developing skills or need to test local changes.
Location: ~/.claude/skills/ or ./.claude/skills/

Your First Component

Let's create a submit button using natural language:

Step 1: Ask Claude

You: "Create a submit button"

Step 2: Review the Output

Claude generates two files in ./fluxwing/components/:

submit-button.uxm (JSON metadata):

{
  "id": "submit-button",
  "type": "button",
  "version": "1.0.0",
  "metadata": {
    "name": "Submit Button",
    "created": "2024-10-11T12:00:00Z"
  },
  "props": {
    "text": "Submit"
  },
  "ascii": {
    "templateFile": "submit-button.md",
    "width": 20,
    "height": 3
  }
}

submit-button.md (ASCII template):

## Default State

```
╭──────────────────╮
│   {{text}}       │
╰──────────────────╯
```

Step 3: Iterate

Give feedback naturally:

You: "Make it bigger and add a hover state"

Claude: [Updates files with expanded dimensions and hover state]

Try These Next

Browse Available Components

"Show me all available components"

The fluxwing-library-browser displays 11 bundled templates plus your custom components.

Add Interactive States

"Add hover and focus states to my button"

The fluxwing-component-expander adds interaction states to existing components.

Build a Complete Screen

"Build a login screen with email, password, and submit button"

The fluxwing-screen-scaffolder creates missing components and composes them into a complete screen.

View Component Details

"Show me the primary-button"

The fluxwing-component-viewer displays full metadata and ASCII preview.

Import from Screenshots

"Import this screenshot: /path/to/design.png"

The fluxwing-screenshot-importer uses vision analysis to extract components.

What Gets Installed

6 Specialized Skills

Skill Purpose
fluxwing-component-creator Create UI components (buttons, inputs, cards)
fluxwing-library-browser Browse available components and templates
fluxwing-component-expander Add interaction states (hover, focus, disabled)
fluxwing-screen-scaffolder Build complete screens from components
fluxwing-component-viewer View component details and metadata
fluxwing-screenshot-importer Import components from screenshot images

Supporting Files

  • → 11 Component Templates - Buttons, inputs, cards, modals, navigation, etc.
  • → 2 Screen Examples - Login screen and dashboard
  • → JSON Schema - Validation rules for component structure
  • → Documentation - 13 modular documentation files

Total: 6 skills + 42 supporting files = 48 files

Troubleshooting

Skills Not Activating

Problem: Natural language doesn't trigger skills.

Solutions:

  • → Verify plugin installation: /plugin list
  • → Check for fluxwing-skills in the list
  • → Restart Claude Code
  • → Try explicit language: "Use the fluxwing component creator to make a button"
  • → Reinstall: /plugin uninstall fluxwing-skills then /plugin install fluxwing-skills

Templates Not Found

Problem: Skills can't find component templates.

Solutions:

  • → Verify plugin installation: /plugin list
  • → Update to latest version: /plugin update fluxwing-skills
  • → Reinstall plugin if issue persists

Plugin Installation Fails

Problem: Cannot install via plugin system.

Solutions:

  • → Verify you're using Claude Code (not Claude.ai web)
  • → Check internet connection
  • → Try removing marketplace: /plugin marketplace remove trabian/fluxwing-skills
  • → Then re-add: /plugin marketplace add trabian/fluxwing-skills
  • → For development: Use ./scripts/install.sh instead

Next Steps