Can this skill help with React re-rendering issues?

Yes, it includes specific rules for memoization, stabilizing hook dependencies, and optimizing state updates to prevent unnecessary component cycles.

When should I trigger the React Best Practices skill?

You should use it when writing new UI components, reviewing code for performance bottlenecks, or refactoring data-fetching logic in React or Next.js.

Does it support bundle size reduction?

Absolutely. It provides specific guidance on avoiding barrel imports, using next/dynamic for heavy components, and deferring non-critical third-party scripts.

How does this skill improve Next.js performance?

It applies Vercel's engineering standards to eliminate network waterfalls, optimize bundle sizes via dynamic imports, and implement efficient server-side caching strategies.

Is this skill based on official Vercel documentation?

Yes, it is built upon the comprehensive guidelines and 45 distinct rules maintained by the Vercel Engineering team for high-performance React applications.

React Performance Best Practices

Name: React Performance Best Practices
Author: Brite-Nites

byBrite-Nites

0•

Design Tools

Optimizes React and Next.js applications using Vercel Engineering's performance-focused coding standards and optimization rules.

This skill integrates Vercel Engineering's comprehensive performance guidelines directly into your development workflow. It helps developers identify and resolve critical performance bottlenecks by applying 45 specialized rules across eight categories, including waterfall elimination, bundle size optimization, and server-side execution. Whether you are refactoring legacy React components or building new Next.js pages, this skill provides actionable patterns for data fetching, memoization, and rendering efficiency to ensure your application meets modern performance benchmarks and Lighthouse standards.

Key Features

01Minimizes client-side re-renders through advanced memoization and state management

02Reduces bundle size by managing barrel imports and implementing dynamic loading

03Enhances rendering speed via SVG precision adjustments and content-visibility rules

04Eliminates network waterfalls with parallel data fetching and Suspense patterns

05Optimizes server-side performance using React cache and non-blocking operations

060 GitHub stars

Use Cases

01Auditing React components for unnecessary re-renders and inefficient state updates

02Implementing standardized data-fetching patterns across large-scale frontend teams

03Refactoring Next.js App Router projects to improve Core Web Vitals and performance scores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill