| name | vercel-react-view-transitions |
| description | Guide for adding native-feeling page, route, shared-element, and list transitions in React and Next.js with the View Transition API. |
| zh_description | 用于在 React/Vercel 项目中实现和优化 View Transitions。 |
| version | 1.0.0 |
| author | seaworld008 |
| source | github:vercel-labs/agent-skills |
| source_url | https://skills.sh/vercel-labs/agent-skills/vercel-react-view-transitions |
| license | MIT |
| tags | [react, nextjs, animation, transitions, frontend, vercel] |
| created_at | 2026-06-08 |
| updated_at | 2026-06-08 |
| quality | 4 |
| complexity | intermediate |
Vercel React View Transitions
Practical guidance for implementing React View Transitions in production UI work. This skill is intended for code generation, refactoring, and review tasks where the goal is to add motion without introducing a heavyweight animation library.
This repository version is an original in-house rewrite informed by the public Vercel skill and related platform guidance. Keep the implementation grounded in React and Next.js behavior, not generic CSS animation habits.
When to Use
Use this skill when the task involves any of the following:
- route or page transitions in a React or Next.js app
- list-to-detail shared element motion
- enter and exit animations tied to UI state changes
- reordering cards, rows, or grid items with smooth visual continuity
- replacing ad hoc animation libraries for simple navigation transitions
- reviewing whether a proposed transition respects accessibility and browser support
Do not reach for this skill when the request is mainly about canvas, WebGL, game animation, or highly choreographed motion systems. In those cases, a dedicated animation or rendering approach is more appropriate.
Availability Rules
- In plain React apps, treat
ViewTransition support as experimental and version-sensitive.
- In modern Next.js App Router environments, verify the framework behavior before adding polyfills or third-party wrappers.
- Unsupported browsers must still render correctly. Motion is an enhancement, not a dependency.
- Always include a reduced-motion path before polishing the default animation.
Working Model
Think about view transitions as three separate decisions:
- What visual region should transition?
- Which state change should trigger the transition?
- What motion style should be applied when the browser captures old and new snapshots?
If those three decisions are not clear, do not start coding animation classes yet. Audit the UI first.
Implementation Workflow
1. Audit the interaction
Before editing code, identify:
- the state or navigation event that changes the UI
- the exact element boundaries that should animate
- whether the transition is page-wide, local, or shared-element
- whether loading, suspense, or async updates are involved
Good candidates:
- gallery to detail page
- tabs or segmented views
- sortable lists
- card expansion into a modal or detail panel
Bad candidates:
