← 一覧へ
✨ コードを良くするClaude Code難易度: 中級
Vercel React ベストプラクティス vercel-react-best-practices
ReactとNext.jsのコードを最高に最適化！
これは何？
これはReactとNext.jsのパフォーマンス最適化のためのガイドライン集です。Vercelが提供する62のルールを活用することで、効率的なコードレビューやリファクタリングが可能になります。
これでできること
- 新しいReactコンポーネントやNext.jsページを作成する際に最適化の指針を得る
- データフェッチングの実装方法を改善する
- 既存のReact/Next.jsコードのレビューで問題を発見する
- バンドルサイズや読み込み時間を最適化する
こんな時に便利
新しいReactコンポーネントを作成するとき
既存のコードをリファクタリングするとき
パフォーマンス問題をレビューするとき
データフェッチングを実装するとき
使い方
個々のルールファイルを読み、詳細な説明とコード例を参考にしてください。各ルールファイルには、なぜそれが重要なのか、間違ったコード例、正しいコード例、追加のコンテキストと参考文献が含まれています。
使用例（こう頼んでみよう）
Reactコンポーネントのパフォーマンスを最適化するには？Next.jsページのバンドルサイズを小さくする方法は？データフェッチングの実装を改善するベストプラクティスは？必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/CherryHQ/cherry-studio/tree/main/.agents/skills/vercel-react-best-practices手動で置く
Claude Code →
~/.claude/skills/vercel-react-best-practices/Codex →
~/.agents/skills/vercel-react-best-practices/使いこなしのコツ
- 優先度の高いルールから順に適用しましょう
- ルールファイルのコード例を実際に試して理解を深めましょう