vercel-react-best-practices
React と Next.js の性能の規則 70 件。重みで並べ、待ち行列の解消を最上位に置く
npx skills add vercel-labs/agent-skills/vercel-react-best-practices入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 859,219
- 実用度
- 78
- GitHub star
- 33,634
- 最終更新
- 2026/10/29
頼み方の例
そのままコピーして使えますvercel-react-best-practicesを使って、この画面の読み込みが遅い原因を探してください。優先順位 1 と 2（待ち行列の解消とバンドルの大きさ）から見てください。修正はそのあとにしてください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
いつ使うか
React や Next.js のコードを、書く・レビューする・書き直すときです。
説明文の言い方が明確です。「Vercel の技術部門による、React と Next.js の性能の指針。」
- 性能の規則
- 70 件
- 規則を重みで並べた分類
- 8 分類
- 同梱ファイル（2026-10-09 確認）
- 75 件
- 本文（規則の一覧と短い説明）
- 7,251 バイト
引き金の場面
引き金の場面も並んでいます。部品やページを書く、データの取得を実装する、性能の問題をレビューする、既存のコードを書き直す、バンドルの大きさや読み込み時間を詰める。
規則が 70 件、8 分類
本文が件数を明示しています。「8 分類にまたがる 70 の規則。影響の大きさで優先順位を付け、自動の書き直しとコードの生成を導く。」
| 順 | 分類 | 重み | 接頭辞 |
|---|---|---|---|
| 1 | 待ち行列の解消 | CRITICAL | async- |
| 2 | バンドルの大きさ | CRITICAL | bundle- |
| 3 | サーバー側の性能 | HIGH | server- |
| 4 | クライアント側のデータ取得 | MEDIUM-HIGH | client- |
| 5 | 再描画の抑制 | MEDIUM | rerender- |
| 6 | 描画の性能 | MEDIUM | rendering- |
| 7 | JavaScript の性能 | LOW-MEDIUM | js- |
| 8 | 高度な型 | LOW | advanced- |
★「再描画の抑制」が 5 番目なのが正しい
順序に主張があります。
React の性能の話は useMemo や React.memo に流れがちですが、このスキルはそれを 5 番目に置いています。
上位 2 つは「そもそも待たないようにする」と「そもそも送らないようにする」です。10 ミリ秒の再描画より、直列に並んだ 3 回の待ちのほうが重いという順序で、実測に沿っています。
規則の名前が具体的
接頭辞付きで名前が付いているので、指して話せます。
async-parallel独立した処理はPromise.all()async-cheap-condition-before-await安い同期の条件を、待つ前に確かめるasync-defer-awaitawaitを実際に使う分岐の中へ動かすbundle-barrel-importsまとめ役のファイルを経由せず直接取り込むbundle-defer-third-party解析や記録はハイドレーションのあとに読むbundle-preloadhover や focus で先読みして、体感を上げるserver-cache-reactReact.cache()で要求ごとの重複を消すserver-hoist-static-io静的な入出力（フォント、ロゴ）をモジュールの階層へserver-no-shared-module-stateモジュール階層に要求ごとの状態を置かないserver-after-nonblockingafter()で待たせない処理に回す
踏みやすい罠と、静かに壊れる型
bundle-barrel-imports は踏みやすい罠です。index.ts でまとめて再輸出していると、1 つ取り込むだけで全部が束に入ります。
server-no-shared-module-state も静かに壊れる型です。サーバー側でモジュールの階層に状態を置くと、別の利用者の要求に漏れます。
同梱が 75 件で規則ごとに分かれている
本文は 7,251 バイトで、規則の一覧と短い説明だけです。同梱ファイルは 75 件（2026-10-09 確認）。内訳は rules/ の 72 件（規則 70 件と、分類の説明 _sections.md・雛形 _template.md）と、全規則をまとめた AGENTS.md、README.md、metadata.json です。
必要な規則だけ読ませる作りです（スキルを入れすぎて重くなる仕組み）。
使わないほうがいいとき
React を使っていないなら要らない
React を使っていないなら要りません。
見た目や操作性の話は別
web-design-guidelines は同じ公開元ですが、UI のコードを基準と照らします。取得する基準にも Performance の節はあります（長い一覧の仮想化、DOM の読み書きをまとめる、など。2026-10-09 確認）が、React の規則集ではありません。
データベース側が遅い場合は別
supabase-postgres-best-practices のような側が担当します。待ちの原因が SQL にあるなら、React を直しても変わりません。
画面の設計は扱わない
frontend-design の側です。
測っていない段階で書き直させない
規則は妥当ですが、どこが遅いかを測らずに全部当てると、読みにくいコードが残ります。
注意点
解析では見つからないが、実際にはコードを書き換える
SKILL.md の解析では、外部通信・シェル実行・ファイル書き換えの記述は見つかっていません。同梱ファイルは 75 件です（2026-10-09 確認）。
ただし実際にはコードを書き換えます。解析が拾っていないのは、規則が一覧と説明で書かれているためです（スキルを入れる前に確認すること）。
書き直しの範囲を区切る
Next.js の版によって使える型が変わる
after() や React の cache() は比較的新しい機能です。手元の版で動くかを確かめてください。
先読みは通信を増やす
先読み（bundle-preload）は通信を増やします。
hover で先読みすると体感は上がりますが、使われない取得が増えます。従量課金の環境では効いてきます。
公開元は Vercel
Next.js の提供元なので、自社の枠組みに寄った推薦が入ることは意識しておいてください。内容自体は一般的な React の話も多く含みます。
ライセンス
MIT（license に明記）。再配布や商用利用の前に公開元の表記を確認してください。
インストール数の推移
日次で記録9月18日 〜 11月7日（50日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
frontend-design
「AI が作った画面」に見えないデザインを狙わせる。避けるべき既定値を名指しで持っている
supabase-postgres-best-practices
Postgres を触る前に読ませる規則集。1 列の変更や 1 本の問い合わせでも対象と書いてある
vercel-composition-patterns
真偽値の引数を足して部品を分岐させる書き方をやめさせ、組み合わせで作る React の部品の設計に寄せる。複合部品・状態の持ち上げ・文脈の型・明示的な派生など 8 つの規則を、悪い例と良い例で示す
web-design-guidelines
画面のコードを Vercel の基準で点検させる。基準は毎回取りに行くので手元に無い
よくある質問
何から見ればいいですか
優先順位 1〜2 の CRITICAL です。待ち行列の解消とバンドルの大きさ。
再描画の抑制（useMemo など）は 5 番目です。そもそも待たない・送らないほうが効きます。
`useMemo` を足せば速くなりませんか
順序が違います。再描画の抑制は 5 番目（MEDIUM）です。
直列に並んだ待ちや、大きなバンドルのほうが影響が大きいので、そちらを先に見ます。
規則はどこに書かれていますか
同梱の rules/ に 1 規則 1 ファイルで入っています。全部を展開してまとめたものが AGENTS.md です。本文は一覧と短い説明だけです。
接頭辞付きの名前（async-parallel のような）で指せます。
全部当ててもらえますか
勧めません。70 件を全部当てると差分が大きくなり、読みにくいコードが残ります。
どこが遅いかを測ってから、該当する規則だけ当ててください。
データベースが遅い場合も効きますか
効きません。待ちの原因が SQL にあるなら、React を直しても変わりません。
そちらは supabase-postgres-best-practices のような側です。
対応しているエージェントはどれですか
Claude Code です。公開元の AGENTS.md が Claude Code への入れ方（~/.claude/skills/ への写し方）を案内しています。Codex への対応は公開元の記載が見当たらないので、当サイトは対応として表示していません（2026-10-09 確認）。SKILL.md は標準の形式なので、仕様に沿った実行環境で読めます（指標の意味と限界）。