Does it provide code refactoring suggestions?

Absolutely. The skill is designed to trigger during refactoring tasks to replace inefficient patterns with high-performance alternatives like Promise.all() or memoized components.

How does it help with Next.js App Router performance?

It provides specific guidance on server-side data fetching, minimizing serialization, and using React.cache to ensure efficient server-side rendering.

Can this skill reduce my application's bundle size?

Yes, it targets bundle size by identifying heavy barrel imports, suggesting next/dynamic for code splitting, and optimizing how third-party scripts are loaded.

What is the Vercel React Best Practices skill?

It is a specialized configuration for Claude Code that applies 45 prioritized rules from Vercel Engineering to optimize React and Next.js code for maximum performance.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: phrazzld

byphrazzld

•

개발자 도구

Optimizes React and Next.js applications using performance-driven guidelines and architectural patterns from Vercel Engineering.

소개

This skill provides a comprehensive framework of 45 performance optimization rules specifically tailored for React and Next.js environments. Curated by Vercel Engineering, it empowers Claude to identify and fix critical issues such as asynchronous waterfalls, bloated bundle sizes, and inefficient rendering patterns. Whether you are building new App Router pages or refactoring legacy components, this skill ensures your code adheres to industry-standard patterns for speed, scalability, and optimal Core Web Vitals. It covers high-impact areas including server-side data fetching, client-side state management, and advanced JavaScript execution optimizations.

주요 기능

Reduces bundle sizes through dynamic imports and barrel import auditing.
Improves DOM performance using content-visibility and batched CSS updates.
Prevents unnecessary re-renders via memoization and stable dependency management.
Eliminates data fetching waterfalls using parallel promises and Suspense boundaries.
2 GitHub stars
Optimizes server-side performance with React.cache and non-blocking operations.

사용 사례

Refactoring Next.js applications to improve page load speeds and performance scores.
Auditing React component trees for inefficient state updates and re-render loops.
Implementing high-performance data fetching patterns in the Next.js App Router.

소개

주요 기능

Reduces bundle sizes through dynamic imports and barrel import auditing.
Improves DOM performance using content-visibility and batched CSS updates.
Prevents unnecessary re-renders via memoization and stable dependency management.
Eliminates data fetching waterfalls using parallel promises and Suspense boundaries.
2 GitHub stars
Optimizes server-side performance with React.cache and non-blocking operations.

사용 사례

Refactoring Next.js applications to improve page load speeds and performance scores.
Auditing React component trees for inefficient state updates and re-render loops.
Implementing high-performance data fetching patterns in the Next.js App Router.