When should I use this skill?

Apply this skill when writing new React components, refactoring Next.js pages, or performing code reviews to ensure your code follows optimal performance patterns.

Can it help reduce unnecessary React re-renders?

Yes, it contains specific rules for memoization, derived state management, and functional setState patterns to ensure components only update when necessary.

What does the Vercel React Best Practices skill do?

It applies 45 prioritized rules for React and Next.js to optimize performance, focusing on areas like bundle size, data fetching, and rendering efficiency.

Does this skill help with Next.js App Router?

Yes, it includes specific guidelines for server-side performance, data fetching, and parallelization that are highly relevant to the Next.js App Router architecture.

How does it handle bundle size optimization?

It provides rules for avoiding barrel imports, implementing next/dynamic imports, and deferring third-party scripts to significantly improve initial load times.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: mamuso

bymamuso

•

開発者ツール

Optimizes React and Next.js applications using industry-leading performance patterns and Vercel engineering standards.

This skill provides a comprehensive set of 45 prioritized rules designed to enhance the performance and efficiency of React and Next.js applications. By integrating Vercel's engineering best practices directly into your workflow, it helps developers eliminate async waterfalls, optimize bundle sizes, and minimize unnecessary re-renders. Whether you are building new components or refactoring existing codebases, this skill ensures your application adheres to high-performance standards for both client and server-side execution.

主な機能

01Optimizes component rendering to prevent unnecessary re-renders

02Improves server-side performance using React cache and non-blocking operations

03Reduces bundle sizes through dynamic imports and barrel file optimization

0439 GitHub stars

05Eliminates asynchronous waterfalls with parallel fetching patterns

06Provides automated guidance for efficient JavaScript and DOM manipulation

ユースケース

01Refactoring legacy React codebases for better Core Web Vitals

02Conducting automated performance reviews during the development process

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mamuso/mamuso.dev vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill