What problem does it solve? Adding animation to a React app involves choosing between CSS transitions, AutoAnimate, and the Motion library, then getting accessibility, performance, and test stability right — mistakes like animating layout properties, ignoring prefers-reduced-motion, or breaking exit animations with unstable keys are common and costly. ## Core Features & Use Cases - Tool selection guidance: A decision table routes each job to plain CSS/Tailwind, AutoAnimate, Motion, or the View Transitions API so Motion is only used where JS lifecycle control is genuinely needed. - Full Motion API coverage: Enter/exit animations with AnimatePresence, variant orchestration with stagger(), layout and shared-element transitions via layoutId, motion values, imperative animate() sequences, number tickers, and drag gestures. - Accessibility and performance as hard rules: MotionConfig reducedMotion="user" at the root, transform/opacity-only animation, WCAG 2.3.3/2.2.2 compliance, and deterministic tests via MotionGlobalConfig.skipAnimations. - Use Case: When building a dashboard that needs list add/remove animations, a sliding tab indicator, and an animated stat counter, this Skill provides the exact patterns — including the Radix forceMount integration and router page-transition freezing — with reduced-motion degradation built in. ## Quick Start Use the motion-react skill to add an exit animation and staggered list entrance to my React component with reduced-motion support.
