Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

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

View sourceReactNext.jsMotionInteraction

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions

React View Transitions Skill

An agent skill for implementing smooth, native-feeling animations using React's View Transition API.

What This Skill Covers

  • <ViewTransition> component — animation triggers (enter, exit, update, share), placement rules, View Transition Classes
  • addTransitionType — tagging transitions for directional or context-specific animations
  • Shared element transitions — morphing elements across different views
  • View Transition Events — imperative JavaScript animations via the Web Animations API
  • CSS pseudo-elements — ::view-transition-old, ::view-transition-new, ::view-transition-group
  • Next.js integration — transitionTypes on next/link and useRouter, App Router patterns
  • Accessibility — prefers-reduced-motion handling
  • Ready-to-use CSS recipes — fade, slide, scale, directional navigation

Skill Structure

react-view-transitions/├── SKILL.md                      # Core skill (always loaded)├── AGENTS.md                     # Full compiled document (all references expanded)└── references/    ├── implementation.md         # Step-by-step implementation workflow    ├── patterns.md               # Real-world patterns and events API    ├── troubleshooting.md        # Symptom-driven debugging    ├── nextjs.md                 # Next.js-specific patterns    └── css-recipes.md            # Copy-paste CSS animations

Installation

Install via skills.sh:

bash
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions

Resources