React and Next.js performance optimization guidelines from Vercel Engineering. Use 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.
87
88%
Does it follow best practices?
Impact
77%
1.24xAverage score across 3 eval scenarios
Passed
No known issues
Bundle size optimization with dynamic imports
No barrel icon imports
0%
100%
Direct path icon imports OR optimizePackageImports
100%
100%
Dynamic import for heavy component
100%
100%
Heavy component has ssr:false
100%
100%
Analytics deferred
100%
100%
Analytics has ssr:false
100%
100%
Preload on hover or focus
0%
0%
SSR window guard in preload
0%
0%
Conditional module loading
100%
70%
Loading fallback provided
100%
100%
Async waterfall elimination and RSC data fetching
Promise.all for independent fetches
100%
100%
Early promise start in API route
20%
20%
Parallel RSC composition
30%
100%
Synchronous page shell
0%
0%
React.cache() used
100%
100%
React.cache() with primitive args
100%
100%
after() for non-blocking side effects
16%
100%
Minimal RSC props
80%
100%
No sequential independent awaits
100%
100%
Suspense boundaries used
0%
100%
Client-side state management and localStorage optimization
SWR for data fetching
0%
100%
localStorage version prefix
0%
0%
localStorage try-catch
100%
0%
Minimal localStorage fields
0%
0%
Functional setState in callbacks
100%
100%
No stale state in useCallback
100%
100%
toSorted() for immutable sort
0%
100%
Passive scroll/touch listeners
100%
100%
Deferred state reads in callbacks
100%
100%
Map or Set for lookups
100%
100%
Lazy state initialization
100%
100%
c033769
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.