What problem does it solve? Adding smooth, native-feeling animations between UI states in React is error-prone: developers must correctly coordinate <ViewTransition> placement, startTransition triggers, transition types, and CSS pseudo-elements, while avoiding silent failures like nested VT suppression and layout-level misplacement. ## Core Features & Use Cases - Step-by-step implementation workflow: Audit the app's navigation map, isolate persistent elements, add directional page transitions, Suspense reveals, and shared element morphs in a defined order. - Ready-to-use CSS recipes: Copy-paste animations for fade, slide, directional navigation, shared element morph, text morph, scale, and reduced-motion accessibility. - Next.js integration guidance: Covers the experimental.viewTransition flag, the transitionTypes prop on next/link, loading.tsx Suspense boundaries, and same-route dynamic segment transitions. - Use Case: When building a photo gallery where clicking a thumbnail morphs the image into a detail page with a directional slide, this Skill provides the exact component structure, transition types, and CSS to implement it correctly. ## Quick Start Ask the agent to add view transitions to your React or Next.js app, starting with an audit of all links, Suspense boundaries, and shared visual elements.
