microinteractions

Design and audit UI microinteractions using triggers, rules, feedback, and loops.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/aungpwint/presentation --skill microinteractions-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: microinteractions
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/microinteractions
Command: npx skills add https://github.com/aungpwint/presentation --skill microinteractions-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Interfaces often feel dead or untrustworthy because small interaction details like button feedback, loading states, and toggle behavior are overlooked. This Skill provides a structured framework, based on Dan Saffer's four-part model, to design, score, and fix these contained product moments. ## Core Features & Use Cases - Four-Part Design Framework: Structure any microinteraction around Triggers, Rules, Feedback, and Loops & Modes, with ethical boundaries for each. - Scored Diagnostic Audit: Evaluate any microinteraction against an 8-row diagnostic checklist and compute a 0-10 score with specific fixes for each failure. - Detailed Case Studies: Reference implementation-ready breakdowns of form submission, toggles, pull-to-refresh, loading states, and toast notifications, including animation specs, accessibility requirements, and edge cases. - Use Case: When a user says the interface feels unresponsive, audit the save button flow, identify missing sub-100ms feedback and absent error states, then specify exact visual states, timing, and copy for each transition. ## Quick Start Audit the loading state and submit button feedback in my checkout form using the microinteractions framework and tell me the score with fixes.

Frequently Asked Questions about microinteractions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design better microinteractions for my product?▼

Structure every microinteraction around four parts: a trigger that initiates it, rules that define what happens, feedback that shows what is happening, and loops and modes that govern long-term behavior. Then audit it against the 8-row diagnostic checklist to find gaps.

How fast should UI feedback be after a user action?▼

Feedback for direct manipulation should appear within 100ms to feel instantaneous. Delays of 300ms to 1s need a loading indicator, 1-5s need a skeleton screen or spinner, and anything over 5s needs a determinate progress bar.

When should I use a skeleton screen vs a spinner?▼

Use a spinner for waits of 300ms to 1s and a skeleton screen for waits of 1-5 seconds when the content layout is known. Skeleton screens reduce perceived wait time by showing the final layout shape immediately while data loads.

What are common microinteraction design mistakes?▼

The most common failures are missing feedback on actions, invisible gesture-only triggers, hidden modes causing mode errors, fake progress indicators, and ignoring edge cases like empty states, maximum values, and rapid repeated triggers.

How do I make microinteractions accessible?▼

Pair every visual state change with ARIA live region announcements, respect prefers-reduced-motion by replacing animations with instant state changes, never rely on color or audio alone, and ensure all triggers are keyboard operable with visible focus indicators.

When should I avoid adding modes to an interface?▼

Avoid modes whenever possible because they violate the same-action-same-result principle and cause mode errors. If a mode is necessary, keep the total under three, make the current mode highly visible, and provide an obvious always-available escape.