What performance patterns does this skill prioritize?

The skill follows a strict impact-based hierarchy, prioritizing the elimination of async waterfalls and bundle size optimization before moving to rendering and micro-optimizations.

Is this skill useful for data fetching optimization?

Absolutely. It suggests patterns like Promise.all for independent requests, using SWR for client-side deduplication, and streaming content with Suspense boundaries.

Can this skill help with JavaScript bundle size issues?

Yes, it detects inefficient barrel file imports and recommends direct source imports or lazy-loading strategies for heavy third-party libraries.

How does it improve Next.js applications specifically?

It provides guidance on React Server Components (RSC), proper usage of next/dynamic for code splitting, and server-side data deduplication using React.cache().

React Performance & Best Practices

Name: React Performance & Best Practices
Author: get-caio

byget-caio

0•

개발자 도구

Optimizes React and Next.js applications using industry-leading performance patterns and Vercel Engineering guidelines.

This skill empowers Claude with specialized knowledge to audit, refactor, and write high-performance React and Next.js code. Based on Vercel Engineering principles, it prioritizes critical optimizations like eliminating async waterfalls, reducing bundle sizes through dynamic imports, and implementing efficient server-side data fetching. It is particularly useful during code reviews or when scaling complex frontend architectures where load times and rendering efficiency are paramount to the user experience.

주요 기능

01Implements React Server Components (RSC) and server-side caching best practices

02Reduces unnecessary client-side re-renders and optimizes DOM rendering performance

030 GitHub stars

04Optimizes bundle sizes by identifying barrel file issues and implementing dynamic imports

05Eliminates async waterfalls using Promise.all and early promise execution patterns

06Provides automated guidance for SWR, React.cache(), and Suspense boundaries

사용 사례

01Optimizing large-scale frontend applications by reducing JavaScript execution time and bundle bloat

02Conducting automated code reviews for Next.js projects to ensure efficient data fetching

03Refactoring legacy React components to improve Core Web Vitals and initial load speed

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add get-caio/harness react-best-practices

For use in Claude.ai and ChatGPT

Download Skill