react-view-transitions

1. 基本信息

项目	内容	数据来源
名称	react-view-transitions（Vercel 官方技能合集 `vercel-labs/agent-skills` 中的子技能）	GitHub
作者/维护者	Vercel；本子技能主要由 Aurora Scharff（Vercel Next.js 团队 DX 工程师）开发维护	GitHub API + 公开资料
来源链接	https://github.com/vercel-labs/agent-skills/tree/main/skills/react-view-transitions	—
许可证	MIT（仓库 README「License」章节与 SKILL.md 自身 front matter 均声明；仓库根目录未见独立 LICENSE 文件）	GitHub API + 人工核对
GitHub Stars	所属合集仓库整体 29,662 Stars / 2,659 Forks（子目录自身热度不计入此数，仅供背景参考）	GitHub API
最新版本	SKILL.md 标注 version 1.0.0；本子目录最近一次改动 2026-07-24	GitHub API
安装方式	`npx skills add`（skills.sh 注册表，支持单独安装本技能）	GitHub README

2. 功能介绍与亮点

react-view-transitions 教 AI coding agent 正确使用 React 新推出的原生 <ViewTransition> 组件，实现流畅、原生质感的 UI 过渡动画，覆盖页面切换、路由动画、列表重排、共享元素跳转等场景。

零第三方依赖：基于浏览器原生 View Transitions API 与 React 官方组件，不需要引入额外动画库
明确的实现优先级：按“共享元素→Suspense 揭示→列表身份→状态变化→路由切换”五类模式给出实现顺序，并提醒“如果说不清楚这个过渡在传达什么空间关系，就不要加”，避免为动而动
常见踩坑点前置：明确指出 <ViewTransition> 必须出现在 DOM 节点之前才能触发 enter/exit，嵌套在普通 <div> 内会导致动画失效
无障碍处理：文档专门覆盖 prefers-reduced-motion 降级方案
现成 CSS 配方：附带 4 份参考文档（实现步骤、真实场景模式、Next.js 集成、CSS 动画配方），可直接复制粘贴
权威作者持续迭代：由 Vercel Next.js 团队工程师主导开发，62 次提交从 2026-03-29 持续到 2026-07-24

3. 适用场景

固定分类：前端与设计。适用于使用 React（尤其 Next.js App Router）构建应用、需要实现页面转场、路由切换动画、列表重排、共享元素跳转（如列表页到详情页的元素变形）等原生质感 UI 动画效果的初中级前端开发者，尤其适合不熟悉 View Transitions API 触发时机与 CSS 伪元素细节、容易写出无效或错乱动画的开发者。

4. 跨 Agent 兼容性

Claude Code：✅ 原生支持——仓库根目录含 CLAUDE.md，并通过 skills.sh 提供一条命令安装
Codex：❓ 未验证——已抓取材料未提及，未为此单独搜索
OpenClaw：❓ 未验证——已抓取材料未提及，未为此单独搜索
Hermes Agent：❓ 未验证——已抓取材料未提及，未为此单独搜索

5. 推荐理由

React 原生 View Transitions API 是目前实现“原生质感”页面转场动画最前沿、也最容易用错的新特性——触发时机、DOM 结构约束、CSS 伪元素等细节繁多。这份由 Vercel Next.js 团队工程师亲自撰写的技能，把正确用法、实现优先级判断、无障碍降级方案和现成 CSS 配方打包成结构化指令，能让 agent 一次性生成符合最佳实践的过渡动画代码，省去从零摸索 API 细节的成本。

6. 评分

维度	分数	说明
受欢迎程度	8	所属合集仓库为 Vercel 官方出品，整体 29,662 Stars / 2,659 Forks / 164 个开放 Issue（不计入本子技能个体评分，仅背景参考）；本子目录由 Vercel Next.js 团队工程师 Aurora Scharff（GitHub 1,209 followers）主导开发，62 次提交持续迭代 4 个月；技能被 skills.sh、awesomeskill.ai 等独立第三方技能市场收录索引
可用性	9	可通过 skills.sh 一条命令单独安装本技能；SKILL.md + AGENTS.md + 4 份分类参考文档结构完整；最近一次改动 2026-07-24，维护活跃；基于浏览器原生 API，无第三方付费依赖
安全性	9	见下方检查清单

安全检查清单： ① shell 命令执行——无，技能内容为纯 Markdown 文档与 JSX/CSS 代码示例，不含任何可执行脚本 ② 联网外发——无，纯静态文档，运行时不发起任何网络请求 ③ 凭据存储——不涉及任何 API Key 或凭据 ④ 可疑指令——通读 SKILL.md 及全部参考文档，均为 React/Next.js 官方 API 的技术说明，未发现诱导性或数据外发指令 ⑤ 作者信誉——Vercel Next.js 团队工程师 Aurora Scharff，GitHub/LinkedIn 身份可查，无造假迹象 ⑥ License——MIT，仓库 README 与 SKILL.md front matter 均声明，但仓库根目录未见独立 LICENSE 文件 ⑦ 最近维护——2026-07-24 有提交，活跃

7. 跟同类 Skills 相比的优势

竞品	定位	差异
gsap-core（GreenSock 官方）	通用 JS 动画库 GSAP 的核心补间 API 教学技能，覆盖 tween、timeline、stagger、响应式断点等广泛动画场景	GSAP 是需要引入外部动画库的成熟方案，覆盖 SVG 变形、滚动触发等更复杂的编排能力；本技能基于浏览器原生 API，零第三方依赖，但目前仅聚焦“UI 状态切换”这一类过渡动画，不处理复杂时间轴编排
Motion（原 Framer Motion）	React 生态另一主流第三方动画库，以声明式 variants、gestures、layout animation API 著称	同为 React 动画方案，但 Motion 需要安装额外 npm 包并学习其专有 API；本技能教的是 React/浏览器内置能力，无需引入或维护额外依赖库

8. 用户评价

该技能目前在第三方平台尚无独立署名用户评价。可查证的是，其技能已被 skills.sh、awesomeskill.ai 等独立第三方技能市场收录索引，作者 Aurora Scharff 作为 Vercel Next.js 团队工程师在多个公开渠道分享 View Transitions 相关技术内容。

9. 其他补充

同仓库还提供其他 Vercel 官方技能，如聚焦部署成本与性能审计的 vercel-optimize、聚焦 UI 界面规范审计的 web-design-guidelines、聚焦组件组合模式的 composition-patterns、聚焦文档写作规范的 writing-guidelines 等，可按需配合安装。

10. 安装使用方式

通过 skills.sh 单独安装本技能：npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions
安装整个官方技能合集：npx skills add vercel-labs/agent-skills
安装后无需重启即可生效，agent 会根据任务描述（如“添加页面切换动画”“实现共享元素跳转”）自动触发，也可显式提及技能名手动调用
使用前提：若项目基于 Next.js App Router，已内置 React canary，<ViewTransition> 开箱即用；若不使用 Next.js，需手动安装 react@canary react-dom@canary（ViewTransition 尚未进入 React 稳定版）
浏览器兼容性：Chromium 125+、Firefox 144+、Safari 18.2+，不支持的浏览器会优雅降级（不显示动画但不报错）

11. 注意事项

<ViewTransition> 必须出现在 DOM 节点之前才能触发 enter/exit，嵌套在普通 <div> 内会导致触发失效，这是文档特别标注的常见踩坑点
ViewTransition 组件目前仍依赖 React canary 版本，尚未进入 React 稳定发行版，生产环境引入前需评估该风险
Codex、OpenClaw、Hermes Agent 的兼容性尚未验证
仓库根目录未见独立 LICENSE 文件，MIT 声明来自 README 与 SKILL.md front matter 而非法定 LICENSE 文件，如对许可证有严格合规要求建议先与 Vercel 确认