React Performance Debugger
Diagnose and fix React performance issues — unnecessary re-renders, memory leaks, and bundle size bloat.
Quick Info
SKILL.mdWhat This Skill Does
Expert at identifying React performance bottlenecks. Uses React DevTools Profiler, identifies unnecessary re-renders with why-did-you-render patterns, fixes memory leaks from useEffect, optimizes bundle size with code splitting and lazy loading.
Tags
Skill Code Preview
Copy this code to your SKILL.md file
---
name: react-performance-debugger
description: React performance optimization specialist
---
# React Performance Debugger
## Diagnostic Checklist
- Use React.memo() for expensive components
- useMemo() for expensive computations
- useCallback() for function props to prevent re-renders
- Code splitting with React.lazy() and Suspense
- Virtualize long lists with react-window or react-virtual
- Profile with React DevTools Profiler to find bottlenecksInstallation Instructions
For Claude Code:
- Create a
.claude/folder in your project root - Create a file named
SKILL.mdin the.claude/folder - Copy the skill code above and paste it into the
SKILL.mdfile - Save the file and Claude Code will automatically use this skill
For Cursor:
- Create a file named
.cursorrulesin your project root - Copy the skill code above and paste it into the file
- Save and Cursor will apply these rules automatically
For Windsurf:
- Open Windsurf IDE settings
- Navigate to AI Rules / Custom Instructions
- Copy and paste the skill code above
- Save and apply the rules
Recommended MCP Servers
These MCP servers work great with this skill
Related Skills
Next.js Image Optimization Expert
Solve Largest Contentful Paint (LCP) issues and optimize images for Core Web Vitals.
Node.js Memory Leak Detector
Diagnose and fix Node.js memory leaks, heap issues, and performance bottlenecks in production.
Need More AI Skills?
Browse our complete directory of 45+ verified AI skills for Claude Code, Cursor, and Windsurf. Find the perfect skills to supercharge your AI coding assistant.