interaction-designlisted

# Interaction Design ## Purpose Design component interaction specs with all visual states, transitions, and accessibility requirements. ## Scope Constraints Reads component requirements, design system documentation, and platform guidelines for interaction analysis. Does not modify files or execute code. Does not access running applications or browser environments directly. ## Inputs - Component name and purpose - Context where it appears (page, modal, sidebar, etc.) - User actions it must support - Existing design system or component library (if any) - Platform constraints (web, mobile, both) ## Input Sanitization No user-provided values are used in commands or file paths. All inputs are treated as read-only analysis targets. ## Procedure ### Progress Checklist - [ ] Step 1: Define component purpose - [ ] Step 2: Enumerate all visual states - [ ] Step 3: Define transitions between states - [ ] Step 4: Specify accessibility requirements - [ ] Step 5: Define responsive behavior - [ ] Step 6: Specify content constraints ### Step 1: Define Component Purpose - What job does this component do? - What user need does it serve? - Where does it appear in the UI hierarchy? - What is the minimal viable version? ### Step 2: Enumerate All Visual States | State | Visual Treatment | When Active | |-------|-----------------|-------------| | Default/Rest | Base styling | No interaction | | Hover | Subtle highlight, cursor change | Mouse over (desktop) | | Focus | Visible focus ri