Does it cover both client and server components?

Yes, it includes specific guidelines for React Server Components (RSC) and client-side rendering patterns, including hydration mismatch prevention.

What are the highest priority optimizations this skill handles?

The skill prioritizes eliminating network waterfalls and bundle size optimization as critical, followed by high-impact server-side performance improvements.

How does this skill improve Next.js performance?

It applies specific rules to eliminate async waterfalls, optimize bundle sizes via dynamic imports, and implement server-side caching strategies based on Vercel Engineering standards.

Can I use this for existing React projects?

Yes, it is specifically designed for both writing new components and refactoring existing code to meet modern performance benchmarks.

React Performance Best Practices

Name: React Performance Best Practices
Author: carterdea

bycarterdea

開発者ツール

Optimizes React and Next.js applications using industry-leading performance patterns and Vercel Engineering guidelines.

概要

This skill empowers Claude to act as a performance expert for React and Next.js projects, applying over 40 prioritized rules derived from Vercel Engineering practices. It identifies and resolves critical performance bottlenecks such as network waterfalls and bloated bundle sizes while providing guidance on server-side rendering, client-side data fetching, and efficient DOM management. Whether you are writing new components or refactoring legacy code, this skill ensures your frontend architecture follows the most impactful optimization patterns available.

主な機能

Bundle size reduction through dynamic imports and direct source mapping
Prioritized performance audit of React and Next.js components
Elimination of async waterfalls using Promise.all and Suspense
Advanced caching strategies using React.cache and LRU caches
0 GitHub stars
Micro-optimizations for JavaScript execution and DOM rendering performance

ユースケース

Reviewing pull requests for performance regressions and inefficient rendering patterns
Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores
Architecting data-heavy React applications with efficient fetching and state management

概要

主な機能

Bundle size reduction through dynamic imports and direct source mapping
Prioritized performance audit of React and Next.js components
Elimination of async waterfalls using Promise.all and Suspense
Advanced caching strategies using React.cache and LRU caches
0 GitHub stars
Micro-optimizations for JavaScript execution and DOM rendering performance

ユースケース

Reviewing pull requests for performance regressions and inefficient rendering patterns
Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores
Architecting data-heavy React applications with efficient fetching and state management