vercel-react-view-transitions — Skills

What it does

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.

::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

Never use a fade-out exit on pages with shared morphs — use a directional slide instead.

Native browser animations for React UI state changes using the View Transition API.

Source

Repository: https://github.com/vercel-labs/agent-skills

vercel-react-view-transitions FAQ

What does the vercel-react-view-transitions skill do?

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

What does vercel-react-view-transitions require?

TypeScript: ViewTransitionClassPerType requires a default key in the object. Configuration keys: AGENTS.

How do I install vercel-react-view-transitions?

Run: npx -y skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions --agent claude-code — the source lives at github.com/vercel-labs/agent-skills.

Maintain vercel-react-view-transitions?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![vercel-react-view-transitions on getagentictools](https://getagentictools.com/badge/skills/vercel-labs-agent-skills-vercel-react-view-transitions.svg)](https://getagentictools.com/skills/vercel-labs-agent-skills-vercel-react-view-transitions?ref=badge)

npx agentictools info skills/vercel-labs-agent-skills-vercel-react-view-transitions

The second line is the CLI lookup for this page — handy in READMEs and docs.