Next.js: 公式エージェントスキル「react-view-transitions」で画面遷移アニメーションを入れる
Next.js チームが公開したエージェント用スキル。React の <ViewTransition> を使った遷移アニメーション（要素の引き継ぎ、ページの前後スライド、読み込み中の滑らかな切り替え）を、アクセシビリティに配慮しつつエージェントに実装させられる。Next.js との統合方法も含む。
どんな時に使う？
- ページ遷移に動きを付けたいが、View Transitions API と React/Next.js の組み合わせ方を調べるのが面倒
- エージェントに任せると古い方法（JS アニメーションライブラリ等）で書かれてしまう
手順
- スキルを導入する（導入方法は Next.js 公式の告知・リポジトリに従う。skills CLI 経由で入れる形式が一般的）
- 依頼例:「react-view-transitions スキルを使って、一覧→詳細の遷移で画像を共有要素としてアニメーションさせて。
prefers-reduced-motionにも対応して」 - 実装後、ブラウザで戻る/進むの動きと、reduced motion の設定を確認
注意点
<ViewTransition>は React の比較的新しい機能。使っている React/Next.js のバージョンで使えるか確認する。- アニメーションのしすぎは体感速度を落とす。主要な遷移に絞る。