react-best-practicescommit dc8367e · v1.0.0SKILL.md · コーディング規約
React ベストプラクティス
Vercel がまとめた React と Next.js のパフォーマンス最適化ガイドで、8カテゴリ70のルールを影響度順に並べています。
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practicesコマンドを選択しました。手動でコピーしてください。
- 権限
- read-repo
- write-files
- shell
- network
- 対応ツール
- Any SKILL.md agent
- GitHub
- 33.3k
- 提供元
- 公式 · Vercel Labs
- 状態
- スキャン済み
- ライセンス
- MIT
- カテゴリ
- コーディング規約
基本ルール
ルールは影響度順に適用し、最も重要なリクエストのウォーターフォール解消とバンドルサイズ削減から始めること。
実行フェーズ
フェーズ 01直列待ちの解消
独立した処理は Promise.all で並列化し、await は実際に使う分岐へ移し、Suspense でストリーミングします。
フェーズ 02バンドル削減
barrel ファイルを避けて直接 import し、重いコンポーネントは next/dynamic で読み込み、サードパーティはハイドレーション後に読み込みます。
フェーズ 03サーバーとデータ取得
React.cache() や LRU キャッシュで重複を防ぎ、クライアントコンポーネントへ渡すデータを減らし、クライアントでは SWR で重複排除します。
フェーズ 04描画と JS 最適化
不要な再レンダリングを減らし、描画と JavaScript のホットパスを最適化し、高度なパターンは最後に検討します。
フェーズ 05ルールファイル参照
詳しくは rules/ 配下の各ファイルで誤った例と正しい例を確認するか、まとめた AGENTS.md を参照します。
権限の説明（SKILL.md より）
| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | ルールに沿って React/Next.js のコードを書いたりリファクタリングしたりします。 |
| コマンド実行 | 不要 | ルールのリファレンスであり、コマンドの実行は求めていません。 |
| 外部通信 | 不要 | ルールファイルはスキルに同梱されており、ネットワークは不要です。 |
SKILL.md のフロントマター（YAML）
---
name: vercel-react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license: MIT
metadata:
author: vercel
version: "1.0.0"
---関連スキル
ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。