Can this skill help reduce my application's bundle size?

Yes, it includes specific rules for using dynamic imports, eliminating barrel files, and deferring third-party scripts to significantly improve hydration and load times.

How does it help with React re-renders?

It identifies patterns like inefficient state subscriptions or missing memoization and suggests refactors using useMemo, React.memo, or moving state closer to where it is used.

When does this skill activate in Claude Code?

This skill triggers automatically when you are writing, reviewing, or refactoring React components, Next.js pages, or optimizing data fetching and bundle performance.

What are the primary rules this skill follows?

The skill uses 45 rules across 8 categories including bundle size optimization, server-side performance, and async waterfall elimination, all based on Vercel Engineering standards.

Is this skill compatible with the Next.js App Router?

Absolutely. It provides specific guidance for server-side performance, data fetching, and Suspense boundaries relevant to both Pages and App Router architectures.

React & Next.js Performance Optimizer

Name: React & Next.js Performance Optimizer
Author: claudiodearaujo

byclaudiodearaujo

0•

设计工具

Optimizes React and Next.js applications using 45 performance-focused rules established by Vercel Engineering.

This Claude Code Skill integrates a comprehensive suite of performance optimization guidelines maintained by Vercel, specifically designed for the React and Next.js ecosystems. It empowers developers to automate the detection and refactoring of common bottlenecks such as network waterfalls, bloated bundle sizes, and unnecessary re-renders. By applying 45 prioritized rules across categories like server-side performance and JavaScript efficiency, the skill ensures that production-grade code remains fast, scalable, and aligned with industry-leading standards established by the creators of Next.js.

主要功能

01Prevents expensive re-renders with memoization and state management best practices.

02Eliminates async waterfalls using parallel fetching and streaming patterns.

03Optimizes server-side rendering and client-side data fetching strategies.

04Implements 45 prioritized rules for React and Next.js performance optimization.

05Reduces bundle sizes through dynamic imports and barrel file removal.

060 GitHub stars

使用场景

01Optimizing JavaScript bundle sizes and data-fetching logic during initial development.

02Conducting automated code reviews for performance-sensitive Next.js applications.

03Refactoring existing React components to improve Core Web Vitals and load times.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front react-best-practices

For use in Claude.ai and ChatGPT

主要功能

01Prevents expensive re-renders with memoization and state management best practices.

02Eliminates async waterfalls using parallel fetching and streaming patterns.

03Optimizes server-side rendering and client-side data fetching strategies.

04Implements 45 prioritized rules for React and Next.js performance optimization.

05Reduces bundle sizes through dynamic imports and barrel file removal.

060 GitHub stars

使用场景

01Optimizing JavaScript bundle sizes and data-fetching logic during initial development.

02Conducting automated code reviews for performance-sensitive Next.js applications.

03Refactoring existing React components to improve Core Web Vitals and load times.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front react-best-practices

For use in Claude.ai and ChatGPT