vercel-react-view-transitions
ReactのView Transition APIを使用した滑らかでネイティブな感覚のアニメーション実装ガイド(`<ViewTransition>`コンポーネント、`addTransitionType`、CSSビュートランジション疑似要素を活用)。ページトランジション、ルート変更のアニメーション、共有要素アニメーション、コンポーネントの出入りアニメーション、リスト並び替えアニメーション、方向付きナビゲーションアニメーション(前へ/戻る)、Next.jsでのビュートランジション統合が必要な場合に活用します。またユーザーがビュートランジション、`startViewTransition`、`ViewTransition`、トランジションタイプについて言及した場合や、サードパーティのアニメーションライブラリを使わずにReactのUI状態間アニメーションについて質問した場合も使用します。
description の原文を見る
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
SKILL.md 本文
React View Transitions
ブラウザのネイティブな document.startViewTransition を使用して UI 状態間でアニメーション化します。<ViewTransition> で「何を」宣言し、startTransition/useDeferredValue/Suspense で「いつ」トリガーし、CSS クラスで「どのように」制御します。未対応ブラウザはアニメーションをスキップします。
アニメーション化するタイミング
すべての <ViewTransition> は、空間的な関係性または連続性を伝える必要があります。それが何を伝えるのか説明できない場合は、追加しないでください。
以下のリストからすべての該当するパターンを、この順序で実装します:
| 優先度 | パターン | 伝えるもの |
|---|---|---|
| 1 | 共有要素 (name) | 「同じもの — より深く進む」 |
| 2 | Suspense reveal | 「データが読み込まれた」 |
| 3 | リスト認識 (アイテムごとの key) | 「同じアイテム、新しい配列」 |
| 4 | 状態変更 (enter/exit) | 「何かが表 |
...
詳細情報
- 作者
- vercel-labs
- ライセンス
- 不明
- 最終更新
- 2026/5/7
Source: https://github.com/vercel-labs/agent-skills / ライセンス: 未指定