What is the vercel-react-best-practices skill?
vercel-react-best-practices is a skill in Vercel's agent-skills repository with 70 React and Next.js performance rules across 8 categories, prioritized by impact. Your agent applies it when writing, reviewing or refactoring components, data fetching and bundles. Each rule has an incorrect and a correct code example.
vercel-react-best-practices is a skill in the vercel-labs/agent-skills repository. Its folder is skills/react-best-practices, and its SKILL.md describes React and Next.js performance guidelines from Vercel Engineering: 70 rules across 8 categories, prioritized by impact.
The description says to use it when writing, reviewing or refactoring React and Next.js code, covering components, pages, data fetching, bundle optimization and performance work. Each rule is its own file, and a compiled AGENTS.md holds the full guide.
The eight rule categories
| Priority | Category | Impact |
|---|---|---|
| 1 | Eliminating waterfalls | Critical |
| 2 | Bundle size optimization | Critical |
| 3 | Server-side performance | High |
| 4 | Client-side data fetching | Medium-high |
| 5 | Re-render optimization | Medium |
| 6 | Rendering performance | Medium |
| 7 | JavaScript performance | Low-medium |
| 8 | Advanced patterns | Low |
What changes in your agent's output
- Independent awaits go through Promise.all, and awaits move into the branch that uses them instead of blocking the whole function.
- Imports go directly to the module instead of through barrel files, and heavy components load with next/dynamic.
- Server actions are authenticated like API routes, and only the data a client component needs is passed to it.
- Derived state is computed during render, not in effects, and interaction logic lives in event handlers.
- Conditional rendering uses a ternary instead of &&.
Who the skill is for
Best for
- React and Next.js projects where agents write components, pages or data fetching.
- Performance reviews of existing code, from bundle size to re-renders.
- Teams that want one ranked rule set instead of ad hoc performance advice.
Not for
- Visual design or accessibility review. web-design-guidelines audits UI code against interface rules.
- Animation work. Use emil-design-eng for motion and feel.
- Non-React stacks, since every rule is written for React and Next.js.
Use it with UiChemy
This skill tunes React code you ship yourself. If your site is on WordPress, UiChemy covers that path: AI to WordPress imports an AI-built page and Composer edits it in Elementor or Gutenberg. Click Get Started on uichemy.com. For page speed beyond React code, see the web performance skill.
How to install Vercel React Best Practices Skill: 70 Performance Rules
git clone https://github.com/vercel-labs/agent-skills.gitClone the repository
Run
git clone https://github.com/vercel-labs/agent-skills.git. The skill is the skills/react-best-practices folder.Copy the skill folder
Copy skills/react-best-practices into the folder your AI coding agent loads skills from, for your project or globally. The folder holds SKILL.md, the rules folder and the compiled AGENTS.md.
Ask for React work
Use a trigger from the skill description, such as reviewing a Next.js page for performance, or write a component and let the skill apply.
Check that it loaded
Ask the agent to review a data-fetching component. Findings should cite rule names such as async-parallel or bundle-barrel-imports and show a corrected version.
Key features
- 70 rules, 8 categoriesThe rules are grouped by prefix: async, bundle, server, client, rerender, rendering, js and advanced, and ordered by impact.
- Waterfall eliminationRules cover Promise.all for independent work, moving await into the branches that need it, starting promises early in API routes and streaming with Suspense.
- Bundle size rulesDirect imports instead of barrel files, next/dynamic for heavy components, loading analytics after hydration, conditional module loading and preload on hover or focus.
- Server-side performanceAuthenticating server actions, React.cache for per-request deduplication, LRU caching across requests, minimizing serialized props and non-blocking work with after().
- Re-render optimizationFifteen rules including memoized components, primitive effect dependencies, functional setState, lazy state initialization and no components defined inside components.
- Rendering rulesContent-visibility for long lists, hoisted static JSX, ternary conditionals, Activity for show and hide, and resource hints.
- JavaScript micro-optimizationsMap and Set lookups, combined iterations, early returns, hoisted RegExp, toSorted for immutability and idle-time work.
- Rule files with code pairsEach rule file explains why it matters and shows an incorrect and a correct code example.
- Compiled AGENTS.mdA generated AGENTS.md expands every rule into one document for reading in one place.
Frequently asked questions
What is the vercel-react-best-practices skill?
It is a skill in Vercel's vercel-labs/agent-skills repository. It holds 70 React and Next.js performance rules from Vercel Engineering in 8 categories, ordered by impact, so your AI agent writes and reviews components, data fetching and bundles with those rules in mind.
How do I install vercel-react-best-practices?
Clone github.com/vercel-labs/agent-skills and copy skills/react-best-practices into the folder your agent loads skills from. The repository README also shows a skills-CLI command for the whole repository, but copying the folder installs just this skill.
How many rules does the skill have?
SKILL.md states 70 rules across 8 categories, and the rules folder holds 70 rule files. The repository README still says 40 plus, so the SKILL.md count is the current one. Categories run from eliminating waterfalls to advanced patterns.
Which rules matter most?
The skill ranks eliminating waterfalls and bundle size optimization as critical, then server-side performance as high. Re-render and rendering rules are medium, and JavaScript micro-optimizations and advanced patterns are low. Start with the critical groups when reviewing code.
Does it only work with Next.js?
It targets React and Next.js. Some rules are Next.js specific, such as next/dynamic and after(), while others apply to any React app, such as re-render and state rules. For non-React stacks the rules do not apply.
Can I use vercel-react-best-practices with Cursor or Codex?
The repository describes itself as skills for AI coding agents in the Agent Skills format, without listing every supported tool. Copy the folder into the skills location of your agent and confirm the skill loads. See also web-design-guidelines from the same repository.
What license does the skill use?
The skill's frontmatter declares MIT. GitHub shows no license file for the repository itself. The 763.2K install figure on this page comes from a third-party skills listing, not from the repository, so treat it as a popularity signal only.