Can I choose which specific states to add?

Yes. While the skill provides smart defaults for each component type, you can instruct it to only add specific states like 'hover' or 'error'.

How does it ensure the updated files are valid?

After every expansion, the skill runs a validation script against a formal UXM schema to ensure JSON compliance and structural integrity.

Does it overwrite my existing component design?

The skill is designed to be additive. It preserves all existing metadata, variables, and states while appending the new interaction states to the files.

Does it support complex components like tables or modals?

Yes, it includes specific state patterns for complex UI elements, such as 'sorted' for tables and 'open/closing' for modals.

What file formats does this skill support?

This skill specifically targets .uxm (JSON metadata) and .md (ASCII template) files used within the Fluxwing component ecosystem.

Fluxwing UX Component Expander

Name: Fluxwing UX Component Expander
Author: trabian

bytrabian

•

Design Tools

Enhances ASCII UI components by automatically generating interaction states like hover, focus, and disabled for rapid prototyping.

The Fluxwing Component Expander is a specialized tool for developers and designers working with UXSCII (text-based UI) systems. It automates the tedious process of adding interaction states—such as hover, focus, active, error, and disabled—to existing components. By analyzing .uxm metadata and .md templates, the skill applies smart defaults based on component types (buttons, inputs, checkboxes, etc.), ensuring visual consistency through standardized box-drawing character patterns. This skill is essential for building robust, AI-ready design systems that require high-fidelity state definitions without manual ASCII editing.

Key Features

01Precise ASCII art generation using standardized box-drawing character patterns

02Smart state defaults tailored to specific component types (buttons, inputs, etc.)

039 GitHub stars

04Integrated schema validation to ensure JSON compliance and data integrity

05Automated generation of interactive UI states like hover, focus, and active

06Automatic synchronization between .uxm metadata and .md documentation files

Use Cases

01Batch-updating component libraries with error and success indicators

02Rapidly prototyping interactive behaviors for low-fidelity ASCII wireframes

03Adding comprehensive accessibility states like focus and disabled to design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add trabian/fluxwing-skills fluxwing-component-expander

For use in Claude.ai and ChatGPT

Download Skill