🎯

vercel-react-view-transitions

🎯Skill

from vercel-labs/agent-skills

What it does

Implements smooth animations using React's View Transition API — the `<ViewTransition>` component, `addTransitionType`, transition classes, shared-element transitions, and Next.js `next/link` integration.

Overview

The vercel-react-view-transitions skill teaches AI agents how to implement smooth animations using React's View Transition API. It covers the ViewTransition component, addTransitionType for directional animations, transition classes with CSS pseudo-elements, and Next.js integration with the transitionTypes prop on next/link.

Key Features

ViewTransition component with enter, exit, update, and share triggers for declarative transition control
addTransitionType for directional animations such as forward/back navigation transitions
Shared element transitions using the name prop for list-to-detail morphing effects
Next.js integration with transitionTypes prop on next/link for route-level animations
Ready-to-use CSS recipes (fade, slide, scale, flip) with prefers-reduced-motion accessibility support

Who is this for?

React and Next.js developers adding polished page transitions and shared element animations
AI agent users building web apps needing smooth navigation animations or Suspense fallback reveals
Frontend teams implementing the View Transition API with accessibility and directional animation support

📦

Same repository

vercel-labs/agent-skills(18 items)

vercel-react-view-transitions

Installation

Vibe Index InstallInstalls to .claude/skills/

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

skills.sh Install⚠ Installs to .agents/skills/

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

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/vercel-react-view-transitions/SKILL.md

SKILL.md

55,642Installs

AddedApr 4, 2026

View on GitHub Back to Skills

More from this repository10

🎯

vercel-react-best-practices🎯Skill

React and Next.js performance optimization guidelines from Vercel Engineering. 40+ rules across 8 categories covering component performance, data fetching, and bundle size optimization.

🎯

web-design-guidelines🎯Skill

Web interface best practices auditor from Vercel Engineering. Reviews UI code against 100+ standards covering accessibility, animations, forms, images, and UX fundamentals.

🎯

vercel-composition-patterns🎯Skill

React composition patterns skill from Vercel Labs that helps avoid boolean prop proliferation through compound components, state lifting, and internal composition techniques.

🎯

vercel-react-native-skills🎯Skill

React Native best practices skill with 16 rules across 7 sections covering performance, layout, animation, images, state management, architecture, and platform-specific patterns for Expo and React Native apps.

🎯

deploy-to-vercel🎯Skill

Part of Vercel Labs agent skills collection that includes React/Next.js best practices, web design guidelines, React Native guidelines, and composition patterns — packaged as Agent Skills for AI coding agents.

🎯

vercel-cli-with-tokens🎯Skill

A skill from the Vercel Labs agent-skills collection that enables AI coding agents to interact with the Vercel CLI using authentication tokens for deployment and project management.

🎯

react-native-skills🎯Skill

React Native best practices optimized for AI agents from Vercel Engineering. 16 rules across 7 sections covering mobile performance, layout patterns, animations, and platform-specific implementation.

🎯

composition-patterns🎯Skill

Guides AI agents in implementing robust software design patterns for component composition, modularity, and reusability across different programming paradigms.

🎯

vercel-optimize🎯Skill

A collection of AI agent skills from Vercel Labs covering React/Next.js performance optimization, web design accessibility auditing, React Native best practices, and View Transition API implementation.

🎯

writing-guidelines🎯Skill

Reviews documentation and prose against Vercel's writing handbook, auditing 80+ rules across voice, structure, content types, code samples, typography, and AI workflow.