CookiesForAI

vercel-react-best-practices

React Best Practices

React Best Practices is Vercel Engineering's agent skill of 70 performance rules for React and Next.js, ranked by impact, which the agent applies when it writes or reviews code.

Agent skill by Vercel Official · Updated

Install React Best Practices

Install this skill with the skills CLI

Terminal
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

Or install every Vercel skill at once

Terminal
npx skills add vercel-labs/agent-skills

Or paste this into your coding agent: Install the agent skill vercel-react-best-practices from github.com/vercel-labs/agent-skills. A skill can include scripts that run on your computer, so read its source first.

What React Best Practices does

React Best Practices is a performance guide for React and Next.js maintained by Vercel Engineering. It loads when an agent writes, reviews or refactors React components or Next.js pages, implements data fetching, or works on bundle size and load times. It holds 70 rules in eight categories, ordered by impact so the biggest problems come first.

The two critical categories in React Best Practices are request waterfalls and bundle size: start independent work in parallel with Promise.all(), move await into the branch that needs it, stream content with Suspense, import directly instead of through barrel files, and load heavy components with next/dynamic. The server rules include authenticating server actions like API routes, deduplicating work per request with React.cache(), and passing less data to client components.

Lower React Best Practices categories cover client data fetching with SWR, re-render optimization, rendering performance, JavaScript micro-optimizations and a few advanced patterns, such as deriving state during render instead of in effects, using a ternary instead of && for conditional rendering, and Set or Map for repeated lookups. Each rule has its own file in the rules folder with an explanation, an incorrect code example and a correct one, and AGENTS.md compiles every rule into one document.

When to use React Best Practices

  • You have slow Next.js pages and suspect data fetching waterfalls.
  • You have a JavaScript bundle that keeps growing and want to know what to split or defer.
  • You want an agent to review a React pull request for performance problems.
  • You are writing new React components and want them fast from the start.

When to pick something else

  • Your problem is component API design and boolean props: use React Composition Patterns.
  • You build a React Native or Expo app: use the React Native skill.

Which agents React Best Practices works in

Vercel documents React Best Practices for any AI coding agent that reads Agent Skills, installed with the skills CLI. The open skills CLI also installs it into 78 agents, including Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode (we listed it with the CLI on October 1, 2026). See where each agent looks for skills.

React Best Practices license

React Best Practices is published under MIT. The SKILL.md frontmatter says license: MIT. The vercel-labs/agent-skills repository has no LICENSE file and GitHub reports no license; its README ends with "License: MIT" (checked 2026-10-01). MIT lets you use, change and share the skill if you keep the copyright notice.

  • Claude API: Claude API is Anthropic's open-source agent skill for code that calls Claude: current model IDs and prices, guides for seven SDK languages plus cURL, and guided migrations to newer models. (179,326 repository stars on October 2, 2026)
  • Stripe best practices: stripe-best-practices is Stripe's own agent skill for integration decisions: it steers the agent to the right Stripe API for payments, subscriptions, Connect, tax and security, using current API and SDK versions. (1,852 repository stars on October 2, 2026)
  • React Composition Patterns: React Composition Patterns is Vercel's agent skill for React component APIs: compound components, lifted state and explicit variants instead of a growing list of boolean props. (31,813 repository stars on October 2, 2026)
  • React Native: React Native is Vercel's agent skill of React Native and Expo rules, ranked by impact: list performance, animations, native navigation and UI patterns for faster mobile apps. (31,813 repository stars on October 2, 2026)

More from Vercel

  • Deploy to Vercel: Deploy to Vercel is Vercel's agent skill for getting a project live: the agent checks how your project is set up, picks a deploy method and returns a preview link unless you ask for production. (31,813 repository stars on October 2, 2026)
  • React View Transitions: React View Transitions is Vercel's agent skill for animating route changes, shared elements and list reorders with React's ViewTransition component, in Next.js and other React apps. (31,813 repository stars on October 2, 2026)
  • Vercel CLI with Tokens: Vercel CLI with Tokens is Vercel's agent skill for running the Vercel CLI with an access token instead of vercel login: deploys, environment variables, logs and domains. (31,813 repository stars on October 2, 2026)
  • Vercel Optimize: Vercel Optimize is Vercel's agent skill that audits a deployed project from its production metrics and returns ranked, verified fixes to cut cost and speed up slow routes. (31,813 repository stars on October 2, 2026)

Lists that include vercel-react-best-practices