React Best Practices

Review data fetching, rendering and bundle size in React and Next.js when building features or improving performance.

Engineeringvercel-labs/agent-skillsMITSources checked: 2026-10-21

See installation steps View original Skill

Features

Review data waterfalls, server fetching, client rendering and bundle size in order of impact.
Apply performance rules during reviews and refactoring to decide what to improve first.

When to use it

Useful for slow Next.js pages, excessive React renders, or checking fetching and bundling before release.

Before you start

Requires a React or Next.js project. This skill provides engineering guidance and does not replace performance measurements.

Usage example

Follow this illustrative workflow, replacing file names and goals with your own project details.

Improve a product listing’s initial load

What to prepare: A Next.js project, its product page and components, and an existing loading trace.
Workflow: Identify sequential requests and unnecessary client rendering, prioritize issues, then make a small change and compare under the same conditions.
Expected deliverables: A prioritized issue list, updated code, actual check results and any unverified areas.

Recommended prompts

Replace the bracketed placeholders, then paste into an AI tool with this skill installed. Prompts follow the interface language; copying preserves the full text and line breaks.

Use the vercel-react-best-practices skill to review [page path] in [project path]. Focus on request waterfalls, client rerenders and bundle size. Rank issues by impact with evidence, then make the smallest useful changes while preserving the interface and business behavior. Run the project’s existing checks and report actual results. Use measured performance figures only and label anything not measured.

Review the performance changes under the same environment. Compare loading behavior and build output, and check for extra requests, caching errors or interaction regressions. Separate verified improvements from assumptions and suggest the next most useful measurement.

Supported AI tools

Claude CodeTerminal in your project folder
CodexTerminal in your project folder
CursorTerminal in your project folder
Gemini CLITerminal in your project folder
OpenCodeTerminal in your project folder

These tools appear in the Skills CLI support list. Task results depend on the model, project and required runtime.

Installation

Requires Node.js 22.20 or later. The command selects this skill; follow the installer to confirm its location in the project.

Choose an AI tool

Run in: Terminal in your project folder

Install into the selected tool with Skills CLI. The original project also documents other installation methods.

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

Restart the tool or open a new session, then mention this skill when describing your task.

Check the official setup guide

Source and license

This guide summarizes the original skill definition, README and setup documentation. Models, accounts and external services are provided by their respective tools.

SKILL.md README License terms