Vercel React Best Practices for Claude Code: Review Next.js Performance
Vercel's React skill prioritizes common Next.js performance problems, including unnecessary request waterfalls, oversized client bundles, and avoidable rerenders.
中文Setup for Claude Code
Claude Code with local source access and the full skill directory, including the rules and compiled guide. A small Next.js fixture is enough for code review.
- Copy skills/react-best-practices into .claude/skills/vercel-react-best-practices/ from the pinned Vercel commit.
- Keep its rules directory and AGENTS.md next to SKILL.md. Open Claude Code from the project root.
- Invoke /vercel-react-best-practices and give it a specific source file and performance concern.
Example task
In a scratch Next.js page, await loadProducts() and then independently await loadCategories(). Tell the reviewer the calls do not use one another's results. Ask for a one-file review without editing.Expected result
The response calls out the sequential wait and suggests starting both calls together. It also checks that the requests really are independent.
Upstream documentation
Original SKILL.md on GitHub · MIT license · Source reviewed
Frequently asked question
Is a profiler required to use the rules?
The example is source review. The skill can propose a change, which you can then measure under the application's normal profiling setup.