Skills
.Work. You
Rest

react-perf-analyzer

Community

Optimize React component performance.

Software Engineering#developer tools#performance#frontend#react#web vitals#optimization
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill identifies common patterns in React components that lead to poor performance, helping you diagnose and fix bottlenecks before they impact users.

Core Features & Use Cases

  • Heuristic Analysis: Scans React component code for anti-patterns related to INP, CLS, Long Animation Frames, and Long Tasks.
  • Prioritized Recommendations: Provides actionable advice with code examples to improve performance.
  • Runtime Snippet: Generates a PerformanceObserver starter code to capture real-world performance metrics.
  • Use Case: You suspect a specific React component is causing slow interactions or layout shifts. This Skill analyzes the component's source code and provides targeted suggestions for optimization.

Quick Start

Analyze the performance of the 'UserProfile' component in './src/components/UserProfile.tsx'.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-perf-analyzer
Download link: https://github.com/shawn-sandy/agentics/archive/main.zip#react-perf-analyzer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.