🔗 View on GitHub: vercel-labs/agent-skills/packages/react-best-practices-build
🚀 Quick Installation
React and Next.js performance optimization guidelines from Vercel Engineering.
npx
npx skills add vercel-labs/agent-skills --skill react-best-practices-buildWhat It Does
Provides 40+ performance rules across 8 categories, prioritized by impact. Use this skill when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Optimizing bundle size or load times
Performance Categories
| Category | Priority | Focus |
|---|---|---|
| Eliminating Waterfalls | 🔴 Critical | Parallel data fetching, avoiding request chains |
| Bundle Size | 🔴 Critical | Code splitting, tree shaking, dependency optimization |
| Server-Side Performance | 🟠 High | SSR, streaming, edge caching |
| Client-Side Fetching | 🟡 Medium-High | SWR, React Query patterns, caching strategies |
| Re-render Optimization | 🟡 Medium | memo, useMemo, useCallback best practices |
| Rendering Performance | 🟡 Medium | Virtualization, list optimization |
| JS Micro-optimizations | 🟢 Low-Medium | Small runtime optimizations |
Example Use Cases
"Review this React component for performance issues"
"Help me optimize this Next.js page"
"Check if I'm fetching data efficiently"
"Optimize my bundle size"Part of Vercel Agent Skills
This skill is part of the vercel-labs/agent-skills collection — Vercel's official agent skills for AI coding assistants.
