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.

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

01Eliminate asynchronous waterfalls with parallel fetching and Suspense patterns

02Enhance server-side performance with React caching and serialization strategies

03Reduce bundle size via dynamic imports and barrel file optimization

041 GitHub stars

05Minimize client-side re-renders using memoization and stable callback patterns

06Optimize JavaScript execution through efficient DOM manipulation and loop handling

Use Cases

01Conducting performance-focused code reviews for enterprise React applications

02Implementing efficient data fetching strategies in complex, data-heavy dashboards

03Refactoring slow Next.js pages to improve page load speed and Core Web Vitals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zerdos/spike-land-nextjs vercel-react-best-practices

For use in Claude.ai and ChatGPT

Key Features

01Eliminate asynchronous waterfalls with parallel fetching and Suspense patterns

02Enhance server-side performance with React caching and serialization strategies

03Reduce bundle size via dynamic imports and barrel file optimization

041 GitHub stars

05Minimize client-side re-renders using memoization and stable callback patterns

06Optimize JavaScript execution through efficient DOM manipulation and loop handling

Use Cases

01Conducting performance-focused code reviews for enterprise React applications

02Implementing efficient data fetching strategies in complex, data-heavy dashboards

03Refactoring slow Next.js pages to improve page load speed and Core Web Vitals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zerdos/spike-land-nextjs vercel-react-best-practices

For use in Claude.ai and ChatGPT