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
Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.
Identify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product.
Communicate design's contribution to business and user outcomes in terms that resonate with stakeholders.
Create QA checklists for verifying design implementation accuracy.
Establish design review gates with criteria, checklists, and approval workflows.
Plan and facilitate design sprints from challenge framing through prototype testing.
Create developer handoff specifications with measurements, behaviors, assets, and edge cases.
Design team workflows covering task management, collaboration rituals, and tooling.