Implement View Transitions

Use this skill to implement, optimize, and audit native view transitions, route-level page animations, shared element morphs, and layout displacement animations across React 19, Next.js, and Astro.

When to Use

• implementing fluid hierarchical page navigations (list -> detail -> list) with directional slides
• authoring shared element morphs between source cards and destination hero sections
• animating Suspense reveal transitions (skeleton -> content) without layout jumps
• implementing layout displacement morphs on dynamic list additions, removals, or reordering
• optimizing web animation performance to protect Interaction to Next Paint (INP < 200ms)
• enforcing WCAG 2.2 AA prefers-reduced-motion compliance across all view transitions

Core Rules