[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C7S0YHWQR0K4YX3MFS06V7":3,"skill-same:01M6C7S0YHWQR0K4YX3MFS06V7":119},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":61,"commitSha":62,"skillDirectory":63,"forksCount":14,"repositoryHtmlUrl":64,"repositoryHomepageUrl":6,"ownerHtmlUrl":65,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":66,"install":67,"resources":80},"01M6C7S0YHWQR0K4YX3MFS06V7","vercel-react-view-transitions",null,"Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` 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\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) 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.","lDuang\u002Fmcp-skill-registry","lDuang","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F78087597?v=4","01M6C7NZJTXHQN8GGGN6XJTENF","Duang丶","01M6C7NZQG6XPZ74JYQ37SVBDC",0,"MIT","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"transitions","vercel","view","vercel react view transitions","react view transitions","react","types","element","shared","use","route","back","states","navigation","implementing","integrate","when","css","list","page","animate","Next.js","Animation","api","ui","create","libraries","component","components","implement","2026-11-10 10:12:30",false,"---\nname: vercel-react-view-transitions\ndescription: Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` 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\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) 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.\nlicense: MIT\nmetadata:\n  author: vercel\n  version: \"1.0.0\"\n---\n\n# React View Transitions\n\nAnimate between UI states using the browser's native `document.startViewTransition`. Declare *what* with `\u003CViewTransition>`, trigger *when* with `startTransition` \u002F `useDeferredValue` \u002F `Suspense`, control *how* with CSS classes. Unsupported browsers skip animations gracefully.\n\n## When to Animate\n\nEvery `\u003CViewTransition>` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.\n\nImplement **all** applicable patterns from this list, in this order:\n\n| Priority | Pattern | What it communicates |\n|----------|---------|---------------------|\n| 1 | **Shared element** (`name`) | \"Same thing — going deeper\" |\n| 2 | **Suspense reveal** | \"Data loaded\" |\n| 3 | **List identity** (per-item `key`) | \"Same items, new arrangement\" |\n| 4 | **State change** (`enter`\u002F`exit`) | \"Something appeared\u002Fdisappeared\" |\n| 5 | **Route change** (page-level) | \"Going to a new place\" |\n\nThis 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.\n\n### Choosing Animation Style\n\n| Context | Animation | Why |\n|---------|-----------|-----|\n| Hierarchical navigation (list → detail) | Type-keyed `nav-forward` \u002F `nav-back` | Communicates spatial depth |\n| Lateral navigation (tab-to-tab) | Bare `\u003CViewTransition>` (fade) or `default=\"none\"` | No depth to communicate |\n| Suspense reveal | `enter`\u002F`exit` string props | Content arriving |\n| Revalidation \u002F background refresh | `default=\"none\"` | Silent — no animation needed |\n\nReserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev\u002Fnext photo, carousel, paginated results). For ordered sequences, the direction communicates position: \"next\" slides from right, \"previous\" from left. Lateral\u002Funordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.\n\n---\n\n## Availability\n\n- **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.\n- **Without Next.js:** Use stable `react` and `react-dom` 19.3 or newer (`ViewTransition` and `addTransitionType` became stable in React 19.3). Earlier stable React versions do not include these APIs.\n- Browser support: Chromium 125+ (React needs the v2 object form of `startViewTransition`), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.\n\n---\n\n## Implementation Workflow\n\nWhen adding view transitions to an existing app, **follow [references\u002Fimplementation.md](references\u002Fimplementation.md) step by step.** Start with the audit — do not skip it. Use [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md) for the applicable CSS and adapt it to the app.\n\n---\n\n## Core Concepts\n\n### The `\u003CViewTransition>` Component\n\n```jsx\nimport { ViewTransition } from 'react';\n\n\u003CViewTransition>\n  \u003CComponent \u002F>\n\u003C\u002FViewTransition>\n```\n\nReact auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself.\n\n### Animation Triggers\n\n| Trigger | When it fires |\n|---------|--------------|\n| **enter** | `\u003CViewTransition>` first inserted during a Transition |\n| **exit** | `\u003CViewTransition>` first removed during a Transition |\n| **update** | DOM mutations inside a `\u003CViewTransition>`, or the boundary itself changing size\u002Fposition due to an immediate sibling. With nested VTs, mutation applies to the innermost one |\n| **share** | Named VT unmounts and another with same `name` mounts in the same Transition |\n\nOnly `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate.\n\n### Critical Placement Rule\n\n`\u003CViewTransition>` only activates enter\u002Fexit if it appears **before any DOM nodes**:\n\n```jsx\n\u002F\u002F Works\n\u003CViewTransition enter=\"auto\" exit=\"auto\">\n  \u003Cdiv>Content\u003C\u002Fdiv>\n\u003C\u002FViewTransition>\n\n\u002F\u002F Broken — div wraps the VT, suppressing enter\u002Fexit\n\u003Cdiv>\n  \u003CViewTransition enter=\"auto\" exit=\"auto\">\n    \u003Cdiv>Content\u003C\u002Fdiv>\n  \u003C\u002FViewTransition>\n\u003C\u002Fdiv>\n```\n\n---\n\n## Styling with View Transition Classes\n\n### Props\n\nValues: `\"auto\"` (browser cross-fade), `\"none\"` (disabled), `\"class-name\"` (custom CSS), or `{ [type]: value }` for type-specific animations.\n\n```jsx\n\u003CViewTransition default=\"none\" enter=\"slide-in\" exit=\"slide-out\" share=\"morph\" \u002F>\n```\n\nIf `default` is `\"none\"`, all triggers are off unless explicitly listed.\n\n### CSS Pseudo-Elements\n\n- `::view-transition-old(.class)` — outgoing snapshot\n- `::view-transition-new(.class)` — incoming snapshot\n- `::view-transition-group(.class)` — container\n- `::view-transition-image-pair(.class)` — old + new pair\n\nSee [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md) for ready-to-use animation recipes.\n\n---\n\n## Transition Types\n\nTag transitions with `addTransitionType` so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:\n\n```jsx\nstartTransition(() => {\n  addTransitionType('nav-forward');\n  addTransitionType('select-item');\n  router.push('\u002Fdetail\u002F1');\n});\n```\n\nPass an object to map types to CSS classes. Works on `enter`, `exit`, **and** `share`:\n\n```jsx\n\u003CViewTransition\n  enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}\n  exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}\n  share={{ 'nav-forward': 'morph-forward', 'nav-back': 'morph-back', default: 'morph' }}\n  default=\"none\"\n>\n  \u003CPage \u002F>\n\u003C\u002FViewTransition>\n```\n\n`enter` and `exit` don't have to be symmetric. For example, fade in but slide out directionally:\n\n```jsx\n\u003CViewTransition\n  enter={{ 'nav-forward': 'fade-in', 'nav-back': 'fade-in', default: 'none' }}\n  exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n  default=\"none\"\n>\n```\n\n**TypeScript:** `ViewTransitionClassPerType` requires a `default` key in the object.\n\nFor apps with multiple pages, extract the type-keyed VT into a reusable wrapper:\n\n```jsx\nexport function DirectionalTransition({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CViewTransition\n      enter={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      default=\"none\"\n    >\n      {children}\n    \u003C\u002FViewTransition>\n  );\n}\n```\n\n### `router.back()` and Browser Back Button\n\n`router.back()` and the browser's back\u002Fforward buttons carry **no transition types**, so type-keyed animations (directional slides) resolve to their `default` and don't play — untyped shared-element morphs still apply. For typed animations, use `router.push()` with an explicit URL.\n\n### Types and Suspense\n\nTypes are available during navigation but **not** during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter\u002Fexit; use simple string props for Suspense reveals.\n\n### Shared Element Readiness\n\nA shared element transition can pair elements only when both the old and new views are rendered in the same Transition. If incoming content suspends, only its fallback exists for that update; the resolved content appears in a later Suspense transition and can be animated separately.\n\n---\n\n## Shared Element Transitions\n\nSame `name` on two VTs — one unmounting, one mounting — creates a shared element morph:\n\n```jsx\n\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Fthumb.jpg\" onClick={() => startTransition(() => onSelect())} \u002F>\n\u003C\u002FViewTransition>\n\n\u002F\u002F On the other view — same name\n\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Ffull.jpg\" \u002F>\n\u003C\u002FViewTransition>\n```\n\n- Only one VT with a given `name` can be mounted at a time — use unique names (`photo-${id}`). Watch for reusable components: if a component with a named VT is rendered in both a modal\u002Fpopover *and* a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.\n- `share` takes precedence over `enter`\u002F`exit`. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), `enter`\u002F`exit` fires instead. Consider whether the element needs a fallback animation for those paths.\n- Two ways a wired-up morph silently never fires: (1) `default=\"none\"` with no explicit `share` prop — share resolves to none; (2) type-keyed `share` where the navigation never adds the type — a plain link click resolves the map's `default`. Every link that should morph must add the type (`transitionTypes` on `next\u002Flink`, or `addTransitionType`).\n- Never use a fade-out exit on pages with shared morphs — use a directional slide instead.\n\n---\n\n## Common Patterns\n\n### Enter\u002FExit\n\n```jsx\n{show && (\n  \u003CViewTransition enter=\"fade-in\" exit=\"fade-out\">\u003CPanel \u002F>\u003C\u002FViewTransition>\n)}\n```\n\n### List Reorder\n\n```jsx\n{items.map(item => (\n  \u003CViewTransition key={item.id}>\u003CItemCard item={item} \u002F>\u003C\u002FViewTransition>\n))}\n```\n\nTrigger inside `startTransition`. Avoid wrapper `\u003Cdiv>`s between list and VT.\n\n### Layout Displacement Morph\n\nOnly content inside an activated boundary animates position — everything else teleports to its new layout spot. Wrap the sibling content below a growing\u002Fshrinking list in a bare `\u003CViewTransition>` so it glides instead of jumping. See [Layout Displacement Morph](references\u002Fpatterns.md#layout-displacement-morph).\n\n### Composing Shared Elements with List Identity\n\nShared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested `\u003CViewTransition>` boundaries:\n\n```jsx\n{items.map(item => (\n  \u003CViewTransition key={item.id}>                                      {\u002F* list identity *\u002F}\n    \u003CLink href={`\u002Fitems\u002F${item.id}`}>\n      \u003CViewTransition name={`item-image-${item.id}`} share=\"morph\">   {\u002F* shared element *\u002F}\n        \u003CImage src={item.image} \u002F>\n      \u003C\u002FViewTransition>\n      \u003Cp>{item.name}\u003C\u002Fp>\n    \u003C\u002FLink>\n  \u003C\u002FViewTransition>\n))}\n```\n\nThe outer VT handles list reorder\u002Fenter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.\n\n### Force Re-Enter with `key`\n\n```jsx\n\u003CViewTransition key={searchParams.toString()} enter=\"slide-up\" default=\"none\">\n  \u003CResultsGrid \u002F>\n\u003C\u002FViewTransition>\n```\n\n**Caution:** If wrapping `\u003CSuspense>`, changing `key` remounts the boundary and refetches.\n\n### Suspense Fallback to Content\n\nSimple cross-fade:\n```jsx\n\u003CViewTransition>\n  \u003CSuspense fallback={\u003CSkeleton \u002F>}>\u003CContent \u002F>\u003C\u002FSuspense>\n\u003C\u002FViewTransition>\n```\n\nDirectional reveal:\n```jsx\n\u003CSuspense fallback={\u003CViewTransition exit=\"slide-down\">\u003CSkeleton \u002F>\u003C\u002FViewTransition>}>\n  \u003CViewTransition enter=\"slide-up\" default=\"none\">\u003CContent \u002F>\u003C\u002FViewTransition>\n\u003C\u002FSuspense>\n```\n\nFor more patterns, see [references\u002Fpatterns.md](references\u002Fpatterns.md).\n\n---\n\n## How Multiple VTs Interact\n\nEvery VT matching the trigger fires simultaneously in a single `document.startViewTransition`. VTs in **different** transitions (navigation vs later Suspense resolve) don't compete.\n\n### Use `default=\"none\"` Deliberately\n\nWithout it, every VT fires the browser cross-fade on **every** transition — Suspense resolves, `useDeferredValue` updates, background revalidations. Use `default=\"none\"` on named\u002Fshared elements and type-keyed page VTs.\n\nBut it also turns off `update` (layout\u002Freflow morphs) and `share` (a named pair with no explicit `share` prop never morphs). Keyed list items and displaced siblings *want* update — leave them bare or set `update=\"auto\"`.\n\n### Two Patterns Coexist\n\n**Pattern A — Directional slides:** Type-keyed VT on each page, fires during navigation.\n**Pattern B — Suspense reveals:** Simple string props, fires when data loads (no type).\n\nThey coexist because they fire at different moments. `default=\"none\"` on both prevents cross-interference. Always pair `enter` with `exit`. Place directional VTs in page components, not layouts.\n\n### Nested VT Limitation\n\nWhen a parent VT mounts\u002Funmounts **as one unit** with nested VTs inside it, the nested ones do not fire their own enter\u002Fexit — only the outermost VT animates. (A child VT mounted inside a *persistent* parent VT fires enter\u002Fexit normally.) Per-item staggered animations during page navigation are not currently available in Next.js; see [troubleshooting](references\u002Ftroubleshooting.md) for the upstream experimental status.\n\n---\n\n## Next.js Integration\n\nFor Next.js integration (`transitionTypes` on `next\u002Flink` and `useRouter`, App Router patterns, Server Components), see [references\u002Fnextjs.md](references\u002Fnextjs.md).\n\n---\n\n## Accessibility\n\nAlways add the reduced motion CSS from [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md#reduced-motion) to your global stylesheet.\n\n---\n\n## Reference Files\n\n- **[references\u002Fimplementation.md](references\u002Fimplementation.md)** — Step-by-step implementation workflow.\n- **[references\u002Fpatterns.md](references\u002Fpatterns.md)** — Patterns, animation timing, and events API.\n- **[references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md)** — Symptom-driven debugging and runtime limitations.\n- **[references\u002Fcss-recipes.md](references\u002Fcss-recipes.md)** — Ready-to-use CSS animation recipes.\n- **[references\u002Fnextjs.md](references\u002Fnextjs.md)** — Next.js App Router patterns and Server Component details.\n\n## Full Compiled Document\n\nFor the complete guide with all reference files expanded: `AGENTS.md`\n","# React View Transitions\n\nAnimate between UI states using the browser's native `document.startViewTransition`. Declare *what* with `\u003CViewTransition>`, trigger *when* with `startTransition` \u002F `useDeferredValue` \u002F `Suspense`, control *how* with CSS classes. Unsupported browsers skip animations gracefully.\n\n## When to Animate\n\nEvery `\u003CViewTransition>` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.\n\nImplement **all** applicable patterns from this list, in this order:\n\n| Priority | Pattern | What it communicates |\n|----------|---------|---------------------|\n| 1 | **Shared element** (`name`) | \"Same thing — going deeper\" |\n| 2 | **Suspense reveal** | \"Data loaded\" |\n| 3 | **List identity** (per-item `key`) | \"Same items, new arrangement\" |\n| 4 | **State change** (`enter`\u002F`exit`) | \"Something appeared\u002Fdisappeared\" |\n| 5 | **Route change** (page-level) | \"Going to a new place\" |\n\nThis 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.\n\n### Choosing Animation Style\n\n| Context | Animation | Why |\n|---------|-----------|-----|\n| Hierarchical navigation (list → detail) | Type-keyed `nav-forward` \u002F `nav-back` | Communicates spatial depth |\n| Lateral navigation (tab-to-tab) | Bare `\u003CViewTransition>` (fade) or `default=\"none\"` | No depth to communicate |\n| Suspense reveal | `enter`\u002F`exit` string props | Content arriving |\n| Revalidation \u002F background refresh | `default=\"none\"` | Silent — no animation needed |\n\nReserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev\u002Fnext photo, carousel, paginated results). For ordered sequences, the direction communicates position: \"next\" slides from right, \"previous\" from left. Lateral\u002Funordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.\n\n---\n\n## Availability\n\n- **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.\n- **Without Next.js:** Use stable `react` and `react-dom` 19.3 or newer (`ViewTransition` and `addTransitionType` became stable in React 19.3). Earlier stable React versions do not include these APIs.\n- Browser support: Chromium 125+ (React needs the v2 object form of `startViewTransition`), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.\n\n---\n\n## Implementation Workflow\n\nWhen adding view transitions to an existing app, **follow [references\u002Fimplementation.md](references\u002Fimplementation.md) step by step.** Start with the audit — do not skip it. Use [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md) for the applicable CSS and adapt it to the app.\n\n---\n\n## Core Concepts\n\n### The `\u003CViewTransition>` Component\n\n```jsx\nimport { ViewTransition } from 'react';\n\n\u003CViewTransition>\n  \u003CComponent \u002F>\n\u003C\u002FViewTransition>\n```\n\nReact auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself.\n\n### Animation Triggers\n\n| Trigger | When it fires |\n|---------|--------------|\n| **enter** | `\u003CViewTransition>` first inserted during a Transition |\n| **exit** | `\u003CViewTransition>` first removed during a Transition |\n| **update** | DOM mutations inside a `\u003CViewTransition>`, or the boundary itself changing size\u002Fposition due to an immediate sibling. With nested VTs, mutation applies to the innermost one |\n| **share** | Named VT unmounts and another with same `name` mounts in the same Transition |\n\nOnly `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate.\n\n### Critical Placement Rule\n\n`\u003CViewTransition>` only activates enter\u002Fexit if it appears **before any DOM nodes**:\n\n```jsx\n\u002F\u002F Works\n\u003CViewTransition enter=\"auto\" exit=\"auto\">\n  \u003Cdiv>Content\u003C\u002Fdiv>\n\u003C\u002FViewTransition>\n\n\u002F\u002F Broken — div wraps the VT, suppressing enter\u002Fexit\n\u003Cdiv>\n  \u003CViewTransition enter=\"auto\" exit=\"auto\">\n    \u003Cdiv>Content\u003C\u002Fdiv>\n  \u003C\u002FViewTransition>\n\u003C\u002Fdiv>\n```\n\n---\n\n## Styling with View Transition Classes\n\n### Props\n\nValues: `\"auto\"` (browser cross-fade), `\"none\"` (disabled), `\"class-name\"` (custom CSS), or `{ [type]: value }` for type-specific animations.\n\n```jsx\n\u003CViewTransition default=\"none\" enter=\"slide-in\" exit=\"slide-out\" share=\"morph\" \u002F>\n```\n\nIf `default` is `\"none\"`, all triggers are off unless explicitly listed.\n\n### CSS Pseudo-Elements\n\n- `::view-transition-old(.class)` — outgoing snapshot\n- `::view-transition-new(.class)` — incoming snapshot\n- `::view-transition-group(.class)` — container\n- `::view-transition-image-pair(.class)` — old + new pair\n\nSee [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md) for ready-to-use animation recipes.\n\n---\n\n## Transition Types\n\nTag transitions with `addTransitionType` so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:\n\n```jsx\nstartTransition(() => {\n  addTransitionType('nav-forward');\n  addTransitionType('select-item');\n  router.push('\u002Fdetail\u002F1');\n});\n```\n\nPass an object to map types to CSS classes. Works on `enter`, `exit`, **and** `share`:\n\n```jsx\n\u003CViewTransition\n  enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}\n  exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}\n  share={{ 'nav-forward': 'morph-forward', 'nav-back': 'morph-back', default: 'morph' }}\n  default=\"none\"\n>\n  \u003CPage \u002F>\n\u003C\u002FViewTransition>\n```\n\n`enter` and `exit` don't have to be symmetric. For example, fade in but slide out directionally:\n\n```jsx\n\u003CViewTransition\n  enter={{ 'nav-forward': 'fade-in', 'nav-back': 'fade-in', default: 'none' }}\n  exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n  default=\"none\"\n>\n```\n\n**TypeScript:** `ViewTransitionClassPerType` requires a `default` key in the object.\n\nFor apps with multiple pages, extract the type-keyed VT into a reusable wrapper:\n\n```jsx\nexport function DirectionalTransition({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CViewTransition\n      enter={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}\n      default=\"none\"\n    >\n      {children}\n    \u003C\u002FViewTransition>\n  );\n}\n```\n\n### `router.back()` and Browser Back Button\n\n`router.back()` and the browser's back\u002Fforward buttons carry **no transition types**, so type-keyed animations (directional slides) resolve to their `default` and don't play — untyped shared-element morphs still apply. For typed animations, use `router.push()` with an explicit URL.\n\n### Types and Suspense\n\nTypes are available during navigation but **not** during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter\u002Fexit; use simple string props for Suspense reveals.\n\n### Shared Element Readiness\n\nA shared element transition can pair elements only when both the old and new views are rendered in the same Transition. If incoming content suspends, only its fallback exists for that update; the resolved content appears in a later Suspense transition and can be animated separately.\n\n---\n\n## Shared Element Transitions\n\nSame `name` on two VTs — one unmounting, one mounting — creates a shared element morph:\n\n```jsx\n\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Fthumb.jpg\" onClick={() => startTransition(() => onSelect())} \u002F>\n\u003C\u002FViewTransition>\n\n\u002F\u002F On the other view — same name\n\u003CViewTransition name=\"hero-image\">\n  \u003Cimg src=\"\u002Ffull.jpg\" \u002F>\n\u003C\u002FViewTransition>\n```\n\n- Only one VT with a given `name` can be mounted at a time — use unique names (`photo-${id}`). Watch for reusable components: if a component with a named VT is rendered in both a modal\u002Fpopover *and* a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.\n- `share` takes precedence over `enter`\u002F`exit`. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), `enter`\u002F`exit` fires instead. Consider whether the element needs a fallback animation for those paths.\n- Two ways a wired-up morph silently never fires: (1) `default=\"none\"` with no explicit `share` prop — share resolves to none; (2) type-keyed `share` where the navigation never adds the type — a plain link click resolves the map's `default`. Every link that should morph must add the type (`transitionTypes` on `next\u002Flink`, or `addTransitionType`).\n- Never use a fade-out exit on pages with shared morphs — use a directional slide instead.\n\n---\n\n## Common Patterns\n\n### Enter\u002FExit\n\n```jsx\n{show && (\n  \u003CViewTransition enter=\"fade-in\" exit=\"fade-out\">\u003CPanel \u002F>\u003C\u002FViewTransition>\n)}\n```\n\n### List Reorder\n\n```jsx\n{items.map(item => (\n  \u003CViewTransition key={item.id}>\u003CItemCard item={item} \u002F>\u003C\u002FViewTransition>\n))}\n```\n\nTrigger inside `startTransition`. Avoid wrapper `\u003Cdiv>`s between list and VT.\n\n### Layout Displacement Morph\n\nOnly content inside an activated boundary animates position — everything else teleports to its new layout spot. Wrap the sibling content below a growing\u002Fshrinking list in a bare `\u003CViewTransition>` so it glides instead of jumping. See [Layout Displacement Morph](references\u002Fpatterns.md#layout-displacement-morph).\n\n### Composing Shared Elements with List Identity\n\nShared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested `\u003CViewTransition>` boundaries:\n\n```jsx\n{items.map(item => (\n  \u003CViewTransition key={item.id}>                                      {\u002F* list identity *\u002F}\n    \u003CLink href={`\u002Fitems\u002F${item.id}`}>\n      \u003CViewTransition name={`item-image-${item.id}`} share=\"morph\">   {\u002F* shared element *\u002F}\n        \u003CImage src={item.image} \u002F>\n      \u003C\u002FViewTransition>\n      \u003Cp>{item.name}\u003C\u002Fp>\n    \u003C\u002FLink>\n  \u003C\u002FViewTransition>\n))}\n```\n\nThe outer VT handles list reorder\u002Fenter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.\n\n### Force Re-Enter with `key`\n\n```jsx\n\u003CViewTransition key={searchParams.toString()} enter=\"slide-up\" default=\"none\">\n  \u003CResultsGrid \u002F>\n\u003C\u002FViewTransition>\n```\n\n**Caution:** If wrapping `\u003CSuspense>`, changing `key` remounts the boundary and refetches.\n\n### Suspense Fallback to Content\n\nSimple cross-fade:\n```jsx\n\u003CViewTransition>\n  \u003CSuspense fallback={\u003CSkeleton \u002F>}>\u003CContent \u002F>\u003C\u002FSuspense>\n\u003C\u002FViewTransition>\n```\n\nDirectional reveal:\n```jsx\n\u003CSuspense fallback={\u003CViewTransition exit=\"slide-down\">\u003CSkeleton \u002F>\u003C\u002FViewTransition>}>\n  \u003CViewTransition enter=\"slide-up\" default=\"none\">\u003CContent \u002F>\u003C\u002FViewTransition>\n\u003C\u002FSuspense>\n```\n\nFor more patterns, see [references\u002Fpatterns.md](references\u002Fpatterns.md).\n\n---\n\n## How Multiple VTs Interact\n\nEvery VT matching the trigger fires simultaneously in a single `document.startViewTransition`. VTs in **different** transitions (navigation vs later Suspense resolve) don't compete.\n\n### Use `default=\"none\"` Deliberately\n\nWithout it, every VT fires the browser cross-fade on **every** transition — Suspense resolves, `useDeferredValue` updates, background revalidations. Use `default=\"none\"` on named\u002Fshared elements and type-keyed page VTs.\n\nBut it also turns off `update` (layout\u002Freflow morphs) and `share` (a named pair with no explicit `share` prop never morphs). Keyed list items and displaced siblings *want* update — leave them bare or set `update=\"auto\"`.\n\n### Two Patterns Coexist\n\n**Pattern A — Directional slides:** Type-keyed VT on each page, fires during navigation.\n**Pattern B — Suspense reveals:** Simple string props, fires when data loads (no type).\n\nThey coexist because they fire at different moments. `default=\"none\"` on both prevents cross-interference. Always pair `enter` with `exit`. Place directional VTs in page components, not layouts.\n\n### Nested VT Limitation\n\nWhen a parent VT mounts\u002Funmounts **as one unit** with nested VTs inside it, the nested ones do not fire their own enter\u002Fexit — only the outermost VT animates. (A child VT mounted inside a *persistent* parent VT fires enter\u002Fexit normally.) Per-item staggered animations during page navigation are not currently available in Next.js; see [troubleshooting](references\u002Ftroubleshooting.md) for the upstream experimental status.\n\n---\n\n## Next.js Integration\n\nFor Next.js integration (`transitionTypes` on `next\u002Flink` and `useRouter`, App Router patterns, Server Components), see [references\u002Fnextjs.md](references\u002Fnextjs.md).\n\n---\n\n## Accessibility\n\nAlways add the reduced motion CSS from [references\u002Fcss-recipes.md](references\u002Fcss-recipes.md#reduced-motion) to your global stylesheet.\n\n---\n\n## Reference Files\n\n- **[references\u002Fimplementation.md](references\u002Fimplementation.md)** — Step-by-step implementation workflow.\n- **[references\u002Fpatterns.md](references\u002Fpatterns.md)** — Patterns, animation timing, and events API.\n- **[references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md)** — Symptom-driven debugging and runtime limitations.\n- **[references\u002Fcss-recipes.md](references\u002Fcss-recipes.md)** — Ready-to-use CSS animation recipes.\n- **[references\u002Fnextjs.md](references\u002Fnextjs.md)** — Next.js App Router patterns and Server Component details.\n\n## Full Compiled Document\n\nFor the complete guide with all reference files expanded: `AGENTS.md`\n",{"name":5,"license":15,"metadata":59,"description":7},{"author":25,"version":60},"1.0.0","main","aaeee384ed78d68b0dc9306f40e5ce2a30f56441","skill\u002Freact-view-transitions","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry","https:\u002F\u002Fgithub.com\u002FlDuang","2026-11-11 17:09:11",{"source":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add lDuang\u002Fmcp-skill-registry --skill vercel-react-view-transitions",{"tool":73,"command":74},"bunx","bunx skills add lDuang\u002Fmcp-skill-registry --skill vercel-react-view-transitions",{"tool":76,"command":77},"pnpm","pnpm dlx skills add lDuang\u002Fmcp-skill-registry --skill vercel-react-view-transitions","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002FSKILL.md",true,[81,87,91,95,99,103,107,111,115],{"path":82,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":85,"sourceHtmlUrl":86},"AGENTS.md","REFERENCE","参考文档",59088,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002FAGENTS.md",{"path":88,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":89,"sourceHtmlUrl":90},"metadata.json",852,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002Fmetadata.json",{"path":92,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":93,"sourceHtmlUrl":94},"README.md",2231,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002FREADME.md",{"path":96,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":97,"sourceHtmlUrl":98},"references\u002Fcss-recipes.md",8337,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002Freferences\u002Fcss-recipes.md",{"path":100,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":101,"sourceHtmlUrl":102},"references\u002Fimplementation.md",9280,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002Freferences\u002Fimplementation.md",{"path":104,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":105,"sourceHtmlUrl":106},"references\u002Fnextjs.md",10700,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002Freferences\u002Fnextjs.md",{"path":108,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":109,"sourceHtmlUrl":110},"references\u002Fpatterns.md",11941,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002Freferences\u002Fpatterns.md",{"path":112,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":113,"sourceHtmlUrl":114},"references\u002Ftroubleshooting.md",4940,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002Freferences\u002Ftroubleshooting.md",{"path":116,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":117,"sourceHtmlUrl":118},"skill.meta.json",888,"https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Freact-view-transitions\u002Fskill.meta.json",[120,160,188,212,241,268],{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":124,"licenseFileUrl":125,"sourceHtmlUrl":126,"categories":127,"keywords":142,"publishedAt":54},"01M6C7W92FXQ1XETSVSFZ2H77R","xlsx","Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fxlsx\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fxlsx\u002FSKILL.md",[128,131,134,137],{"categoryNo":129,"categoryName":130,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",{"categoryNo":132,"categoryName":133,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000004","电子表格",{"categoryNo":135,"categoryName":136,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":138,"categoryName":139,"taxonomyType":140,"taxonomyTypeDesc":141},"01JBSEEDCAT000000000000034","行政与办公人员","PROFESSION","适用职业",[122,143,144,145,146,147,148,149,47,49,150,151,152,153,154,155,40,156,157,158,159],"spreadsheet","pipeline","fix","html report","open","files","database","Charting","read","sources","standalone","time","python script","done","references","data sources","new",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":124,"licenseFileUrl":164,"sourceHtmlUrl":165,"categories":166,"keywords":171,"publishedAt":54},"01M6C7W0QWBRWESNT7N2PCBTHA","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fwebapp-testing\u002FSKILL.md",[167,170],{"categoryNo":168,"categoryName":169,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[172,173,174,175,176,177,178,179,180,48,181,182,183,184,185,186,187],"webapp","webapp testing","testing","browser","playwright","web","behavior","applications","frontend","debugging","toolkit","logs","screenshots","for","local","with",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":124,"licenseFileUrl":192,"sourceHtmlUrl":193,"categories":194,"keywords":196,"publishedAt":54},"01M6C7VV3CY1P1H8Y39Y2ZWC32","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fweb-artifacts-builder\u002FSKILL.md",[195],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[197,198,199,177,200,201,41,202,180,33,203,52,29,204,205,206,51,207,48,208,185,209,210,211],"builder","artifacts builder","artifacts","web artifacts builder","single-file","Tailwind","file","state","routing","state management","management","Tools","ui components","single","multi",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":124,"licenseFileUrl":216,"sourceHtmlUrl":217,"categories":218,"keywords":222,"publishedAt":54},"01M6C7V4EYYMXGBNJDNW61CVCR","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Ftheme-factory\u002FSKILL.md",[219],{"categoryNo":220,"categoryName":221,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[223,224,225,226,227,228,229,230,231,232,199,182,233,185,234,159,235,236,237,238,239,187,240],"theme factory","factory","theme","SET","slides","generate","fly","landing","styling","docs","html","pages","themes","you","apply","can","fonts","artifact",{"skillNo":242,"name":243,"nameZh":6,"description":244,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":124,"licenseFileUrl":245,"sourceHtmlUrl":246,"categories":247,"keywords":254,"publishedAt":54},"01M6C7TMG1V160Y7DKKZ77W9EX","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fslack-gif-creator\u002FSKILL.md",[248,251],{"categoryNo":249,"categoryName":250,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":252,"categoryName":253,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[255,256,257,258,46,259,260,33,208,261,185,40,262,263,264,265,266,267],"slack","slack gif creator","gif","creator","validation","knowledge","constraints","users","me","request","Utilities","concepts","make",{"skillNo":269,"name":270,"nameZh":6,"description":271,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":124,"licenseFileUrl":272,"sourceHtmlUrl":273,"categories":274,"keywords":278,"publishedAt":54},"01M6C7TGAGD33C82MC2KTB1C9B","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FlDuang\u002Fmcp-skill-registry\u002Fblob\u002Fmain\u002Fskill\u002Fskill-creator\u002FSKILL.md",[275],{"categoryNo":276,"categoryName":277,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[279,258,280,281,282,283,33,284,49,285,286,287,288,289,159,40,290,291,185,292,293],"skill creator","evals","performance","improve","run evals","analysis","test","variance analysis","run","edit","benchmark","optimize","existing skill","accuracy","scratch"]