Who authored these guidelines?

These best practices are maintained by Vercel Engineering, ensuring they are optimized for the latest versions of React and Next.js.

How does this skill improve Next.js performance?

The skill applies 45 specific rules across 8 categories, such as eliminating waterfalls with parallel fetching and using next/dynamic to reduce bundle sizes.

Can I use this for existing React projects?

Yes, it is specifically designed for writing new code, reviewing existing PRs, and refactoring legacy components to improve performance.

Does it help with Core Web Vitals?

Absolutely. Many rules focus on reducing LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) through optimized loading patterns.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: akiojin

byakiojin

•

디자인 도구

Optimizes React and Next.js application performance using 45 expert engineering rules from Vercel.

The Vercel React Best Practices skill provides a comprehensive suite of performance optimization guidelines specifically tailored for modern React and Next.js environments. Based on Vercel Engineering standards, it offers 45 prioritized rules to help developers eliminate network waterfalls, optimize bundle sizes, and improve server-side rendering efficiency. Whether you are writing new components, performing code reviews, or refactoring legacy applications, this skill ensures your frontend architecture follows the highest industry standards for speed, scalability, and user experience.

주요 기능

012 GitHub stars

02Optimizes bundle sizes through dynamic imports and barrel file removal

03Enhances rendering efficiency with content-visibility and hoisted JSX patterns

04Implements server-side performance patterns like React.cache and non-blocking operations

05Eliminates network waterfalls using parallel data fetching and Suspense boundaries

06Reduces client-side re-renders via memoization and state management optimization

사용 사례

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

02Automating frontend code reviews to enforce Vercel's engineering standards

03Optimizing complex data-heavy React dashboards for better responsiveness

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