---
name: motion-react-patterns
description: Implement Motion for React animation patterns for premium websites and apps. Use for motion/react, motion components, variants, initial/animate/exit, whileHover, whileTap, whileInView, useAnimate, useInView, useReducedMotion, MotionConfig, LazyMotion, microinteractions, reveal animations, and React-state-driven UI motion.
---

# Motion React Patterns

## Use This Skill

Use this skill for use motion for react microinteractions and component animation.

## Operating Contract

1. Inspect the existing project before changing code.
2. Identify the motion stack, scroll behavior, component lifecycle, reduced-motion handling, and available verification commands.
3. Keep motion purposeful: clarify sequence, focus, depth, tactility, or product understanding.
4. Follow existing project conventions unless a change clearly improves the result.
5. Run available checks and visually inspect responsive/reduced-motion output when the change affects UI.

## Required Reference

Read [references/motion-react-patterns-guide.md](references/motion-react-patterns-guide.md) before making architectural or visible UI changes with this skill.