Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/vercel-react-view-transitions
Guide React and Next.js view transitions, shared element animations, route transitions, transition types, and reduced-motion-safe UI state animation.
Passed 25 of 25 test cases with the skill, and 12 of 25 without it.
and 19 more in the full report
13 fixed12 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 13 test cases the skill fixed. Same model, same prompt, with and without the skill.
Please write a React TypeScript component definition for `DirectionalTransition` that wraps `children` in a `<ViewTransition>` configuring `nav-forward` and `nav-back` for both `enter` and `exit` props while defaulting unhandled transitions to none.
| Checked | Without skill | With skill |
|---|---|---|
| Defines a ViewTransition component with nav-forward and nav-back keys in enter and exit props | Passed | Passed |
| Includes default='none' on the ViewTransition component | 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 (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.
| 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).test cases passed, vs 12 / 25 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.