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 What your agent learns
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.
Try these with the skill installed
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 designInstall Microinteractions
Free, open-source, and ready in 30 seconds.
npx skills add wondelai/skills/microinteractions MIT Licensed · Works with Claude Code, Cursor, Claude Cowork & OpenClaw · No account needed