What is the primary focus of this skill?

The primary focus is performance optimization for React and Next.js applications, specifically targeting async waterfalls, bundle size, and rendering efficiency.

How does it help reduce bundle sizes?

It provides actionable rules for implementing dynamic imports, removing barrel files, and deferring non-critical third-party scripts until after hydration.

Are these rules based on official recommendations?

These guidelines are based on comprehensive performance optimization research and best practices maintained and used by Vercel Engineering.

Does this skill support the Next.js App Router?

Yes, it includes specific rules for server-side performance, React Server Components (RSC), and data fetching patterns used in the modern App Router architecture.

Can I use this skill to refactor existing codebases?

Yes, the skill is designed to be triggered during refactoring and review tasks to identify and correct sub-optimal performance patterns in existing code.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: Jst-Well-Dan

byJst-Well-Dan

•

Developer Tools

Optimizes React and Next.js application performance using Vercel Engineering's standardized guidelines.

About

This skill provides a comprehensive framework for optimizing React and Next.js applications based on industry-leading practices from Vercel. It features 45 prioritized rules covering critical areas like eliminating async waterfalls, reducing bundle sizes, and streamlining server-side rendering. Whether you are refactoring legacy code or building new features, this skill guides Claude to implement high-performance patterns such as Suspense boundaries, dynamic imports, and efficient state management to ensure lightning-fast web experiences and improved Core Web Vitals.

Key Features

3 GitHub stars
Improves server-side performance with React.cache and non-blocking operations
Reduces unnecessary client-side re-renders and JS execution time
Eliminates asynchronous waterfalls with parallel fetching techniques
Optimizes bundle sizes via dynamic imports and barrel file removal
Provides 45 prioritized rules for automated code refactoring and generation

Use Cases

Refactoring Next.js applications to improve Core Web Vitals and load times
Conducting performance-focused code reviews for React and Next.js components
Implementing efficient data fetching patterns in both server and client components

About

Key Features

3 GitHub stars
Improves server-side performance with React.cache and non-blocking operations
Reduces unnecessary client-side re-renders and JS execution time
Eliminates asynchronous waterfalls with parallel fetching techniques
Optimizes bundle sizes via dynamic imports and barrel file removal
Provides 45 prioritized rules for automated code refactoring and generation

Use Cases

Refactoring Next.js applications to improve Core Web Vitals and load times
Conducting performance-focused code reviews for React and Next.js components
Implementing efficient data fetching patterns in both server and client components