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.
This entry summarizes the public skill for discovery. Prefer the upstream SKILL.md for the full instruction text (we do not paste restricted or lengthy proprietary prompt bodies).
Install & usage
skills CLI (works across many agents)
npx skills add vercel-labs/agent-skills --skill react-best-practices
# or install the whole package:
npx skills add vercel-labs/agent-skills
Compatible paths vary by agent (Claude Code, Codex, Cursor, etc.). Prefer the skills CLI so manifests land in the right directory.
Best for
React/Next.js performance-oriented implementation reviews.
Hands-on test
- test_level: fully-tested
- Ran: yes
- When: 2026-11-01T01:20:00+08:00 (Asia/Shanghai)
- Result: Refactored a sequential await waterfall into Promise.all for independent fetches using skill rule set (~75 md files).
- Gotchas: Rules are numerous — apply the relevant eliminating-waterfalls/bundle rules, not the whole tree at once.
Money-saving tip
Skill is free (MIT). Deploy previews on Vercel free/hobby where possible; use vercel-optimize skill before buying higher compute.
Source & license
- source_repo: vercel-labs/agent-skills
- Source: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices
- License: MIT — https://github.com/vercel-labs/agent-skills/blob/main/README.md
- Restrictions: MIT. Follow Vercel ToS for deployments; tokens must stay secret.