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

•

Developer Tools

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.

Key Features

01Server-side performance tuning with React.cache and LRU patterns

02Client-side data fetching optimization using SWR and concurrent transitions

03Asynchronous waterfall elimination using Promise.all and Suspense streaming

041 GitHub stars

05Bundle size optimization through dynamic imports and barrel file removal

06Detailed re-render analysis and DOM rendering performance improvements

Use Cases

01Refactoring legacy React components to improve interaction to next paint (INP) scores

02Auditing Next.js pages to eliminate data-fetching waterfalls and improve server response times

03Implementing efficient bundle splitting for heavy third-party library integrations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tylerbryy/codewarden react-best-practices

For use in Claude.ai and ChatGPT

Download Skill