Can it help reduce my application's bundle size?

Yes, it provides specific automated guidance on avoiding barrel imports, utilizing next/dynamic for heavy components, and deferring non-critical third-party scripts.

Is this skill based on official Vercel documentation?

Yes, the skill is derived from the performance optimization guidelines and implementation patterns maintained by Vercel Engineering.

How does this skill improve Next.js performance?

It applies 45 specific rules maintained by Vercel Engineering, including waterfall elimination, bundle optimization, and server-side caching to ensure your app runs at peak efficiency.

When should I trigger this skill in Claude?

Trigger this skill whenever you are writing new React components, refactoring data fetching logic, or conducting a performance audit on a Next.js project.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: dazeb

bydazeb

•

开发者工具

Optimizes React and Next.js application performance using Vercel Engineering's 45 core optimization rules.

This skill integrates Vercel Engineering’s comprehensive performance guidelines directly into Claude, providing 45 prioritized rules for optimizing React and Next.js applications. It covers critical areas such as eliminating network waterfalls, reducing bundle sizes, and optimizing server-side rendering, helping developers refactor code and implement high-performance patterns automatically. Whether you are building new pages or reviewing legacy code, this skill ensures your frontend architecture follows industry-leading standards for speed, responsiveness, and efficient resource management.

主要功能

014 GitHub stars

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

03Minimizes client-side re-renders through memoization and state-reading optimizations

04Eliminates network waterfalls with parallel fetching and Suspense boundaries

05Optimizes server-side performance using React cache and non-blocking operations

06Improves JavaScript execution speed with efficient data structures and loop hoisting

使用场景

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

02Implementing efficient data fetching strategies for complex Server Components

03Reviewing code for performance regressions and identifying bundle size bottlenecks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dazeb/claudeplaybook react-best-practices

For use in Claude.ai and ChatGPT

Download Skill