skills.rest
MohamadJoumaa
MohamadJoumaaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-view-transitions

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

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

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 misuse the <ViewTransition> component, write fragile custom animation CSS, and hit silent failures with shared element morphs, Suspense reveals, and Next.js routing. This Skill provides a structured implementation workflow, audited patterns, and ready-to-use CSS recipes so transitions work correctly the first time. ## Core Features & Use Cases - Step-by-step implementation workflow: Audit the app's links, Suspense boundaries, and shared elements, then add directional page transitions, Suspense reveals, and shared element morphs in the correct order. - Ready-to-use CSS recipes: Copy-paste animations for fade, slide, directional navigation, shared element morph, text morph, scale, persistent element isolation, and reduced-motion accessibility. - Next.js integration guidance: Covers the experimental.viewTransition flag, transitionTypes on next/link and useRouter, loading.tsx as a Suspense boundary, and same-route dynamic segment transitions. - Use Case: When a user asks to animate a list-to-detail navigation in a Next.js app, the Skill directs tagging the navigation with addTransitionType('nav-forward'), wrapping page components in type-keyed <ViewTransition> boundaries, and morphing the shared product image via a matching name prop. ## Quick Start Ask the AI to add directional page transitions and a shared element morph between your list and detail pages using the React 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 React `<ViewTransition>` component and trigger state updates inside `startTransition`, `useDeferredValue`, or Suspense. Use `addTransitionType` to tag navigations and map types to CSS classes for directional enter and exit animations.

How do I create shared element transitions between React views?▼

Give two `<ViewTransition>` components the same globally unique `name` prop on the source and target views, with `share="morph"`. When one unmounts and the other mounts in the same transition, the element morphs between positions.

Does ViewTransition work with Next.js App Router?▼

Yes, the Next.js App Router bundles React canary internally, so `<ViewTransition>` works out of the box without installing react@canary. Enable `experimental.viewTransition` in next.config.js and use the `transitionTypes` prop on `next/link` for typed animations.

Why is my React view transition not animating?▼

Common causes include placing a DOM node before the `<ViewTransition>`, updating state outside `startTransition`, or setting `default="none"` without explicit trigger props. Also check that directional VTs are in page components, not layouts, since layouts persist across navigations.

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

Browser back/forward traversals carry no transition types, so type-keyed animations resolve to their default and do not play. Use `router.push()` with an explicit URL instead to get fully animated back navigation.

How do I handle reduced motion accessibility with view transitions?▼

Add a `prefers-reduced-motion: reduce` media query to your global stylesheet that sets `animation-duration: 0s` on `::view-transition-old`, `::view-transition-new`, and `::view-transition-group` pseudo-elements. The Skill's CSS recipes include this block.

Related Skills

Explore More Software Engineering Skills→
p-potvinp-potvin
1

vercel-react-view-transitions

Animate React and Next.js UI transitions with ViewTransition boundaries and CSS.

Community
Advanced
ClyptAIClyptAI

vercel-react-view-transitions

Implement View Transition API patterns for React and Next.js UI transitions.

Official
Advanced
aryanraj2713aryanraj2713
10

ui-animation

Provide guidelines for implementing UI motion with CSS transitions, keyframes, and framer-motion.

Community
Intermediate
wubq511wubq511
6

framer-motion-animator

Implement declarative web animations with Framer Motion and React.

Community
Intermediate