What is the Vercel React Best Practices skill?

It is a specialized capability for Claude Code that applies 45 performance-focused rules to React and Next.js codebases to improve speed and efficiency.

How does it help reduce bundle size?

The skill identifies heavy barrel imports, suggests next/dynamic for code-splitting, and provides patterns for conditional module loading.

Are these rules official Vercel guidelines?

Yes, the skill is based on performance optimization patterns and best practices established by Vercel Engineering.

Does this skill support the Next.js App Router?

Yes, it includes specific optimizations for the App Router, including server-side data fetching, streaming with Suspense, and React Server Components.

Can it fix React re-render issues?

Yes, it provides automated guidance on using useMemo, useCallback, stable state initialization, and avoiding unnecessary state subscriptions.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: kl3inIT

bykl3inIT

•

開発者ツール

Optimizes React and Next.js applications using Vercel Engineering's performance guidelines and automated refactoring patterns.

This skill provides a comprehensive suite of 45 performance optimization rules curated by Vercel Engineering for modern React and Next.js development. It categorizes guidelines by impact level—ranging from critical waterfall elimination and bundle size reduction to server-side performance and efficient re-render patterns. Designed for use during code generation, reviews, and refactoring, this skill ensures your applications adhere to high-performance standards, improve Core Web Vitals, and utilize the latest Next.js features like React Cache and Suspense effectively.

主な機能

01Eliminates network waterfalls with parallel data fetching patterns

02Optimizes client-side rendering with memoization and derived state patterns

03Reduces bundle size through dynamic imports and barrel file optimization

04Enhances server-side performance using React.cache and non-blocking operations

051 GitHub stars

06Implements JavaScript performance best practices for efficient data handling

ユースケース

01Optimizing Next.js App Router logic for faster server-side rendering and streaming

02Refactoring legacy React components to improve Core Web Vitals and load times

03Performing automated performance audits during the code review process

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kl3init/shoes-shopping-online-system-fe vercel-react-best-practices

For use in Claude.ai and ChatGPT

主な機能

01Eliminates network waterfalls with parallel data fetching patterns

02Optimizes client-side rendering with memoization and derived state patterns

03Reduces bundle size through dynamic imports and barrel file optimization

04Enhances server-side performance using React.cache and non-blocking operations

051 GitHub stars

06Implements JavaScript performance best practices for efficient data handling

ユースケース

01Optimizing Next.js App Router logic for faster server-side rendering and streaming

02Refactoring legacy React components to improve Core Web Vitals and load times

03Performing automated performance audits during the code review process

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kl3init/shoes-shopping-online-system-fe vercel-react-best-practices

For use in Claude.ai and ChatGPT