Smooth Page Transitions
Native-feeling transitions with React's View Transition API.
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 in under a minute
Mac or Linux, after you download
unzip smooth-page-transitions.zip -d ~/.claude/skills/Windows PowerShell
Expand-Archive smooth-page-transitions.zip -DestinationPath $HOME\.claude\skills- Start a new Claude Code session so it sees the skill.
- Ask in plain words, for example: "Use Smooth Page Transitions on this project."
- Unzip the download, then zip just the smooth-page-transitions folder if your computer added an extra folder.
- In Claude.ai, open Settings, then Capabilities, and upload it under Skills.
- Turn the skill on and ask Claude to use it.
Smooth Page Transitions uses the open SKILL.md format, so it also works in agents like Cursor, Gemini CLI, GitHub Copilot and Codex. Copy the smooth-page-transitions folder into that agent's skills folder, for example .cursor/skills/ or .github/skills/ in your project.
What's inside
The 13 main sections of the SKILL.md, in order.
- When to Animate
- Availability
- Implementation Workflow
- Core Concepts
- Styling with View Transition Classes
- Transition Types
- Shared Element Transitions
- Common Patterns
- How Multiple VTs Interact
- Next.js Integration
- Accessibility
- Reference Files
- Full Compiled Document
In the download: 11 files, including SKILL.md, LICENSE and NOTICE.md
Credit and license
Smooth Page Transitions is a renamed, packaged copy of react-view-transitions by Vercel (github.com/vercel-labs/agent-skills), used under the MIT license. The license and a list of changes ship inside the download.
Questions
Does Smooth Page Transitions work in Claude.ai, not just Claude Code?
Yes. In Claude.ai, upload the smooth-page-transitions folder as a zip in Settings under Capabilities. It also works in other agents that support Agent Skills, like Cursor, Gemini CLI and GitHub Copilot.
What do I get?
A zip with the smooth-page-transitions folder: its SKILL.md (15,097 words) and its license files. One payment, instant download.
Who made Smooth Page Transitions?
It's a renamed, packaged copy of react-view-transitions by Vercel, used under the MIT license. The license and a list of changes ship inside the download.