React Best Practices（React・Next.js の性能改善ルール）

Vercel が公開しているスキル集（vercel-labs/agent-skills）のうち、React と Next.js の性能改善を扱うスキルです。SKILL.md の説明では、70 のルールを 8 つの分類に整理し、影響の大きい順に並べた、自動でのリファクタリングやコード生成の指針だとされています。

各ルールは rules/ に 1 件ずつ置かれ、理由の説明、悪い例、良い例が入っています。全ルールを展開した AGENTS.md もあります。

GitHub のリポジトリ全体のスター数は 約3.4万（2026-11-10 時点）です。人気のあるスキル集のなかから、すでに掲載しているものと重ならない内容を選びました。

8 つの分類（優先度の高い順）

優先度	分類	影響	接頭辞
1	待ち時間の連鎖をなくす	重大	async-
2	バンドルサイズの削減	重大	bundle-
3	サーバー側の性能	高	server-
4	クライアント側のデータ取得	中〜高	client-
5	再描画の抑制	中	rerender-
6	描画の性能	中	rendering-
7	JavaScript の性能	低〜中	js-
8	高度なパターン	低	advanced-

ルールの例

• async-parallel：互いに関係のない処理は Promise.all() で並べて待つ
• async-suspense-boundaries：Suspense で内容を順に流す
• bundle-barrel-imports：バレルファイルを避け、直接読み込む
• bundle-dynamic-imports：重い部品は next/dynamic で遅らせる
• bundle-defer-third-party：分析・ログのコードは、画面が動き出してから読み込む
• server-auth-actions：サーバーアクションも API と同じように認証する
• server-cache-react：リクエスト単位の重複を React.cache() で省く

ファイル構成

SKILL.md（概要と一覧）、rules/（ルールごとの詳細）、AGENTS.md（全ルールをまとめた文書）、metadata.json、README.md です。

Claude Code で使う

スキルのフォルダ（skills/react-best-practices）を、~/.claude/skills/ の下（個人用）か、プロジェクトの .claude/skills/ の下（そのプロジェクト用）にコピーします。フォルダの名前はそのまま使います。

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-best-practices ~/.claude/skills/

コピーしたあと、Claude Code を開き直すと、依頼の内容に合うときに自動で読み込まれます。

そのほか

リポジトリによっては、プラグインやコマンドでの導入方法を README に載せています。最新の手順は、リポジトリの README を確認してください。

ルールは React・Next.js 向けです。優先度の低いルールまで一律に当てはめると、読みにくいコードになることがあります。影響の大きい分類から順に見るのが、書かれた使い方です。