React View Transitions

Before you start: read this whole install prompt, tell me in a few lines what this skill does and what installing it involves, and wait for my go-ahead before you do anything else. Prerequisites — None to install this skill — no account, no key, no payment, and no script in its folder. One usage condition to know before using it: the <ViewTransition> component is not in stable React — inside Next.js it works out of the box (the App Router bundles React canary internally, and the SKILL.md says not to install react@canary there), but in a plain React app it requires react@canary and react-dom@canary, and it needs a supporting browser (Chromium 125+, Firefox 144+, Safari 18.2+), degrading gracefully on unsupported browsers. Install "React View Transitions" for me. It teaches the agent to implement smooth, native-feeling animations using React's View Transition API: declare what animates with the <ViewTransition> component, trigger transitions with startTransition, useDeferredValue or Suspense, control the styling with CSS view-transition classes and pseudo-elements, tag transitions with addTransitionType so directional (forward/back) navigation animates differently from lateral navigation, and build shared-element morphs, Suspense reveals and list-identity animations, with Next.js integration through the transitionTypes prop on next/link. Its folder holds the main SKILL.md (frontmatter name vercel-react-view-transitions), five reference files (implementation workflow, patterns, troubleshooting, CSS recipes and Next.js), a compiled AGENTS.md with every reference expanded in one document, a README and a metadata file. Repository: https://github.com/vercel-labs/agent-skills (the skill is the whole skills/react-view-transitions/ folder at the pinned commit: SKILL.md plus 8 companion files, 9 files in total) Pinned version: install the code at commit 063bee94c3f4df8453406c830b0a7df0f2860278 exactly. Do not substitute a newer version. If this commit is unreachable, stop and tell me. 1. Clone https://github.com/vercel-labs/agent-skills into a temporary folder, check out commit 063bee94c3f4df8453406c830b0a7df0f2860278, and copy the skills/react-view-transitions/ folder from that checkout. Then compare every file in the folder with the fingerprints recorded for this listing on 2026-10-22: [FINGERPRINTS] - AGENTS.md: SHA-256 83fd29aec273cf4318a4f428ed2725f2cd3b6adbd76640e495c31f0a2521c702 - README.md: SHA-256 aba31b4ac31c1b13d2a8054179604abd4498b0d7324746635ff0e3b0aea9d608 - SKILL.md: SHA-256 1520343c8814c972fee001cac6d6185976d6eb3f4edcac33afe95c10f3b3228b - metadata.json: SHA-256 b1a5ae09f3904dc83dab79f518d033bd98f1e2f55caabfdb5beeeaaf0ca5e4c2 - references/css-recipes.md: SHA-256 f4a5b92a7aad6befd2779e498ab04311277f179b240d2170f0a68a1444024d51 - references/implementation.md: SHA-256 87687de5fa2f775a6b5134ee02863ebede9ee6bc42ea8ed99bd53aa5325e78f4 - references/nextjs.md: SHA-256 f926a645d5e4c62fcc2d5832be0f3ad048f2ee1d17f8476324e2bc407e4b3a07 - references/patterns.md: SHA-256 da24d7f37c7e6b8ecbcf05525ef613d8f5be94655c233d6fa62833c8a746604f - references/troubleshooting.md: SHA-256 aa6811d276dcf06dcc9aba90d1e11e1d0a29146604bf7c89a9e93a6fa8883c7a If a file does not match, it changed since the listing was prepared: do not install it yet, tell me what you found and let me decide. 2. Read SKILL.md in full, and tell me in plain words: what the skill does when used, what it connects to, whether it reads or sends any personal information or credentials, and anything that seems unusual. Stop on any red flag and tell me before going further. Confirm these points from the files: - The skill folder holds 9 files and no executable code: SKILL.md (frontmatter name vercel-react-view-transitions), the compiled AGENTS.md guide, README.md, metadata.json and 5 reference files under references/. There is no script to run, at install time or at use time. - Nothing is sent anywhere during installation itself; the only download at install time is the skill folder from GitHub at the pinned commit. - At use time the agent only reads these files while working on my own React or Next.js project, locally. No account or hosted project is accessed, no metrics are collected, no service is contacted, and no personal information or credentials are read or sent. - The usage condition from the prerequisites is part of the picture: outside Next.js the component needs react@canary and react-dom@canary, while inside Next.js react@canary must NOT be installed. Do not install any package, add any transition, and do not use the skill in any way during this install: using it is a separate step that only starts when I ask for view-transition work later. 3. When I say "yes, install", install it as a skill: copy the whole react-view-transitions folder into the agent's skills directory, in a folder named exactly "react-view-transitions", keeping its 9 files in their original relative layout (SKILL.md at its root). 4. Verify with no network calls: frontmatter valid (name: vercel-react-view-transitions), the 9 files in place with matching fingerprints. Do not run anything from the folder and do not use the skill to verify. 5. Report what was installed, where, and what I still need to do myself (for example: that it is knowledge-only, that using it in a plain React app needs react@canary while Next.js already includes the component, and that using it is a separate step that only starts when I ask for view-transition work). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.