Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/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 8 of 22 without it.
and 23 more in the full report
14 fixed7 passed either way0 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
I have a single search results page component, and I want the grid to replay its enter slide animation whenever search query parameters in the URL change. How can I force the transition wrapper to re-trigger?
| Checked | Without skill | With skill |
|---|---|---|
| Applies a dynamic key attribute derived from URL parameters to ViewTransition | Missed | Passed |
| Notes that changing the key on a ViewTransition wrapping Suspense causes remounting and refetching | 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 8 / 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.