Can it help refactor existing React components?

Yes, the skill is designed to analyze existing code and provide optimized refactors for state management, data fetching, and component structure.

Does it support the Next.js App Router?

Yes, it includes specific patterns for server components, async/await in layouts, and Suspense boundaries which are essential for the App Router architecture.

How does this skill help with Next.js performance?

It applies 55 specific rules curated by Vercel that target common bottlenecks like network waterfalls, large bundle sizes, and inefficient rendering patterns.

Will this help reduce my application's bundle size?

Absolutely. It triggers rules for identifying barrel imports, implementing dynamic imports for heavy components, and deferring non-critical third-party scripts.

React & Next.js Best Practices

Name: React & Next.js Best Practices
Author: ng-hai

byng-hai

•

Design Tools

Optimizes React and Next.js applications using Vercel's high-performance patterns and automated code refactoring rules.

This skill provides a comprehensive performance and correctness framework for React and Next.js applications based on Vercel's authoritative guidelines. It implements 55 specific rules across critical categories including network waterfall elimination, bundle size optimization, and re-render management. By applying these patterns automatically, developers can ensure their applications meet modern architectural standards, improve Core Web Vitals, and maintain a clean, efficient codebase during both new feature development and legacy refactoring.

Key Features

01Reduces JavaScript bundle size by identifying barrel imports and implementing dynamic loading.

02Eliminates network waterfalls using parallelized data fetching and Suspense boundaries.

03Minimizes unnecessary component re-renders through advanced state derivation and memoization techniques.

044 GitHub stars

05Enhances JavaScript execution speed via efficient Map/Set lookups and loop property caching.

06Improves rendering efficiency with static JSX hoisting and content-visibility optimizations.

Use Cases

01Automating code reviews to ensure new Next.js features follow Vercel's best practices.

02Optimizing complex data-heavy dashboards to prevent UI lag and excessive re-renders.

03Refactoring legacy React components to improve load times and runtime performance.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude react-best-practices

For use in Claude.ai and ChatGPT

Download Skill