micro-interaction

Standardize micro-interactions with motion curves, durations, and accessibility fallbacks.

13|3|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/heaptracetechnology/heaptrace-skills --skill micro-interaction-heaptracetechnology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: micro-interaction
Source: https://github.com/heaptracetechnology/heaptrace-skills/tree/main/designer/micro-interaction
Command: npx skills add https://github.com/heaptracetechnology/heaptrace-skills --skill micro-interaction-heaptracetechnology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to craft consistent, polished micro-interactions that communicate status, guide attention, and elevate perceived performance across web and mobile apps.

Core Features & Use Cases

  • Loading states: skeletons, spinners, progress indicators for content and actions.
  • Transition design: coherent animations to convey relationships between UI states (pages, modals, cards).
  • Feedback patterns: hover, focus rings, inline validation, and button loading states.
  • Empty and error states: informative empty-state designs and actionable error messaging.
  • Motion timing: standardized durations and easing curves for all interactions with accessibility awareness.
  • Accessibility: respect prefers-reduced-motion and clear focus indicators.

Quick Start

Implement a basic micro-interaction kit by documenting and implementing consistent loading states, hover/focus feedback, and transition patterns across your UI.

Frequently Asked Questions about micro-interaction

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI micro-interactions for consistent feedback across web and mobile?▼

Standardize UI micro-interactions by defining concrete motion curves, durations, and state machines for loading states, transitions, and hover/focus feedback, ensuring consistent UX across web and mobile platforms.

What are the best practices for designing loading states and empty state micro-interactions?▼

Best practices for loading and empty state micro-interactions involve using skeletons, spinners, and progress indicators for content, while designing informative empty states and actionable error messaging to communicate status clearly.

How do I design accessible motion design that respects prefers-reduced-motion?▼

Design accessible motion by respecting the prefers-reduced-motion setting and implementing clear focus indicators. This ensures hover, focus rings, and transition patterns remain usable for all users.

How does animation timing and easing work for UX micro-interactions?▼

Animation timing for UX micro-interactions works by applying standardized durations and easing curves to all interactions. This conveys relationships between UI states like pages, modals, and cards while maintaining accessibility awareness.

Can I use standardized micro-interaction patterns for both web and mobile product design?▼

Yes, you can use standardized micro-interaction patterns for both web and mobile product design. They apply to development workflows covering transitions, inline validation, button loading states, and success/error messaging.

Why do my UI transitions and hover feedback feel inconsistent across different components?▼

UI transitions and hover feedback feel inconsistent without standardized motion curves and state machines. Defining concrete requirements for animation timing and feedback patterns resolves this by guiding designers and engineers.