What problem does it solve? Web animations can cause motion sickness, dizziness, and distraction for users with vestibular disorders or motion sensitivity, yet most interfaces ignore the prefers-reduced-motion preference entirely. This Skill guides you through shipping every animation as two variants so motion never harms users while still conveying meaningful state changes. ## Core Features & Use Cases - Reduced-motion transformation rules: Apply a clear decision table — remove movement (transforms, layout), keep meaning (opacity, color), disable autoplaying loops — so reduced variants stay informative instead of being deleted. - Framework implementations: Get concrete patterns for CSS media queries, Tailwind motion-safe:/motion-reduce: variants, and Framer Motion's useReducedMotion hook and MotionConfig reducedMotion="user" app-wide safety net. - Copy-ready snippets: Recipes for smooth scrolling, autoplaying GIF/video fallbacks via <picture>, pausing loops on a hero frame with negative animation-delay, a dependency-free React hook, and a worked multi-step component example. - Use Case: When reviewing a page with an autoplaying looping animation and sliding modals, use this Skill to convert the modal slide into a fade, pause the loop on a representative frame, and verify both variants with Chrome DevTools emulation. ## Quick Start Ask the AI to audit the animations in your component and add a prefers-reduced-motion variant for each one.
