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.

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

01Critical performance auditing for React and Next.js projects

02Bundle size reduction via dynamic imports and barrel file optimization

03Fine-grained re-render and JavaScript execution optimization

0416,171 GitHub stars

05Automated waterfall elimination through parallel fetching patterns

06Server-side performance tuning for App Router and Server Actions

Use Cases

01Performing automated code reviews to catch performance bottlenecks early

02Refactoring legacy Next.js pages to improve Core Web Vitals and load times

03Scaffolding new React components with built-in performance best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vercel-labs/agent-skills react-best-practices

For use in Claude.ai and ChatGPT

Download Skill