Micro Interaction Spec
Turn vague animation ideas into implementable micro-interaction specs with triggers, rules, feedback, and accessibility notes.
Overview
Micro-interaction Spec is an agent skill for the Build phase that documents UI micro-interactions using trigger, rules, feedback, and loop/mode definitions.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill micro-interaction-specWhat is this skill?
- Four-part framework: trigger, rules, feedback, loops and modes
- Catalog of patterns: toggle, pull-to-refresh, like animation, inline validation, swipe thresholds
- Per-interaction spec: duration, easing, loop behavior, and accessibility considerations
- Structured output format agents and designers can paste into tickets or Figma notes
- 4-part micro-interaction framework: trigger, rules, feedback, loops and modes
Adoption & trust: 592 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI has a 'nice animation' wish but no shared spec, so implementation drifts and accessibility gets skipped.
Who is it for?
Indie builders and one-person product teams defining motion and feedback on forms, buttons, and gestures before coding.
Skip if: Full information-architecture or brand-system projects with no concrete interaction to specify.
When should I use this skill?
You need to specify micro-interactions with trigger, rules, feedback, and loop/mode definitions for a UI component or flow.
What do I get? / Deliverables
You get named interaction specs with timing, easing, feedback channels, and a11y notes ready for frontend implementation or review.
- Per-interaction spec blocks with duration, easing, and accessibility notes
- Implementable rules sequence for engineering
Recommended Skills
Journey fit
Micro-interactions are specified while designing and building UI behavior, before handoff to code or design systems. Frontend subphase is where interaction detail meets components—specs bridge design intent and dev implementation.
How it compares
Use instead of free-form 'add a animation' prompts when you need engineer-ready interaction documentation.
Common Questions / FAQ
Who is micro-interaction-spec for?
Solo developers and designer-founders who need structured micro-interaction briefs they or an agent can implement in frontend code.
When should I use micro-interaction-spec?
During Build frontend work when specifying toggles, validation feedback, pull-to-refresh, or swipe actions—and during Ship review when motion behavior must match documented rules.
Is micro-interaction-spec safe to install?
It produces design text only; review the Security Audits panel on this page for the skill package before install.
SKILL.md
READMESKILL.md - Micro Interaction Spec
# 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