CookiesForAI

vercel-react-view-transitions

React View Transitions

React View Transitions is Vercel's agent skill for animating route changes, shared elements and list reorders with React's ViewTransition component, in Next.js and other React apps.

Agent skill by Vercel Official · Updated

Install React View Transitions

Install this skill with the skills CLI

Terminal
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions

Or install every Vercel skill at once

Terminal
npx skills add vercel-labs/agent-skills

Or paste this into your coding agent: Install the agent skill vercel-react-view-transitions from github.com/vercel-labs/agent-skills. A skill can include scripts that run on your computer, so read its source first.

What React View Transitions does

React View Transitions is Vercel's guide to animating between UI states with React's View Transition API, which uses the browser's own document.startViewTransition. It loads when you want page transitions, animated route changes, shared element morphs, enter and exit animations, list reorders or forward and back navigation animations, including in Next.js, without a third-party animation library.

React View Transitions sets an order: shared elements first, then Suspense reveals, list identity, state changes and route changes, and each animation has to communicate a spatial relationship. Directional slides are kept for list to detail navigation and ordered sequences, not tabs. It explains the common traps: enter and exit only fire when ViewTransition comes before any DOM node, only startTransition, useDeferredValue and Suspense trigger it, and router.back() carries no transition types.

React View Transitions also covers availability: the Next.js App Router already bundles the React canary build, other apps install react@canary, and unsupported browsers skip the animations. Five reference files hold a step-by-step implementation workflow that starts with an audit, CSS recipes including reduced motion styles, patterns, troubleshooting, and Next.js details such as transitionTypes on next/link.

When to use React View Transitions

  • You want a thumbnail to morph into the full image when someone opens a detail page.
  • You want route changes in Next.js to slide forward and back instead of cutting.
  • You added view transitions that do nothing and need to find out why.
  • You want list items to animate when they reorder, appear or disappear.

When to pick something else

  • Your app cannot use React canary: outside the Next.js App Router, ViewTransition needs react@canary.

Which agents React View Transitions works in

Vercel documents React View Transitions for any AI coding agent that reads Agent Skills, installed with the skills CLI. The open skills CLI also installs it into 78 agents, including Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode (we listed it with the CLI on October 1, 2026). See where each agent looks for skills.

React View Transitions license

React View Transitions is published under MIT. The SKILL.md frontmatter says license: MIT. The vercel-labs/agent-skills repository has no LICENSE file and GitHub reports no license; its README ends with "License: MIT" (checked 2026-10-01). MIT lets you use, change and share the skill if you keep the copyright notice.

  • Claude API: Claude API is Anthropic's open-source agent skill for code that calls Claude: current model IDs and prices, guides for seven SDK languages plus cURL, and guided migrations to newer models. (179,326 repository stars on October 2, 2026)
  • Stripe best practices: stripe-best-practices is Stripe's own agent skill for integration decisions: it steers the agent to the right Stripe API for payments, subscriptions, Connect, tax and security, using current API and SDK versions. (1,852 repository stars on October 2, 2026)
  • React Best Practices: React Best Practices is Vercel Engineering's agent skill of 70 performance rules for React and Next.js, ranked by impact, which the agent applies when it writes or reviews code. (31,813 repository stars on October 2, 2026)
  • React Composition Patterns: React Composition Patterns is Vercel's agent skill for React component APIs: compound components, lifted state and explicit variants instead of a growing list of boolean props. (31,813 repository stars on October 2, 2026)

More from Vercel

  • Deploy to Vercel: Deploy to Vercel is Vercel's agent skill for getting a project live: the agent checks how your project is set up, picks a deploy method and returns a preview link unless you ask for production. (31,813 repository stars on October 2, 2026)
  • React Native: React Native is Vercel's agent skill of React Native and Expo rules, ranked by impact: list performance, animations, native navigation and UI patterns for faster mobile apps. (31,813 repository stars on October 2, 2026)
  • Vercel CLI with Tokens: Vercel CLI with Tokens is Vercel's agent skill for running the Vercel CLI with an access token instead of vercel login: deploys, environment variables, logs and domains. (31,813 repository stars on October 2, 2026)
  • Vercel Optimize: Vercel Optimize is Vercel's agent skill that audits a deployed project from its production metrics and returns ranked, verified fixes to cut cost and speed up slow routes. (31,813 repository stars on October 2, 2026)

Lists that include vercel-react-view-transitions