# Vercel React View Transitions (agent skill)

> Vercel React View Transitions is an agent skill (a SKILL.md file) from vercel-labs/agent-skills. Guide for implementing smooth, native-feeling animations using React's View Transition API ( component, addTransitionType, and CSS view transition pseudo-elements). It works with Claude Code and has 32,014 GitHub stars across a repository of 4 listed skills.

Guide for implementing smooth, native-feeling animations using React's View Transition API ( 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.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/vercel-labs/agent-skills |
| Skill path | skills/react-view-transitions/SKILL.md |
| Skill name | vercel-react-view-transitions |
| GitHub stars | 32,014 |
| Installs on skills.sh | 144,594 |
| License | MIT |
| Skills in repo | 4 |
| Plugin marketplace | no |
| Official | yes |
| Works with | Claude Code |
| Category | Design & frontend |
| Last commit | Aug 28, 2026 |

## When it triggers

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

## Add this skill

### Claude Code

```sh
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-view-transitions ~/.claude/skills/vercel-react-view-transitions   # personal, or .claude/skills in a project
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-view-transitions .agents/skills/vercel-react-view-transitions   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-view-transitions .cursor/skills/vercel-react-view-transitions   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

skills.sh listing: https://www.skills.sh/vercel-labs/agent-skills/vercel-react-view-transitions

---

Canonical page: https://appsgit.com/skills/vercel-labs-vercel-react-view-transitions
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.