react-performance

Enforce 45 React and Next.js performance rules across eight categories.

3|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/opzero1/op1 --skill react-performance-opzero1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/opzero1/op1/tree/main/packages/install/templates/skill/react-performance
Command: npx skills add https://github.com/opzero1/op1 --skill react-performance-opzero1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React and Next.js performance issues are addressed by providing a comprehensive rule-based optimization guide to improve render times, reduce bundle size, and avoid waterfalls.

Core Features & Use Cases

  • 45 rules across eight categories covering async waterfalls, bundle size, server-side performance, re-renders, and rendering optimization
  • Practical guidance for development, code reviews, and performance audits
  • Real-world scenarios: optimizing initial load, reducing layout thrashing, and improving Time to Interactive

Quick Start

Run the React Performance Skill against your codebase to generate a prioritized list of optimization tasks and concrete code changes.

Frequently Asked Questions about react-performance

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

FAQPage Schema
How do I optimize React rendering and reduce bundle size in a Next.js app?▼

To optimize React rendering and reduce bundle size, apply a rule-based guide covering memoization, code-splitting, and caching to improve render times and avoid async waterfalls.

What's the best way to audit React performance issues during code review?▼

The best way to audit React performance during code review is running a rule-based optimization guide checking eight categories including server-side rendering, re-renders, and layout optimization to generate a prioritized task list.

Why does my Next.js app have slow initial load and Time to Interactive?▼

Slow initial load and poor Time to Interactive in Next.js apps often stem from unoptimized async waterfalls, large bundle sizes, and inefficient server-side rendering paths.

How do I use memoization and code-splitting to fix React re-renders?▼

To fix React re-renders using memoization and code-splitting, apply standard tooling guided by a rule-based optimization system enforcing specific render path and bundle size rules.

Does this React performance optimization guide work for both client-side and server-side rendering?▼

Yes, this React performance optimization guide works for both client-side and server-side rendering, enforcing rules across both render paths to optimize modern web apps comprehensively.