# react-best-practices

> A Claude Code skill from Vercel Labs that audits React and Next.js code against 40+ rules across 8 categories — performance, accessibility, hooks, server components, rendering, state, patterns, and TypeScript — prioritized by impact.

**Use case**: Audit React / Next.js code against opinionated production rules

**Canonical URL**: https://agentcookbooks.com/skills/react-best-practices/

**Topics**: claude-code, skills, react, nextjs, code-review

**Trigger phrases**: "audit this React code", "review against React best practices", "check this Next.js component"

**Source**: [Vercel Labs](https://github.com/vercel-labs/agent-skills/tree/main/react-best-practices)

**License**: MIT

---

## What it does

`react-best-practices` is a Claude Code skill that walks code against an opinionated list of 40+ React and Next.js rules. The rules cover the categories that actually move a needle in production: performance (memoization, re-renders), hooks correctness, server-vs-client component boundaries, accessibility, rendering patterns, state management, and TypeScript usage.

When activated on a chunk of React code, it produces a list of issues ordered by impact — not alphabetically, not by file, by *which one will hurt your users most if you don't fix it*.

## When to use it

- Reviewing a PR before merge, especially in a codebase where reviews are getting rubber-stamped
- Onboarding into an existing React/Next.js project — you want a structured second pair of eyes
- Refactoring a component that's gone gnarly — get a prioritized list of what's actually wrong
- Pre-launch audit of a feature

When *not* to reach for it:

- Non-React code (the rules don't translate to Vue, Svelte, plain HTML)
- Tiny one-component changes — the overhead exceeds the value
- Code where the architecture is the problem, not the patterns. Audit-against-rules can't fix architectural drift; it just lists symptoms

## Install

Available in the [Vercel Labs agent-skills repo](https://github.com/vercel-labs/agent-skills). Follow the install path documented there for SKILL.md-format skills (typically copy into `.claude/skills/react-best-practices/`).

## What a session looks like

1. **You point the skill at a file or block of React/Next.js code.**
2. **The skill applies its 40+ rule checks** and groups findings into 8 categories.
3. **Output is prioritized**: high-impact issues (re-render storms, missing keys on lists, hydration mismatches) first; cosmetic issues (TypeScript style preferences) last.
4. **Each finding includes a brief why** and the canonical fix pattern.

The discipline that makes it work: prioritization by *production impact*, not by lint-style alphabetical ordering. You can stop reading at the first 5 items and have addressed the actual risk.

## Receipts

**Where it works well:**
- Catches `useEffect` misuse and unnecessary client components in Next.js — common cost-driving mistakes
- Surfaces accessibility regressions (missing aria-labels, keyboard traps) reliably
- The "prioritized by impact" framing produces a list you'd actually act on, not a noise wall

**Where it backfires:**
- On bleeding-edge React 19+ patterns or experimental features, some rules lag behind
- The skill can flag legitimate domain-specific patterns as anti-patterns; treat findings as signal, not gospel
- Doesn't substitute for performance profiling — it catches *patterns* that often hurt performance, not *measured* performance issues

**Pattern that works:** run it on diffs before review, not on whole files. Diff-scoped audits get usable signal-to-noise; whole-file audits drown in legacy.

## Source and attribution

From the [Vercel Labs agent-skills repository](https://github.com/vercel-labs/agent-skills/tree/main/react-best-practices). Maintained by Vercel Labs.

License: MIT. Install, adapt, redistribute with attribution.

For the canonical rule list and any updates, defer to the source repo.