react-doctor/require-reduced-motion

Project ships a motion library but never gates animation on the user's reduced-motion preference — add `useReducedMotion()` / `<MotionConfig reducedMotion="user">` or a `@media (prefers-reduced-motion: reduce)` query

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Project-level heuristic that fires ONCE (on package.json) when a dependency or devDependency is a known motion library (framer-motion / motion, react-spring, gsap, @react-spring/*, react-native-reanimated, etc.) AND a repo-wide text scan of *.ts/*.tsx/*.js/*.jsx/*.css/*.scss finds none of prefers-reduced-motion, useReducedMotion, MotionConfig, or reducedMotion. CONFIRM when the app actually animates (page/route transitions, parallax, auto-playing or looping motion, spring physics) and nothing in the codebase respects the OS "reduce motion" setting — this is a WCAG 2.3.3 failure. SUPPRESS when reduced-motion handling exists but the grep can't see it: it lives in a file type outside the scanned globs (MDX, a .styl/.less sheet, a templated or build-generated stylesheet, an inline <style> in HTML), the motion dependency is present only for non-animating utilities (easing math, a useInView observer, layout measurement) so no real animation ships, or animation is delegated to a component library/design system that already honors the preference globally. Do not flag a library listed but unused.

Fix prompt

Use this once validation confirms the diagnostic is real.

Honor the user's OS "reduce motion" setting for every non-essential animation rather than deleting motion outright (WCAG 2.3.3). For Framer Motion / motion: read const shouldReduceMotion = useReducedMotion() and drop or shorten transforms/opacity/transition when it's true, or wrap the app once in <MotionConfig reducedMotion="user"> so transform/layout animations are auto-reduced. For react-spring use the useReducedMotion hook to swap to immediate/zero-duration springs; for Reanimated check AccessibilityInfo.isReduceMotionEnabled() / useReducedMotion. For CSS-driven or other animation, add a global guard: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }, then pare back parallax and auto-playing motion. Keep essential, information-carrying motion but make it calm. See https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions