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.
Best for React/Next.js developersWorks with GitHubLow risk
⌘source
- author
@caorushizi- language
- TypeScript
★8.9kstars
768forks
Apr 22, 2026
✦overview.md
Key Features
- ·67 rules across 8 categories
- ·Prioritized by impact (CRITICAL to LOW)
- ·Covers waterfalls, bundle size, server/client fetching
- ·Rerender and caching optimization guidelines
- ·Includes SSR/SSG/ISR best practices
- ·Maintained by Vercel Engineering
Use Cases
- →Reviewing a pull request for React performance issues
- →Refactoring a slow Next.js page with waterfall requests
- →Optimizing bundle size for a production deployment
- →Implementing data fetching with SWR or server components
- →Reducing unnecessary re-renders in complex components
Best for
- ✓React/Next.js developers
- ✓performance audits
- ✓CI pipeline code reviews
Not ideal for
- !non-React frameworks
- !backend-only projects
- !small static sites
FAQs
name
vercel-react-best-practices
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.
license
MIT
metadata:{"author":"vercel","version":"1.0.0"}
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 67 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
$install
1-click copynpx skills add caorushizi/mediago --skill vercel-react-best-practicesSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.