What is the vercel-react-view-transitions skill?
vercel-react-view-transitions is a skill in Vercel's agent-skills repository for animating with React's ViewTransition component. It covers page transitions, shared element morphs, list reorder, Suspense reveals and directional navigation, using the browser's native view transition API and plain CSS. Unsupported browsers skip the animation.
vercel-react-view-transitions is a skill in the vercel-labs/agent-skills repository, in the skills/react-view-transitions folder. It is a guide for animating between UI states with React's ViewTransition component, addTransitionType and the browser's CSS view transition pseudo-elements.
The model it teaches is simple: declare what animates with ViewTransition, trigger when with startTransition, useDeferredValue or Suspense, and control how with CSS classes. It tells the agent never to call startViewTransition itself.
The five animation patterns
- Shared element: the same element going deeper, such as a thumbnail morphing into a detail image.
- Suspense reveal: data has loaded.
- List identity: the same items in a new arrangement, using a per-item key.
- State change: something appeared or disappeared, using enter and exit.
- Route change: page-level transitions between routes.
The skill says to implement every pattern that fits the app, in that order. Each ViewTransition must communicate a spatial relationship or continuity, and if you cannot say what it communicates, it should not be added.
Availability and browser support
- In Next.js, do not install react@canary. The App Router already bundles React canary, so ViewTransition works out of the box.
- Without Next.js, install react@canary and react-dom@canary, since ViewTransition is not in stable React.
- Browser support: Chromium 125 and later, Firefox 144 and later, Safari 18.2 and later. Other browsers skip the animation.
Who the skill is for
Best for
- React and Next.js apps that want route, list and shared element animation without a third-party animation library.
- Agents that animate with the wrong trigger and wonder why nothing plays.
- Teams adding directional back and forward navigation animations.
Not for
- Spring physics, gestures and complex orchestration. pick-ui-library points to motion for those, and emil-design-eng covers animation craft.
- Deciding where motion belongs. find-animation-opportunities does that audit.
- Non-React projects.
Use it with UiChemy
These transitions live in React code you ship yourself. To get an AI-built page into WordPress as something editable, UiChemy AI to WordPress imports it, and Composer edits it in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Vercel React View Transitions Skill: Native UI Animation
git clone https://github.com/vercel-labs/agent-skills.gitClone the repository
Run
git clone https://github.com/vercel-labs/agent-skills.git. The skill is the skills/react-view-transitions folder.Copy the skill folder
Copy skills/react-view-transitions into the folder your AI coding agent loads skills from. The folder holds SKILL.md, AGENTS.md and a references folder with implementation, patterns, Next.js, CSS and troubleshooting files.
Check React availability
Next.js App Router apps already bundle React canary. Other apps need react@canary and react-dom@canary, as the skill's availability section states.
Ask for the animation
Use a trigger from the skill, such as adding page transitions, a shared element animation or a directional back and forward animation.
Check that it loaded
Ask the agent to add a list-to-detail transition. It should audit your links and Suspense boundaries first, wrap pages in ViewTransition, trigger navigation inside startTransition and add reduced-motion CSS.
Key features
- Audit before codeThe implementation workflow starts by scanning every link, router push, Suspense boundary, route and persistent element, then builds a navigation map before any code is written.
- Four animation triggersEnter, exit, update and share, each with its own firing rule, and only startTransition, useDeferredValue or Suspense activate them. A plain setState does not animate.
- Placement ruleViewTransition must appear before any DOM node. A div wrapping it suppresses enter and exit, and the skill shows the working and broken forms.
- Directional navigationaddTransitionType tags a navigation as forward or back, and type-keyed enter and exit props pick different CSS classes for each direction.
- Shared element morphsThe same name on two ViewTransitions, one unmounting and one mounting, morphs between views. Names must be unique, for example one per item id.
- List reorder and identityPer-item ViewTransition with a key animates reorder, and nested boundaries separate list identity from a cross-route shared element.
- Suspense revealsCross-fades or directional reveals from a skeleton to content, using simple string props because Suspense reveals carry no transition type.
- default none disciplineWithout default set to none, every ViewTransition cross-fades on every transition, including background refreshes, so named and page-level boundaries should turn it off.
- CSS recipes and reduced motionA recipes file provides fade, slide, directional, shared morph, scale and persistent element isolation CSS, plus reduced-motion rules the skill says to always add.
Frequently asked questions
What is the vercel-react-view-transitions skill?
It is a skill in Vercel's vercel-labs/agent-skills repository. It teaches your AI coding agent to animate with React's ViewTransition component, addTransitionType and CSS view transition pseudo-elements, covering page transitions, shared elements, list reorder, Suspense reveals and directional navigation.
How do I install vercel-react-view-transitions?
Clone github.com/vercel-labs/agent-skills and copy skills/react-view-transitions into the folder your agent loads skills from. The repository README also shows a skills-CLI command for the whole repository, but copying the folder installs just this skill.
Do I need to install react@canary?
Not in Next.js, because the App Router bundles React canary and ViewTransition works out of the box. Without Next.js, install react@canary and react-dom@canary, since ViewTransition is not in stable React. The skill states this in its availability section.
Which browsers support React view transitions?
The skill lists Chromium 125 and later, Firefox 144 and later, and Safari 18.2 and later. Browsers without support skip the animation gracefully, so the UI still works and only the motion is missing.
Why is my ViewTransition not animating?
SKILL.md names common causes: a plain setState instead of startTransition, a div wrapping the ViewTransition, default set to none with no explicit share prop, and router.back carrying no transition type so type-keyed animations fall back to default.
Does it replace an animation library?
For route changes, shared elements, lists and Suspense reveals it uses the browser's native API with CSS. For springs and gestures use a library, which pick-ui-library can recommend. emil-design-eng covers motion craft in general.
What license does the skill use?
The skill's frontmatter declares MIT. GitHub shows no license file for the repository itself. The 140.3K install figure on this page comes from a third-party skills listing, not from the repository, so treat it as a popularity signal only.