Specify Microinteractions for Enhanced UX

This skill specifies microinteractions - purposeful animations and feedback structured around the four canonical elements: trigger (user-initiated like click/tap/hover/swipe, system-initiated like data updates or notifications, or context conditions like device state or network status), rules (state transitions, conditional behaviors, error handling, accessibility considerations), feedback (visual, haptic, audio, and progress-indicator mechanisms), and loops/modes (repeat conditions, state persistence, progressive disclosure).

Use it when a UI interaction needs a precise, implementable specification - exact states, timing, and accessibility behavior - not a vague "add a nice animation" note to developers.

microinteraction:
  name: "Button Press Feedback"
  trigger:
    type: "user_initiated"
    event: "touchstart"
    target: ".primary-button"
  states:
    initial: { scale: 1, opacity: 1, background: "#007AFF" }
    pressed: { scale: 0.95, opacity: 0.8, background: "#0051D5" }
    released: { scale: 1, opacity: 1, background: "#007AFF" }
  timing:
    press_duration: "150ms"
    easing: "cubic-bezier(0.4, 0.0, 0.2, 1)"
  accessibility:
    reduced_motion: "respect_preference"
    screen_reader: "Button activated"

Duration standards are tiered by interaction weight - instant feedback (0-100ms) for button presses and toggles, quick transitions (150-300ms) for hover states, standard transitions (300-500ms) for page and modal changes, and slow transitions (500ms+) reserved for complex or emphasized state changes - paired with Material Design easing curves for standard, deceleration, acceleration, and sharp motion. Common patterns are specified as full YAML examples: a staged loading sequence (immediate button-disable and spinner, a progress bar after 500ms, then a checkmark-draw success animation with a sound cue or a shake-plus-red-color error animation with haptic feedback), and real-time form validation on input blur with distinct valid/invalid border colors, icons, and animated error-message reveal. Implementation guidance covers a reusable .micro-transition CSS class with will-change and a prefers-reduced-motion media-query override, plus a JavaScript MicrointeractionManager class that applies timing/easing from the spec and triggers navigator.vibrate() haptics per state.

Product designers and frontend developers who need a precise, developer-ready microinteraction spec rather than a verbal animation request. Platform-specific guidance separates mobile concerns (minimum 44x44px touch targets, light/medium/heavy haptic impact types, accounting for a 300ms click delay on some devices, avoiding system-gesture conflicts) from desktop concerns (clear hover affordance, keyboard focus indicators, smaller acceptable click targets, multi-state hover/focus/active handling). Testing and QA close it out with concrete performance targets (60fps animation frame rate, skeleton screens for delays over 200ms, minimized continuous-animation battery impact, cleaned-up animation listeners) and an accessibility checklist covering reduced-motion respect, focus indicators, screen-reader feedback, color-contrast ratios, and keyboard navigation, validated across devices, browsers, and input methods.