How does it improve Next.js performance?

It focuses on critical areas like eliminating data-fetching waterfalls, optimizing server-side serialization, and leveraging Next.js features like next/dynamic and the after() function.

What is the Vercel React Best Practices skill?

It is a specialized capability for Claude Code that applies 45 prioritized performance rules from Vercel Engineering to optimize React and Next.js code.

Can this skill help reduce my bundle size?

Yes, it specifically targets bundle bloat by flagging barrel imports, suggesting conditional module loading, and preloading assets on user intent.

Does it support both Client and Server Components?

Absolutely. It contains specific categories for Server-Side Performance and Client-Side Data Fetching, ensuring optimal patterns across the entire App Router lifecycle.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: mashharuki

bymashharuki

•

开发者工具

Optimizes React and Next.js applications using 45 performance-focused rules derived from Vercel Engineering standards.

The Vercel React Best Practices skill empowers Claude to audit and refactor your React and Next.js codebases using elite performance patterns. It categorizes optimizations into prioritized areas such as eliminating network waterfalls, minimizing bundle sizes, and streamlining server-side execution. Whether you are building new features or refactoring legacy components, this skill ensures your application adheres to the high-performance standards required for modern production environments, specifically focusing on Next.js App Router patterns and efficient React state management.

主要功能

01Prevents unnecessary re-renders through memoization and stable dependency patterns.

02Identifies and fixes network waterfalls with parallel fetching and deferred awaits.

031 GitHub stars

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

05Optimizes server-side performance using React cache and non-blocking background tasks.

06Enhances JavaScript execution speed with O(1) lookups and efficient loop structures.

使用场景

01Performing automated code reviews to ensure adherence to Vercel Engineering standards.

02Refactoring Next.js applications to improve Core Web Vitals and PageSpeed scores.

03Optimizing complex data-fetching logic to prevent blocking UI rendering.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mashharuki/claude-code-sample vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill