React Performance

A well-organized reference that pulls 70+ performance rules from Vercel's react-best-practices repo and sorts them by priority, from critical waterfall elimination down to advanced patterns. You get decision trees for things like when to Promise.all versus await sequentially, why barrel imports hurt bundle size, and how to authenticate Server Actions. Most useful when you're reviewing React or Next.js code and need quick answers on whether a pattern is worth fixing now or can wait. The priority index alone (waterfalls and bundle size are critical, re-render optimization is medium) saves you from bikeshedding micro-optimizations while missing the 200ms of sequential awaits sitting right there.

skills.sh installs: 903
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --skill react-performance --agent claude-code

Installs into .claude/skills of the current project.

Files

React Performance

Performance optimization patterns for React 18/19 and Next.js, adapted from Vercel Labs react-best-practices (MIT, v1.0.0). This skill organizes rules by priority and provides decision-tree guidance for active code review and refactoring.

When to Activate

Writing or reviewing React/Next.js code for performance
Diagnosing slow page loads, slow interactions, or high CPU on the client
Auditing bundle size or Lighthouse Core Web Vitals regressions
Removing waterfalls in Server Components / API routes
Reducing client-side re-renders
Optimizing long lists, animations, or hydration
Auditing optimization choices in PRs touching app/, pages/, components/, or data layers