Claude MarketplacesSubmit
erichowens avatar

React Performance Optimizer

erichowens/some_claude_skills

This is a solid diagnostic and remediation tool for when your React app actually has performance problems, not theoretical ones. It pushes back against premature optimization (don't useMemo string concatenation) while showing exactly when to reach for memoization, virtualization with react-window, or code splitting. The decision tree is practical: slow renders get memoization, lists over 100 items get virtualized, bundles over 500KB get split. What I appreciate is the specificity around anti-patterns like breaking React.memo with unstable callbacks, which is incredibly common. It acknowledges React Compiler coming in 2024-2025 will automate much of this, but until then you need to know these patterns. Use it when Profiler shows renders over 16ms or you're actually experiencing jank.

skills.sh installs
118
GitHub stars
113
last updated
Jun 3, 2026
View on GitHub

Install

$ npx -y skills add erichowens/some_claude_skills --skill react-performance-optimizer --agent claude-code

Installs into .claude/skills of the current project.

Files

React Performance Optimizer

Expert in diagnosing and fixing React performance issues to achieve buttery-smooth 60fps experiences.

When to Use

✅ Use for:

  • Slow component re-renders
  • Large lists (>100 items) causing lag
  • Bundle size >500KB (gzipped)
  • Time to Interactive >3 seconds
  • Janky scrolling or animations
  • Memory leaks from unmounted components

❌ NOT for:

  • Apps with <10 components (premature optimization)
  • Backend API slowness (fix the API)
  • Network latency (use caching/CDN)
  • Non-React frameworks (use framework-specific tools)

Quick Decision Tree

Is your React app slow?
├── Profiler shows &gt;16ms renders? → Use memoization
├── Lists with &gt;100 items? → Use virtualization
├── Bundle size &gt;500KB? → Code splitting
├── Lighthouse score &lt;70? → Multiple optimizations
└── Feels fast enough? → Don't optimize yet

Technology Selection

Performance Tools (2024)

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/erichowens/some_claude_skills
Categories
Frontend Development, Debugging
First seen
Jun 3, 2026

More from erichowens/some_claude_skills

All 73

Recommended

More Frontend Development
1agentworkforce avatarcreating-claude-hooksagentworkforce/relayThis is your reference for building executable hooks that tap into Claude Code's event system.0skills.sh installs
2callstackincubator avatarreact-native-testingcallstackincubator/agent-skills>0skills.sh installs
3callstackincubator avatarvercel-react-native-skillscallstackincubator/agent-skillsA collection of agent-optimized React Native skills for AI coding assistants.0skills.sh installs
4CongDon1207 avatarangular-api-serviceCongDon1207/AGENTS.mdAngular devs know that HTTP services can quickly become a mess of repeated code and inconsistent error handling.0skills.sh installs
5davila7 avatarHTML Injection Testingdavila7/claude-code-templatesThis skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applicati0skills.sh installs
6kubesphere avatarfrontend-forge-fe-operationskubesphere/kubesphereOperate FrontendExtension (FE) resources in frontend-forge: create, update, rebuild, inspect package artifacts, download packages, publish, unpublish, delete, a0skills.sh installs