Is this skill useful for existing projects?

Yes, it is designed for both writing new production-grade code and refactoring legacy React/Next.js projects to align with modern performance standards.

How does this skill help with Next.js performance?

It applies 45 specific engineering rules from Vercel to optimize data fetching, bundle sizes, and server-side rendering patterns automatically during the coding process.

Can it help reduce my application's bundle size?

Yes, it identifies problematic barrel imports, suggests next/dynamic for heavy components, and helps defer non-critical third-party scripts to improve load times.

Does it assist with React re-render issues?

Absolutely. It includes specific rules for memoization, derived state optimization, and functional setState patterns to minimize unnecessary re-renders.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: StrayDragon

byStrayDragon

•

개발자 도구

Optimizes React and Next.js applications using 45 performance-focused rules derived from Vercel Engineering guidelines.

This skill provides a comprehensive framework for implementing Vercel’s high-performance engineering standards within React and Next.js projects. It identifies and resolves performance bottlenecks across eight critical categories, including asynchronous waterfall elimination, bundle size reduction, and server-side optimization. By applying these 45 prioritized rules during code generation or refactoring, the skill ensures your web applications achieve optimal Core Web Vitals and efficient resource utilization through standardized implementation patterns.

주요 기능

01Reduces JavaScript bundle sizes through dynamic imports and barrel file avoidance.

021 GitHub stars

03Provides low-level JavaScript performance tuning for loops, lookups, and DOM interactions.

04Optimizes React re-renders using memoization, derived state patterns, and stable callbacks.

05Enhances server-side performance with request deduplication and efficient serialization.

06Eliminates asynchronous waterfalls with parallelized data fetching and Suspense boundaries.

사용 사례

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

02Implementing data-intensive dashboards without introducing blocking waterfalls or UI lag.

03Reviewing complex React components for performance anti-patterns before deployment.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add straydragon/my-claude-skills vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill