How does this skill improve Next.js performance?

It applies 57 specific rules focused on eliminating waterfalls, optimizing server-side execution, and reducing bundle sizes based on Vercel's engineering standards.

When should I trigger this Claude Code skill?

Use it during code reviews, when writing new components, or when refactoring existing React and Next.js code to ensure optimal performance patterns.

Does it support both React Server and Client components?

Yes, it includes specialized rules for both React Server Components (RSC) performance and client-side re-render optimization.

Can it help reduce my application's JavaScript bundle size?

Absolutely. It identifies heavy imports, suggests next/dynamic for heavy components, and flags inefficient barrel imports to minimize your JS payload.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: kicchann

bykicchann

•

Design Tools

Optimizes React and Next.js applications using Vercel's engineering standards for performance, bundle size, and efficient rendering.

This skill integrates Vercel Engineering's comprehensive performance guidelines directly into your Claude Code workflow, providing 57 specialized rules to eliminate network waterfalls, minimize bundle sizes, and optimize server-side execution. It acts as an automated performance consultant that helps you identify and refactor inefficient patterns in React components and Next.js pages—ranging from data fetching strategies to advanced re-render optimizations—ensuring your web applications remain fast, scalable, and production-ready.

Key Features

01Reduces bundle size by flagging barrel imports and implementing dynamic loading.

02Enhances JavaScript execution speed with optimized loops and O(1) data structures.

03Optimizes server-side performance using React.cache and efficient serialization.

04Eliminates network waterfalls with parallel data fetching patterns and Suspense boundaries.

05Minimizes client-side re-renders through strategic memoization and state derivation.

063 GitHub stars

Use Cases

01Automating code reviews for performance bottlenecks in new React components.

02Refactoring legacy Next.js pages to improve Core Web Vitals and load times.

03Optimizing data fetching logic to reduce server overhead and client-side latency.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kicchann/reqord vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill