Vercelは2026年1月14日、同社が10年以上にわたって蓄積したReactによる開発のベストプラクティスを、エージェントスキルとしてGiHub上で公開した。
We just released 𝚛𝚎𝚊𝚌𝚝-𝚋𝚎𝚜𝚝-𝚙𝚛𝚊𝚌𝚝𝚒𝚌𝚎𝚜, a repo for coding agents.
— Vercel (@vercel) January 15, 2026
React performance rules and evals to catch regressions, like accidental waterfalls and growing client bundles.
How we collected them and how to install the skill ↓https://t. co/ kfLSbKl15X
Reactのパフォーマンス改善は対症療法的となることが多く、リリース後に現象を確認して原因をさぐるため時間がかかり、最適化を間違う可能性も高くなるという。同社による10年以上の経験によると、以下の3つの原因にたどり着く。
- 非同期処理が誤ってシーケンシャル処理になる
- 時間の経過とともに大きくなる大規模なクライアントバンドル
- 必要以上に再レンダリングされるコンポーネント
今回公開されたReactベストプラクティスフレームワークは、上記の原因を容易に特定し、迅速な解決に結びつけられることを目的に作成された。
このフレームワークは以下の8つのパフォーマンスカテゴリからなる。
- 非同期ウォーターフォールの排除
- バンドルサイズの最適化
- サーバーサイド パフォーマンス
- クライアントサイド データフェッチ
- 再レンダリングの最適化
- レンダリングパフォーマンス
- 高度なパターン
- JavaScriptパフォーマンス
この中に40以上のルールが含まれており、影響度の高い順に適用される。各ルールには、修正の優先順位付けのための影響度評価
エージェントスキルとしてパッケージ化されたこのベストプラクティスは、Opencode、Codex、Claude Code、CursorなどのAIコーディングエージェントにインストールして使用することができ、エージェントがカスケードされたuseEffect呼び出しやクライアント側での大量のインポートを検出すると、これらのパターンを参照して修正が提案されるようになるという。