vercel-react-best-practices

Vercel React のベストプラクティス

このスキルは、react-best-practices の互換性ラッパーです。古いワークフローやプラットフォーム固有のセットアップを引き続き利用できるようにしつつ、React のパフォーマンス分野で、同等に推奨されるデフォルトスキルが2つあるように見せないために用意されています。

このスキルを使う場面

• ユーザーまたはツールから vercel-react-best-practices を明示的に指定された場合
• セットアップまたは同期プロセスで、従来のフォルダー名が存在する必要がある場合
• 実際の作業を react-best-practices に振り分けながら、後方互換性を維持する必要がある場合

一般的な React または Next.js のパフォーマンスに関する支援では、デフォルトとしてこのスキルを選ばないでください。

手順

ステップ 1：エイリアスの意図を確認する

リクエストが、この正確なエイリアス名に本当に依存しているか確認してください。

次の場合にのみ、このエイリアスを使用してください。

• ユーザーが直接この名前を指定した場合
• スクリプトまたはツールの仕組みで、この名前が文字どおり参照されている場合
• タスクに移行または互換性に関する懸念が含まれる場合

それ以外の場合は、../react-best-practices/SKILL.md に切り替えてください。

ステップ 2：正規のスキルに誘導する

まずエイリアス側の資料を確認し、その後、正規の React パフォーマンスガイダンスに進んでください。

• エイリアスの振り分けに関するメモ：./references/alias-routing.md
• 測定と振り分けに関するメモ：./references/measurement-route-outs.md
• 正規のスキル：../react-best-practices/SKILL.md
• 詳細なリファレンス：../react-best-practices/AGENTS.md
• 関連領域との境界：
  • グローバル状態のアーキテクチャについては ../state-management/SKILL.md
  • アクセシビリティの改善については ../web-accessibility/SKILL.md
  • React 全般に限らないパフォーマンス問題については ../performance-optimization/SKILL.md

ステップ 3：出力で互換性を維持する

エイリアス名を通じて呼び出された場合は、正規のガイダンスが現在 react-best-practices にあることに触れ、今後の保守を1つの主要なエントリに集約してください。

例

例 1：従来の名前を明示したリクエスト

入力：「vercel-react-best-practices を使って、遅い Next.js ダッシュボードを監査してください。」 出力：エイリアスであることを伝えたうえで、ウォーターフォール、バンドルサイズ、RSC の境界について、正規の react-best-practices のガイダンスを適用します。

例 2：一般的な React のパフォーマンスに関する質問

入力：「React アプリで再レンダリングが多すぎて、Next.js のページも遅いです。」 出力：エイリアスを使い続けないでください。react-best-practices に直接振り分けてください。

ベストプラクティス

1. これを独立したナレッジベースではなく、リダイレクト層として扱ってください。
2. 通常の React／Next.js のリクエストでは正規のスキルが選ばれるよう、トリガーとなる表現を限定してください。
3. 基盤となるガイダンスを更新する際は、まず react-best-practices を更新してください。
4. ドキュメントやセットアップ画面では、正規のものと互換性のためのものを明確に区別してください。

参照

• ./references/alias-routing.md
• ./references/measurement-route-outs.md
• ../react-best-practices/SKILL.md
• ../react-best-practices/AGENTS.md
• ../state-management/SKILL.md
• ../web-accessibility/SKILL.md
• ../performance-optimization/SKILL.md