Agent skill · Vercel

React Best Practices skill for Claude Code, Codex and Cursor

Vercel's performance rules for React and Next.js code: rendering, data fetching, bundle size.

Officialname: vercel-react-best-practices★ 33k (repo)pushed 2026-10-14MITSKILL.md on GitHubchecked 2026-11-07

What it does, in the publisher's words

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.

The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.

Install React Best Practices

The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs

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

Copy the skill folder into ~/.claude/skills (all projects) or .claude/skills (this repo). Claude Code picks it up without a restart. docs

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices -a claude-code

# or by hand:
git clone --depth 1 https://github.com/vercel-labs/agent-skills.git /tmp/react-best-practices-src
cp -r /tmp/react-best-practices-src/skills/react-best-practices ~/.claude/skills/vercel-react-best-practices

Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs

git clone --depth 1 https://github.com/vercel-labs/agent-skills.git /tmp/react-best-practices-src
cp -r /tmp/react-best-practices-src/skills/react-best-practices ./vercel-react-best-practices
zip -r vercel-react-best-practices.zip vercel-react-best-practices

Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs

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

gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs

gh skill install vercel-labs/agent-skills vercel-react-best-practices

Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs

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

Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs

gemini skills install https://github.com/vercel-labs/agent-skills.git --path skills/react-best-practices

OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs

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

Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs

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

Works with

Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.

What's in the SKILL.md

13 sections

When to Apply
Rule Categories by Priority
Quick Reference
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)
How to Use
Full Compiled Document

Bundled files

AGENTS.md
README.md
metadata.json
rules/_sections.md
rules/_template.md
rules/advanced-effect-event-deps.md
rules/advanced-event-handler-refs.md
rules/advanced-init-once.md
rules/advanced-use-latest.md
rules/async-api-routes.md
rules/async-cheap-condition-before-await.md
rules/async-defer-await.md
rules/async-dependencies.md
rules/async-parallel.md
rules/async-suspense-boundaries.md
rules/bundle-analyzable-paths.md
rules/bundle-barrel-imports.md
rules/bundle-conditional.md
rules/bundle-defer-third-party.md
rules/bundle-dynamic-imports.md
+ 55 more

Loaded only when the instructions point to them.

Facts

Skill name: vercel-react-best-practices
Publisher: Vercel (official)
Repo: vercel-labs/agent-skills
License: MIT
Version: 1.0.0
SKILL.md size: 891 words, 141 lines
Bundled files: 75, 59 docs
Repo stars: 33k (as of 2026-10-24)
SKILL.md checked: 2026-11-07

More skills from vercel-labs/agent-skills

Deploy to Vercel: Deploys the current project to Vercel and returns preview or production URLs.
React Composition Patterns: Refactors prop-heavy React components into compound components and other reusable patterns.
React Native Best Practices (Vercel): Performance and structure advice for React Native and Expo apps: lists, animations, native modules.
React View Transitions: Adds page and element animations using React's View Transition API and CSS pseudo-elements.
Web Design Guidelines: Audits UI code against a checklist of interface, accessibility and UX guidelines.

Related frontend & design skills

Frontend Design · Anthropic
Web Artifacts Builder · Anthropic
shadcn/ui · shadcn
Web Performance Audit · Cloudflare
Figma Code Connect · Figma
Figma Design to Code · Figma
Figma Generate Design · Figma
Figma Use · Figma

FAQ

What does the vercel-react-best-practices skill do?+

Vercel's performance rules for React and Next.js code: rendering, data fetching, bundle size. In its own SKILL.md, Vercel describes it as: "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."

How do I install the vercel-react-best-practices skill?+

Run npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/vercel-react-best-practices/SKILL.md; in Codex and Cursor in .agents/skills/vercel-react-best-practices/.

Does React Best Practices work in Codex, Cursor and Copilot, or only Claude?+

It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more.

Who maintains React Best Practices?+

Vercel, the company or project behind it, in the vercel-labs/agent-skills repo on GitHub, last pushed 2026-10-14. License: MIT.

Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers