micro-interaction-spec
owl-listener/designer-skills
Specify single micro-interactions with trigger, rules, feedback, and loops for engineering handoff.
What is micro-interaction-spec?
A structured framework for designing and documenting one micro-interaction completely. Use this when you need to hand a single interaction to engineering with full specifications for trigger, rules, feedback, loops, and modes. For animation principles alone or multi-state components, use the companion skills instead.
- Define triggers (user actions, system events, conditionals) that initiate interactions
- Specify rules including logic, sequence, conditions, and branching behavior
- Document feedback mechanisms: visual changes, motion, audio, and haptic responses
- Describe loops and modes including first-time vs repeat behavior and progressive disclosure
- Provide accessibility considerations and reduced-motion preferences
- Format specifications with duration, easing, and device performance testing
How to install micro-interaction-spec
npx skills add https://github.com/owl-listener/designer-skills --skill micro-interaction-specHow to use micro-interaction-spec
- 1.Identify the single micro-interaction you need to specify
- 2.Define the trigger: what user action, system event, or condition initiates it
- 3.Document the rules: the sequence, logic, and any conditional branching
- 4.Specify all feedback: visual (color, size, position), motion (animation, easing), audio, and haptic
- 5.Describe loops and modes: whether it repeats, changes over time, or has first-time vs repeat behavior
- 6.Include accessibility notes and reduced-motion preferences
- 7.Test the specification on target devices for performance
Use cases
- Handing a single button press interaction with depth/scale response to a developer
- Documenting a pull-to-refresh interaction with progress indication for mobile app
- Specifying a like/favorite animation with celebratory feedback for social features
- Creating a form validation micro-interaction with inline error feedback
- Defining a long-press interaction with radial progress indicator for actions
- Product designers handing specs to engineering
- Design systems teams documenting interaction patterns
- UX designers working on detailed interaction specifications
- Teams building interfaces that need precise micro-interaction behavior
micro-interaction-spec FAQ
Use micro-interaction-spec for complete interaction specifications with triggers, rules, and feedback. Use animation-principles when you only need motion and animation craft guidance.
Use micro-interaction-spec for single, focused interactions. Use state-machine when you need to specify multi-state components with complex state transitions.
Document all perceivable changes: visual (color, size, position changes), motion (animation type and duration), audio (sounds), and haptic (vibration patterns).
Keep most micro-interactions short, typically 100-500ms, to provide immediate feedback without feeling sluggish.
Yes, test on target devices to ensure performance and verify that the interaction feels responsive and smooth in real conditions.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: micro-interaction-spec
description: Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use animation-principles; for multi-state components use state-machine.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
millers-law
Chunk information into groups of ~4 to reduce cognitive load and improve interface scannability.
motion-system
Define motion tokens and choreography rules for consistent, accessible animation across your product.
naming-convention
Establish predictable naming conventions for design components, tokens, and layers.
navigation-patterns
Select and design navigation patterns (tabs, drawer, hierarchy, hub) matched to your product structure and user tasks.
north-star-vision
Define a compelling long-horizon product vision that aligns teams and anchors strategic decisions.
onboarding-design
Design first-run experiences that get users to value fast and build confidence.