Vercel React View Transitions
Ship native-feeling route and layout animations in React and Next.js using the View Transition API without ad-hoc CSS hacks.
Overview
React View Transitions is an agent skill for the Build phase that implements smooth React and Next.js animations with the View Transition API, shared elements, and CSS transition recipes.
Install
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitionsWhat is this skill?
- Covers React `<ViewTransition>`, `addTransitionType`, and CSS `::view-transition-*` pseudo-elements
- Shared-element transitions, list reorder, directional navigation, and Suspense reveal patterns
- Step-by-step implementation workflow: audit app → add CSS recipes → isolate transitions → wire components
- Next.js integration guidance plus ready-to-use CSS animation recipes
- Documents how multiple view transitions interact and common mistake warnings
- Step-by-step implementation workflow with audit, CSS recipes, and integration phases
- Table of contents spanning core reference plus dedicated Next.js and accessibility sections
Adoption & trust: 52.2k installs on skills.sh; 27.7k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React app navigates and updates state correctly, but screen changes feel instant and cheap because you lack a consistent View Transition implementation plan.
Who is it for?
Solo builders polishing SaaS or content apps in React/Next.js who want documented patterns for route, list, and shared-element motion.
Skip if: Teams that only need a static landing page with no client routing, or projects not on React where the View Transition component model does not apply.
When should I use this skill?
When implementing or refactoring React/Next.js UI navigation, layout, or list updates that should use the View Transition API.
What do I get? / Deliverables
You get a repeatable audit-and-implement workflow with typed transitions, shared-element hooks, and CSS recipes wired into your React or Next.js routes.
- Audited list of transition-worthy UI surfaces
- CSS animation recipes and wired `<ViewTransition>` usage
- Documented transition types for directional or shared-element flows
Recommended Skills
Journey fit
Implementation work lives in the Build phase because it changes UI code, CSS pseudo-elements, and framework integration—not distribution or ops. Frontend is the canonical shelf: `<ViewTransition>`, shared-element morphs, list reorder, and Suspense reveals are all client UI concerns.
How it compares
Use this procedural skill for React View Transition API work instead of guessing one-off CSS animations in chat.
Common Questions / FAQ
Who is React View Transitions for?
Frontend-focused solo builders and indie devs using React or Next.js who want agent-guided, consistent view transition implementations.
When should I use React View Transitions?
During Build when adding route animations, shared-element morphs, list reorder motion, or Next.js navigation polish; also when auditing an app for where transitions should exist.
Is React View Transitions safe to install?
Review the Security Audits panel on this Prism page and treat the skill like any third-party repo guidance before letting an agent edit your codebase.
SKILL.md
READMESKILL.md - Vercel React View Transitions
# React View Transitions **Version 1.0.0** Vercel Engineering March 2026 > **Note:** > This document is mainly for agents and LLMs to follow when implementing > view transitions in React applications. Humans may also find it useful, > but guidance here is optimized for automation and consistency by > AI-assisted workflows. --- ## Abstract Guide for implementing smooth, native-feeling animations using React's View Transition API. Covers the `<ViewTransition>` component, `addTransitionType`, CSS view transition pseudo-elements, shared element transitions, Suspense reveals, list reorder, directional navigation, and Next.js integration. Includes a step-by-step implementation workflow, ready-to-use CSS animation recipes, and common mistake warnings. --- ## Table of Contents 1. [Core Reference](#when-to-animate) - [When to Animate](#when-to-animate) - [Availability](#availability) - [Core Concepts](#core-concepts) - [Styling with View Transition Classes](#styling-with-view-transition-classes) - [Transition Types](#transition-types) - [Shared Element Transitions](#shared-element-transitions) - [Common Patterns](#common-patterns) - [How Multiple VTs Interact](#how-multiple-vts-interact) - [Next.js Integration](#nextjs-integration) - [Accessibility](#accessibility) 2. [Implementation Workflow](#implementation-workflow) - [Step 1: Audit the App](#step-1-audit-the-app) - [Step 2: Add CSS Recipes](#step-2-add-css-recipes) - [Step 3: Isolate Persistent Elements](#step-3-isolate-persistent-elements) - [Step 4: Add Directional Page Transitions](#step-4-add-directional-page-transitions) - [Step 5: Add Suspense Reveals](#step-5-add-suspense-reveals) - [Step 6: Add Shared Element Transitions](#step-6-add-shared-element-transitions) - [Step 7: Verify Each Navigation Path](#step-7-verify-each-navigation-path) - [Common Mistakes](#common-mistakes) 3. [Patterns and Guidelines](#patterns-and-guidelines) 4. [CSS Animation Recipes](#css-animation-recipes) 5. [View Transitions in Next.js](#view-transitions-in-nextjs) --- 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** (layout-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. ### Choosing Animation Style | Context | Animation | Why | |---------|-----------|-----| | Hierarchical navigation (list → detail) | Type-keyed `nav-forward` / `nav-back` | Communicates spatial depth | | Lateral navigation (tab-to-tab) | Bare `<ViewTransition>` (fade) or `default="none"` | No depth to communicate | | Suspense reveal | `enter`/`exit` string props | Content arriving | | Revalidation / background refresh | `default="none"` | Silent — no animation needed | Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional slides — it falsely impl