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

Yes, it provides specific guidance on avoiding barrel imports, implementing next/dynamic for heavy components, and conditional module loading to minimize initial JS payloads.

What categories of optimization does it cover?

It covers eight critical areas: async waterfalls, bundle size, server-side performance, client-side fetching, re-render optimization, rendering performance, JavaScript execution, and advanced patterns.

How does this skill improve Next.js performance?

The skill applies 45 engineering rules that guide Claude to eliminate waterfalls, optimize server-side caching, and implement efficient data-fetching patterns like parallel Promise execution.

Is this skill useful for reviewing existing code?

Absolutely. It is specifically designed to be triggered during code reviews and refactoring tasks to catch common performance anti-patterns in React and Next.js.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: akiojin

byakiojin

•

学习与文档

Optimizes React and Next.js application performance using Vercel Engineering's comprehensive 45-rule optimization framework.

The Vercel React Best Practices skill equips Claude with an authoritative set of 45 performance optimization guidelines curated by Vercel Engineering. It enables Claude to identify and fix critical performance bottlenecks in React and Next.js applications, such as data-fetching waterfalls, bloated bundle sizes, and inefficient re-renders. By applying these industry-standard patterns during code generation and refactoring, the skill ensures your web applications achieve superior Core Web Vitals and follow the most efficient architectural patterns available in the React ecosystem.

主要功能

01Eliminates data-fetching waterfalls using parallelization and Suspense boundaries.

02Reduces bundle size through intelligent dynamic imports and optimized barrel file handling.

03Enhances server-side performance with request deduplication and non-blocking operations.

042 GitHub stars

05Optimizes client-side rendering by minimizing unnecessary re-renders and stabilizing state.

06Improves DOM performance using advanced CSS techniques like content-visibility and layout grouping.

使用场景

01Refactoring Next.js pages to improve PageSpeed Insights scores and Core Web Vitals.

02Optimizing data fetching strategies in high-traffic web applications to reduce latency.

03Conducting automated performance-focused code reviews for complex React component libraries.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add akiojin/llmlb vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill