Can this skill help with React re-rendering issues?

Yes, it includes a dedicated category for re-render optimization, covering memoization, derived state, and stable callback patterns.

Is this skill updated for the Next.js App Router?

Absolutely. It contains specific guidelines for React Server Components (RSC), Server Actions, and streaming with Suspense boundaries.

How do I use these rules during a code review?

The skill triggers automatically during tasks involving React or Next.js, allowing Claude to cross-reference your code against the Vercel rule library.

What is the primary benefit of the 'Eliminating Waterfalls' category?

It identifies sequential await statements that block rendering and refactors them into parallel operations to significantly speed up page loads.

How does this skill improve Next.js performance?

It applies 57 specific engineering rules curated by Vercel to optimize data fetching, bundle sizes, and server-side rendering patterns.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: trancong12102

bytrancong12102

•

디자인 도구

Optimizes React and Next.js application performance using Vercel Engineering's 57 prioritized rules for production-grade web development.

This skill integrates Vercel Engineering's comprehensive performance optimization guide into your development workflow, providing specialized guidance for React and Next.js applications. It covers 57 high-impact rules across eight categories, ranging from eliminating network waterfalls and bundle size reduction to server-side caching and re-render optimization. By applying these industry-standard patterns, the skill helps developers automate refactoring, improve Core Web Vitals, and ensure that both client and server-side code follow the most efficient implementation patterns for modern web frameworks.

주요 기능

01Reduces JavaScript bundle sizes by managing barrel imports and implementing dynamic loading

02Optimizes server-side performance using React cache deduplication and minimal serialization

03Prevents performance degradation by identifying and fixing unnecessary component re-renders

04Enhances JavaScript execution efficiency with optimized loops, lookups, and memory management

05Eliminates network waterfalls through parallel fetching and strategic Suspense boundaries

061 GitHub stars

사용 사례

01Refactoring existing Next.js pages to improve load times and Lighthouse performance scores

02Conducting automated code reviews to ensure new React components follow Vercel's engineering standards

03Implementing complex data fetching logic in the App Router while avoiding common async pitfalls

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add trancong12102/ccc react-best-practices

For use in Claude.ai and ChatGPT

Download Skill