vercel-react-view-transitions
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.
Target: React / Next.js. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- React View Transitions
- When to Animate
- Choosing Animation Style
- Availability
- Implementation Workflow
- Core Concepts
- The Component
- Animation Triggers
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. 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: | Priority | Pattern | What it communicates | |----------|---------|---------------------| | 1 | Shared element (name) | "Same thing — going deeper" | | 2 | Suspense reveal | "Data loaded" | | 3 | List identity (per-item key) | "Same items, new arrangement" | | 4 | State change (enter/exit) | "Something appeared/disappeared" | | 5 | Route change (page-level) | "Going to a new place" | 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. | Context | Animation | Why | |---------|-----------|-----| | Hierarchical navigation (list → detail) | Type-keyed nav-forward / nav-back | Communicates spatial depth | | Lateral navigation (tab-to-tab) | Bare (fade) or def
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- vercel-labs/agent-skills
- Source file
- skills/react-view-transitions/SKILL.md
- Fixed revision
- 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: Vercel Agent Skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:38.343Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.