skills.rest
zomeru
zomeruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-view-transitions

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

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

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, while avoiding silent failures like nested VT suppression and layout-level VT mistakes. ## Core Features & Use Cases - Step-by-step implementation workflow: Audit the app's navigation map, 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 accessibility. - Next.js integration guidance: Covers experimental.viewTransition, the transitionTypes prop on next/link, loading.tsx Suspense boundaries, and same-route dynamic segment transitions. - Use Case: When building a photo gallery where clicking a thumbnail morphs it 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 navigations inside startTransition. Use addTransitionType to tag direction (nav-forward/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. When one unmounts and the other mounts in the same transition, React morphs between them using the share trigger.

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 in Next.js 15+ canary or 16+.

Why is my React view transition not animating?▼

Common causes: the state update is not inside startTransition, a DOM node wraps the ViewTransition suppressing enter/exit, or a parent layout VT blocks nested page VTs from firing. Also check that default="none" is not blocking the desired trigger.

Why doesn't router.back() trigger view transitions?▼

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

Do I need to install react@canary to use ViewTransition?▼

Only outside Next.js: install react@canary and react-dom@canary since ViewTransition is not in stable React. In Next.js App Router, do not install canary because React canary is already bundled internally.

Related Skills

Explore More Software Engineering Skills→
MGriotMGriot

vercel-react-best-practices

Identify and apply React/Next.js performance optimizations to components, pages and data flows.

Community
Advanced
KrismithReddy12KrismithReddy12
1

webapp-testing

Automates Playwright-based UI tests for local web applications and captures debugging artifacts.

Community
Intermediate
waynesuttonwaynesutton
3

animate

Outline targeted animation plans for UI interactions with timing, easing, and accessibility compliance.

Community
Advanced
zinohomezinohome

framer-motion-animator

Creates React animations and micro-interactions using Framer Motion's declarative API.

Community
Intermediate