When is the best time to use this Claude Code skill?

It is most effective during code reviews, when architecting new pages, or when refactoring existing components to resolve specific performance bottlenecks.

How does this skill improve Next.js performance?

It applies Vercel-recommended patterns such as eliminating async waterfalls, utilizing React.cache for request deduplication, and optimizing RSC (React Server Components) boundaries.

Can it help reduce my application's bundle size?

Yes, it identifies heavy components suitable for next/dynamic imports and flags performance-draining patterns like barrel file imports to reduce the initial JavaScript payload.

Does it support TypeScript projects?

Yes, the skill is specifically tailored for TypeScript-based React and Next.js environments, ensuring type-safe performance optimizations.

React Performance & Best Practices

Name: React Performance & Best Practices
Author: Tylerbryy

byTylerbryy

•

開発者ツール

Optimizes React and Next.js applications using Vercel Engineering performance patterns and bundle reduction strategies.

概要

The React Best Practices skill empowers Claude to act as a specialized performance engineer for modern web projects. It provides a comprehensive framework for identifying and fixing common bottlenecks in React and Next.js applications, such as asynchronous waterfalls and bloated JavaScript bundles. By applying Vercel-standard guidelines, the skill helps developers implement critical patterns like server-side request deduplication, dynamic component loading, and efficient state management to ensure high-performance user experiences and optimal Core Web Vitals.

主な機能

Server-side performance tuning with React.cache and LRU patterns
Client-side data fetching optimization using SWR and concurrent transitions
Asynchronous waterfall elimination using Promise.all and Suspense streaming
1 GitHub stars
Bundle size optimization through dynamic imports and barrel file removal
Detailed re-render analysis and DOM rendering performance improvements

ユースケース

Refactoring legacy React components to improve interaction to next paint (INP) scores
Auditing Next.js pages to eliminate data-fetching waterfalls and improve server response times
Implementing efficient bundle splitting for heavy third-party library integrations

概要

主な機能

Server-side performance tuning with React.cache and LRU patterns
Client-side data fetching optimization using SWR and concurrent transitions
Asynchronous waterfall elimination using Promise.all and Suspense streaming
1 GitHub stars
Bundle size optimization through dynamic imports and barrel file removal
Detailed re-render analysis and DOM rendering performance improvements

ユースケース

Refactoring legacy React components to improve interaction to next paint (INP) scores
Auditing Next.js pages to eliminate data-fetching waterfalls and improve server response times
Implementing efficient bundle splitting for heavy third-party library integrations