# 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](https://skills.sh) 安装：

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

## 资源

- [React `<ViewTransition>` 文档](https://react.dev/reference/react/ViewTransition)
- [React `addTransitionType` 文档](https://react.dev/reference/react/addTransitionType)
- [Next.js `viewTransition` 配置](https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition)
- [Next.js App Router Playground（视图过渡）](https://github.com/vercel/next-app-router-playground/tree/main/app/view-transitions) — Vercel 的参考实现