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

0•

Herramientas para Desarrolladores

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.

Características Principales

01Bundle size reduction through dynamic imports and direct source mapping

02Prioritized performance audit of React and Next.js components

03Elimination of async waterfalls using Promise.all and Suspense

04Advanced caching strategies using React.cache and LRU caches

050 GitHub stars

06Micro-optimizations for JavaScript execution and DOM rendering performance

Casos de Uso

01Reviewing pull requests for performance regressions and inefficient rendering patterns

02Refactoring slow Next.js pages to improve Core Web Vitals and PageSpeed scores

03Architecting data-heavy React applications with efficient fetching and state management

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add carterdea/carterdea.com react-best-practices

For use in Claude.ai and ChatGPT

Download Skill