Vercel React View Transitions

A comprehensive guide for React's native View Transition API that covers the full implementation workflow from audit to deployment. Shows you how to animate route changes, shared elements, and component states using browser-native transitions instead of JavaScript animation libraries. Includes CSS recipes for common patterns like directional navigation and list reordering, plus specific guidance on transition types and Suspense integration. The implementation order and "when to animate" framework helps you avoid over-animating while ensuring transitions actually communicate spatial relationships. Works out of the box with Next.js App Router.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 26
skills.sh installs: 185.5K
GitHub stars: 33.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/agent-skills --skill vercel-react-view-transitions --agent claude-code

Installs into .claude/skills of the current project.

Files

React View Transitions

Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully.

When to Animate

Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.

Implement all applicable patterns from this list, in this order:

Priority	Pattern	What it communicates
1	Shared element (`name`)	"Same thing — going deeper"
2	Suspense reveal	"Data loaded"
3	List identity (per-item `key`)	"Same items, new arrangement"
4	State change (`enter`/`exit`)	"Something appeared/disappeared"
5	Route change (page-level)	"Going to a new place"

This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.