react-performance

Profile React renders and generate prioritized optimization plans for Core Web Vitals.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/alxvlo/AHI_Capstone --skill react-performance-alxvlo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/alxvlo/AHI_Capstone/tree/main/.opencode/skill/react-performance
Command: npx skills add https://github.com/alxvlo/AHI_Capstone --skill react-performance-alxvlo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Optimizes React performance by providing a structured approach to profiling, identifying bottlenecks, and applying targeted improvements across rendering, bundling, memory, and Core Web Vital optimizations.

Core Features & Use Cases

  • Profiling and diagnosing slow renders with React DevTools Profiler and web-vitals metrics.
  • Implementing code-splitting, memoization, virtualization, and concurrent features to improve user-perceived performance.
  • Real-world use: optimize a large list rendering or a complex dashboard to achieve faster interaction and improved LCP/FID/CLS.

Quick Start

Analyze a React project to identify bottlenecks, then generate a prioritized optimization plan covering profiling, code-splitting, virtualization, and Core Web Vitals improvements.

Frequently Asked Questions about react-performance

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

FAQPage Schema
How do I identify and fix slow React renders in a web application?▼

React performance optimization involves profiling slow renders with React DevTools Profiler to pinpoint bottlenecks, then applying targeted improvements like memoization, code-splitting, and virtualization to optimize rendering performance.

What's the best way to optimize a large list rendering in React?▼

Optimizing large list rendering in React requires implementing virtualization patterns to limit DOM nodes to visible items, reducing memory usage and improving interaction speed for large datasets.

How do I improve Core Web Vitals like LCP and CLS in a React project?▼

Improve Core Web Vitals in a React project by measuring web-vitals metrics and applying code-splitting to reduce bundle size and optimizing renders to achieve faster interaction and improved LCP, FID, and CLS scores.

Do I need React 18 to use concurrent features for performance optimization?▼

Yes, optimizing React performance with this approach requires React 18+ to utilize concurrent features alongside profiling tools, code-splitting, memoization, and virtualization patterns for targeted improvements.

How do I reduce bundle size in a React application?▼

Reduce React bundle size by implementing code-splitting patterns to divide the application into smaller chunks, loading code on demand to optimize bundle size and improve user-perceived performance.

When should I use memoization to optimize React performance?▼

Use memoization to optimize React performance when profiling identifies unnecessary re-renders, preventing expensive recalculations by caching component outputs for complex dashboards and large lists.