mcpField
M
micro-interaction-spec

micro-interaction-spec

github.com/owl-listenerDesign & UI3.1k2.3k installsUpdated 8w ago
Repository

About micro-interaction-spec

A design skill for specifying purposeful micro-interactions through triggers, rules, feedback, and loops. It helps interface designers document behavior, timing, and accessibility considerations.

Key features

  1. 01Trigger, rule, feedback, and loop framework
  2. 02Interaction sequences and conditions
  3. 03Visual, motion, audio, and haptic feedback
  4. 04Duration, easing, and repeat behavior
  5. 05Accessibility considerations

Use cases

  1. 01Specifying toggle and button responses
  2. 02Documenting form validation feedback
  3. 03Designing refresh and swipe interactions
  4. 04Defining reduced-motion behavior

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/owl-listener/designer-skills --skill micro-interaction-spec

After installing, type/micro-interaction-specin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported