# React ベストプラクティス (react-best-practices)

> Vercel がまとめた React と Next.js のパフォーマンス最適化ガイドで、8カテゴリ70のルールを影響度順に並べています。

- カテゴリ: [コーディング規約](https://www.myskills.tools/ja/categories/code-standards/)
- 提供元: 公式 · Vercel Labs
- リポジトリ: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices (commit dc8367e · v1.0.0)
- SKILL.md: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md
- インストールコマンド: `npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices`
- ライセンス: MIT
- 対応ツール: Any SKILL.md agent
- 権限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。

## 基本ルール

ルールは影響度順に適用し、最も重要なリクエストのウォーターフォール解消とバンドルサイズ削減から始めること。

## 実行フェーズ

1. **直列待ちの解消** — 独立した処理は Promise.all で並列化し、await は実際に使う分岐へ移し、Suspense でストリーミングします。
2. **バンドル削減** — barrel ファイルを避けて直接 import し、重いコンポーネントは next/dynamic で読み込み、サードパーティはハイドレーション後に読み込みます。
3. **サーバーとデータ取得** — React.cache() や LRU キャッシュで重複を防ぎ、クライアントコンポーネントへ渡すデータを減らし、クライアントでは SWR で重複排除します。
4. **描画と JS 最適化** — 不要な再レンダリングを減らし、描画と JavaScript のホットパスを最適化し、高度なパターンは最後に検討します。
5. **ルールファイル参照** — 詳しくは rules/ 配下の各ファイルで誤った例と正しい例を確認するか、まとめた AGENTS.md を参照します。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | ルールに沿って React/Next.js のコードを書いたりリファクタリングしたりします。 |
| コマンド実行 | 不要 | ルールのリファレンスであり、コマンドの実行は求めていません。 |
| 外部通信 | 不要 | ルールファイルはスキルに同梱されており、ネットワークは不要です。 |

## SKILL.md のフロントマター（YAML）

```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"
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/react-best-practices/