What problem does it solve? Interactive components often end up with inconsistent or confusing state behavior: focus confused with selection, active-down reused as a toggle indicator, disabled and read-only treated identically, or status conveyed by color alone. This Skill provides a structured workflow to define, implement, and verify component states so hover, focus, pressed, selected, disabled, loading, and validation states remain coherent across pointer, keyboard, and touch. ## Core Features & Use Cases - State taxonomy and semantics: Distinguishes transient input feedback (hover, active/down), persistent choice (selected, checked, pressed, expanded, current), availability (disabled, read-only), and status (error, warning, success) with clear definitions for each. - Combination and priority rules: Provides a state matrix approach and a meaning-based priority order (operability, focus, persistent value, status, transient feedback) so overlapping states like selected + focus or error + focus remain distinguishable. - Verification checklist: Defines a completion gate covering pointer/keyboard/touch operation, light/dark/high-contrast themes, zoom, and real rendered UI inspection rather than build success alone. - Use Case: When building a toggle button group, use this Skill to separate the momentary pressed-down appearance from the persistent on/off state, then verify keyboard users can distinguish focus from selection. ## Quick Start Use the interaction-states skill to review my component's hover, focus, selected, disabled, and error states and verify them across keyboard and touch input.
