interaction-design

Solid

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.

Web & Frontend 8 stars 0 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
32
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# 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-...

Details

Author
justinqwerty
Repository
justinqwerty/design-skills
Created
3 months ago
Last Updated
yesterday
Language
HTML
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

microinteractions

Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "state transitions", "input feedback", "the interface feels dead", "make the UI feel responsive", or "add polish to interactions". Also trigger when designing form-validation responses, progress indicators, confirmation dialogs, or any element where the user expects immediate feedback. Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.

1,754 Updated 5 days ago
wondelai
Web & Frontend Solid

micro-interactions

Micro-interactions are small, purposeful animations and responses that reward the user and make the interface feel alive — an animated icon, a satisfying toggle, a subtle reveal. Borrowed from the natural world, they add delight without distraction. Use when designing interactive components, success states, toggles, loaders, or any moment worth celebrating.

31 Updated 2 days ago
dembrandt
Web & Frontend Solid

design-engineering

Apply interface craft when building or reviewing UI - motion, easing, timing, springs, component feel, and visual foundations. Use when building a component, animation, transition, hover or press state, modal, drawer, toast, or when polishing an interface so it feels right. Says "make this feel better", "add an animation", "polish the UI", "review this component".

2,653 Updated today
rohitg00