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

•

Developer Tools

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.

Key Features

01Reduces bundle sizes through dynamic imports and barrel import auditing.

02Improves DOM performance using content-visibility and batched CSS updates.

03Prevents unnecessary re-renders via memoization and stable dependency management.

04Eliminates data fetching waterfalls using parallel promises and Suspense boundaries.

052 GitHub stars

06Optimizes server-side performance with React.cache and non-blocking operations.

Use Cases

01Refactoring Next.js applications to improve page load speeds and performance scores.

02Auditing React component trees for inefficient state updates and re-render loops.

03Implementing high-performance data fetching patterns in the Next.js App Router.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill