Localized reading guide
vercel-react-view-transitionsPurpose, usage and source
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. 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 retrieved:
- Source repository
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- Repository stars
- 33,269
- Repository updated
- 2026-10-29
- Categories
- Development
- Last collected
License: Unspecified
Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.
The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.
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. 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.
How the upstream workflow works
Implementation Workflow
When adding view transitions to an existing app, follow references/implementation.md step by step. Start with the audit — do not skip it. Use references/css-recipes.md for the applicable CSS and adapt it to the app.
Upstream passage · L51 ↗When to Animate
Every should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it. Implement all applicable patterns from this list, in this order: This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.
React View Transitions
Animate between UI states using the browser's native document.startViewTransition. Declare *what* with , trigger *when* with startTransition / useDeferredValue / Suspense, control *how* with CSS classes. Unsupported browsers skip animations gracefully.
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>Requirements and setup
No short requirements passage was selected from this file. This does not mean the Skill has no dependencies. Check the repository setup instructions and referenced files.
Limits and quality checks
Nested VT Limitation
When a parent VT mounts/unmounts as one unit with nested VTs inside it, the nested ones do not fire their own enter/exit — only the outermost VT animates. (A child VT mounted inside a *persistent* parent VT fires enter/exit normally.) Per-item staggered animations during page navigation are not currently available in Next.js; see troubleshooting for the upstream experimental status.
Upstream passage · L304 ↗Start with a safe trial
- Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
- Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
- Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
- Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.
Read further in the source
- React View Transitions
- When to Animate
- Choosing Animation Style
- Availability
- Implementation Workflow
- The
Component - Animation Triggers
- Critical Placement Rule
- Props
- CSS Pseudo-Elements
- Transition Types
router.back()and Browser Back Button- Types and Suspense
- Shared Element Readiness
- Shared Element Transitions
- List Reorder
- Layout Displacement Morph
- Composing Shared Elements with List Identity
- Force Re-Enter with
key - Suspense Fallback to Content
- How Multiple VTs Interact
- Use
default="none"Deliberately - Two Patterns Coexist
- Nested VT Limitation
- Next.js Integration
- Accessibility
- Reference Files
- Full Compiled Document
Related Skills
Translation and scope
This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.
This introduction refers to the pinned version below; current repository activity and collection time are shown separately.
- Pinned source
- Read the original ↗
- Source retrieved
- Source commit
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- Source SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a