skills.rest
ariesanhthu
ariesanhthuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-performance

Diagnose React rendering, bundle size, and Core Web Vitals issues.

Updated Mar 15, 2026
Search Tags:#performance#react#web vitals#optimization#bundle size#profiling
One-click install
npx skills add https://github.com/ariesanhthu/HiveK --skill react-performance-ariesanhthu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/ariesanhthu/HiveK/tree/main/.agent/skills/react-performance
Command: npx skills add https://github.com/ariesanhthu/HiveK --skill react-performance-ariesanhthu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React applications, ensuring smooth user experiences and faster load times.

Core Features & Use Cases

  • Identify Bottlenecks: Pinpoint slow renders, excessive re-renders, and memory leaks using profiling tools.
  • Optimize Bundles: Reduce application size through code splitting and dependency analysis.
  • Improve Core Web Vitals: Enhance LCP, FID, and CLS metrics for better user perception.
  • Use Case: Your React application is experiencing janky scrolling with large lists. This Skill will help you implement virtualization techniques to render only visible items, drastically improving scroll performance.

Quick Start

Use the react-performance skill to analyze the bundle size of the current project.

Frequently Asked Questions about react-performance

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

FAQPage Schema
How do I fix slow rendering and excessive re-renders in my React application?▼

React performance optimization involves diagnosing slow renders using React DevTools Profiler data to pinpoint excessive re-renders and memory leaks. This skill analyzes profiling metrics to provide targeted strategies for resolving component rendering bottlenecks.

What's the best way to reduce a large React bundle size?▼

Reducing React bundle size requires analyzing bundle reports to identify heavy dependencies and apply code splitting. This skill examines bundle analysis reports and provides targeted strategies to reduce application size through dependency optimization.

How do I improve Core Web Vitals metrics like LCP, FID, and CLS for a React app?▼

Improving Core Web Vitals for a React app requires analyzing LCP, FID, and CLS metrics to diagnose load and layout issues. This skill processes Core Web Vitals metrics to provide strategies that enhance user perception and ensure faster load times.

Why does my React app have janky scrolling with large lists, and how can I optimize it?▼

Janky scrolling in React apps with large lists occurs when rendering too many DOM nodes simultaneously. This skill implements virtualization techniques to render only visible items, drastically improving scroll performance and resolving unresponsive interactions.

Can I use React concurrent features to resolve unresponsive user interactions?▼

Yes, React concurrent features help resolve unresponsive user interactions by allowing the UI to remain responsive during rendering tasks. This skill provides specific strategies for implementing concurrent features to optimize context performance and smooth UI updates.

Related Skills

Explore More Software Engineering Skills→
mahamaneharouna9-cpumahamaneharouna9-cpu

react-performance

Diagnose React rendering, bundle size, memory, and Core Web Vitals issues.

Community
Advanced
ripgraphicsripgraphics

react-performance

Diagnose React rendering bottlenecks with React DevTools Profiler and apply optimization strategies.

Community
Advanced
VSF-QC-TTSVSF-QC-TTS

react-performance

Analyze React rendering performance with React DevTools Profiler and optimize bundle size.

Official
Intermediate
Itinerant18Itinerant18

web-performance-optimization

Analyze Core Web Vitals and optimize frontend loading performance.

Community
Advanced