When should I trigger this Claude Code skill?

You should use this skill during code reviews, when refactoring existing pages for speed, or when building new data-intensive components.

Does it support React Server Components (RSC)?

Yes, it includes high-priority rules for server-side performance, data serialization, and parallel fetching specifically for RSC.

How does it help with Next.js bundle sizes?

It identifies heavy components for dynamic loading, flags inefficient barrel imports, and suggests strategies to load third-party scripts after hydration.

What specific frameworks does this skill support?

This skill is specifically optimized for React and Next.js applications, covering both Page Router and App Router architectures.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: markky21

bymarkky21

0•

Design Tools

Optimizes React and Next.js applications using Vercel Engineering's high-performance coding standards and patterns.

This skill integrates Vercel Engineering's comprehensive performance guidelines directly into your development workflow, providing automated refactoring and code review based on 57 high-impact rules. It enables Claude to identify and fix critical performance bottlenecks such as network waterfalls, bloated bundle sizes, and inefficient re-renders. By applying these industry-leading patterns, developers can ensure their Next.js and React applications achieve optimal Core Web Vitals, efficient resource utilization, and superior server-side performance.

Key Features

01Eliminates network waterfalls with parallel data fetching patterns and Suspense boundaries.

02Reduces bundle sizes through dynamic imports, barrel file avoidance, and dependency optimization.

030 GitHub stars

04Minimizes unnecessary re-renders through state hoisting and memoization best practices.

05Optimizes React Server Components (RSC) and server-side data serialization.

06Refines client-side performance using SWR deduplication and passive event listeners.

Use Cases

01Optimizing data fetching strategies for high-traffic web applications.

02Automated code review of React components to identify performance regressions.

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markky21/claude-skills vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill