Vercel React Best Practices: Claude Code Skill & Setup

When to choose it

Prioritizing concrete React or Next.js performance changes from project source.

Choose it if: you want prioritized suggestions tied to source files.

Look elsewhere if: you need measured production performance diagnostics from this installation alone.

What the source describes

Rules cover asynchronous data fetching, server work and JavaScript shipped to the browser.
Before/after reference patterns support component and route review.

Requirements

Claude Code with Skill support.
Node.js 22.20.0+ for the reviewed skills CLI 1.7.0 and npm.
React or Next.js source files and the project’s existing validation tools.

A standalone Skill maintained by Vercel Engineering. Using it does not require Vercel hosting.

Install the focused Skill

Choose the intended project. Run the focused install below from this project. The reviewed skills CLI 1.7.0 requires Node.js 22.20.0+ and npm. Read the upstream files and review the CLI’s installation scope and symlink or copy prompt.
Check discovery. Confirm the Skill is listed for Claude Code in the same project.
Shell • setup check
```
npx skills list --agent claude-code
```
Use the metadata name. The installer ID is vercel-react-best-practices. Its repository directory is react-best-practices; these names are intentionally different.

Run this command from the intended project folder after reviewing the source. The skills CLI targets Claude Code and defaults to project scope. Review its scope and symlink or copy prompt; use --global only if you want a user-wide installation.

Shell • project Skill install

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

Installation and loading troubleshooting

How to use it

Describe the React/Next.js task and relevant source files. Natural task matching is documented; no invented package command is needed.

An original example for a bounded task. This request example is written by ClaudeStack; it is not a transcript of a tested session.

Request example

Review this Next.js route for serial data fetching and unnecessary client JavaScript. Propose the highest-impact changes first, explain how to measure them, and keep the initial review read-only.

The external skills CLI collects installation telemetry and makes public-repository security-audit requests. Its README documents DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 to disable both. ClaudeStack did not run this installer.

MIT is declared in the reviewed README and SKILL.md. No root LICENSE file was found and GitHub’s recognized-license field is null. The link below points to the declaration, not a nonexistent license file.

README and Skill rule counts differ; this guide intentionally makes no rule-count claim.

What to expect

The reviewed source describes these observations. ClaudeStack has not loaded or run this extension.

Specific recommendations for data fetching, bundle boundaries or rendering.
Proposed changes you can assess with the project’s own tests and measurements.

Self-check: Inspect cited files and check your installed framework version. Measure the affected route before and after any accepted change.

Troubleshooting

The installer cannot find react-best-practices

Use the SKILL.md name vercel-react-best-practices instead of its directory name.

A recommendation conflicts with the application

Check installed React/Next.js versions, project constraints and actual measurements. Treat the rule as guidance, not proof.

Disable or remove it

For a project installation, run npx skills remove vercel-react-best-practices --agent claude-code from the same project. Add --global only when removing a global installation.
Review any edits and generated artifacts separately; removing the Skill does not revert its work.

Limitations & considerations

This is guidance, not a profiler; no fixed performance improvement is promised.
Check framework versions and application constraints before applying a reference pattern.

Source & review record

Our description is based on public documentation and manifests available on 2026-10-05. Installation formats were checked against Claude Code and the relevant installer documentation. No extension code was executed: this is a source review, not a runtime compatibility test or security audit.

Repository last pushed at the time of review: 2026-08-28T13:36:31Z. This date does not prove that the extension works with a particular Claude Code release.

Usage guide sources

Upstream revision checked for this guide: 063bee94c3f4df8453406c830b0a7df0f2860278. Command names and behavior in this guide are documentation and registration-source findings, not runtime verification.

Vercel React Best Practices