Loading
Loading
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.
written by Forgecat
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.
ForgeCatnpx forgecat install @forgecat/vercel-labs_agent-skills_react-view-transitions
<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.| Field | Value |
|---|---|
| Author | vercel |
| Original repository | https://github.com/vercel-labs/agent-skills |
| Version | 0.0.0 |
| Original commit | 47863b2 |
| License | MIT |
| Source platform | Claude Code skills (Agent Skills format) |
| Platform | Status |
|---|---|
| Claude Code | Tested |
| Cursor | Partial |
| Codex | Partial |
written by original source
An agent skill for implementing smooth, native-feeling animations using React's View Transition API.
<ViewTransition> component — animation triggers (enter, exit, update, share), placement rules, View Transition ClassesaddTransitionType — tagging transitions for directional or context-specific animations::view-transition-old, ::view-transition-new, ::view-transition-groupexperimental.viewTransition, the transitionTypes prop on next/link, App Router patternsprefers-reduced-motion handlingreact-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, events API, troubleshooting
├── nextjs.md # Next.js-specific patterns
└── css-recipes.md # Copy-paste CSS animations
Install via skills.sh:
npx skills install https://github.com/vercel-labs/react-view-transitions-skill
<ViewTransition> docsaddTransitionType docsviewTransition configNone
forgecat
View CreatorNone