Does it automate code refactoring?

Yes, Claude uses these guidelines to automatically refactor your components to follow Vercel’s high-performance standards while maintaining functionality.

Can it help improve Core Web Vitals?

Yes, the skill specifically targets metrics like LCP and CLS by optimizing rendering paths and data fetching strategies.

Is it compatible with Next.js App Router?

Absolutely, it includes specific rules for Server Components, React.cache, and streaming via Suspense boundaries.

How does it improve application speed?

The skill identifies and fixes common bottlenecks like network waterfalls, excessive re-renders, and bloated bundle sizes using proven engineering patterns.

What is the Vercel React Best Practices skill?

It is a specialized extension for Claude Code that applies Vercel’s proprietary 45-rule performance framework to React and Next.js codebases.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: thkt

bythkt

•

개발자 도구

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

This skill equips Claude with a comprehensive set of performance guidelines curated by Vercel Engineering to enhance React and Next.js applications. It covers critical areas such as eliminating network waterfalls, reducing bundle sizes, and optimizing server-side rendering. Whether you are refactoring legacy code or writing new components, this skill provides actionable patterns to improve Core Web Vitals and overall application responsiveness through automated code reviews and performance-focused code generation.

주요 기능

01Eliminates network waterfalls via parallelization and Suspense boundaries

02Improves Core Web Vitals by applying high-impact rendering patterns

033 GitHub stars

04Reduces bundle size with dynamic imports and barrel file avoidance

05Minimizes re-renders through memoization and state-management best practices

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

사용 사례

01Refactoring existing Next.js pages to improve page load speed and Lighthouse scores

02Conducting automated performance-focused code reviews on complex React components

03Implementing efficient data-fetching strategies using SWR and server-side caching

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill