New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

React View Transitions Guide

by vercel-labs in vercel-labs/next-beats

Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

OfficialMITAuto-check passedFrontend & Design

Install React View Transitions Guide

skills CLI
$ npx skills add vercel-labs/next-beats --skill vercel-react-view-transitions -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vercel-labs/next-beats vercel-react-view-transitions --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vercel-labs/next-beats.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vercel-react-view-transitions .claude/skills/vercel-react-view-transitions && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vercel-react-view-transitions
GitHub stars
167
Used in
10 other repos
Token cost
~3.1k tokens
SKILL.md length
1,074 words
Files
8 (incl. references)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

  • Adding animated route transitions to a Next.js or React app
  • SKILL.md covers When to Animate, Availability, Implementation Workflow and Core Concepts, plus 9 more sections
  • Calls npm
  • Animating a shared element between a list and its detail view

What it does

The skill lists five patterns in priority order and says to implement every one that fits the app rather than picking just one: a shared element named transition for going deeper into the same thing, a Suspense reveal for data that just loaded, per-item keys for list identity when items reorder, enter and exit props for things appearing or disappearing, and a route-level transition for moving to a new place. Directional slides are reserved for hierarchical navigation and ordered sequences like a carousel, since lateral tab-to-tab navigation has no depth to communicate and should use a plain fade or no animation instead.

On availability, Next.js App Router already bundles the React canary build so ViewTransition works without installing react@canary, even though npm ls react may show a stable-looking version; outside Next.js, react@canary and react-dom@canary must be installed because ViewTransition is not in stable React yet. Browser support is Chromium 125 and newer, Firefox 144 and newer, and Safari 18.2 and newer, with graceful degradation elsewhere, and five reference files cover CSS recipes, implementation details, Next.js specifics, general patterns and troubleshooting.

When your agent uses it

  • Adding animated route transitions to a Next.js or React app
  • Animating a shared element between a list and its detail view
  • Animating list items as they reorder, or components as they enter and exit

Example prompts

  • “Add a shared-element transition from this product card to its detail page.”
  • “Animate the list when items get reordered after a sort.”
  • “Add forward and back slide transitions for this hierarchical navigation.”

Requirements

  • react@canary and react-dom@canary outside Next.js

What it can do on your machine

Read from SKILL.md and the folder at commit 5a85068. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React View Transitions Guide loads about 3.1k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 174 tokens; SKILL.md has 1,074 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~174
When it runs · the whole SKILL.md, loaded when a task matches
~3.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~11k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vercel-labs/next-beats at commit 5a85068, republished under its MIT licence (© vercel-labs). 1,074 words, ~3,112 tokens.

Download SKILL.mdSave it as .claude/skills/vercel-react-view-transitions/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
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 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.
license
MIT
metadata.author
vercel
metadata.version
1.0.0

React View Transitions

Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully.

When to Animate

Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.

Implement all applicable patterns from this list, in this order:

PriorityPatternWhat it communicates
1Shared element (name)"Same thing — going deeper"
2Suspense reveal"Data loaded"
3List identity (per-item key)"Same items, new arrangement"
4State change (enter/exit)"Something appeared/disappeared"
5Route change (layout-level)"Going to a new place"

This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.

Choosing Animation Style
ContextAnimationWhy
Hierarchical navigation (list → detail)Type-keyed nav-forward / nav-backCommunicates spatial depth
Lateral navigation (tab-to-tab)Bare <ViewTransition> (fade) or default="none"No depth to communicate
Suspense revealenter/exit string propsContent arriving
Revalidation / background refreshdefault="none"Silent — no animation needed

Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.

Availability

  • Next.js: Do not install react@canary — the App Router already bundles React canary internally. ViewTransition works out of the box. npm ls react may show a stable-looking version; this is expected.
  • Without Next.js: Install react@canary react-dom@canary (ViewTransition is not in stable React).
  • Browser support: Chromium 111+, Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.

Implementation Workflow

When adding view transitions to an existing app, follow references/implementation.md step by step. Start with the audit — do not skip it. Copy the CSS recipes from references/css-recipes.md into the global stylesheet — do not write your own animation CSS.

Core Concepts

The <ViewTransition> Component
jsx
import { ViewTransition } from 'react';

<ViewTransition>
  <Component />
</ViewTransition>

React auto-assigns a unique view-transition-name and calls document.startViewTransition behind the scenes. Never call startViewTransition yourself.

Animation Triggers
TriggerWhen it fires
enter<ViewTransition> first inserted during a Transition
exit<ViewTransition> first removed during a Transition
updateDOM mutations inside a <ViewTransition>. With nested VTs, mutation applies to the innermost one
shareNamed VT unmounts and another with same name mounts in the same Transition

Only startTransition, useDeferredValue, or Suspense activate VTs. Regular setState does not animate.

Critical Placement Rule

<ViewTransition> only activates enter/exit if it appears before any DOM nodes:

jsx
// Works
<ViewTransition enter="auto" exit="auto">
  <div>Content</div>
</ViewTransition>

// Broken — div wraps the VT, suppressing enter/exit
<div>
  <ViewTransition enter="auto" exit="auto">
    <div>Content</div>
  </ViewTransition>
</div>

Styling with View Transition Classes

Props

Values: "auto" (browser cross-fade), "none" (disabled), "class-name" (custom CSS), or { [type]: value } for type-specific animations.

jsx
<ViewTransition default="none" enter="slide-in" exit="slide-out" share="morph" />

If default is "none", all triggers are off unless explicitly listed.

CSS Pseudo-Elements
  • ::view-transition-old(.class) — outgoing snapshot
  • ::view-transition-new(.class) — incoming snapshot
  • ::view-transition-group(.class) — container
  • ::view-transition-image-pair(.class) — old + new pair

See references/css-recipes.md for ready-to-use animation recipes.

Transition Types

Tag transitions with addTransitionType so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:

jsx
startTransition(() => {
  addTransitionType('nav-forward');
  addTransitionType('select-item');
  router.push('/detail/1');
});

Pass an object to map types to CSS classes. Works on enter, exit, and share:

jsx
<ViewTransition
  enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}
  exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}
  share={{ 'nav-forward': 'morph-forward', 'nav-back': 'morph-back', default: 'morph' }}
  default="none"
>
  <Page />
</ViewTransition>

enter and exit don't have to be symmetric. For example, fade in but slide out directionally:

jsx
<ViewTransition
  enter={{ 'nav-forward': 'fade-in', 'nav-back': 'fade-in', default: 'none' }}
  exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
  default="none"
>

TypeScript: ViewTransitionClassPerType requires a default key in the object.

For apps with multiple pages, extract the type-keyed VT into a reusable wrapper:

jsx
export function DirectionalTransition({ children }: { children: React.ReactNode }) {
  return (
    <ViewTransition
      enter={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
      exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
      default="none"
    >
      {children}
    </ViewTransition>
  );
}
router.back() and Browser Back Button

router.back() and the browser's back/forward buttons do not trigger view transitions (popstate is synchronous, incompatible with startViewTransition). Use router.push() with an explicit URL instead.

Types and Suspense

Types are available during navigation but not during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter/exit; use simple string props for Suspense reveals.

Show full SKILL.md (466 more words)Show less

Shared Element Transitions

Same name on two VTs — one unmounting, one mounting — creates a shared element morph:

jsx
<ViewTransition name="hero-image">
  <img src="/thumb.jpg" onClick={() => startTransition(() => onSelect())} />
</ViewTransition>

// On the other view — same name
<ViewTransition name="hero-image">
  <img src="/full.jpg" />
</ViewTransition>
  • Only one VT with a given name can be mounted at a time — use unique names (photo-${id}). Watch for reusable components: if a component with a named VT is rendered in both a modal/popover and a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.
  • share takes precedence over enter/exit. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), enter/exit fires instead. Consider whether the element needs a fallback animation for those paths.
  • Never use a fade-out exit on pages with shared morphs — use a directional slide instead.

Common Patterns

Enter/Exit
jsx
{show && (
  <ViewTransition enter="fade-in" exit="fade-out"><Panel /></ViewTransition>
)}
List Reorder
jsx
{items.map(item => (
  <ViewTransition key={item.id}><ItemCard item={item} /></ViewTransition>
))}

Trigger inside startTransition. Avoid wrapper <div>s between list and VT.

Composing Shared Elements with List Identity

Shared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested <ViewTransition> boundaries:

jsx
{items.map(item => (
  <ViewTransition key={item.id}>                                      {/* list identity */}
    <Link href={`/items/${item.id}`}>
      <ViewTransition name={`item-image-${item.id}`} share="morph">   {/* shared element */}
        <Image src={item.image} />
      </ViewTransition>
      <p>{item.name}</p>
    </Link>
  </ViewTransition>
))}

The outer VT handles list reorder/enter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.

Force Re-Enter with key
jsx
<ViewTransition key={searchParams.toString()} enter="slide-up" default="none">
  <ResultsGrid />
</ViewTransition>

Caution: If wrapping <Suspense>, changing key remounts the boundary and refetches.

Suspense Fallback to Content

Simple cross-fade:

jsx
<ViewTransition>
  <Suspense fallback={<Skeleton />}><Content /></Suspense>
</ViewTransition>

Directional reveal:

jsx
<Suspense fallback={<ViewTransition exit="slide-down"><Skeleton /></ViewTransition>}>
  <ViewTransition enter="slide-up" default="none"><Content /></ViewTransition>
</Suspense>

For more patterns, see references/patterns.md.

How Multiple VTs Interact

Every VT matching the trigger fires simultaneously in a single document.startViewTransition. VTs in different transitions (navigation vs later Suspense resolve) don't compete.

Use default="none" Liberally

Without it, every VT fires the browser cross-fade on every transition — Suspense resolves, useDeferredValue updates, background revalidations. Always use default="none" and explicitly enable only desired triggers.

Two Patterns Coexist

Pattern A — Directional slides: Type-keyed VT on each page, fires during navigation. Pattern B — Suspense reveals: Simple string props, fires when data loads (no type).

They coexist because they fire at different moments. default="none" on both prevents cross-interference. Always pair enter with exit. Place directional VTs in page components, not layouts.

Nested VT Limitation

When a parent VT exits, nested VTs inside it do not fire their own enter/exit — only the outermost VT animates. Per-item staggered animations during page navigation are not possible today. See react#36135 for an experimental opt-in fix.

Next.js Integration

For Next.js setup (experimental.viewTransition flag, transitionTypes prop on next/link, App Router patterns, Server Components), see references/nextjs.md.

Accessibility

Always add the reduced motion CSS from references/css-recipes.md to your global stylesheet.

Reference Files

  • references/implementation.md — Step-by-step implementation workflow.
  • references/patterns.md — Patterns, animation timing, events API, troubleshooting.
  • references/css-recipes.md — Ready-to-use CSS animation recipes.
  • references/nextjs.md — Next.js App Router patterns and Server Component details.

Full Compiled Document

For the complete guide with all reference files expanded: AGENTS.md

© vercel-labs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references) in .agents/skills/vercel-react-view-transitions of vercel-labs/next-beats.

  • SKILL.md
  • AGENTS.md
  • README.md
  • metadata.json
  • references/css-recipes.md
  • references/implementation.md
  • references/nextjs.md
  • references/patterns.md

Open the folder on GitHubat commit 5a85068

Used in 11 other repositories

We found 14 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 10 other GitHub owners. This page covers the copy in vercel-labs/next-beats, which our catalogue first saw on October 7, 2026.

Compare with similar skills

React View Transitions Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React View Transitions Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React View Transitions Guide this skillvercel-labs/next-beats16710 repos~3.1kAutomated safety check: PassMIT
GSAP for Reactgreensock/gsap-skills16k4 repos~1.6kAutomated safety check: PassMIT
Animatedelphi-ai/animate-skill108—~1.3kAutomated safety check: PassNone
Awwwards-Level React AnimationsHainrixz/editor-pro-max261—~4.4kAutomated safety check: PassCustom licence
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
Website ClonerJCodesMore/ai-website-cloner-template36k—~1.7kAutomated safety check: PassMIT

Similar skills

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 4 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Animate

    delphi-ai/animate-skill

    Animation patterns and best practices for Next.js/React applications.

    108 GitHub stars~1.3k tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • Awwwards-Level React Animations

    Hainrixz/editor-pro-max

    Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

    261 GitHub stars~4.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Website Cloner

    JCodesMore/ai-website-cloner-template

    Rebuilds existing web pages as editable local code that matches their content, assets, responsive layout and interactions, including Framer sites and animated pages.

    36k GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Vercel React Best Practices

    sanity-io/sanity

    Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 130 repos~1.6k tokens
    Frontend & DesignAuto-check passed

Works with

Categories

Questions about React View Transitions Guide

What does React View Transitions Guide do?

Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation. The skill lists five patterns in priority order and says to implement every one that fits the app rather than picking just one: a shared element named transition for going deeper into the same thing, a Suspense reveal for data that just loaded, per-item keys for list identity when items reorder, enter and exit props for things appearing or disappearing, and a route-level transition for moving to a new place. Directional slides are reserved for hierarchical navigation and ordered sequences like a carousel, since lateral tab-to-tab navigation has no depth to communicate and should use a plain fade or no animation instead.

When should I use React View Transitions Guide?

React View Transitions Guide fits situations like: adding animated route transitions to a Next.js or React app; animating a shared element between a list and its detail view; animating list items as they reorder, or components as they enter and exit.

How do I install React View Transitions Guide in Claude Code?

Run `npx skills add vercel-labs/next-beats --skill vercel-react-view-transitions -a claude-code`. Or copy the skill folder (.agents/skills/vercel-react-view-transitions in vercel-labs/next-beats) into .claude/skills/vercel-react-view-transitions in your project. Claude Code loads it when a task matches its description.

How do I install React View Transitions Guide in Codex?

Run `npx skills add vercel-labs/next-beats --skill vercel-react-view-transitions -a codex`. Or copy the skill folder (.agents/skills/vercel-react-view-transitions in vercel-labs/next-beats) into .agents/skills/vercel-react-view-transitions in your project. Codex loads it when a task matches its description.

Can I use React View Transitions Guide in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vercel-labs/next-beats --skill vercel-react-view-transitions -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-react-view-transitions, .gemini/skills/vercel-react-view-transitions, .github/skills/vercel-react-view-transitions and .opencode/skills/vercel-react-view-transitions in your project.

What does React View Transitions Guide need to run?

Going by SKILL.md and its folder, React View Transitions Guide needs the command-line tools its instructions call (npm). Our summary lists: react@canary and react-dom@canary outside Next.js.

Does React View Transitions Guide access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is React View Transitions Guide safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React View Transitions Guide use?

React View Transitions Guide is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React View Transitions Guide use?

About 3.1k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.4k tokens, read only when the agent opens those files.

What are the alternatives to React View Transitions Guide?

Skills that share tags, products or a category with React View Transitions Guide: GSAP for React (greensock/gsap-skills, 16k stars), Animate (delphi-ai/animate-skill, 108 stars), Awwwards-Level React Animations (Hainrixz/editor-pro-max, 261 stars) and Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React View Transitions Guide?

vercel-labs (a GitHub organization, an official publisher) maintains it in vercel-labs/next-beats, which has 167 GitHub stars. The repository was last updated on September 29, 2026.

Source: vercel-labs/next-beats on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.