vercel-react-view-transitions agent skill by vercel-labs
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.
Source and license
| Publisher | vercel-labs |
|---|---|
| Repository | vercel-labs/agent-skills |
| License | MIT |
| Snapshot | 2026-10-22 |
| Last repository commit | 2026-08-28 |
| Instruction size | 1,707 words; 323 lines |
| Bundled files | 9 |
Suede Skill Check: 68/100 · D
Report snapshot · · graded-v2
The rubric totals 100 points; published scores are capped at 99. Security scan: not scanned.
Source revision: 063bee94c3f4. Report version 688fbd594342. Badge URLs follow the latest listing; save the report to keep this version.
Download report · Request a fresh review
What to review next
- Structural checks: 48 of 56 points. 8 points for each of the seven graded checks.
- Boundary clause: 0 of 4 points. 4 when the description says when not to use the skill (“Not for …”, “Do not use …”, “Use … instead”).
- Example request: 0 of 3 points. 3 when the description quotes an example request (3–60 characters in quotation marks).
Add declarations and bundled files when they describe the skill’s actual needs. Update the source, then request a fresh review with the changed commit or PR.
| Component | Points earned | Available |
|---|---|---|
| Structural checks | 48 | 56 |
| Description length | 3 | 5 |
| Boundary clause | 0 | 4 |
| Example request | 0 | 3 |
| Instruction depth | 7 | 7 |
| Reference files | 3 | 3 |
| Bundled scripts | 0 | 2 |
| Recent maintenance | 6 | 9 |
| Curated-list citations | 1 | 7 |
| Tool permissions declared | 0 | 2 |
| Compatibility declared | 0 | 2 |
The published score is capped at 99. It measures the published files, documentation and maintenance signals. Security scan: not scanned. This assessment does not include a runtime test or a full installation-dependency review.
Install vercel-react-view-transitions
The skills CLI works with Claude Code, Codex, Cursor and other agents; the other routes copy the folder by hand.
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/react-view-transitionstmp="$(mktemp -d)"
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git "$tmp/repo"
mkdir -p .claude/skills
cp -R "$tmp/repo/"skills/react-view-transitions .claude/skills/
rm -rf "$tmp"tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git "$tmp/repo"
mkdir -p .agents/skills
cp -R "$tmp/repo/"skills/react-view-transitions .agents/skills/
rm -rf "$tmp"For a user-level install, copy the folder to ~/.claude/skills/ (Claude Code) or ~/.agents/skills/ (Codex). Inside Codex, $skill-installer can also fetch a skill from GitHub. New to skills? Read How to install agent skills in Claude Code, Codex and Cursor.
vercel-labs/agent-skills is third-party code. Read SKILL.md and any bundled scripts before you install it.
Show the listing and raise the score
vercel-react-view-transitions is listed with 68/100 · D. This badge links to its Suede AI listing. Skills scoring 80–99 add a numeric and a letter quality shield; the largest open points for vercel-react-view-transitions are structural checks (8), boundary clause (4) and example request (3). Send your repository and the points you want to raise, then request a fresh review after updating the skill. Publishers: read How to get your agent skill found in search and cited by AI assistants.
[](https://suedeai.directory/vercel-labs/agent-skills/vercel-react-view-transitions/)<a href="https://suedeai.directory/vercel-labs/agent-skills/vercel-react-view-transitions/"><img src="https://suedeai.directory/badge.svg" alt="Suede AI Skills Directory: listed" height="20"></a>Compare skills for this task
Browse frontend-design skills or compare scores side by side.