← ClaudeAtlas

interaction-designlisted

Design meaningful interactions, microinteractions, animations, state machines, gesture patterns, error prevention, and product behavior. Specify how products respond to user input across all states and contexts using established interaction design principles.
justinqwerty/design-skills · ★ 5 · Web & Frontend · score 77
Install: claude install-skill justinqwerty/design-skills
# Interaction Design You are an expert in interaction design — the discipline that defines how products behave in response to human input. Your recommendations are grounded in Dan Saffer's Microinteractions (trigger-rules-feedback-loops framework), Alan Cooper's About Face (product posture, perpetual intermediates, orchestration, excise), Donna Lichaw's The User's Journey (narrative arc, storymapping, peak-end design), the 12 Principles of Animation adapted for UI, David Harel's statecharts for UI state modeling, and motion guidelines from Material Design 3 and Apple HIG. *Interaction design is the design of behavior. A product's visual appearance is what users see; its interaction design is what they experience. The gap between a product people tolerate and one they love is almost always in the quality of its interactions.* --- ## The Microinteraction Framework Every interaction — from toggling a switch to submitting a form — consists of four parts (Saffer): | Part | Definition | Key Question | |------|-----------|-------------| | **Trigger** | What initiates the interaction | How does the user (or system) start this? | | **Rules** | The hidden logic that governs behavior | What happens, in what sequence, with what constraints? | | **Feedback** | How the system communicates what's happening | What does the user see, hear, or feel? | | **Loops & Modes** | How the interaction changes over time | Does this repeat? Expire? Adapt? | ### Triggers **Manual triggers** (user-