vercel-react-view-transitions
Official sourceImplements native-feeling animations with React's View Transition API—shared elements, Suspense reveals, list reorder, directional navigation—without third-party animation libraries.
Source: Vercel Labs
At a glance
Verified source- Best for
- Adding page and route-change animations in React/Next.js
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Creating shared-element morphs between list and detail views
- Source
- vercel-labs/agent-skills
01 / Understand the skill
About 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.
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements).
Read full description
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.
02 / Confirm the fit
Use vercel-react-view-transitions when you need to
- Adding page and route-change animations in React/Next.js
- Creating shared-element morphs between list and detail views
- Animating list reorder, enter/exit, and Suspense reveals
- Directional forward/back navigation transitions
03 / See the workflow
How vercel-react-view-transitions works
- 01Install: npx skills add https://github.com/vercel-labs/agent-skills --skill react-view-transitions
- 02Try: Add a shared-element morph from my photo grid to the detail page in Next.js.
- 03Get: ViewTransition components with type-keyed CSS recipes and correct placement.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Adding page and route-change animations in React/Next.js
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by Vercel Labs
Ready to add vercel-react-view-transitions?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/vercel-labs/agent-skills --skill react-view-transitions
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.
Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.
Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.
Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.