What problem does it solve? Adding smooth, native-feeling animations between UI states in React is error-prone: transitions silently fail, shared element morphs never fire, and Suspense reveals flicker. This Skill provides a structured workflow, production-tested patterns, and ready-to-use CSS for React's View Transition API. ## Core Features & Use Cases - ViewTransition Component Guidance: Covers enter, exit, update, and share triggers, placement rules, and the critical default="none" discipline to prevent unwanted cross-fades. - Directional Navigation & Shared Elements: Use addTransitionType and type-keyed class maps for forward/back slides, and named <ViewTransition> pairs for cross-route shared element morphs. - Next.js Integration: Documents transitionTypes on next/link and useRouter, loading.tsx Suspense boundaries, same-route dynamic segments, and prefetch requirements. - Use Case: When building a photo gallery where tapping a thumbnail morphs it into a full detail view with a directional slide, this Skill walks you through the audit, CSS recipes, and verification steps. ## 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.
