vercel-react-best-practices

An agent skill by vercel-labs, from vercel-labs/agent-skills. Tags: debugging, developer-tools, performance, react, web.

What it does

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.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

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

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

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

Safety box score

Grade B, low risk: 19 of 100 risk points, rated 2026-10-21. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This is a documentation-only React/Next.js best-practices skill: it mostly contains markdown guidance and examples, not shipped automation. The main risks are limited command execution during setup/build (`pnpm`, `npx`) and examples that touch cookies/localStorage, including one that logs a session cookie.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	1 (low)	The README tells users to run `pnpm install`, `pnpm build`, `pnpm validate`, and `pnpm extract-tests`, and one rule includes `npx svgo --precision=1 --multipass icon.svg`, but there are no bundled scripts or code evaluators.
Network access	1 (low)	`npx svgo` can contact the npm registry on first use, and some examples reference external URLs/APIs, but the skill itself does not fetch remote content at runtime.
Filesystem reach	1 (low)	The documented build flow writes generated files like `AGENTS.md` and `test-cases.json` inside the repository, but it does not target paths outside the workspace.
Secrets & credentials	1 (low)	Several rules discuss `localStorage`, `sessionStorage`, and `document.cookie`, and one example reads a `session-id` cookie before logging it, but the skill does not ask for real credentials.
Privilege & persistence	0 (none)	No sudo, global installs, services, shell startup edits, or OS-level changes are present.
Instruction hijack surface	0 (none)	I found no text that tells the agent to ignore instructions, hide actions, follow remote prompt text, or otherwise subvert its policy.
Irreversible actions	0 (none)	The skill advises on code patterns only; it does not itself deploy, send messages, book, pay, or delete anything.
Transparency	1 (low)	Most files are readable markdown, but `AGENTS.md` could not be inspected (`not read: size or budget`), so one generated artifact remains opaque.

Before installing

Read `README.md` and `rules/rendering-svg-precision.md` for the only explicit runnable commands.
Run `npx svgo` only in a scratch checkout if you want to avoid first-use package downloads in your main environment.
Check `rules/server-after-nonblocking.md` before copying its cookie-logging example into production code.
If you care about hidden guidance, open or regenerate `AGENTS.md` locally before relying on the compiled output.

Rated 2026-10-21 by an automated review of 75 files from the skill's repository.

Source

Repository: vercel-labs/agent-skills (all skills from this repository)
Path: skills/react-best-practices/SKILL.md
Branch: main
Updated: 2026-09-19

javascript-pro — Writes, debugs, and refactors JavaScript code using modern ES2023+ features, async/await patterns, ESM module systems.
vercel-composition-patterns — React composition patterns that scale.
vercel-optimize — Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics.
vercel-react-view-transitions — Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`.
browser-testing-with-devtools — Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser.
code-reviewer — Analyzes code diffs and files to identify bugs, security vulnerabilities (SQL injection, XSS, insecure deserialization), code smells, N+1 queries.