What problem does it solve? Adding smooth, native-feeling animations between UI states in React is error-prone: developers must correctly coordinate the <ViewTransition> component, startTransition triggers, transition types, and CSS pseudo-elements, while avoiding common pitfalls like broken shared element morphs, layout-level VTs that silently disable page animations, and cross-fades firing on every transition. ## 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 tapping a thumbnail should morph the image into a detail page with a directional slide, use this Skill to wire up named <ViewTransition> components, addTransitionType('nav-forward'), and the morph CSS recipe correctly on the first attempt. ## Quick Start Ask the AI to add directional page transitions and shared element animations to your React or Next.js app using the view transitions skill.
