How does this skill help with Next.js App Router performance?

It provides rules for server-side caching, minimizing client-side serialization, and using React Suspense to eliminate data fetching waterfalls.

What is the React Best Practices skill?

It is a specialized Claude Code capability that provides Vercel-engineered guidelines to optimize the performance, bundle size, and rendering efficiency of React and Next.js codebases.

Does it support React re-render optimization?

Absolutely. It identifies unnecessary re-renders and suggests solutions like memoization, stable callbacks, and deferred state reads to keep your UI responsive.

Can this skill help reduce my application's bundle size?

Yes, it includes specific rules for eliminating barrel imports, implementing next/dynamic imports, and deferring non-critical third-party scripts.

React Performance Best Practices

Name: React Performance Best Practices
Author: Brite-Nites

byBrite-Nites

0•

设计工具

Optimizes React and Next.js applications using Vercel Engineering's production-proven performance guidelines and automated refactoring patterns.

This skill integrates Vercel's comprehensive performance optimization guide directly into Claude, providing 45 specialized rules for building high-performance React and Next.js applications. It helps developers eliminate async waterfalls, optimize bundle sizes, and improve server-side rendering efficiency by identifying bottlenecks and suggesting specific code improvements. Whether you are refactoring legacy components or architecting new Next.js pages, this skill ensures your code adheres to modern performance standards used by industry leaders for optimal Core Web Vitals.

主要功能

01Optimizes bundle sizes by identifying heavy imports and recommending dynamic loading

020 GitHub stars

03Reduces unnecessary client-side re-renders using memoization and stable state patterns

04Improves server-side performance through per-request deduplication and caching

05Eliminates async waterfalls using parallel execution and Suspense boundaries

06Enhances JavaScript execution speed with optimized loops and data structure lookups

使用场景

01Performing automated code reviews to ensure Next.js pages follow Vercel performance standards

02Optimizing data fetching strategies in complex, data-heavy dashboard applications

03Refactoring legacy React components to improve Core Web Vitals and load times

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brite-nites/brite-claude-plugins react-best-practices

For use in Claude.ai and ChatGPT

主要功能

01Optimizes bundle sizes by identifying heavy imports and recommending dynamic loading

020 GitHub stars

03Reduces unnecessary client-side re-renders using memoization and stable state patterns

04Improves server-side performance through per-request deduplication and caching

05Eliminates async waterfalls using parallel execution and Suspense boundaries

06Enhances JavaScript execution speed with optimized loops and data structure lookups

使用场景

01Performing automated code reviews to ensure Next.js pages follow Vercel performance standards

02Optimizing data fetching strategies in complex, data-heavy dashboard applications

03Refactoring legacy React components to improve Core Web Vitals and load times