What are 'waterfalls' in React apps?

Waterfalls occur when async operations run sequentially instead of in parallel; this skill helps you use Promise.all and other techniques to fix them.

How does this skill help with Next.js performance?

It provides specific implementation patterns for React Server Components (RSC), dynamic imports, and strategic Suspense boundaries to maximize server-side efficiency.

Is this skill suitable for beginners?

While it covers advanced optimizations, the clear 'Incorrect vs Correct' code comparisons make it an excellent learning tool for developers at all levels.

Can it help reduce my JavaScript bundle size?

Yes, it identifies performance-heavy patterns like barrel imports and suggests direct imports or lazy-loading to reduce the initial payload.

React Performance Best Practices

Name: React Performance Best Practices
Author: davila7

bydavila7

•

16,312

•

Developer Tools

Optimizes React and Next.js applications using over 40 performance rules to eliminate bottlenecks and minimize bundle sizes.

This skill provides a comprehensive performance optimization framework for React and Next.js developers, drawing on elite engineering patterns to boost application speed. It empowers Claude to identify and resolve critical issues such as request waterfalls, excessive JavaScript payloads, and inefficient rendering cycles. Whether you are conducting a code review, refactoring complex components, or setting up a new Next.js project, this skill ensures your code follows high-impact standards for Core Web Vitals and seamless user experiences.

Key Features

0116,312 GitHub stars

02Advanced bundle size reduction through dynamic imports and barrel file avoidance

03Critical waterfall elimination via parallel data fetching and strategic Suspense

04Server-Side performance optimization for RSC and data caching

05Granular re-render minimization and memoization strategies

06Browser rendering enhancements including CSS content-visibility and SVG optimization

Use Cases

01Implementing efficient data-fetching patterns in Next.js App Router projects

02Refactoring component architectures to prevent unnecessary re-renders

03Auditing existing React applications to improve Time to Interactive (TTI) and LCP

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add davila7/claude-code-templates web-development

For use in Claude.ai and ChatGPT

Download Skill