vercel-react-best-practices
Official sourceVercel Engineering's 70 React/Next.js performance rules across 8 priority categories—waterfalls, bundle size, server-side, re-renders—for writing, reviewing, and refactoring code.
Source: Vercel Labs
At a glance
Verified source- Best for
- Writing or reviewing React/Next.js code for performance
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Eliminating data-fetch waterfalls and cutting bundle size
- Source
- vercel-labs/agent-skills
01 / Understand the skill
About vercel-react-best-practices
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.
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.
Read full description
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.
02 / Confirm the fit
Use vercel-react-best-practices when you need to
- Writing or reviewing React/Next.js code for performance
- Eliminating data-fetch waterfalls and cutting bundle size
- Optimizing server-side rendering and re-renders
- Refactoring with prioritized, impact-ranked rules
03 / See the workflow
How vercel-react-best-practices works
- 01Install: npx skills add https://github.com/vercel-labs/agent-skills --skill react-best-practices
- 02Try: Review this Next.js page for waterfalls and bundle-size issues.
- 03Get: Specific rule-backed fixes with correct/incorrect examples per category.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Writing or reviewing React/Next.js code for performance
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by Vercel Labs
Ready to add vercel-react-best-practices?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/vercel-labs/agent-skills --skill react-best-practices
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.
Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.
Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.
Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.