Vercel React View Transitions
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 33,029 GitHub stars across a repository of 4 listed skills.
github.com/vercel-labs/agent-skills/skills/react-view-transitions (opens in a new tab)
Data as of from the GitHub API and skills.sh; description from the skill's SKILL.md. Report an error
- Official
- Multi-skill repo
- Design & frontend
- Active
Add this skill
Claude
Claude Code loads skills from ~/.claude/skills/ (all projects) or .claude/skills/ (one project):
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 projectIn the Claude apps, zip the vercel-react-view-transitions folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).
ChatGPT / Codex
Codex reads skills from .agents/skills/ in a repo or ~/.agents/skills/ for every project:
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 projectsStandalone skills also load in the ChatGPT desktop app.
Cursor
Cursor loads skills from .cursor/skills/ (or ~/.cursor/skills/) and also reads .claude/skills/:
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 projectsSource (checked Oct 7, 2026): code.claude.com/docs/en/skills (opens in a new tab), support.claude.com/en/articles/12512180-using-skills-in-claude (opens in a new tab), learn.chatgpt.com/docs/build-skills (opens in a new tab), cursor.com/docs/context/skills (opens in a new tab)
What this skill does
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.
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.
More skills in vercel-labs/agent-skills
4 skills are listed from this repository.
Similar skills
More design & frontend skills
Cmo Advisor
alirezarezvani/claude-skills
Marketing leadership for scaling companies.
Active · last commit Oct 23, 2026
Design & frontendPythonFind Animation Opportunities
emilkowalski/skills
Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't.
Maintained · last commit Oct 11, 2026
Design & frontendMarkdownBrand Guidelines
composio-community/awesome-codex-skills
Applies OpenAI's brand colors and typography to any artifact that should match the Codex/OpenAI look-and-feel.
Maintained · last commit Jul 26, 2026
Design & frontendPythonVideo Shotcraft
Vincentwei1021/video-shotcraft
Create cinematic product videos from shot recipe cards, a validated template, and code/audio assets (Remotion + real page screenshots + 2.5D camera moves + beat-synced cuts + sound design).
Active · last commit Oct 17, 2026
Design & frontendTypeScriptDse Loop
wanshuiyin/Auto-claude-code-research-in-sleep
Autonomous design space exploration loop for computer architecture and EDA.
Active · last commit Oct 24, 2026
Design & frontendPythonTool Design
muratcankoylan/Agent-Skills-for-Context-Engineering
This skill should be used for the tool-interface layer of an agent system specifically: writing tool descriptions agents can route on, designing tool schemas and response formats, naming…
Active · last commit Oct 12, 2026
Design & frontendPython
How do I install the Vercel React View Transitions skill?
Copy the vercel-react-view-transitions folder (the one containing SKILL.md) into ~/.claude/skills/ for Claude Code, .agents/skills/ for Codex or .cursor/skills/ for Cursor. The agent picks it up automatically when a task matches its description.
Is the Vercel React View Transitions skill free?
Yes. The repository is open source under the MIT license.
Is Vercel React View Transitions maintained?
The repository's most recent commit was on Aug 28, 2026. Its latest release is agent-skills-063bee94c3f4df8453406c830b0a7df0f2860278. appsgit only lists skills from repositories with a commit in the last six months.