Verified:GitHub

nextjs-react-expert

Identify Next.js/React performance bottlenecks and apply optimization rules.

Updated Jan 27, 2026

Search Tags:#performance #react #nextjs #memoization #bundle #code-splitting #server-rendering

One-click install

npx skills add https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc --skill nextjs-react-expert-oscar-ivan-salas

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: nextjs-react-expert
Source: https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc/tree/main/PILi_Quarts_V3.0/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc --skill nextjs-react-expert-oscar-ivan-salas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Next.js and React performance challenges slow user experiences due to waterfalls, large bundles, and inefficient server/client renderings. This skill provides a structured, rule-based playbook to identify bottlenecks and apply proven optimizations across the full stack.

Core Features & Use Cases

Rule-driven performance playbook: a prioritized set of rules to reduce waterfalls, shrink bundle size, and improve server rendering.
End-to-end guidance: covers both server and client patterns, including parallel data fetching, dynamic imports, memoization, and caching strategies.
Real-world scenarios: for large React apps, dashboards, e-commerce sites, and content-heavy portals aiming to improve Time to Interactive and user-perceived performance.

Quick Start

Start by profiling the app to identify the top 1–2 performance bottlenecks, then apply the most impactful rules in order of criticality.

Frequently Asked Questions about nextjs-react-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I eliminate data fetching waterfalls in Next.js?▼

Reduce bundle size in React by applying dynamic imports for code-splitting and per-request caching. This efficiently shrinks the delivered JavaScript payload and speeds up initial page loads.

When should I use React.memo for Next.js performance?▼

Use React.memo to memoize components and prevent unnecessary re-renders in large React apps. It provides actionable optimization guidance for client-side rendering bottlenecks and improves user-perceived performance.

What is the best way to profile React performance bottlenecks?▼

Profile React performance bottlenecks by identifying the top one to two critical issues first. Apply a structured, rule-driven performance playbook to tackle large apps, dashboards, and content-heavy portals effectively.

Does this optimization guidance cover both server and client rendering?▼

Yes, the optimization guidance covers both server and client rendering patterns. It enforces 57 rules across 8 sections to address inefficient server rendering and client-side memoization comprehensively.