How does this skill help reduce bundle size?

The skill provides specific rules for using dynamic imports, avoiding barrel files, and deferring third-party scripts to ensure minimal initial load times.

What is the Vercel React Best Practices skill?

It is a specialized capability for Claude Code that applies Vercel's engineering guidelines to optimize React and Next.js applications for maximum performance.

When should I use this skill?

Use it whenever you are writing new React components, reviewing code for performance bottlenecks, or refactoring existing Next.js logic for better speed.

Can it help fix request waterfalls?

Yes, it identifies sequential awaits and suggests parallelizing independent operations using Promise.all() or Suspense boundaries.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: bmad-labs

bybmad-labs

•

开发者工具

Optimizes React and Next.js application performance using 57 expert-level rules curated by Vercel Engineering.

This skill integrates Vercel's comprehensive performance optimization guide directly into the Claude Code environment, providing actionable guidance for React and Next.js development. It covers 57 critical rules across eight distinct categories, including waterfall elimination, bundle size reduction, and server-side efficiency. By activating this skill, developers can automate performance-focused code reviews, refactor inefficient components, and ensure their applications adhere to the highest industry standards for speed, scalability, and optimal Core Web Vitals.

主要功能

011 GitHub stars

02Minimizes client-side re-renders with memoization and state-derivation patterns

03Eliminates request waterfalls using parallel data fetching and Suspense boundaries

04Enhances server-side performance using React.cache and prop serialization limits

05Optimizes JavaScript execution with efficient loop patterns and memory management

06Reduces bundle size through dynamic imports and optimized barrel file management

使用场景

01Implementing high-performance data fetching strategies in a new project

02Automating code reviews to detect inefficient React rendering patterns

03Refactoring a slow Next.js page to improve LCP and overall performance scores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bmad-labs/skills vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill