---
name: motion-react-page-transitions
description: Create Motion for React page transitions and route transitions. Use for AnimatePresence, route-level enter/exit, view transitions, shared page elements, Next.js client navigation, loading transitions, portfolio detail transitions, and cinematic but accessible navigation motion.
---

# Motion React Page Transitions

## Use This Skill

Use this skill for design page and route transitions without breaking navigation.

## 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-page-transitions-guide.md](references/motion-react-page-transitions-guide.md) before making architectural or visible UI changes with this skill.