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

•

開発者ツール

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.

主な機能

31 GitHub stars
Rendering efficiency improvements through optimized SVG handling and content-visibility
Elimination of async waterfalls with Promise.all and deferred awaits
Automated refactoring based on impact-prioritized performance rules
Server-side performance optimization using React.cache and LRU patterns
Bundle size reduction via dynamic imports and barrel file avoidance

ユースケース

Refactoring legacy React components to improve Core Web Vitals
Optimizing Next.js App Router data fetching for faster server response times
Performing code reviews to identify and fix performance bottlenecks like re-render loops

概要

主な機能

31 GitHub stars
Rendering efficiency improvements through optimized SVG handling and content-visibility
Elimination of async waterfalls with Promise.all and deferred awaits
Automated refactoring based on impact-prioritized performance rules
Server-side performance optimization using React.cache and LRU patterns
Bundle size reduction via dynamic imports and barrel file avoidance

ユースケース

Refactoring legacy React components to improve Core Web Vitals
Optimizing Next.js App Router data fetching for faster server response times
Performing code reviews to identify and fix performance bottlenecks like re-render loops