react-view-transitions

Trigger phrases

Phrases that activate this skill when typed to Claude Code:

• add view transitions
• animate this page change
• smooth transitions for this React app

What it does

react-view-transitions implements the View Transition API in React, with patterns specific to Next.js’s app router. The skill knows how to wire transitions into navigation, into shared elements between pages, and into state changes within a single page.

It produces a working integration — components, hooks, and the CSS for the transition states — not just a description of what’s possible.

When to use it

• Building a marketing site or product UI where page-to-page motion matters
• Migrating to Next.js app router and wanting smoother transitions than the default
• Implementing shared-element animations (think “tap a card, it expands into a detail page”)
• Adding meaningful loading/state-change motion to existing components

When not to reach for it:

• Apps where motion isn’t a priority — over-animating hurts more than it helps
• Codebases with strict accessibility constraints around motion (always pair with prefers-reduced-motion)
• Targets where browser support is critical and you can’t degrade gracefully (older browsers don’t support the API)

Install

From the Vercel Labs agent-skills repo. Follow the SKILL.md install path.

The skill assumes a React 18+ project; Next.js app router is supported with extra integration patterns specific to it.

What a session looks like

1. You describe the transition you want (“page-to-page fade with shared header” or “card-to-detail expansion”).
2. The skill picks the right pattern — global page transition, shared-element, or in-page state transition — and writes the components.
3. It includes the prefers-reduced-motion fallback — accessibility isn’t optional and the skill enforces it.
4. Output is integration-ready code: hooks, CSS, and the wrappers needed to apply transitions to existing routes or components.

The discipline: it implements the spec, not a JS animation library. View transitions are browser-native, so the result is performant and degrades gracefully where unsupported.

Receipts

Where it works well:

• Page-to-page transitions in Next.js app router are notoriously fiddly to wire up; the skill produces a working integration faster than reading the docs
• Shared-element transitions (the same element animating across page changes) work cleanly when the skill scaffolds the names
• The prefers-reduced-motion enforcement removes one of the most common accessibility gaps

Where it backfires:

• Browser support: as of 2026, the API is solid in Chromium and Safari but still uneven elsewhere. Test in your target browsers
• Complex animations across many shared elements can produce visual jank if not orchestrated carefully — the skill doesn’t always catch this
• Over-animation: easy to add transitions everywhere, hard to know when motion is actively hurting UX. The skill won’t tell you when to stop

Pattern that works: add transitions to the highest-traffic flows first (landing → product → checkout) and only those. Animating internal admin tools rarely pays off.

Source and attribution

From the Vercel Labs agent-skills repository. Maintained by Vercel Labs.

License: MIT.