skills.rest
iJosueeh
iJosueehCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-view-transitions

Implements native view transition animations in React and Next.js applications.

Updated Jun 29, 2026
Search Tags:#react#css#next.js#navigation#animation#view transitions#shared element
One-click install
npx skills add https://github.com/iJosueeh/amauta --skill vercel-react-view-transitions-ijosueeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-view-transitions
Source: https://github.com/iJosueeh/amauta/tree/main/.agents/skills/vercel-react-view-transitions
Command: npx skills add https://github.com/iJosueeh/amauta --skill vercel-react-view-transitions-ijosueeh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding smooth, native-feeling animations between UI states in React is error-prone: developers must correctly coordinate <ViewTransition> placement, startTransition triggers, transition types, and CSS pseudo-elements, and small mistakes silently disable animations. ## Core Features & Use Cases - Step-by-step implementation workflow: Audit the app's navigation, isolate persistent elements, add directional page transitions, Suspense reveals, and shared element morphs in a defined order. - Ready-to-use CSS recipes: Copy-paste animations for fade, slide, directional navigation, shared element morph, text morph, scale, and reduced-motion support. - Next.js integration guidance: Covers the experimental.viewTransition flag, the transitionTypes prop on next/link, loading.tsx Suspense boundaries, and same-route dynamic segment transitions. - Use Case: When building a photo gallery where tapping a thumbnail should morph the image into a full detail view with a directional slide, this Skill provides the exact component structure, transition types, and CSS to implement it correctly. ## Quick Start Ask the AI to add directional page transitions and shared element animations to your React or Next.js app using the View Transition API.

Frequently Asked Questions about vercel-react-view-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add page transition animations in React?▼

Wrap page components in the ViewTransition component and trigger navigation inside startTransition. Use addTransitionType to tag direction (nav-forward or nav-back) and map types to CSS classes for directional slide animations.

How to create shared element transitions between React routes?▼

Give two ViewTransition components the same name prop on the source and target views, with share set to a morph class. When one unmounts and the other mounts in the same transition, the element morphs between them.

Does ViewTransition work with Next.js App Router?▼

Yes, the App Router bundles React canary internally so ViewTransition works out of the box. Enable experimental.viewTransition in next.config.js to animate Link navigations, and use the transitionTypes prop on next/link for directional animations.

Why is my React view transition not animating?▼

Common causes include wrapping ViewTransition inside a DOM node instead of placing it first, using regular setState instead of startTransition, or placing a ViewTransition in a layout which suppresses nested page-level enter and exit animations.

Can I use ViewTransition without Next.js?▼

Yes, but you must install react@canary and react-dom@canary since ViewTransition is not in stable React. Browser support covers Chromium 111+, Firefox 144+, and Safari 18.2+, with graceful degradation elsewhere.

Why does router.back() skip view transition animations?▼

router.back() and browser back/forward buttons trigger synchronous popstate events, which are incompatible with startViewTransition. Use router.push() with an explicit URL inside startTransition instead.

Related Skills

Explore More Software Engineering Skills→
danielbere1973danielbere1973

vercel-react-view-transitions

Implement React View Transition animations for route changes, shared elements, and Suspense reveals.

Community
Advanced
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
coastdigitalgroupcoastdigitalgroup
2

high-performance-css-animations

Guide CSS animations using compositor-only properties like transform and opacity.

Official
Advanced
raphaelmansraphaelmans

apple-design

Implements Apple-style fluid interfaces with spring animations, gesture tracking, and translucent materials for the web.

Community
Intermediate