When is the best time to use this skill?

Reference this skill when writing new components, refactoring complex data fetching logic, or performing code reviews focused on frontend performance.

Does this skill support the Next.js App Router?

Absolutely. It includes patterns for Server Components, React.cache deduplication, and streaming with Suspense boundaries tailored for the App Router architecture.

Can it help reduce my application's bundle size?

Yes, it includes specific guidelines for avoiding barrel imports, implementing code-splitting with next/dynamic, and deferring non-critical third-party scripts.

How does it improve Next.js performance?

The skill applies critical rules for eliminating async waterfalls, optimizing server-side data fetching with parallelization, and managing bundle sizes through dynamic imports.

What does the Vercel React Best Practices skill do?

It provides specialized instructions for Claude to analyze, write, and refactor React and Next.js code according to Vercel's performance-focused engineering standards, covering 45 specific rules.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: sc30gsw

bysc30gsw

•

디자인 도구

Optimizes React and Next.js applications using high-performance engineering guidelines and implementation patterns from Vercel.

This skill integrates Vercel Engineering's specialized performance patterns directly into your development workflow, providing 45 prioritized rules to eliminate waterfalls, reduce bundle sizes, and optimize server-side execution. It empowers Claude to identify architectural bottlenecks in React and Next.js projects, offering automated refactoring for data fetching, memoization, and rendering logic. By following these industry-standard patterns, developers can ensure their applications achieve optimal Core Web Vitals and superior runtime efficiency.

주요 기능

01Eliminates async waterfalls using parallel fetching and Suspense boundaries

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

03Improves JavaScript execution speed via efficient data structures and loop hoisting

04Reduces bundle sizes through dynamic imports and barrel file elimination

058 GitHub stars

06Prevents unnecessary client-side re-renders with advanced memoization strategies

사용 사례

01Conducting automated performance audits during code reviews for React components

02Refactoring legacy Next.js pages to improve Lighthouse and Core Web Vitals scores

03Implementing efficient data fetching patterns in Next.js App Router applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sc30gsw/claude-code-customes vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill