Micro Interaction Spec

This gives you a structured way to document micro-interactions using the trigger-rules-feedback-loops framework, so you're not just saying "make it feel nice" to your team. You specify exactly what initiates an interaction, what logic runs, how users perceive it (visual, audio, haptic), and whether it repeats or evolves. Comes with a spec format covering duration, easing, and accessibility notes. Honestly most useful when you need to hand off interaction details to engineers or maintain consistency across a design system. The 100-500ms timing guidance and reduced-motion reminders are the kind of specifics that actually help.

skills.sh installs: 2.5K
GitHub stars: 3.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add owl-listener/designer-skills --skill micro-interaction-spec --agent claude-code

Installs into .claude/skills of the current project.

Files

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).