Does it cover both client and server components?

Yes, it includes specific guidelines for Server Components, API routes, and client-side re-render optimization to ensure a balanced approach to performance.

What are the Vercel React Best Practices?

It is a comprehensive set of 45 rules categorized by impact, covering everything from async waterfalls to bundle size and rendering efficiency for React and Next.js.

Can I use this for refactoring existing React projects?

Yes, this skill is specifically designed to help review and refactor existing code to ensure it follows modern performance standards.

What is the priority of the optimization rules?

The rules are prioritized from Critical (eliminating waterfalls and bundle size) to Low (advanced patterns), allowing developers to focus on high-impact changes first.

How does this skill improve Next.js performance?

It identifies and provides fixes for performance bottlenecks such as sequential data fetching (waterfalls), unoptimized bundle sizes, and inefficient server-side rendering patterns.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: zerdos

byzerdos

•

Developer Tools

Optimizes React and Next.js applications using industry-leading performance guidelines from Vercel Engineering.

About

This skill equips Claude with 45 comprehensive performance optimization rules specifically tailored for React and Next.js development. Based on Vercel Engineering standards, it provides actionable guidance for eliminating async waterfalls, reducing bundle sizes, and optimizing both server and client-side rendering. Whether you are building new components, implementing complex data fetching, or refactoring legacy code, this skill ensures your application adheres to the highest performance patterns used by the creators of Next.js to improve Core Web Vitals and user experience.

Key Features

Eliminate asynchronous waterfalls with parallel fetching and Suspense patterns
Enhance server-side performance with React caching and serialization strategies
Reduce bundle size via dynamic imports and barrel file optimization
1 GitHub stars
Minimize client-side re-renders using memoization and stable callback patterns
Optimize JavaScript execution through efficient DOM manipulation and loop handling

Use Cases

Conducting performance-focused code reviews for enterprise React applications
Implementing efficient data fetching strategies in complex, data-heavy dashboards
Refactoring slow Next.js pages to improve page load speed and Core Web Vitals

About

Key Features

Eliminate asynchronous waterfalls with parallel fetching and Suspense patterns
Enhance server-side performance with React caching and serialization strategies
Reduce bundle size via dynamic imports and barrel file optimization
1 GitHub stars
Minimize client-side re-renders using memoization and stable callback patterns
Optimize JavaScript execution through efficient DOM manipulation and loop handling

Use Cases

Conducting performance-focused code reviews for enterprise React applications
Implementing efficient data fetching strategies in complex, data-heavy dashboards
Refactoring slow Next.js pages to improve page load speed and Core Web Vitals