{
  "id": "vercel-react-best-practices",
  "handle": "vercel-react-best-practices",
  "canonicalUrl": "https://bestskillsforclaude.com/ja/skills/vercel-react-best-practices",
  "language": "ja",
  "alternates": {
    "en": "https://bestskillsforclaude.com/en/skills/vercel-react-best-practices",
    "es": "https://bestskillsforclaude.com/es/skills/vercel-react-best-practices",
    "pt-BR": "https://bestskillsforclaude.com/pt-br/skills/vercel-react-best-practices",
    "ja": "https://bestskillsforclaude.com/ja/skills/vercel-react-best-practices"
  },
  "category": {
    "id": "build-and-ship",
    "name": "実装とリリース"
  },
  "publisher": {
    "name": "Vercel Labs",
    "url": "https://github.com/vercel-labs"
  },
  "source": "https://github.com/vercel-labs/agent-skills",
  "documentation": null,
  "licenseAsStated": "MIT",
  "runtime": "Claude Code and other agents supported by the skills CLI",
  "lastReviewed": "2026-08-05",
  "headline": "なぜエージェントは古い React を書くのか",
  "summary": "世に存在する React の大半が古く、平均が既定になるからです。",
  "verdict": "Vercel Labs の vercel-react-best-practices スキルは現在の React 指針を読み込ませ、生成されるコンポーネントが公開物すべての平均ではなく今日の書き方に沿うようにします。React のコードベースなら導入する価値があり、自分たちの規約の代わりにはなりません。",
  "bestFor": "生成コンポーネントを現代的な書き方に揃えたい React や Next.js のコードベース。",
  "skipIf": "別のフレームワークを使っている場合、あるいは社内規約がすでに文書化されている場合。",
  "keyTakeaways": [
    "学習データが古い書き方に偏る傾向を打ち消します。",
    "指針であって強制ではありません。強制するのは引き続き lint です。",
    "フレームワーク系スキルは古びます。参照元の更新時期を確認してください。",
    "大きめの整理では improve-codebase-architecture と相性が良いです。"
  ],
  "quickStart": [
    "vercel-labs の skills CLI から MIT ライセンスで導入します。",
    "自分ならこう書くと分かっているコンポーネントを 1 つ生成させ、比較します。",
    "その上に自社規約を重ねます。公開されたベストプラクティスは自社の流儀ではありません。"
  ],
  "sections": [
    {
      "heading": "実務で何が変わるか",
      "paragraphs": [
        "コンポーネントを頼むと、数年前ならレビューを通ったはずの書き方が返ってきます。いまも動くけれど、現在のコードベースの書き方ではありません。知識の欠落というより平均化の結果です。",
        "現在の指針を明示的に読み込ませると出発点が動きます。効果が出るのは地味な部分、つまりデータ取得、コンポーネントの境界、状態を置いてよい場所です。"
      ]
    },
    {
      "heading": "期待に届かない点",
      "paragraphs": [
        "公開されたベストプラクティスは自分たちのコードベースと衝突することがあります。チームが意図して別の判断をしているなら、勝つべきはコードベースです。",
        "エコシステム系スキルは古びるのも早いです。助言を現行として扱う前に、リポジトリの更新状況を確認してください。"
      ]
    }
  ],
  "faq": [
    {
      "question": "誰が公開していますか",
      "answer": "Vercel Labs が公開するエージェントスキルのリポジトリで、ライセンスは MIT です。"
    },
    {
      "question": "Next.js 以外でも使えますか",
      "answer": "React 全般の実践を対象にしていますが、Vercel のスタックに近いほど噛み合います。"
    },
    {
      "question": "lint ルールの代わりになりますか",
      "answer": "なりません。書かれる内容を形づくるのがこちら、例外の混入を止めるのが lint です。"
    }
  ],
  "sources": [
    {
      "label": "GitHub の vercel-labs/agent-skills",
      "url": "https://github.com/vercel-labs/agent-skills",
      "kind": "repository"
    },
    {
      "label": "エージェントスキルのディレクトリ",
      "url": "https://skills.sh",
      "kind": "directory"
    }
  ],
  "machineReadable": {
    "markdown": "https://bestskillsforclaude.com/ja/skills/vercel-react-best-practices/content.md",
    "json": "https://bestskillsforclaude.com/ja/skills/vercel-react-best-practices/skill.json"
  },
  "disclosure": "Editorial desk review based on the publisher's own repository. Not a security audit, a benchmark or a guarantee of maintenance."
}