vercel-react-view-transitions
An agent skill by vercel-labs, from vercel-labs/agent-skills. Tags: animation, developer-tools, react, transition, web.
What it does
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.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitionsOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/vercel-labs/agent-skills
cp -r agent-skills/skills/react-view-transitions ~/.claude/skills/vercel-react-view-transitionsSafety box score
Grade A, minimal risk: 7 of 100 risk points, rated 2026-09-23. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.
This is a documentation-only React/Next.js animation skill with no shipped scripts or binaries. The main risk is the install command in the README, which invokes `npx` to fetch and run a package from the registry/GitHub; otherwise it mainly tells the agent how to edit app code and CSS in normal project scope.
| Category | Level | Why |
|---|---|---|
| Code & shell execution | 1 (low) | The README install command runs a package via `npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions`, so installation executes code from the network. |
| Network access | 1 (low) | Installation pulls from remote sources (`https://github.com/vercel-labs/agent-skills` via `npx skills add`), and the docs also point to external React/Next.js URLs for reference. |
| Filesystem reach | 0 (none) | The shipped files are Markdown and JSON only; they do not include scripts that write, delete, or modify paths outside the project. |
| Secrets & credentials | 0 (none) | No file reads or prompts for tokens, passwords, `.env` files, browser sessions, or other credentials appear in the skill files. |
| Privilege & persistence | 0 (none) | There is no sudo, service registration, global install, shell startup edit, or other privilege-changing instruction in the skill. |
| Instruction hijack surface | 0 (none) | The files contain implementation guidance and references, but no hidden prompts or instructions to ignore safeguards or follow untrusted remote text. |
| Irreversible actions | 0 (none) | The skill is about UI animation patterns; it does not instruct the agent to deploy, post, pay, book, or delete anything. |
| Transparency | 0 (none) | All supplied content is plain text and readable; there are no binaries, encoded blobs, or downloaded installers in the repository snapshot. |
Before installing
- Review `README.md`’s `npx skills add ...` command before running it.
- Install in a throwaway/scratch environment first if you want to verify what `npx skills` downloads.
- Keep your normal credentials out of the shell session while testing the installer.
Rated 2026-09-23 by an automated review of 9 files from the skill's repository.
Source
- Repository
- vercel-labs/agent-skills (all skills from this repository)
- Path
- skills/react-view-transitions/SKILL.md
- Branch
- main
- Updated
- 2026-09-19
Related skills
- vercel-composition-patterns — React composition patterns that scale.
- vercel-react-best-practices — React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing.
- expo-dom — Framework (OSS). Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
- expo-router — Framework (OSS). Navigation and routing for Expo Router.
- expo-web-to-native — Framework (OSS). Migrate an existing web React app to a native iOS/Android app with Expo.
- launch-with-aws — Migrates vibe-coded web applications to AWS.