Can it help with Next.js App Router features?

Yes, it includes specific guidelines for Next.js pages, server components, and data fetching patterns like React.cache() and the after() function.

How does this skill improve React performance?

It applies 45 Vercel-vetted rules to optimize data fetching, bundle sizes, and rendering cycles within your React code automatically.

Is it suitable for refactoring existing projects?

Absolutely, it is designed to review and refactor current codebases to eliminate bottlenecks like network waterfalls and expensive re-renders.

Does it handle third-party library optimization?

Yes, it provides rules for deferring third-party scripts and optimizing heavy component loading via next/dynamic imports.

React Performance Best Practices

Name: React Performance Best Practices
Author: rohunj

byrohunj

•

212

Developer Tools

Optimizes React and Next.js applications using 45 performance-focused rules curated by Vercel Engineering.

About

This skill integrates Vercel Engineering's comprehensive performance guidelines into Claude Code, enabling automated refactoring and code generation for React and Next.js. It covers critical areas such as eliminating network waterfalls, optimizing bundle sizes, and improving server-side rendering efficiency. By applying 45 prioritized rules across categories like data fetching and re-render optimization, the skill helps developers identify bottlenecks and implement advanced patterns like Suspense, React.cache, and dynamic imports to ensure production-grade web performance.

Key Features

Minimizes client-side re-renders using memoization and stable callbacks
Enhances server-side performance with React.cache and non-blocking operations
212 GitHub stars
Reduces bundle size through dynamic imports and barrel file optimization
Implements rendering optimizations like content-visibility and hoisted JSX
Eliminates network waterfalls using async-parallel and Suspense boundaries

Use Cases

Automating performance-focused code reviews for Next.js Pull Requests
Refactoring legacy React components for better Lighthouse scores and faster load times
Generating high-performance boilerplate for data-heavy dashboard pages

About

Key Features

Minimizes client-side re-renders using memoization and stable callbacks
Enhances server-side performance with React.cache and non-blocking operations
212 GitHub stars
Reduces bundle size through dynamic imports and barrel file optimization
Implements rendering optimizations like content-visibility and hoisted JSX
Eliminates network waterfalls using async-parallel and Suspense boundaries

Use Cases

Automating performance-focused code reviews for Next.js Pull Requests
Refactoring legacy React components for better Lighthouse scores and faster load times
Generating high-performance boilerplate for data-heavy dashboard pages