microinteractions

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

Updated Jul 8, 2026
One-click install
npx skills add https://github.com/HafidJoss/Lummy --skill microinteractions-hafidjoss
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: microinteractions
Source: https://github.com/HafidJoss/Lummy/tree/main/agent/skills/microinteractions
Command: npx skills add https://github.com/HafidJoss/Lummy --skill microinteractions-hafidjoss

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 poorly designed. This Skill provides a structured framework based on Dan Saffer's four-part model (Trigger, Rules, Feedback, Loops & Modes) to design, audit, and score these contained product moments. ## Core Features & Use Cases - Four-Part Design Framework: Design triggers, rules, feedback, and loops/modes for toggles, form validation, pull-to-refresh, loading states, and notifications. - 8-Row Diagnostic Audit: Score any microinteraction out of 10 using a quick diagnostic table covering discoverability, feedback timing, mode visibility, and progressive reduction. - Detailed Case Studies: Reference implementations for 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 submit button flow and get concrete fixes such as sub-100ms visual state changes, debounced double-clicks, and honest progress indicators. ## Quick Start Audit the loading state and submit button feedback in my checkout form and suggest specific microinteraction improvements.

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?

Break each microinteraction into 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 score it against the 8-row diagnostic to find specific gaps.

What makes a good loading state design?

Match the indicator to wait time: no indicator under 300ms, inline spinner under 1 second, skeleton screens for 1-5 seconds, and determinate progress bars beyond 5 seconds. Never use fake progress bars; use honest deterministic progress or an indeterminate spinner.

How fast should UI feedback be after a user action?

Direct manipulation feedback should appear within 100ms to feel instantaneous. Delays of 100-300ms still feel responsive with transition animations, while anything over 1 second requires a loading indicator to maintain user trust.

When should I use modes in interface design?

Use modes only when justified by physical constraints, safety, or genuinely different tasks like edit versus view. Keep the current mode highly visible, provide an obvious escape, and prefer spring-loaded modes that exit when the trigger is released.

Why does my interface feel unresponsive even though it works?

The usual causes are missing immediate visual feedback on actions, uniform feedback that ignores event significance, and invisible triggers. Add distinct visual states to every interactive element and scale feedback intensity to the action's importance.

What are common microinteraction mistakes to avoid?

Common failures include no feedback on actions, overdesigned animations on frequent tasks, hidden modes causing mode errors, fake progress indicators, and ignoring edge cases like zero values, rapid repeated triggers, and interruptions.