Microinteractions
Designing details that delight users
Design the tiny, delightful details that make products feel polished and alive using Dan Saffer's Microinteractions framework. This skill equips your AI agent with the four-part structure — Trigger, Rules, Feedback, Loops & Modes — for crafting interactions that users remember.
Microinteractions
npx skills add wondelai/skills/microinteractions --global This skill is compatible with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent, and other agentskills.io-compatible agents.
What is the Microinteractions skill?
A save button that just sits there, a toggle with no in-between state, a form that fails silently — the Microinteractions skill, built on Dan Saffer’s book of that name, fixes exactly these. It applies his four-part structure — trigger, rules, feedback, loops and modes — so your agent specs the small moments deliberately instead of defaulting to a transition.
Key concepts from Microinteractions your agent applies
Triggers
Initiate the interaction — user-initiated triggers (buttons, gestures) and system triggers (notifications, state changes).
Rules
Define what happens when triggered — the logic that determines the interaction's behavior and constraints.
Feedback
Communicate what's happening through visual, auditory, or haptic responses — make invisible processes visible.
Loops & Modes
Handle what happens over time — does the interaction repeat? Does it change with use? Are there different modes?
Signature Moments
Design one standout microinteraction that becomes your product's signature — the detail users talk about.
When to use Microinteractions — and when not to
Reach for it when
- Your product is functionally complete and feels dead — every action lands with no acknowledgement.
- Users press submit twice because nothing visibly changed the first time they pressed it.
- State changes are handled three different ways: some toast, some navigate, some do nothing.
- You have one moment that should be memorable and it is currently a spinner.
Reach for something else when
- Nobody can find the feature in the first place — UX Heuristics deals with findability before delight.
- You are on iOS and want the system-standard haptics and transitions — iOS HIG Design carries the conventions.
- The detail you want is a scroll-length brand set piece — Top Design covers choreography at that scale.
- The visual language is inconsistent, not just the transitions — Refactoring UI standardises the tokens first.
Example prompts for the Microinteractions skill
Design microinteractions for our button states, loading, and success feedback using microinteractions skill
UI designCreate a signature microinteraction for our app's key action using microinteractions skill
Brand experienceAudit our form inputs for missing feedback and add appropriate microinteractions using microinteractions skill
Form designDesign trigger-rules-feedback specs for our notification system using microinteractions skill
Interaction designMicrointeractions vs the other Design & UX skills
All 9 Design & UX skills are free and install the same way — the only question is which framework fits the job in front of you.
| Skill | Based on | Best for |
|---|---|---|
| Refactoring UI | Refactoring UI — Adam Wathan & Steve Schoger | Practical UI design system |
| iOS HIG Design | Human Interface Guidelines — Apple | Native iOS app design guidelines |
| UX Heuristics | Don’t Make Me Think — Steve Krug & Jakob Nielsen | Usability evaluation and principles |
| Web Typography | On Web Typography — Jason Santa Maria | Web typography principles and implementation |
| Design of Everyday Things | The Design of Everyday Things — Don Norman | Foundational design principles: affordances, signifiers, feedback |
| Top Design | Elite Agency Techniques — Locomotive, Studio Freight, AREA 17 | Award-winning 10/10 web design |
| Lean UX | Lean UX — Jeff Gothelf & Josh Seiden | Collaborative, experiment-driven UX design |
| Microinteractions | Microinteractions — Dan Saffer | Designing details that delight users |
| Steve Jobs Design Review | Steve Jobs — Walter Isaacson | Jobs-style reviews: ruthless simplicity, focus, binary verdicts |
Frequently asked questions
How do I install the Microinteractions skill?
Run npx skills add wondelai/skills/microinteractions --global. It takes about 30 seconds and needs no account. The Microinteractions skill then works in Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw and Hermes Agent — anything that reads the open agentskills.io format — and your agent loads it on its own when a task calls for it. It is free and MIT-licensed, and the source is at https://github.com/wondelai/skills.
Which book is the Microinteractions skill based on?
It packages Microinteractions by Dan Saffer — former design lead at Twitter, coined "microinteractions". The skill distils the book's method into instructions your agent follows while it works, covering triggers, rules and feedback. It sits in the Design & UX part of the library.
Is a microinteraction just an animation?
Animation is one quarter of one part of it. The structure is trigger, rules, feedback, loops and modes — and some of the best microinteractions involve no motion at all: a field that remembers your last choice, a rule that makes an invalid state impossible to reach, a default good enough that nobody changes it. Reaching straight for a transition is how teams end up with a lively-looking product that still behaves stupidly.
How is this different from the Design of Everyday Things skill?
Norman establishes that feedback is required; Saffer tells you what to build. This skill produces a specification — what fires the interaction, what logic governs it, what the user sees or feels in response, and how it behaves on the hundredth use versus the first. It is the practical layer, aimed at a single moment in the interface rather than at the conceptual model of the whole product.
Won’t this make my product feel gimmicky?
It will if you apply it everywhere, and that is the honest failure mode. The argument in the book is for one signature moment and quiet competence around it — not confetti on every save. Most of the value sits in the unglamorous states nobody designs: disabled, loading, empty, partially complete, failed. Fix those and the product feels considered. Add a bounce to every button and it feels like a toy.
What do loops and modes actually cover?
Behaviour over time, which is the part teams skip. Loops ask what happens on repeat use — does the reminder escalate, does the hint stop appearing once you clearly know the gesture, does a counter reset. Modes ask whether the interaction ever needs to behave differently, and the guidance is to avoid them where you can, since a mode you cannot see is how people end up typing into the wrong place.
Guides that use this skill
Install Microinteractions
Free, open-source, and ready in 30 seconds.
npx skills add wondelai/skills/microinteractions --global MIT Licensed · Works with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent & other agentskills.io agents · No account needed
Don’t guess your AI engineering level.
Measure it.
AI Developer Scorecard
How production-grade is your AI engineering?
Twenty-five questions across the practices that separate vibe-coding from production-grade engineering. Instant score, per-section breakdown, and a 30/60/90-day playbook.
Score 0–75 · 30/60/90-day playbook Score yourself For CTOs & foundersCTO Scorecard
Is your engineering team ready for AI at scale?
Twenty-five questions on how your org adopts AI — adoption, governance, automation, and ROI. See where you sit on the path from Reactive to Strategic Leader.
Score 0–75 · Reactive → Strategic Leader Score your orgWe build the skills you already use. Now we’ll build yours.
Sprints from $3K · shipped to production, or you don’t pay the final milestone.