Does it provide code examples?

Yes, the skill references detailed rule files that contain both incorrect and correct code examples to guide the refactoring process.

Can I use this for existing projects?

Absolutely. The skill is designed for both writing new code and refactoring legacy React codebases to identify and fix performance bottlenecks.

Is this skill compatible with Next.js?

Yes, it includes specialized optimizations for Next.js features such as Server Components, API routes, dynamic imports, and the App Router.

What is the priority of the optimization rules?

Rules are prioritized from critical (waterfalls and bundle size) to low (advanced patterns), allowing the AI to focus on changes with the highest performance impact first.

How does this skill improve React performance?

It applies 45 specific rules focused on eliminating waterfalls, reducing bundle sizes, and optimizing re-renders based on Vercel's expert guidelines for high-performance applications.

React Best Practices & Performance

Name: React Best Practices & Performance
Author: sickn33

bysickn33

•

31,722

•

Herramientas para Desarrolladores

Optimizes React and Next.js applications using 45 Vercel-maintained rules to improve performance, bundle size, and rendering efficiency.

This skill integrates Vercel's comprehensive React performance guide directly into Claude Code, providing 45 prioritized rules across eight critical categories including waterfall elimination, bundle size optimization, and server-side performance. It acts as an automated architectural consultant, assisting developers during the creation of new components, data fetching implementation, and code reviews. By identifying bottlenecks and suggesting optimized patterns—such as parallel fetching, memoization, and dynamic imports—the skill ensures your React and Next.js applications meet modern performance standards and Core Web Vital requirements.

Características Principales

01Reduces bundle sizes via dynamic imports, conditional loading, and barrel file elimination.

02Minimizes client-side re-renders through memoization and stable dependency management.

0331,722 GitHub stars

04Optimizes server-side performance using React.cache and per-request deduplication.

05Improves rendering efficiency using content-visibility and hoisted JSX patterns.

06Eliminates request waterfalls with parallel data fetching and Suspense strategies.

Casos de Uso

01Implementing complex data fetching logic that avoids sequential performance bottlenecks (waterfalls).

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

03Conducting automated code reviews to ensure new React components follow industry-standard best practices.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills react-best-practices

For use in Claude.ai and ChatGPT

Características Principales

01Reduces bundle sizes via dynamic imports, conditional loading, and barrel file elimination.

02Minimizes client-side re-renders through memoization and stable dependency management.

0331,722 GitHub stars

04Optimizes server-side performance using React.cache and per-request deduplication.

05Improves rendering efficiency using content-visibility and hoisted JSX patterns.

06Eliminates request waterfalls with parallel data fetching and Suspense strategies.

Casos de Uso

01Implementing complex data fetching logic that avoids sequential performance bottlenecks (waterfalls).

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

03Conducting automated code reviews to ensure new React components follow industry-standard best practices.