Skill Store 33

Micro Interaction Spec

Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes.

by owl-listener · MIT

The skill

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

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: owl-listener/micro-interaction-spec-92300485062.

Download SKILL.md · Markdown version

Details

Publisher
owl-listener
Category
Software Development › Frontend & UI
License
MIT
Updated
2026-09-05

References

More from owl-listener

  • Design Critique Facilitate a structured team critique — framing, feedback rules, and actionable outcomes.
  • Design Debt Audit Inventory and prioritise accumulated design inconsistencies across a product.
  • Design Impact Reporting Communicate design's contribution to business and user outcomes in stakeholder language.
  • Design Qa Checklist Build a QA checklist for verifying that a build matches the design.

Related skills

  • Microinteractions Design the small details -- triggers, rules, feedback, loops and modes -- that separate good prod…
  • State Machine Model component behaviour as explicit states, events, and transitions.
  • Micro Interactions Use when designing small UI feedback moments like button states, toggles, form validation, loadin…
  • Interaction Design User flow design, micro-interactions, and interface behavior patterns with state management for a…
  • Micro Interaction This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or…