Add interaction states like hover, focus, disabled, active, error to existing uxscii components. Use when working with .uxm files, when user wants to expand, enhance, or add states to .uxm components.
Adds interaction states (hover, focus, disabled, active, error) to existing uxscii components. Automatically triggered when working with .uxm files or when users request to expand components with new states.
/plugin marketplace add trabian/fluxwing-skills/plugin install fluxwing-skills@fluxwing-marketplaceThis skill is limited to using the following tools:
docs/03-component-creation.mddocs/06-ascii-patterns.mdExpand existing uxscii components by adding interaction states.
READ from:
./fluxwing/components/ - User-created components to expand./fluxwing/library/ - User library components to expand{SKILL_ROOT}/docs/ - Documentation for state definitionsWRITE to:
./fluxwing/components/ - Updated components (overwrite existing)./fluxwing/library/ - Updated library components (overwrite existing)Expand an existing uxscii component by adding interaction states.
Ask for the component name if not provided:
./fluxwing/components/ and ./fluxwing/library/Default behavior (no instructions): Add ALL standard states for component type
Smart defaults by type:
User can override: "Only add hover and focus" or "Add error state only"
Read both files:
{component-name}.uxm - Current JSON metadata{component-name}.md - Current ASCII templateExtract:
For each new state to add:
A. Add state definition to .uxm file
Insert into the behavior.states array. Each state needs:
{
"name": "hover",
"properties": {
"border": "heavy",
"background": "primary-dark",
"textColor": "default"
},
"triggers": ["mouseenter"]
}
State property patterns by state name:
hover:
focus:
active:
disabled:
error:
success:
loading:
checked (checkbox/radio):
selected:
open (modal/select):
visited (link):
B. Generate ASCII for new state in .md file
Use appropriate box-drawing characters for each state:
┏━┓┃┗━┛╔═╗║╚═╝┏━┓┃┗━┛ with darker interior┌┄┄┐┆└┄┄┘┏━┓┃┗━┛ ⚠┏━┓┃┗━┛ ✓[✓] or filled indicatorTemplate for new state section in .md file:
## {State Name} State
\`\`\`
{ASCII art using appropriate border style}
\`\`\`
Write updated files:
{component-name}.uxm with expanded states array{component-name}.mdPreserve:
Update:
metadata.modified timestamp (set to current ISO 8601 timestamp)behavior.states array (add new states to end).md file (append new state sections before Variables section if it exists, otherwise at end)Important: When updating the .md file, insert new state sections AFTER existing state sections but BEFORE the Variables, Accessibility, and Usage sections.
After updating the files, validate the expanded component to ensure quality:
uv run {SKILL_ROOT}/../uxscii-component-creator/scripts/quick_validate.py \\
./fluxwing/components/{component-name}.uxm \\
{SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json
Validation checks:
If validation fails:
Performance: ~100ms (very fast!)
Show summary:
✓ Expanded: ./fluxwing/components/{component-name}
✓ Added states: hover, active, disabled
✓ Total states: 4 (default, hover, active, disabled)
Preview of hover state:
┏━━━━━━━━━━━━━━━━━━━━┓
┃ {{text}} ┃
┗━━━━━━━━━━━━━━━━━━━━┛
{SKILL_ROOT}/docs/06-ascii-patterns.md - Box-drawing characters{SKILL_ROOT}/docs/03-component-creation.md - Component structureUser: Expand submit-button with hover state
Skill: I found `submit-button` in ./fluxwing/components/
Current states: default
I'll add the hover state to make the button interactive.
[Reads submit-button.uxm and submit-button.md]
[Generates hover state]
[Updates both files]
✓ Expanded: ./fluxwing/components/submit-button
✓ Added states: hover
✓ Total states: 2 (default, hover)
Preview of hover state:
┏━━━━━━━━━━━━━━━━━━━━┓
┃ Submit Form ┃
┗━━━━━━━━━━━━━━━━━━━━┛
Next steps:
- Add more states (active, disabled)
- Use this button in a screen
- View all components
User: Add focus and error states to email-input
Skill: I found `email-input` in ./fluxwing/components/
Current states: default
I'll add the requested states: focus, error
[Generates only focus and error states]
✓ Expanded: ./fluxwing/components/email-input
✓ Added states: focus, error
✓ Total states: 3 (default, focus, error)
Note: Standard input states also include 'disabled'.
Let me know if you want to add it!
Ensure expanded components include:
If component not found:
✗ Component '{component-name}' not found.
Searched in:
- ./fluxwing/components/
- ./fluxwing/library/
Available components:
[List first 10 components found]
Please check the component name and try again.
If state already exists:
⚠ State 'hover' already exists in {component-name}.
Skipping duplicate state.
Current states: default, hover
Adding: active, disabled
If file write fails:
✗ Failed to update {component-name}.
Error: [specific error message]
The component files remain unchanged.
Please check file permissions and try again.
You're helping users create fully interactive uxscii components!
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.