vercel-react-view-transitionsby Vercel Labs

Vercel React View Transitions Skill.

A Claude Code and Codex skill for motion and video: native-feeling page transitions with React's View Transition API.

Motion & Video
UI code

vercel-labs/agent-skills · skills/react-view-transitions/SKILL.mdSKILL.md

--- name: vercel-react-view-transitions description: 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 … --- ## When to Animate ## Availability ## Implementation Workflow ## Core Concepts ## Styling with View Transition Classes ## Transition Types

Front matter and section headings read from the upstream file on 2026-09-14 · 14,341 characters in full

01 What it does

What the vercel-react-view-transitions Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A guide for animating between UI states with React's View Transition API: declare what with the ViewTransition component, trigger when with startTransition, useDeferredValue or Suspense, and control how with CSS classes. It covers five patterns in a fixed priority order, shared element morphs, list identity, state change and route change, plus type-keyed directional navigation through addTransitionType and Next.js App Router integration.

It explains where a ViewTransition boundary must sit, when default="none" is required, which browsers support it (Chromium 125+, Firefox 144+, Safari 18.2+) with graceful degradation elsewhere, and points to reference files for implementation order, CSS recipes, patterns and troubleshooting.

What it produces

A reusable directional wrapper component that holds the type-keyed enter and exit maps for multi-page apps.
Shared element morphs created by reusing the same name on the unmounting and mounting views, for example a thumbnail that becomes a hero image.
CSS rules keyed to the view transition pseudo-elements, including the image pair that holds both snapshots.
An implementation that degrades gracefully, where unsupported browsers skip the animation instead of breaking navigation.

See the example prompt ↗

How It Works

01
Work Out What the Animation Says
Only add a boundary when you can articulate the spatial relationship or continuity it expresses. If you cannot say what it communicates, do not add it.
02
Wrap the State in a Boundary
React assigns a unique view-transition-name and calls document.startViewTransition behind the scenes, so you never call startViewTransition yourself.
03
Trigger It with a Transition
Enter, exit, update and share only fire from startTransition, useDeferredValue or Suspense. A plain setState will not animate anything.
04
Style the Snapshots in CSS
The outgoing and incoming snapshots are targeted through view transition pseudo-elements carrying your own class names, with the recipes file supplying ready-made animations.
05
Tag It with Transition Types
addTransitionType stacks context types so different boundaries in the tree react differently, and a per-type object maps those types to CSS classes on enter, exit and share.

02 Find your fit

When to Use the vercel-react-view-transitions Skill

Use the vercel-react-view-transitions skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Animating between UI states on the browser's native document.startViewTransition rather than a JavaScript animation loop.
List reorder animations and directional forward or back navigation between ordered views.
Teams that want state transitions in React without pulling in a third-party animation library.
Revealing content as data arrives, driven by Suspense fallbacks and simple enter and exit string props.

Know the Boundaries

Browsers outside Chromium 125+, Firefox 144+ and Safari 18.2+ simply skip the animation, so the transition is invisible there.
Per-item staggered animations during page navigation are not available in Next.js today.
Nested boundaries inside a parent that mounts or unmounts as one unit do not run their own enter or exit animation.
Back and forward navigation cannot play type-keyed directional slides, because those transitions carry no type.

What to Provide

An existing app to auditThe skill is applied to a running app, and the implementation reference is meant to be followed step by step starting from the audit rather than from code changes.
Whether each navigation is hierarchical or lateralList-to-detail movement gets type-keyed forward and back slides because it conveys spatial depth, while tab-to-tab navigation does not.
The CSS recipes for your caseThe recipes file holds the animations to copy and then adapt to the app's own markup and class names.

03 Inside the skill

Rules the vercel-react-view-transitions Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Implement Every Applicable Pattern, in Order
Work through shared element, Suspense reveal, list identity, state change and route change in that priority. Skip a pattern only when the app has no use case for it.
Put the Boundary Before Any DOM Nodes
If a div wraps the ViewTransition, enter and exit are suppressed and the animation silently never runs.
Use Default="none" Deliberately
Set it on named or shared elements and on type-keyed page boundaries, because otherwise they fire the browser cross-fade on every transition.
Give Each Named Boundary a Unique Name
Only one ViewTransition per name can be mounted at a time, so use per-item names such as photo-${id}, and check reusable components that render a named boundary in both a modal and a page.
Pair Enter with Exit, Keep Directional VTs in Pages
Always define both sides of a directional animation, and place the directional boundaries in page components rather than layouts.
Never Fade Out on Pages with Shared Morphs
A fade-out exit breaks the shared element morph, so use a directional slide for those exits instead.
Add the Reduced Motion CSS
The reduced-motion block from the CSS recipes must go into your global stylesheet alongside the animations.

04 Put it to work

Install vercel-react-view-transitions in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add vercel-react-view-transitions to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/react-view-transitions/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Add view transitions to [my Next.js App Router app]: tapping [a list item] should morph [its image] into the detail page hero instead of hard-navigating. Use directional nav-forward and nav-back slides for that hierarchical navigation, give the detail content a Suspense reveal when [the data] resolves, and keep background revalidations silent with default="none". Extract the type-keyed page transition into a reusable wrapper and add the reduced motion CSS.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Run the audit in the implementation reference before changing any code.
Confirm that a wired-up morph actually fires: default="none" with no explicit share prop means share resolves to none and nothing animates.
Check that every link which should morph adds the transition type, either through transitionTypes on next/link or addTransitionType.
Make sure tab-to-tab navigation is not using directional slides, since that implies a spatial depth the app does not have.

In OpenDesign import vercel-react-view-transitions from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Vercel Labs
Repository: github.com/vercel-labs/agent-skills Branch main
Skill file: skills/react-view-transitions/SKILL.md Content checksum recorded at verification; commit 063bee9
License: MIT (declared in SKILL.md) No license file was found at skill or repository level; the value above is what the SKILL.md declares. MIT as declared in the SKILL.md; no LICENSE file found in the repository.
Repository stars: 31,174 GitHub snapshot taken 2026-09-14 for the whole vercel-labs/agent-skills repository. Not a rating or usage count for vercel-react-view-transitions.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 14,341 characters. Read the full file on GitHub.

Vercel React View Transitions

Run vercel-react-view-transitions on a Real Motion and Video Task.

Download OpenDesign, import vercel-react-view-transitions from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

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

What the vercel-react-view-transitions Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the vercel-react-view-transitions Skill

Good Fit

Know the Boundaries

What to Provide

Rules the vercel-react-view-transitions Skill Gives Claude Code and Codex

Implement Every Applicable Pattern, in Order

Put the Boundary Before Any DOM Nodes

Use Default="none" Deliberately

Give Each Named Boundary a Unique Name

Pair Enter with Exit, Keep Directional VTs in Pages

Never Fade Out on Pages with Shared Morphs

Add the Reduced Motion CSS