How does this skill improve React app performance?

It applies 57 specific rules across categories like bundle optimization, waterfall elimination, and re-render reduction based on Vercel Engineering standards.

Can this skill help with Next.js App Router projects?

Yes, it includes specific guidelines for Server Components, Server Actions, and Next.js-specific data fetching patterns like React.cache.

Does it cover client-side state management?

Yes, it provides best practices for optimizing useState, useEffect, and avoiding unnecessary re-renders through memoization and stable callbacks.

When should I trigger this skill in Claude?

Reference this skill when writing new components, performing code reviews, or troubleshooting slow page loads and large bundle sizes.

What is the benefit of using 'Eliminating Waterfalls' rules?

These rules ensure that data fetching happens in parallel rather than sequentially, significantly reducing the Time to Interactive (TTI) for your users.

React & Next.js Performance Best Practices

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

byeliaslecomte

0•

デザインツール

Optimizes React and Next.js applications using industry-leading performance patterns and Vercel Engineering standards.

This skill provides Claude with a comprehensive set of 57 performance optimization rules specifically tailored for React and Next.js development. Derived from Vercel Engineering guidelines, it enables the AI to automatically identify and fix performance bottlenecks such as network waterfalls, bloated bundle sizes, and inefficient rendering cycles. Whether you are building new features or refactoring legacy code, this skill ensures your application adheres to high-impact patterns for server-side caching, intelligent data fetching, and optimal JavaScript execution, resulting in faster load times and smoother user experiences.

主な機能

01Client-side data fetching best practices utilizing SWR and passive event listeners

02Elimination of async waterfalls using parallel processing and deferred awaits

030 GitHub stars

04Advanced server-side performance strategies using React.cache and deduplication

05Granular re-render optimization for complex state and high-frequency updates

06Bundle size reduction via dynamic imports and barrel file optimization

ユースケース

01Implementing efficient server-side data fetching patterns for high-scale applications

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

03Reviewing React component code to identify and eliminate unnecessary re-renders

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eliaslecomte/claude-plugin react-best-practices

For use in Claude.ai and ChatGPT

Download Skill