Is this skill suitable for existing React projects?

Absolutely. It is designed to be used during code reviews and refactoring tasks to bring existing codebases up to modern performance standards.

How does this skill help with Next.js bundle sizes?

It identifies performance-draining patterns like barrel imports and suggests code splitting via next/dynamic and conditional module loading.

Can this skill fix data-fetching waterfalls?

Yes, it provides specific triggers for implementing parallel fetching with Promise.all() and using Suspense boundaries to stream content effectively.

What is the Vercel React Best Practices skill?

It is a specialized Claude Code skill that provides 45 prioritized rules for optimizing React and Next.js performance, based on Vercel's internal engineering guidelines.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: demostheneslld

bydemostheneslld

•

개발자 도구

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

This skill integrates Vercel's high-performance engineering standards directly into your development workflow. It provides 45 specialized rules across eight critical categories, including waterfall elimination, bundle size optimization, and server-side performance. Designed for both React Client and Server Components, this skill helps developers identify and fix performance bottlenecks such as inefficient data fetching, unnecessary re-renders, and bloated bundle sizes. By applying these industry-leading patterns during code generation or refactoring, you ensure your Next.js applications achieve optimal Core Web Vitals and runtime efficiency.

주요 기능

012 GitHub stars

02Optimizes server-side execution through React.cache() and per-request deduplication.

03Reduces bundle size by identifying barrel import issues and implementing dynamic loading.

04Improves rendering performance with content-visibility and SVG precision optimization.

05Eliminates data-fetching waterfalls using parallelization and Suspense streaming.

06Minimizes client-side re-renders using advanced memoization and state-reading strategies.

사용 사례

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

02Implementing efficient server-side data fetching patterns in App Router applications.

03Auditing complex React component trees for unnecessary re-renders and JS execution overhead.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add demostheneslld/njclement-nextjs vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill