How is performance impact prioritized?

Guidelines are ranked by impact, starting with Critical items like waterfalls and bundle size, down to Medium and Low impact JavaScript micro-optimizations.

Does it support React Server Components (RSC)?

Absolutely; it includes specific guidelines for RSC boundaries, minimizing serialization, and parallelizing data fetching with component composition.

Can I use this for existing React projects?

Yes, it is designed for writing new code, reviewing pull requests, and refactoring legacy components to follow modern performance standards.

How does this skill improve Next.js performance?

It identifies and resolves asynchronous waterfalls, optimizes bundle sizes via dynamic imports, and implements efficient server-side caching and serialization strategies.

React Performance & Best Practices

Name: React Performance & Best Practices
Author: tylergibbs1

bytylergibbs1

•

디자인 도구

Optimizes React and Next.js applications by enforcing high-impact performance patterns and Vercel-recommended engineering guidelines.

This skill provides a comprehensive performance optimization framework for React and Next.js projects, drawing from industry-leading engineering standards. It helps developers eliminate asynchronous waterfalls, reduce bundle sizes, and optimize both server-side and client-side rendering. Whether you are refactoring legacy components or building new high-performance pages, this tool ensures your code adheres to prioritized guidelines—ranging from critical data fetching strategies to JavaScript micro-optimizations—to deliver the fastest possible user experience.

주요 기능

01Elimination of async waterfalls using Promise.all() and Suspense streaming.

021 GitHub stars

03Granular re-render and DOM rendering performance audits.

04Bundle size reduction through barrel file elimination and dynamic component loading.

05Client-side data fetching optimization using SWR and state deferral techniques.

06Server-side performance tuning with React.cache() and efficient RSC serialization.

사용 사례

01Implementing scalable and efficient data fetching patterns in complex React component architectures.

02Automating code reviews to identify performance bottlenecks like inefficient imports or unoptimized data fetching.

03Refactoring large Next.js applications to improve Core Web Vitals and PageSpeed scores.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tylergibbs1/codewarden react-best-practices

For use in Claude.ai and ChatGPT

Download Skill