What problem does it solve?
This guide helps identify and eliminate common performance pitfalls in React and Next.js projects, such as server-side waterfalls, oversized bundles, inefficient data fetching, and excessive client serialization, enabling faster initial paint and lower Time to Interactive.
Core Features & Use Cases
- Eliminate Waterfalls: Patterns and examples to start independent async work early and use Promise.all / better-all for parallelization.
- Bundle Size Optimization: Recommendations for avoiding barrel imports, deferring non-critical libraries, dynamic imports, and intent-based preloading.
- Server & Rendering Best Practices: Guidance on hoisting static I/O to module level, per-request and cross-request caching strategies, minimizing RSC serialization, and using Suspense boundaries.
- Use Case: Use these rules to review a Next.js app, reduce cold-start times, and produce prioritized refactors for API routes, server actions, and client components.
Quick Start
Ask the skill to analyze a React/Next.js page or API route and produce prioritized refactor suggestions to eliminate waterfalls and reduce bundle size.
