StealIt
Vercel OfficialClaude skill for frontend development

Vercel React View Transitions

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.

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Vercel React View Transitions

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /vercel-react-view-transitions.

It contains no scripts, only instructions and reference files, so it can't run code on its own.

What the instructions cover

  1. 1When to Animate
  2. 2Availability
  3. 3Implementation Workflow
  4. 4Core Concepts
  5. 5Styling with View Transition Classes
  6. 6Transition Types
  7. 7Shared Element Transitions
  8. 8Common Patterns
  9. 9How Multiple VTs Interact
  10. 10Next.js Integration
  11. 11Accessibility
  12. 12Reference Files

Section headings from the skill's SKILL.md file.

What's inside · 9 files

  • AGENTS.md
  • README.md
  • SKILL.md
  • metadata.json
  • references/css-recipes.md
  • references/implementation.md
  • references/nextjs.md
  • references/patterns.md
  • references/troubleshooting.md

More from Vercel

See all →

Vercel React Best PracticesTop pick

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…

FrontendVercel34k

Deploy To Vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a…

Cloud & DevOpsVercel34k

Vercel CLI With Tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to…

Cloud & DevOpsVercel34k

Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…

FrontendVercel34k

More Claude skills for frontend development

See all →

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…

FrontendAnthropic187k

Angular Migration

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…

FrontendSeth Hobson42k

Modern Javascript Patterns

Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for…

FrontendSeth Hobson42k

Nextjs App Router Patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or…

FrontendSeth Hobson42k