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.

主な機能

Reduces JavaScript bundle sizes by managing barrel imports and implementing dynamic loading
Optimizes server-side performance using React cache deduplication and minimal serialization
Prevents performance degradation by identifying and fixing unnecessary component re-renders
Enhances JavaScript execution efficiency with optimized loops, lookups, and memory management
Eliminates network waterfalls through parallel fetching and strategic Suspense boundaries
1 GitHub stars

ユースケース

Refactoring existing Next.js pages to improve load times and Lighthouse performance scores
Conducting automated code reviews to ensure new React components follow Vercel's engineering standards
Implementing complex data fetching logic in the App Router while avoiding common async pitfalls

概要

主な機能

Reduces JavaScript bundle sizes by managing barrel imports and implementing dynamic loading
Optimizes server-side performance using React cache deduplication and minimal serialization
Prevents performance degradation by identifying and fixing unnecessary component re-renders
Enhances JavaScript execution efficiency with optimized loops, lookups, and memory management
Eliminates network waterfalls through parallel fetching and strategic Suspense boundaries
1 GitHub stars

ユースケース

Refactoring existing Next.js pages to improve load times and Lighthouse performance scores
Conducting automated code reviews to ensure new React components follow Vercel's engineering standards
Implementing complex data fetching logic in the App Router while avoiding common async pitfalls