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.

About

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

Precise ASCII art generation using standardized box-drawing character patterns
Smart state defaults tailored to specific component types (buttons, inputs, etc.)
9 GitHub stars
Integrated schema validation to ensure JSON compliance and data integrity
Automated generation of interactive UI states like hover, focus, and active
Automatic synchronization between .uxm metadata and .md documentation files

Use Cases

Batch-updating component libraries with error and success indicators
Rapidly prototyping interactive behaviors for low-fidelity ASCII wireframes
Adding comprehensive accessibility states like focus and disabled to design systems

About

Key Features

Precise ASCII art generation using standardized box-drawing character patterns
Smart state defaults tailored to specific component types (buttons, inputs, etc.)
9 GitHub stars
Integrated schema validation to ensure JSON compliance and data integrity
Automated generation of interactive UI states like hover, focus, and active
Automatic synchronization between .uxm metadata and .md documentation files

Use Cases

Batch-updating component libraries with error and success indicators
Rapidly prototyping interactive behaviors for low-fidelity ASCII wireframes
Adding comprehensive accessibility states like focus and disabled to design systems