Is this skill suitable for existing React projects?

Absolutely. It is designed to be used during code reviews and refactoring tasks to bring existing codebases up to modern performance standards.

How does this skill help with Next.js bundle sizes?

It identifies performance-draining patterns like barrel imports and suggests code splitting via next/dynamic and conditional module loading.

Can this skill fix data-fetching waterfalls?

Yes, it provides specific triggers for implementing parallel fetching with Promise.all() and using Suspense boundaries to stream content effectively.

What is the Vercel React Best Practices skill?

It is a specialized Claude Code skill that provides 45 prioritized rules for optimizing React and Next.js performance, based on Vercel's internal engineering guidelines.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: demostheneslld

bydemostheneslld

•

Developer Tools

Optimizes React and Next.js application performance using Vercel Engineering's authoritative 45-rule optimization framework.

About

This skill integrates Vercel's high-performance engineering standards directly into your development workflow. It provides 45 specialized rules across eight critical categories, including waterfall elimination, bundle size optimization, and server-side performance. Designed for both React Client and Server Components, this skill helps developers identify and fix performance bottlenecks such as inefficient data fetching, unnecessary re-renders, and bloated bundle sizes. By applying these industry-leading patterns during code generation or refactoring, you ensure your Next.js applications achieve optimal Core Web Vitals and runtime efficiency.

Key Features

2 GitHub stars
Optimizes server-side execution through React.cache() and per-request deduplication.
Reduces bundle size by identifying barrel import issues and implementing dynamic loading.
Improves rendering performance with content-visibility and SVG precision optimization.
Eliminates data-fetching waterfalls using parallelization and Suspense streaming.
Minimizes client-side re-renders using advanced memoization and state-reading strategies.

Use Cases

Refactoring Next.js pages to improve Core Web Vitals and PageSpeed Insights scores.
Implementing efficient server-side data fetching patterns in App Router applications.
Auditing complex React component trees for unnecessary re-renders and JS execution overhead.

About

Key Features

2 GitHub stars
Optimizes server-side execution through React.cache() and per-request deduplication.
Reduces bundle size by identifying barrel import issues and implementing dynamic loading.
Improves rendering performance with content-visibility and SVG precision optimization.
Eliminates data-fetching waterfalls using parallelization and Suspense streaming.
Minimizes client-side re-renders using advanced memoization and state-reading strategies.

Use Cases

Refactoring Next.js pages to improve Core Web Vitals and PageSpeed Insights scores.
Implementing efficient server-side data fetching patterns in App Router applications.
Auditing complex React component trees for unnecessary re-renders and JS execution overhead.