ux-component-states
✓Interactive component state patterns including hover, focus, active, disabled, loading, and error states. Use when building buttons, inputs, cards, or any interactive elements. (project)
Installation
SKILL.md
Interactive state management for web components. This skill covers visual feedback for all interaction states, ensuring components feel responsive and accessible.
Custom elements are "undefined" until JavaScript loads and registers them. Use :not(:defined) to prevent Flash of Unstyled Content (FOUC):
Important: Element references are stored during construction - NEVER use querySelector.
Interactive component state patterns including hover, focus, active, disabled, loading, and error states. Use when building buttons, inputs, cards, or any interactive elements. (project) Source: matthewharwood/fantasy-phonics.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-component-states- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is ux-component-states?
Interactive component state patterns including hover, focus, active, disabled, loading, and error states. Use when building buttons, inputs, cards, or any interactive elements. (project) Source: matthewharwood/fantasy-phonics.
How do I install ux-component-states?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-component-states Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/matthewharwood/fantasy-phonics
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01