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

0•

Herramientas de Diseño

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.

Características Principales

01Eliminates network waterfalls with parallel fetching patterns and Suspense boundaries

02Enhances server-side performance using React.cache and non-blocking operations

030 GitHub stars

04Reduces bundle sizes by optimizing barrel imports and implementing dynamic loading

05Minimizes unnecessary re-renders through strategic memoization and state management

06Improves rendering efficiency using content-visibility and SVG precision optimizations

Casos de Uso

01Optimizing Next.js data fetching strategies for both Server and Client Components

02Performing automated code reviews to identify and fix performance anti-patterns

03Refactoring complex React components to improve Core Web Vitals and PageSpeed scores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dnlopes/claude-code-plugins react-best-practices

For use in Claude.ai and ChatGPT

Download Skill