How does this skill improve web performance?

It applies 45 prioritized rules ranging from eliminating network waterfalls and optimizing bundle sizes to refining re-render logic and server-side execution.

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

Absolutely. It provides specific rules for dynamic imports, avoiding barrel files, and deferring third-party scripts to ensure faster page loads.

Does it support the Next.js App Router?

Yes, the skill includes specific rules for modern Next.js features like Server Components, React.cache(), and Suspense streaming.

Is this skill specifically for Vercel hosting users?

While the guidelines are maintained by Vercel Engineering, these performance best practices apply to any modern React or Next.js application regardless of the hosting provider.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: nech-ai

bynech-ai

•

API開発

Optimizes React and Next.js applications using industry-leading performance guidelines from Vercel Engineering.

This Claude Code skill implements a comprehensive set of 45 performance optimization rules for React and Next.js, as maintained by Vercel Engineering. It enables Claude to provide expert-level guidance on eliminating network waterfalls, reducing bundle sizes, and optimizing server-side execution. By integrating these patterns into your development workflow, you can ensure that your frontend code adheres to modern best practices for speed, efficiency, and scalability, making it an essential tool for high-performance web development.

主な機能

01Eliminates network waterfalls with parallel fetching and Suspense boundaries.

02Reduces bundle sizes by identifying heavy imports and optimizing barrel files.

03Improves JavaScript execution speed with efficient loop and lookup patterns.

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

05Minimizes unnecessary re-renders through memoization and refined state management.

066 GitHub stars

ユースケース

01Optimizing complex data-fetching logic in modern React components.

02Conducting automated performance audits during code reviews.

03Refactoring legacy Next.js applications to improve Core Web Vitals.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nech-ai/proxed vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill