When does Claude apply these best practices?

The skill triggers automatically during tasks involving React component creation, data fetching implementation, or any general performance improvement requests.

How does this skill improve Next.js performance?

It identifies and fixes performance issues like request waterfalls, large bundle sizes from barrel imports, and inefficient server-side data serialization.

Does it help with React re-rendering issues?

Yes, the skill includes a dedicated category of rules for re-render optimization, covering memoization, state derivation, and functional setState patterns.

Is this skill compatible with the Next.js App Router?

Absolutely. It contains specific guidelines for Server Components, Server Actions, and modern Next.js APIs like after() and Suspense.

What is the Vercel React Best Practices skill?

It is a specialized capability for Claude Code that applies Vercel's official engineering guidelines to help developers write, review, and refactor high-performance React and Next.js code.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: vercel-labs

byvercel-labs

•

16,171

Productivity & Workflow

Optimizes React and Next.js applications using Vercel Engineering's performance-focused guidelines and refactoring patterns.

About

The Vercel React Best Practices skill equips Claude with 57 high-impact rules designed to audit and refactor React and Next.js code for peak performance. Maintained by Vercel Engineering, this skill focuses on critical optimizations such as eliminating data-fetching waterfalls, reducing bundle sizes, and streamlining server-side rendering. It provides automated, domain-specific guidance for developers building modern web applications, ensuring that every component and page adheres to industry-leading standards for speed, efficiency, and user experience.

Key Features

Critical performance auditing for React and Next.js projects
Bundle size reduction via dynamic imports and barrel file optimization
Fine-grained re-render and JavaScript execution optimization
16,171 GitHub stars
Automated waterfall elimination through parallel fetching patterns
Server-side performance tuning for App Router and Server Actions

Use Cases

Performing automated code reviews to catch performance bottlenecks early
Refactoring legacy Next.js pages to improve Core Web Vitals and load times
Scaffolding new React components with built-in performance best practices

About

Key Features

Critical performance auditing for React and Next.js projects
Bundle size reduction via dynamic imports and barrel file optimization
Fine-grained re-render and JavaScript execution optimization
16,171 GitHub stars
Automated waterfall elimination through parallel fetching patterns
Server-side performance tuning for App Router and Server Actions

Use Cases

Performing automated code reviews to catch performance bottlenecks early
Refactoring legacy Next.js pages to improve Core Web Vitals and load times
Scaffolding new React components with built-in performance best practices