Kipt

React view transitions skill: what it does and how to install it

Vercel's React view transitions skill teaches your agent the ViewTransition component, transition types and Next.js patterns. What it does and how to install.

By the Kipt team · Updated 24 October 2026

Source: vercel-labs/agent-skills · Maintainer: Vercel · License: MIT (per the SKILL.md frontmatter and repo README; no LICENSE file in the repo) · Checked: 24 October 2026

What is the React view transitions skill?

The React view transitions skill teaches your coding agent to add native browser animations to a React or Next.js app with React's <ViewTransition> component: shared element morphs, Suspense reveals, list reorders and directional page slides. It is for developers who want route and state animations without a third-party animation library, and who want the agent to place them where they mean something.

It lives in the react-view-transitions folder of vercel-labs/agent-skills, but its frontmatter name is vercel-react-view-transitions, and that is the name you install. The description opens: "Guide for implementing smooth, native-feeling animations using React's View Transition API (<ViewTransition> component, addTransitionType, and CSS view transition pseudo-elements)." It goes on to list triggers such as page transitions, shared element animations, list reorder and Next.js integration.

As of 24 October 2026, its skills.sh page listed about 165,700 installs (snapshot, 24 October 2026). The official Next.js view transitions guide recommends this skill by name in its "Add view transitions with an agent" section.

What does it do?

The skill is model-invoked. It loads when you ask for page transitions, animated route changes, shared element animations, enter and exit animations, list reorder or forward and back navigation, or when you mention startViewTransition, ViewTransition or transition types.

Its core rule: "Every <ViewTransition> should communicate a spatial relationship or continuity." It then gives the agent an order to implement patterns in:

Priority Pattern What it signals
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 or disappeared
5 Route change (page level) Going to a new place

It reserves directional slides for hierarchical navigation (list to detail) and ordered sequences like a carousel, and uses a crossfade or no animation for tab-to-tab moves.

The SKILL.md also covers the rules that trip people up:

  • Only startTransition, useDeferredValue and Suspense activate a view transition. A plain setState does not animate, which matches the caveat in the React <ViewTransition> reference.
  • <ViewTransition> must come before any DOM node for enter and exit to fire.
  • default="none" stops every boundary from crossfading on every transition, but it also turns off share unless you set it explicitly.
  • router.back() and the browser back button carry no transition types, so typed directional slides don't play on them.
  • Only one view transition with a given name can be mounted at a time.

What's in the folder:

  • SKILL.md: core concepts, props, transition types, common patterns.
  • references/implementation.md: a step-by-step workflow that starts with an audit of every <Link>, router.push, <Suspense> boundary, page and persistent header.
  • references/css-recipes.md: fade, slide, scale and directional recipes, plus reduced motion CSS.
  • references/patterns.md: more patterns, timing and the events API.
  • references/nextjs.md: App Router specifics, transitionTypes on next/link, prefetching for shared morphs.
  • references/troubleshooting.md: symptom-first fixes.
  • AGENTS.md (everything compiled into one file), README.md and metadata.json.

How do you install it?

The skills.sh page and the skill's README give this command. The skills CLI matches --skill against the frontmatter name, so the folder name react-view-transitions will not match:

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

Add -g to install it for all projects or -a claude-code to target Claude Code. The CLI names the installed folder after the frontmatter name, so a global install lands in ~/.claude/skills/vercel-react-view-transitions/, one of the standard Claude Code skill locations.

Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

claude.ai. Anthropic's help article explains how to upload a skill folder as a ZIP. The repo has a react-view-transitions.zip, but it dates from April 2026 and lacks troubleshooting.md, so zip the current folder yourself if you go this way.

How do you use it?

Point it at a real navigation or state change. Example prompts (suggestions, not quotes from the repo):

  • Add view transitions to this app. The skill should start with an audit and a navigation map.
  • Morph the product thumbnail on /shop into the hero image on /shop/[id].
  • Slide forward when I open a post and back when I return to the list.
  • Animate the skeleton into the loaded content on the dashboard.
  • The shared image morph doesn't fire when I click a card. Find out why.

The Next.js guide suggests a similar opener: "Add view transitions to this app using the vercel-react-view-transitions skill."

Requirements: a React version that exports ViewTransition, and a browser that supports the View Transitions API features React uses. There are no scripts, packages or API keys in the skill.

Tips and limits

From the skill, Next.js docs and React's release notes, not from testing:

  • The canary note is out of date. The skill's Availability section says ViewTransition "is not in stable React" and tells you to install react@canary outside Next.js. React 19.3.0, released on 9 September 2026, added <ViewTransition /> and addTransitionType to stable React. Check your installed version before switching channels.
  • In Next.js, don't install canary or add flags. The skill says not to add the old experimental.viewTransition flag, and the Next.js guide says view transitions work in the App Router with no configuration.
  • transitionTypes on next/link needs Next.js 16.2.0 or later, according to references/nextjs.md. On older versions it falls back to startTransition with addTransitionType and router.push().
  • Put page wrappers in pages, not layouts. Layouts persist across navigations, so enter and exit never fire there.
  • Shared morphs need the destination ready. If the new page suspends into a fallback, no pair forms. The skill suggests prefetch={true} on the link and cached data.
  • Add reduced motion CSS. The skill tells the agent to always include the prefers-reduced-motion rules from css-recipes.md.
  • Browser support is listed as Chromium 125+, Firefox 144+ and Safari 18.2+, with no animation (and no breakage) elsewhere.

On 24 October 2026 the skills.sh page showed Pass from Gen Agent Trust Hub, Socket and Snyk. The license is MIT.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md and its references/ files; for a repo with many skills, like this one, it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Vercel.

Similar skills

Questions

What is the React view transitions skill?

It is an official Vercel Agent Skill, stored in the react-view-transitions folder of vercel-labs/agent-skills and named vercel-react-view-transitions in its frontmatter. It teaches a coding agent to animate UI changes with React's ViewTransition component, addTransitionType and CSS view transition pseudo-elements, including Next.js App Router patterns.

What is the install command for the React view transitions skill?

Run npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions. Use the frontmatter name, vercel-react-view-transitions, because the skills CLI matches --skill against that name and not the folder name react-view-transitions.

Do I need React canary for ViewTransition?

Not anymore for most apps. React 19.3.0, released on 9 September 2026, added ViewTransition and addTransitionType to stable React. The skill's Availability section still says to install react@canary outside Next.js, so check your installed React version before following that line.

Does it work with Next.js?

Yes. The skill and the official Next.js guide both say ViewTransition works in the App Router with no configuration. The skill tells the agent not to add the old experimental.viewTransition flag and to use the transitionTypes prop on next/link for directional navigation.

Which browsers support React view transitions?

The skill lists Chromium 125 and later, Firefox 144 and later, and Safari 18.2 and later. In other browsers the app works normally and the changes simply don't animate.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.