Agent skill · design visual · julianromli
vercel-react-view-transitions
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.
Why this skill is useful
Provides specific implementation patterns and CSS recipes for using the View Transition API in React, which the AI wouldn't reliably generate on its own.
What it needs
Requires react, react-dom installed locally. About 6k tokens when loaded. Last updated 2026-06-09. 182 stars on the source repository.
What this skill does
React View Transitions Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully. When to Animate Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it. Implement all applicable patterns from this list, in this order: Priority Pattern What it communicates ---------- --------- --------------------- 1 Shared element (name) "Same thing — going deeper" 2 Suspense reveal "Data loaded" 3 List identity (per-item key) "Same items, new arrangement" 4 State change (enter/exit) "Something appeared/disappeared" 5 Route change (layout-level) "Going to a new place" This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it. Choosing Animation Style Context Animation Why --------- ----------- ----- Hierarchical navigation (list → detail) Type-keyed nav-forward / nav-back Communicates spatial depth Lateral navigation (tab-to-tab) Bare <ViewTransition> (fade) or default="none" No depth to communicate Suspense reveal enter/exit string props Content arriving Revalidation / background refresh default="none" Silent — no animation needed Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth. --- Availability Next.js: Do not install react@canary — the App Router already bundles React canary internally. ViewTransition works out of the box. npm ls react may show a stable-looking version; this is expected. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills julianromli/react-view-transitions