ローカライズされた読書ガイド
vercel-react-view-transitions目的、用途、および情報源
ReactのView Transition API（ 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、トランジションの種類、またはサードパーティのアニメーションライブラリを使用せずに React で UI の状態間をアニメーション化する方法について質問します。
ソースを取得しました:
- 出典リポジトリ
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- リポジトリの Star
- 33,269
- リポジトリの最終更新
- 2026-10-29
- 能力分類
- 開発
- 最終収集時刻
ライセンス: 記載なし
ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。
以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。
このスキルが何をするか
ReactのView Transition API（ 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、トランジションの種類、またはサードパーティのアニメーションライブラリを使用せずに React で UI の状態間をアニメーション化する方法について質問します。
上流ワークフローの仕組み
実装ワークフロー
既存のアプリにビュー遷移を追加する場合は、次の手順に従ってください。references/implementation.md段階的に進めてください。監査から始めてください。飛ばさないでください。references/css-recipes.md該当するCSSを選択し、アプリに合わせて調整します。
上流への航路 · L51 ↗アニメーション化のタイミング
すべての「」は、空間的な関係または連続性を伝える必要があります。それが何を伝えているかを明確に説明できない場合は、追加しないでください。このリストから適用可能なすべてのパターンを、次の順序で実装します。これは実装順序であり、「1つ選択」リストではありません。アプリに適合するすべてのパターンを実装します。アプリにそのパターンの使用例がない場合にのみ、パターンをスキップします。
上流への航路 · L14 ↗Reactのビュー遷移
ブラウザのネイティブ機能を使用してUIの状態間をアニメーションするdocument.startViewTransition を使って *何* を宣言する, trigger *when* with トランジション開始 / useDeferredValue / サスペンス効果は、CSSクラスでその方法を制御できます。非対応ブラウザでは、アニメーションがスムーズにスキップされます。
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>要件とセットアップ
このファイルから要件定義の短い記述が選択されませんでした。これは、スキルに依存関係がないという意味ではありません。リポジトリの設定手順と参照ファイルを確認してください。
制限事項と品質チェック
ネストされたVTの制限
親VTの場合mounts/unmountsネストされたVTを内部に持つ1つのユニットとして、ネストされたVTは独自のenter/exit— 最も外側の VT のみがアニメーションします。（*永続的な*親 VT 内にマウントされた子 VT は、enter/exit通常。）ページナビゲーション中のアイテムごとの段階的アニメーションは現在利用できません。Next.js上流の実験状況については、トラブルシューティングを参照してください。
上流への航路 · L304 ↗まずは安全なトライアルから始めましょう
- サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
- エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
- 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
- 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。
詳細は出典元をご覧ください。
関連スキル
翻訳と範囲
この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。
この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。
- ピン留めされたソース
- 原文を読む ↗
- ソースを取得しました
- ソースコミット
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- ソースSHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a