{
  "id": "vercel-react-best-practices",
  "handle": "vercel-react-best-practices",
  "canonicalUrl": "https://bestskillsforclaude.com/en/skills/vercel-react-best-practices",
  "language": "en",
  "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": "Build and ship"
  },
  "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": "Why do agents keep writing outdated React?",
  "summary": "Because most of the React ever written is old, and the average is what you get by default.",
  "verdict": "The vercel-react-best-practices skill from Vercel Labs loads current React guidance so generated components follow today's patterns rather than the average of everything ever published. It is worth installing for any React codebase, and it is not a substitute for your own conventions.",
  "bestFor": "React and Next.js codebases where generated components should match modern practice.",
  "skipIf": "You work in another framework, or your team has strong internal conventions already written down.",
  "keyTakeaways": [
    "It counteracts the training data bias towards older patterns.",
    "It is guidance, not enforcement. Your linter still does the enforcing.",
    "Framework skills age. Check when the source was last updated before trusting it.",
    "It composes well with improve-codebase-architecture for larger cleanups."
  ],
  "quickStart": [
    "Install it with the skills CLI from vercel-labs, published under MIT.",
    "Generate one component you already know how you would write, and compare.",
    "Add your own conventions on top, because a public best practice is not your house style."
  ],
  "sections": [
    {
      "heading": "What it changes in practice",
      "paragraphs": [
        "Ask for a component and you tend to get something that would have passed review a few years ago: patterns that still work, but are no longer how a current codebase is written. It is not a knowledge failure so much as an averaging failure.",
        "Loading explicit current guidance moves the default. The value shows up most in the boring places, such as data fetching, component boundaries and where state is allowed to live."
      ]
    },
    {
      "heading": "Where it disappoints",
      "paragraphs": [
        "Public best practice can conflict with your codebase. If your team has decided something different on purpose, the skill will argue against it, and your codebase should win.",
        "Ecosystem skills also date quickly. Check the repository's recent activity before treating its advice as current."
      ]
    }
  ],
  "faq": [
    {
      "question": "Who publishes it?",
      "answer": "Vercel Labs, in their public agent skills repository, under the MIT license."
    },
    {
      "question": "Does it work outside Next.js?",
      "answer": "It targets React practice generally, but the closer you are to the Vercel stack the better the fit."
    },
    {
      "question": "Does it replace lint rules?",
      "answer": "No. It shapes what gets written. Lint rules are what stop the exceptions from landing."
    }
  ],
  "sources": [
    {
      "label": "vercel-labs/agent-skills on GitHub",
      "url": "https://github.com/vercel-labs/agent-skills",
      "kind": "repository"
    },
    {
      "label": "Agent skills directory listing",
      "url": "https://skills.sh",
      "kind": "directory"
    }
  ],
  "machineReadable": {
    "markdown": "https://bestskillsforclaude.com/en/skills/vercel-react-best-practices/content.md",
    "json": "https://bestskillsforclaude.com/en/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."
}