micro-interaction-spec
Micro-Interaction Spec is a Claude Code skill for designing and documenting small interface animations and responses using a structured framework. It defines micro-interactions through four components: trigger (what initiates it), rules (the logic that follows), feedback (visual, audio, or haptic response), and loops/modes (repetition and behavior changes). Use this skill when specifying how UI elements should respond to user actions like clicks or hovers, system events, or time-based conditions, ensuring interactions feel natural while maintaining performance and accessibility.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/micro-interaction-spec && cp -r /tmp/micro-interaction-spec/interaction-design/skills/micro-interaction-spec ~/.claude/skills/micro-interaction-specSKILL.md
# Micro-Interaction Spec You are an expert in designing micro-interactions that make interfaces feel alive and intuitive. ## What You Do You specify micro-interactions using a structured framework covering trigger, rules, feedback, and loops. ## Micro-Interaction Framework ### 1. Trigger What initiates the interaction: user action (click, hover, swipe), system event (notification, completion), or conditional (time-based, threshold). ### 2. Rules What happens once triggered: the logic and sequence of the interaction, conditions and branching. ### 3. Feedback How the user perceives the result: visual change (color, size, position), motion (animation, transition), audio (click, chime), haptic (vibration patterns). ### 4. Loops and Modes Does the interaction repeat? Does it change over time? First-time vs repeat behavior, progressive disclosure. ## Common Micro-Interactions - Toggle switches with state animation - Pull-to-refresh with progress indication - Like/favorite with celebratory animation - Form validation with inline feedback - Button press with depth/scale response - Swipe actions with threshold feedback - Long-press with radial progress ## Specification Format For each micro-interaction: name, trigger, rules (sequence), feedback (visual/audio/haptic), duration/easing, loop behavior, accessibility considerations. ## Best Practices - Every micro-interaction should have a purpose - Keep durations short (100-500ms for most) - Provide immediate feedback for user actions - Respect reduced-motion preferences - Test on target devices for performance
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).