Web & UI pack
Claude Skill
React View Transition Animator
Adds native-feeling animations with React's View Transition API — shared elements, route changes, list reorder — no animation library.
What it does
Implements smooth transitions using the browser's View Transition API and React's ViewTransition component — shared-element ("same thing, going deeper"), Suspense reveal, list reorder, enter/exit, and route changes — picking the pattern that matches what each transition communicates. Degrades gracefully where unsupported, with no third-party animation dependency.
When to use
- ✓Adding page or route transitions in a React / Next.js app
- ✓Shared-element animation from a list item to its detail view
- ✓Animating list reorder or component enter/exit without an animation library
When not to use
- ✗The app already standardized on Framer Motion / GSAP — match that instead
- ✗Decorative animation that communicates no spatial relationship
Install
Download the .zip, then unzip into your Claude skills folder.
mkdir -p ~/.claude/skills
unzip ~/Downloads/view-transition-animator.zip -d ~/.claude/skills/
# Restart Claude Code session.
# Skill is now available — Claude will use it when relevant.SKILL.md
SKILL.md
---
name: view-transition-animator
description: Use when adding animations with React's View Transition API — page/route transitions, shared elements, list reorder, enter/exit. Triggers on "view transition", "ViewTransition", "page transition", "shared element animation", "animate route change".
---
# React View Transition Animator
Animate between UI states with the browser's native `document.startViewTransition` and React's `<ViewTransition>`. Declare *what* animates with `<ViewTransition>`, trigger *when* with `startTransition` / `useDeferredValue` / Suspense, control *how* with CSS. Unsupported browsers skip the animation cleanly.
## The rule: every transition must communicate something
If you can't articulate what a transition communicates (continuity, depth, arrival), don't add it. Decorative motion is noise.
## Patterns, in implementation order
Implement every pattern the app has a use case for — this is an order, not a "pick one":
1. **Shared element** (matching `name`) — "same thing, going deeper" (list item → detail)
2. **Suspense reveal** — "data loaded"
3. **List identity** (per-item `key`) — "same items, new arrangement" (reorder)
4. **State change** (`enter` / `exit`) — "something appeared/disappeared"
5. **Route change** (layout level) — "going to a new place"
## Direction communicates position
Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (next/prev photo, pagination): next slides in from the right, previous from the left. Lateral navigation (tab-to-tab) should fade, not slide — a slide there falsely implies depth.
## Availability
- **Next.js App Router:** `ViewTransition` works out of the box — the router bundles the needed React internally. Do not install `react@canary` yourself.
- **Without Next.js:** install `react@canary react-dom@canary` (not in stable React yet).
- **Browser support:** Chromium 111+, Firefox 144+, Safari 18.2+; degrades gracefully elsewhere.
## Anti-patterns
- Animating things that communicate nothing
- Directional slides on lateral (tab) navigation
- Writing bespoke keyframes when a view-transition pattern already covers it
- Installing `react@canary` inside a Next.js app (breaks the bundled version)
Example prompts
Once installed, try these prompts in Claude:
- Add a shared-element transition from the photo grid to the photo detail page in our Next app.
- Animate our list reorder and tab switches with the View Transition API — no animation library.