vercel-react-view-transitions

About vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

Install vercel-react-view-transitions

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions

Basic information

What it does

• Declare animations with &#x3C;ViewTransition> component; trigger with startTransition , useDeferredValue , or Suspense ; control styling via CSS classes and pseudo-elements

• Supports five animation patterns in priority order: shared elements (morphing), Suspense reveals, list identity (reorder), state changes (enter/exit), and route changes

• Use addTransitionType to apply context-aware animations (e.g., directional slides for hierarchical navigation, fades for lateral tabs)

• Works in Next.js App Router out of the box; requires react@canary for standalone React; gracefully degrades on unsupported browsers (Chromium 111+, Firefox 144+, Safari 18.2+)

• Includes step-by-step implementation workflow, CSS animation recipes, and patterns for shared elements, list reorder, Suspense reveals, and directional navigation