Does it support Next.js specific features?

Yes, it includes specialized guidelines for Next.js App Router patterns, including Server Components, streaming with Suspense, and API route optimization.

What kind of bundle size optimizations does it perform?

It suggests improvements for barrel imports, dynamic imports for heavy components, conditional module loading, and preloading strategies.

How does this skill improve React performance?

It applies 45 specific rules from Vercel Engineering to optimize data fetching, reduce bundle sizes, and minimize unnecessary re-renders in your components.

Can I use this for automated code reviews?

Absolutely. The skill is designed to trigger during code reviews to identify performance bottlenecks and suggest refactored, optimized versions of your code.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: dnlopes

bydnlopes

设计工具

Optimizes React and Next.js applications using Vercel Engineering guidelines to eliminate performance bottlenecks and reduce bundle sizes.

关于

The Vercel React Best Practices skill equips Claude with 45 specialized rules designed to enhance the performance and efficiency of React and Next.js applications. By applying engineering-grade patterns for eliminating waterfalls, optimizing server-side rendering, and minimizing re-renders, this skill helps developers build faster, more responsive web interfaces. Whether you are refactoring legacy code or architecting new features, it provides actionable guidance on bundle size reduction, efficient data fetching, and advanced JavaScript optimization patterns to ensure production-grade code quality based on Vercel's high-performance standards.

主要功能

Eliminates network waterfalls with parallel fetching patterns and Suspense boundaries
Enhances server-side performance using React.cache and non-blocking operations
0 GitHub stars
Reduces bundle sizes by optimizing barrel imports and implementing dynamic loading
Minimizes unnecessary re-renders through strategic memoization and state management
Improves rendering efficiency using content-visibility and SVG precision optimizations

使用场景

Optimizing Next.js data fetching strategies for both Server and Client Components
Performing automated code reviews to identify and fix performance anti-patterns
Refactoring complex React components to improve Core Web Vitals and PageSpeed scores

关于

主要功能

Eliminates network waterfalls with parallel fetching patterns and Suspense boundaries
Enhances server-side performance using React.cache and non-blocking operations
0 GitHub stars
Reduces bundle sizes by optimizing barrel imports and implementing dynamic loading
Minimizes unnecessary re-renders through strategic memoization and state management
Improves rendering efficiency using content-visibility and SVG precision optimizations

使用场景

Optimizing Next.js data fetching strategies for both Server and Client Components
Performing automated code reviews to identify and fix performance anti-patterns
Refactoring complex React components to improve Core Web Vitals and PageSpeed scores