How does this skill help with Next.js App Router performance?

It provides specific patterns for Server Components, such as using React.cache() for deduplication and minimizing data serialization between server and client components.

What does the Vercel React Best Practices skill do?

It applies 45 specific engineering rules to your React and Next.js code to optimize performance, focusing on data fetching, rendering efficiency, and bundle size.

When should I trigger this skill in Claude Code?

Trigger this skill during code reviews, when writing new pages, or when refactoring sections of your app that show high Total Blocking Time (TBT) or Large Contentful Paint (LCP).

Can this skill help reduce my application's bundle size?

Yes, it includes rules for identifying heavy components, implementing next/dynamic imports, and avoiding inefficient barrel imports that bloat your JavaScript.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: frankstallone

byfrankstallone

Herramientas para Desarrolladores

Optimizes React and Next.js applications using performance-focused engineering patterns from Vercel.

Acerca de

This skill integrates Vercel Engineering's comprehensive performance optimization guide directly into your development workflow to ensure your applications are fast by default. It provides 45 prioritized rules covering critical areas such as eliminating network waterfalls, reducing bundle sizes, and optimizing server-side execution. Whether you are refactoring legacy Next.js pages or writing new React components, this skill provides automated guidance to improve Core Web Vitals, reduce Time to Interactive, and implement production-grade React patterns.

Características Principales

Reduces bundle sizes via dynamic imports and optimized barrel file management
Implements advanced rendering techniques like content-visibility and JSX hoisting
Eliminates network waterfalls with parallel data fetching and Suspense patterns
Optimizes component re-renders through memoization and stable dependency tracking
Enhances server-side performance using React.cache and non-blocking operations
0 GitHub stars

Casos de Uso

Architecting new Next.js applications with optimal data fetching and caching strategies
Automating code reviews to identify inefficient rendering patterns or heavy bundle imports
Refactoring existing React components to improve Core Web Vitals and performance scores

Acerca de

Características Principales

Reduces bundle sizes via dynamic imports and optimized barrel file management
Implements advanced rendering techniques like content-visibility and JSX hoisting
Eliminates network waterfalls with parallel data fetching and Suspense patterns
Optimizes component re-renders through memoization and stable dependency tracking
Enhances server-side performance using React.cache and non-blocking operations
0 GitHub stars

Casos de Uso

Architecting new Next.js applications with optimal data fetching and caching strategies
Automating code reviews to identify inefficient rendering patterns or heavy bundle imports
Refactoring existing React components to improve Core Web Vitals and performance scores