Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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).
Passed 21 of 22 test cases with the skill, and 10 of 22 without it.
and 18 more in the full report
11 fixed10 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are setting up a brand new Next.js 15 project using the App Router and want to use React's built-in ViewTransition component. What dependencies should we add to package.json to enable ViewTransition support?
| Checked | Without skill | With skill |
|---|---|---|
| Advises against installing react@canary or react-dom@canary separately when using Next.js App Router. | Missed | Passed |
| Explains that Next.js App Router already bundles a compatible React canary release internally. | Missed | Passed |
The instructions your model reads when the skill loads.
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.
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.
| 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.
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.react@canary react-dom@canary (ViewTransition is not in stable React).startViewTransition), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.test cases passed, vs 10 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.