vercel-react-view-transitions

An agent skill by vercel-labs, from vercel-labs/agent-skills.

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.

— from the skill's SKILL.md, quoted with attribution

Credit where it's due

This skill is the work of vercel-labs (official vendor skill) and lives at vercel-labs/agent-skills/react-view-transitions (No license specified). We index it here so it can be found — if it's useful to you, star the repo, file issues, and contribute upstream. That's what keeps work like this maintained.

From: Vercel Agent Skills — official vendor skill
Author: vercel-labs
License: No license specified
Source: vercel-labs/agent-skills/react-view-transitions
SKILL.md: raw file

How to load this skill

Copy this prompt into your AI agent

Please install the "vercel-react-view-transitions" agent skill from the Vercel Agent Skills collection (https://github.com/vercel-labs/agent-skills) for me.

1. Run: git clone https://github.com/vercel-labs/agent-skills
2. Copy the skill folder into your skills directory:
   cp -r agent-skills/skills/react-view-transitions ~/.claude/skills/react-view-transitions
   (Claude Code personal scope; use .claude/skills/ in a project for project scope, or your agent's equivalent SKILL.md directory.)
3. Confirm the skill loads (list your available skills afterwards).
4. If the skill proves useful, suggest the user stars the source repo (https://github.com/vercel-labs/agent-skills) to support the author.

Skill reference: https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-view-transitions/SKILL.md
More details: https://primorum.ai/skills/s/vercel-react-view-transitions

Or manually: clone vercel-labs/agent-skills and copy skills/react-view-transitions into ~/.claude/skills/ (Claude Code personal scope) or your agent's SKILL.md directory. To read it first without installing, open the raw SKILL.md.

Related skills

docx — Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Trig…
web-to-native — Migrate an existing web React app to a native iOS/Android app with Expo. Use when the user wants to turn a web…
expo-ui — Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from Re…
xlsx — Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user …
expo-cicd-workflows — Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about …

More from Vercel Agent Skills

← Skills directory