Micro Interaction Spec
- 991 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
micro-interaction-spec is a design skill that writes reusable micro-interaction specifications covering triggers, rules, feedback, and loops for developers implementing responsive interface details.
About
micro-interaction-spec is a Claude Code skill from owl-listener/designer-skills that produces clear specifications for button hovers, form feedback, swipe gestures, and other micro-interactions. The skill applies a four-part framework—trigger, rules, feedback, and loops/modes—so engineers and designers share one document before animation or state work begins. Developers reach for micro-interaction-spec when interfaces feel static, gesture behavior is ambiguous, or handoff lacks timing and feedback detail. It suits web, mobile, and extension UIs where small motion and response cues define perceived quality.
- Structured 4-part framework: Trigger, Rules, Feedback, Loops & Modes
- Covers user actions, system events, conditional triggers, visual motion, audio, and haptic feedback
- Includes accessibility considerations and duration/easing parameters in every spec
- Standardized output format with name, sequence, loop behavior and progressive disclosure rules
- Works for toggles, pull-to-refresh, likes, validation, press states, swipe actions and long-press
Micro Interaction Spec by the numbers
- 991 all-time installs (skills.sh)
- +48 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #396 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill micro-interaction-specAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 991 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you specify button hover micro-interactions?
Produce clear, reusable specifications for delightful button hovers, form feedback, swipe gestures, and other micro-interactions that make interfaces feel responsive an
Who is it for?
Frontend developers and designers documenting hover, form, and gesture behaviors before implementing animations or state transitions.
Skip if: Teams needing full visual mockups, design-system token definitions, or page-level information architecture without interaction detail.
When should I use this skill?
The user asks to specify micro-interactions, document hover or swipe behavior, or define trigger-rules-feedback loops for UI components.
What you get
A structured micro-interaction specification document with trigger, rules, feedback, and loop or mode definitions per interaction.
- Micro-interaction spec document
- Trigger and feedback definitions
- Loop and mode rules
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).
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use micro-interaction-spec for interaction behavior docs; use visual design or design-system skills for layout, typography, and component libraries.
FAQ
What framework does micro-interaction-spec use?
micro-interaction-spec uses trigger, rules, feedback, and loops or modes. Triggers cover user actions, system events, or conditions; rules define logic and branching; feedback covers visual, haptic, or audio response.
Which interactions does micro-interaction-spec cover?
micro-interaction-spec covers button hovers, form feedback, swipe gestures, and similar responsive UI details. Output is a structured spec engineers can implement without ambiguous motion or state descriptions.
Is Micro Interaction Spec safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.