# vercel-react-view-transitions

Agent skill by Vercel (https://vercel.com)

The ViewTransition component, addTransitionType and the CSS pseudo-elements, used to animate between states without hand-rolling a shared-element transition.

Topics: Motion, Components
Last updated: 2026-08-28 (19 days ago)
Source: https://github.com/vercel-labs/agent-skills
Repository: https://github.com/vercel-labs/agent-skills

## Install

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

## In the author's words

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.

## Verification

- Source link: Resolved (HTTP 200) (pass)
- Repository: Resolves on GitHub (pass)
- Install command: Transcribed from the author's own page (pass)
- Maintenance: Last updated 19 days ago (pass)
- Attribution: Credited to Vercel (pass)

Full page: https://stackskills.dev/library/vercel-react-view-transitions