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.
npx skills add wondelai/skills/microinteractions --global 
Microinteractions Dan Saffer View on Amazon
02 What it is
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.
03 Key concepts
Five principles your agent applies.
Drawn from Microinteractions — not advice it repeats back to you, but decisions it makes while it works.
04 Fit
When to use it, and
when not to.
four symptoms it fixes, and four it doesn't.
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.
05 Prompts
Say it like this.
Name the skill at the end of a prompt and the agent applies the framework rather than a vibe. Or say nothing — it loads on its own when a task matches.
Design microinteractions for our button states, loading, and success feedback using microinteractions skill
Create a signature microinteraction for our app's key action using microinteractions skill
Audit our form inputs for missing feedback and add appropriate microinteractions using microinteractions skill
Design trigger-rules-feedback specs for our notification system using microinteractions skill
06 About the author
07 Same stack
The stack it sits in.
Nine Design & UX skills. Most people run two: this one, and whichever fits the next problem.
All Design & UX skills08 Questions
Before you install.
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.
09 Guides that use it
Put it to work.
Long-form playbooks where this skill does part of the job.
One skill, one command.
Install Microinteractions, or the whole stack.
npx skills add wondelai/skills/microinteractions --global MIT licensed · Claude, Claude Code, Codex, Cursor, OpenClaw, Hermes · No account