skillhub-043-vercel-react-view-transitions/README.md

React View Transitions Skill

用于实现流畅、原生感动画的 Agent 技能，基于 React 的 View Transition API。

本技能涵盖的内容

• <ViewTransition> 组件 — 动画触发器（enter、exit、update、share）、放置规则、View Transition 类
• addTransitionType — 为方向性或上下文特定的动画标记过渡
• 共享元素过渡 — 在不同视图之间变形元素
• View Transition 事件 — 通过 Web Animations API 执行命令式 JavaScript 动画
• CSS 伪元素 — ::view-transition-old、::view-transition-new、::view-transition-group
• Next.js 集成 — experimental.viewTransition、next/link 上的 transitionTypes 属性、App Router 模式
• 无障碍 — prefers-reduced-motion 处理
• 可直接使用的 CSS 配方 — 淡入淡出、滑动、缩放、方向导航

技能结构

react-view-transitions/
├── SKILL.md                      # 核心技能（始终加载）
├── AGENTS.md                     # 完整编译文档（所有引用已展开）
└── references/
    ├── implementation.md         # 逐步实现工作流
    ├── patterns.md               # 实际模式、事件 API、故障排除
    ├── nextjs.md                 # Next.js 特有模式
    └── css-recipes.md            # 可直接复制的 CSS 动画

安装

通过 skills.sh 安装：

npx skills install https://github.com/vercel-labs/react-view-transitions-skill

资源

• React <ViewTransition> 文档
• React addTransitionType 文档
• Next.js viewTransition 配置
• Next.js App Router Playground（视图过渡） — Vercel 的参考实现