React View Transitions 技能

一个用于使用 React 的 View Transition API 实现流畅、原生感动画的智能体技能。

本技能涵盖的内容

• <ViewTransition> 组件 — 动画触发器（进入、退出、更新、共享）、放置规则、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 的参考实现