motion-react-page-transitions

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 before making architectural or visible UI changes with this skill.