Skills Explorer Add Skills

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

Or 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-transitions

Safety box score

Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.

Source

Repository
vercel-labs/agent-skills (all skills from this repository)
Path
skills/react-view-transitions/SKILL.md
Branch
main
Updated
2026-09-19