スキル react-best-practices
📦

react-best-practices

安全

Vercel ベストプラクティスによる React と Next.js パフォーマンスの最適化

こちらからも入手できます: 0xBigBoss,0xBigBoss,vercel-labs

React のパフォーマンス低下は、読み込み時間の遅延やユーザーのフラストレーションを引き起こします。このスキルでは、Vercel エンジニアリングチームによる 45 個の優先度付きルールを提供し、ウォーターフォールの排除、バンドルサイズの削減、レンダリングの最適化を実現します。

対応: Claude Codex Code(CC)
📊 69 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「react-best-practices」を使用しています。 ウォーターフォールのためのこのデータフェッチングパターンをレビュー

期待される結果:

  • ISSUE: 逐次的な await 呼び出しによりウォーターフォールが発生（3 ラウンドトリップ）
  • const user = await fetchUser()
  • const posts = await fetchPosts()
  • const comments = await fetchComments()
  •  
  • FIX: Promise.all() を使用して並列実行（1 ラウンドトリップ）
  • const [user, posts, comments] = await Promise.all([
  • fetchUser(),
  • fetchPosts(),
  • fetchComments()
  • ])

「react-best-practices」を使用しています。 重いコードエディタコンポーネントを遅延ロードするにはどうすればよいか

期待される結果:

  • 重いコンポーネントの遅延ロードには next/dynamic を使用してください:
  •  
  • import dynamic from 'next/dynamic'
  •  
  • const MonacoEditor = dynamic(
  • () => import('./monaco-editor').then(m => m.MonacoEditor),
  • { ssr: false, loading: () => <LoadingSkeleton /> }
  • )
  •  
  • これにより、コンポーネントがレンダリングされるまで約 300KB のバンドルが遅延され、TTI が向上します。

セキュリティ監査

安全
v1 • 2/24/2026

Static analyzer detected 912 patterns but all are FALSE POSITIVES. The skill contains markdown documentation with code examples for educational purposes, not executable code. Patterns like 'backtick execution' are shell commands in README examples (pnpm build), 'dynamic imports' are React next/dynamic usage examples, 'storage access' shows localStorage caching patterns, and 'network' patterns are fetch API documentation examples. No actual security vulnerabilities exist.

51
スキャンされたファイル
4,906
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
85
コンテンツ
23
コミュニティ
100
セキュリティ
83
仕様準拠

作れるもの

React アプリケーションを開発するフロントエンド開発者

新しいコンポーネントやページを作成する際にこのスキルを使用して、最初から最適なパフォーマンスを確保します。このスキルは、バンドル最適化、適切なデータフェッチングパターン、再レンダリング防止テクニックをガイドします。

プルリクエストをレビューするテックリード

マージ前に、逐次的な非同期呼び出し、不要なバレルインポート、不足している Suspense バウンダリなどのパフォーマンスアンチパターンを検出するために、これらのルールをコードレビューで参照してください。

レガシーコードをリファクタリングする AI アシスタント

これらの優先度付きルールを適用して、既存の React コードベースを体系的に改善します。中程度の影響を持つレンダリング最適化に対応する前に、重要なウォーターフォールの排除から開始します。

これらのプロンプトを試す

コンポーネントのパフォーマンス問題をレビュー 
Vercel ベストプラクティスを使用してこの React コンポーネントをレビューしてください。ウォーターフォール、不要な再レンダリング、バンドル最適化の機会を特定し、コード例とともに具体的な修正を提案してください。
逐次フェッチングを並列処理にリファクタリング 
このコードをリファクタリングして非同期ウォーターフォールを排除してください。独立した操作には Promise.all() を使用し、await を結果が実際に必要なブランチ内に移動してください。
heavyweight コンポーネントのバンドルサイズを最適化 
このコンポーネントにコード分割戦略を適用してください。next/dynamic インポート、条件付きローディング、ユーザーインタラクション時のプリローディングの機会を特定してください。
再レンダリングのパフォーマンス問題を修正 
このコンポーネントの不要な再レンダリングを分析してください。状況に応じて、メモ化、適切な依存配列、導出状態のサブスクリプション、関数型 setState パターンを適用してください。

ベストプラクティス

  • 中程度の影響の最適化よりも先に、重要なウォーターフォールの排除から開始する
  • リクエストごとの重複排除には React.cache() を、クロスリクエストキャッシングには LRU キャッシュを使用する
  • 関数型 setState を使用して安定したコールバックを抽出し、必要に応じて ref にハンドラを格納する

回避

  • 独立した操作に対する逐次的な await 呼び出し
  • 特定の関数ではなくユーティリティライブラリ全体をインポートする
  • プリミティブではなく関数を直接依存関係として effect に渡す

よくある質問

どの React バージョンがサポートされていますか？
ほとんどのパターンは React 17+ で動作します。startTransition、useTransition、データフェッチング用の Suspense などの高度なパターンには React 18+ が必要です。
TypeScript の代わりに JavaScript で使用できますか？
はい、すべてのパターンは JavaScript プロジェクトに適用できます。例は明確さのために TypeScript 構文を使用していますが、概念は直接転送可能です。
45 個のルールを一度に適用すべきですか？
いいえ。最大のインパクトを得るために、CRITICAL 優先度のルール（非同期ウォーターフォール、バンドル最適化）から開始し、その後 HIGH および MEDIUM 優先度を段階的に対処してください。
このスキルは Next.js App Router で動作しますか？
はい。React.cache()、use cache()、サーバー並列フェッチングなどのサーバーコンポーネントパターンは、App Router アーキテクチャ向けに特別に設計されています。
パフォーマンスの改善はどのように測定しますか？
Web Vitals（LCP、FID、CLS）と React DevTools Profiler を使用してください。このスキルは、各パターンに対して「2-10 倍の改善」などのインパクト見積もりを提供します。
Claude Code はこれらの修正を自動的に適用できますか？
はい。スキルコンテキストを提供し、Claude Code に特定のファイルのレビューまたはリファクタリングを依頼してください。適切なルールをコード例とともに適用します。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-best-practices

参照

main

ファイル構成

📁 rules/

📄 _sections.md

📄 _template.md

📄 advanced-event-handler-refs.md

📄 advanced-use-latest.md

📄 async-api-routes.md

📄 async-defer-await.md

📄 async-dependencies.md

📄 async-parallel.md

📄 async-suspense-boundaries.md

📄 bundle-barrel-imports.md

📄 bundle-conditional.md

📄 bundle-defer-third-party.md

📄 bundle-dynamic-imports.md

📄 bundle-preload.md

📄 client-event-listeners.md

📄 client-swr-dedup.md

📄 js-batch-dom-css.md

📄 js-cache-function-results.md

📄 js-cache-property-access.md

📄 js-cache-storage.md

📄 js-combine-iterations.md

📄 js-early-exit.md

📄 js-hoist-regexp.md

📄 js-index-maps.md

📄 js-length-check-first.md

📄 js-min-max-loop.md

📄 js-set-map-lookups.md

📄 js-tosorted-immutable.md

📄 rendering-activity.md

📄 rendering-animate-svg-wrapper.md

📄 rendering-conditional-render.md

📄 rendering-content-visibility.md

📄 rendering-hoist-jsx.md

📄 rendering-hydration-no-flicker.md

📄 rendering-svg-precision.md

📄 rerender-defer-reads.md

📄 rerender-dependencies.md

📄 rerender-derived-state.md

📄 rerender-functional-setstate.md

📄 rerender-lazy-state-init.md

📄 rerender-memo.md

📄 rerender-transitions.md

📄 server-after-nonblocking.md

📄 server-cache-lru.md

📄 server-cache-react.md

📄 server-parallel-fetching.md

📄 server-serialization.md

📄 AGENTS.md

📄 metadata.json

📄 README.md

📄 SKILL.md