Is this skill based on official standards?

The skill is modeled after high-performance engineering guidelines used by Vercel for React and Next.js development.

How does this skill help with Next.js?

It provides specific guidelines for the App Router, Server Components, and data fetching strategies like React.cache to optimize server-side performance.

Can it help reduce my bundle size?

Yes, it includes rules for identifying heavy imports, avoiding barrel files, and implementing next/dynamic for code splitting.

What are 'waterfalls' in React?

Waterfalls occur when asynchronous requests happen sequentially instead of in parallel; this skill helps identify and eliminate them using Promise.all and Suspense.

React Performance Best Practices

Name: React Performance Best Practices
Author: ttmouse

byttmouse

•

Herramientas para Desarrolladores

Optimizes React and Next.js applications using industry-standard performance guidelines from Vercel Engineering.

This skill provides Claude with a comprehensive framework for writing, reviewing, and refactoring React and Next.js code to ensure peak performance. It implements over 40 prioritized rules ranging from critical waterfall elimination and bundle size reduction to advanced rendering patterns and server-side optimizations. By integrating these Vercel-inspired engineering standards, the skill helps developers minimize hydration mismatches, optimize data fetching strategies like SWR and React.cache(), and streamline JavaScript execution for faster, more efficient web applications.

Características Principales

0131 GitHub stars

02Rendering efficiency improvements through optimized SVG handling and content-visibility

03Elimination of async waterfalls with Promise.all and deferred awaits

04Automated refactoring based on impact-prioritized performance rules

05Server-side performance optimization using React.cache and LRU patterns

06Bundle size reduction via dynamic imports and barrel file avoidance

Casos de Uso

01Refactoring legacy React components to improve Core Web Vitals

02Optimizing Next.js App Router data fetching for faster server response times

03Performing code reviews to identify and fix performance bottlenecks like re-render loops

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ttmouse/skills react-best-practices

For use in Claude.ai and ChatGPT

Download Skill