ReddRadar
Agent skill
react_perf_perfection
A "No-Compromise" React performance checklist enforcing strict re-render discipline and bundle auditing.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/react-perf-perfection
SKILL.md
React Performance Perfection Protocol
1. Re-render Police
- Strict Rule: Every
useEffect,useCallback, anduseMemomust have a justified dependency array. - Check:
- Are object/array props creating new references on every render? -> Use
useMemo. - Are function props defined inline? -> Move to
useCallbackor outside component.
- Are object/array props creating new references on every render? -> Use
- Tool: If available, use
React DevTools Profilermental model (Why did this render?).
2. Bundle Diet
- Strict Rule: No "Barrel File" imports for massive libraries (e.g.,
import { X } from 'lodash'). Use direct paths (import X from 'lodash/X') unless tree-shaking is verified. - Images: No
import img from './large.png'. Use lazy loading or external hosting. - Lazy Loading: Route-level components MUST be lazy loaded (
React.lazy).
3. The "Interaction to Next Paint" (INP) Rule
- Heavy computations (>50ms) must strictly be wrapped in
useTransitionor moved to a Web Worker. - Blocking the main thread for UI updates is Forbidden.
4. Checklist Before Edit
- Will this change cause a parent re-render?
- Am I importing a huge library for a small utility?
- Is this state strictly local, or am I polluting the global store?
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?