React View Transitions Skill for Claude Code: Page and Shared-Element Animations

Makes Claude add smooth page, shared-element, list and Suspense animations to a React or Next.js app using React's ViewTransition component.

Installs: 176.7K; on skills.sh
Stars: 33.4K; on GitHub
Files: 8; besides SKILL.md
Updated: Oct 2026; last repo commit

This skill makes Claude add animations between UI states in React using the <ViewTransition> component, addTransitionType and CSS. It triggers when you ask for page transitions, route-change animation, shared elements, list reorder, enter and exit, or directional back and forward animation. It also triggers when you mention startViewTransition.

For an existing app it follows a step-by-step implementation guide that starts with an audit, then applies the patterns in a fixed order: shared element, Suspense reveal, list identity, state change, route change. It bundles 8 reference and metadata files and no scripts. Outside Next.js it needs stable react and react-dom 19.3 or newer.

Good for

React and Next.js developers adding page or route transitions without an animation library
Teams that want list-to-detail slides and shared-element morphs done in the right order
Claude Code users working in a React or Next.js app

Install vercel-react-view-transitions

Claude Code

Copy this prompt.

Install the vercel-react-view-transitions skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to Animate
Choosing Animation Style
Availability
Implementation Workflow
Core Concepts
The <ViewTransition> Component
Animation Triggers
Critical Placement Rule
Styling with View Transition Classes
Props
CSS Pseudo-Elements
Transition Types
router.back() and Browser Back Button
Types and Suspense
Shared Element Readiness
Shared Element Transitions

Key facts

Author: Vercel (vercel-labs/agent-skills)
License: MIT
Installs on skills.sh: 176,731 (Nov 2, 2026)
GitHub stars: 33,354 (Nov 2, 2026)
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
Last commit: 2026-10-28
Files: 8 bundled files: AGENTS.md, README.md, metadata.json and 5 reference guides (css-recipes, implementation, nextjs, patterns, troubleshooting)
Version in SKILL.md: 1.0.0
Browser support in SKILL.md: Chromium 125+, Firefox 144+, Safari 18.2+; older browsers skip the animation
React version: Next.js bundles it; otherwise stable react and react-dom 19.3 or newer

What it includes

Ranks 5 patterns by priority and drops any it cannot justify
Shared element, Suspense reveal, list identity, state change, then route change. Every ViewTransition must say what it communicates, or it is left out.
Read · When to animate
Audits the app first, then adds transitions step by step
Claude follows references/implementation.md and uses references/css-recipes.md for the CSS, adapted to your app.
Write · Implementation workflow
Directional slides for list-to-detail, fade or none for tabs
Hierarchical navigation gets forward and back slides. Lateral navigation like tabs does not, because slides would imply depth that is not there.
Write · Animation style choice
Uses addTransitionType for forward and back, including router.back()
A type name picks which CSS animation runs, so the browser back button can play the reverse of the forward one.
Write · Transition types
Enter and exit, list reorder, layout morph, force re-enter and Suspense
Each pattern has a code recipe in the SKILL.md.
Write · Common patterns
Does not add react@canary; the App Router already includes it
The SKILL.md says ViewTransition works out of the box in Next.js, and that npm ls may show a stable-looking version.
Write · Next.js integration
Covers reduced-motion handling for the animations it adds
The SKILL.md has an Accessibility section for users who ask for less motion.
Write · Accessibility

From the official docs

Questions

What does the React View Transitions skill do?

It makes Claude add view-transition animations to a React app, using the ViewTransition component and CSS classes. It covers route changes, shared elements, lists, Suspense reveals and back or forward direction.

How do I install it in Claude Code?

Use the install box above, which adds it from the vercel-labs/agent-skills repo. Then ask, for example, "add a shared-element transition from the product list to the product page". The skill name is vercel-react-view-transitions.

Which React version do I need?

In Next.js it works out of the box because the App Router bundles React canary, so do not install react@canary. Without Next.js, the SKILL.md says to use stable react and react-dom 19.3 or newer.

Which browsers does it work in?

The SKILL.md lists Chromium 125+, Firefox 144+ and Safari 18.2+. In other browsers the animation is skipped and the page still works.

Does it need an API key or scripts?

No key or script is mentioned. It bundles only markdown and a metadata file, so Claude edits your components and CSS.

How is it different from the animate skill by Emil Kowalski?

This one is about React's ViewTransition API for moving between UI states. The animate skill by Emil Kowalski describes itself as building "an animation from scratch" and starts by deciding whether something should animate at all.

Is it safe to install?

It bundles no scripts and only guides how Claude edits your components and CSS. Review the diff as usual.

Information

updated Nov 2, 2026

Repository: vercel-labs/agent-skills
Folder: skills/react-view-transitions

vercel-labs/agent-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

SKILL.md · github.com
skills.sh listing · skills.sh
GitHub repo · github.com
animate SKILL.md (Emil Kowalski) · github.com