Can it help with React re-rendering issues?

Yes, it identifies expensive work and suggests memoization, stable callbacks, and derived state patterns to minimize unnecessary component updates.

Does it support the Next.js App Router?

Absolutely. It includes specific guidelines for Server Components, data fetching serialization, and parallel fetching patterns tailored for modern Next.js architectures.

How are the performance rules prioritized?

Rules are categorized into 8 levels of impact, ranging from critical fixes like eliminating waterfalls and bundle optimization to lower-level JavaScript execution improvements.

How does this skill improve Next.js performance?

It applies 45 specific rules including waterfall elimination, bundle size reduction, and server-side caching to ensure your application meets optimal performance benchmarks.

React & Next.js Performance Best Practices

Name: React & Next.js Performance Best Practices
Author: claudiodearaujo

byclaudiodearaujo

•

Design Tools

Optimizes React and Next.js applications using Vercel Engineering performance guidelines to eliminate bottlenecks and reduce bundle sizes.

This skill implements a comprehensive suite of 45 performance optimization rules curated by Vercel Engineering specifically for React and Next.js development. It provides automated guidance for eliminating request waterfalls, optimizing bundle sizes through dynamic imports, and enhancing server-side performance. Whether refactoring legacy code or building new features, this skill ensures your application follows industry-leading patterns for rendering efficiency, data fetching, and JavaScript execution speed to improve Core Web Vitals.

Key Features

01Enhances server-side performance with request deduplication and serialization limits.

02Improves rendering speed via content-visibility and optimized SVG handling.

031 GitHub stars

04Reduces unnecessary React re-renders using memoization and stable callback patterns.

05Optimizes JavaScript bundle sizes through dynamic imports and barrel file management.

06Eliminates asynchronous request waterfalls using parallel fetching and Suspense boundaries.

Use Cases

01Refactoring complex Next.js pages to improve Core Web Vitals and load times.

02Reviewing React component code for inefficient re-rendering and expensive logic.

03Implementing high-performance data fetching strategies in Server and Client components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro react-best-practices

For use in Claude.ai and ChatGPT

Download Skill