React Best Practices

by VercelOfficial32.3KMIT

70 React and Next.js performance rules from Vercel Engineering, ranked by impact: request waterfalls, bundle size, server components, re-renders. One reference file per rule.

$ npx skills add https://craftwork.design/skills/vercel-react-best-practices -a claude-code -y

Installs into .claude/skills/vercel-react-best-practices. Add -g for every project.

Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 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

More react & frameworks

Vue Best Practices
Vue 3 best practices: Composition API, script setup, TypeScript, reactivity and SSR, with more than twenty references.
vuejs-aiReact & frameworks2.9K
Angular Developer

React Best Practices

Vercel React Best Practices

When to Apply

Rule Categories by Priority

More react & frameworks

React Best Practices

Vercel React Best Practices

When to Apply

Rule Categories by Priority

More react & frameworks

Quick Reference

1. Eliminating Waterfalls (CRITICAL)

2. Bundle Size Optimization (CRITICAL)

3. Server-Side Performance (HIGH)

4. Client-Side Data Fetching (MEDIUM-HIGH)

5. Re-render Optimization (MEDIUM)

6. Rendering Performance (MEDIUM)

7. JavaScript Performance (LOW-MEDIUM)

8. Advanced Patterns (LOW)

How to Use

Full Compiled Document

Files

SKILL.md

Vercel React Best Practices

When to Apply

Rule Categories by Priority

More react & frameworks

SKILL.md

Vercel React Best Practices

When to Apply

Rule Categories by Priority

More react & frameworks

Quick Reference

1. Eliminating Waterfalls (CRITICAL)

2. Bundle Size Optimization (CRITICAL)

3. Server-Side Performance (HIGH)

4. Client-Side Data Fetching (MEDIUM-HIGH)

5. Re-render Optimization (MEDIUM)

6. Rendering Performance (MEDIUM)

7. JavaScript Performance (LOW-MEDIUM)

8. Advanced Patterns (LOW)

How to Use

Full Compiled Document

Files