React best practices skill: what it does and how to install it

Source: vercel-labs/agent-skills · Maintainer: Vercel · License: MIT (per the SKILL.md frontmatter and repo README; no LICENSE file in the repo) · Checked: 23 October 2026

What is the React best practices skill?

The React best practices skill gives your coding agent Vercel Engineering's performance rules for React and Next.js: 70 rules in 8 categories, ranked by impact, each with a wrong and a right code example. It is for developers who write or review React code with an agent and want it to catch waterfalls, oversized bundles and wasted re-renders as it goes.

It lives in the react-best-practices folder of vercel-labs/agent-skills, but its frontmatter name is vercel-react-best-practices, which is the name you use to install it. The description reads: "React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements."

As of 23 October 2026, its skills.sh page listed about 832,400 installs.

What does it do?

The SKILL.md says to apply the rules when writing new components or pages, implementing data fetching, reviewing code for performance, refactoring, or optimizing bundle size and load times. It works as an index: a priority table and a one-line summary of every rule, with a pointer to the full rule file.

The eight categories, in the order the skill ranks them:

A few of the rules, as the SKILL.md summarizes them: use Promise.all() for independent operations, import directly instead of through barrel files, use next/dynamic for heavy components, authenticate server actions like API routes, use React.cache() for per-request deduplication, derive state during render instead of in effects, don't define components inside components, and use toSorted() instead of mutating arrays.

Each rule file has a short explanation, an incorrect example, a correct example and extra context. The async-parallel rule, for example, labels its impact "CRITICAL" and shows three sequential awaits turned into one call:

const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])

What's in the folder:

• SKILL.md: the priority table and the rule index.
• rules/: 70 rule files, plus _sections.md (section metadata) and _template.md (for writing new rules).
• AGENTS.md: every rule compiled into one long document, which the SKILL.md offers as "the complete guide with all rules expanded."
• README.md and metadata.json: notes for maintainers on building and validating the rules, and document metadata (Vercel Engineering, January 2026, with links to react.dev, nextjs.org and Vercel blog posts).

The repo README and metadata.json still say "40+ rules"; the SKILL.md says 70, and the rules/ folder held 70 rule files when checked.

How do you install the React best practices skill?

skills.sh lists this command for the skills CLI:

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

Use vercel-react-best-practices, not the folder name. The CLI's source matches --skill against the name in each SKILL.md's frontmatter, so --skill react-best-practices finds nothing. Add -g to install for every project, or -a claude-code to skip the agent prompt. Running npx skills add vercel-labs/agent-skills with no --skill, as the repo README shows, lets you choose from all of Vercel's skills instead.

For Claude Code, the skill lands in your project's .claude/skills/ folder, or in ~/.claude/skills/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills. The README doesn't list a Claude Code plugin for this repo.

claude.ai. Custom skills upload as a ZIP of the skill folder under Customize, then Skills (Claude Help Center). The repo keeps a prebuilt react-best-practices.zip next to the folder, but as of 23 October 2026 it lagged behind: it had 69 rule files and an older SKILL.md. Zip the current folder instead. The Agent Skills spec says the name must match the parent folder, so name the folder vercel-react-best-practices before you zip it.

How do you use it?

You rarely need to call it. Because the description names React components, Next.js pages, data fetching and bundle work, the agent loads it whenever you work on those. You can still name it to be sure: "use the React best practices skill."

Example prompts (suggestions, not quotes from the repo):

• "Review this Next.js page for request waterfalls and bundle size problems, most critical first."
• "Refactor the dashboard's data loading so independent fetches run in parallel."
• "This list re-renders on every keystroke. Apply the re-render rules and explain each change."
• "Check our server actions against the server-auth-actions rule."
• "Find barrel imports that pull extra code into the client bundle."

There are no packages, CLIs or API keys to install. The rules reference a few libraries by name, such as SWR, better-all and an LRU cache, but the skill doesn't install them.

Tips and limits

• Work top down. The categories are ordered by impact. Fix waterfalls and bundle size before micro-optimizations like caching property access in loops.
• Impact labels are estimates. Rule files carry impact notes such as "2-10× improvement" for Promise.all(). Treat them as the authors' guidance and measure your own app.
• Not every rule fits every app. Several rules assume Next.js or React Server Components. In a Vite or React Native app, expect the agent to skip those, and push back if it doesn't.
• Context size. The compiled AGENTS.md is about 3,800 lines. The SKILL.md points the agent at individual rule files first, which keeps the context small.
• Performance only. It doesn't cover visual design or accessibility. Pair it with web-design-guidelines for UI review, and look at the repo's composition-patterns skill for component API design.
• Security. The folder has no scripts. As of 23 October 2026, its skills.sh page showed Pass from Gen Agent Trust Hub, Socket and Snyk.
• License. The SKILL.md frontmatter says license: MIT and the README ends with "MIT", but the repo has no LICENSE file.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md and its files; for a repo with many skills, like this one, it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Vercel.

Similar skills

• Web design guidelines skill: Vercel's UI and accessibility audit, from the same repo.
• shadcn skill: the official shadcn/ui skill for adding and composing components correctly.
• Best Claude Code skills: a wider list to browse.