Agent skill · practicalswan
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.
What it needs
About 9k tokens when loaded.
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 (page-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 practicalswan/react-view-transitions