Help us improve
Share bugs, ideas, or general feedback.
From mthines-agent-skills
Analyzes React DevTools, Chrome Performance traces, and heap snapshots to identify bottlenecks and propose ranked code fixes. Use when handed a profile file or asked "why is this slow?".
npx claudepluginhub mthines/agent-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/mthines-agent-skills:profile-optimizerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Turn a profile file into a ranked, evidence-backed optimisation plan.
references/chrome-optimization-patterns.mdreferences/react-optimization-patterns.mdrules/chrome-trace-analysis.mdrules/confidence-loop.mdrules/heap-snapshot-analysis.mdrules/input-detection.mdrules/measurement-methodology.mdrules/optimization-playbook.mdrules/react-profile-analysis.mdscripts/heap-diff.mjsscripts/heap-summary.mjstemplates/analysis-report.mdGuides technical evaluation of code review feedback: read fully, restate for understanding, verify against codebase, respond with reasoning or pushback before implementing.
Share bugs, ideas, or general feedback.
Turn a profile file into a ranked, evidence-backed optimisation plan.
Index file. Detailed analysis rules, optimisation patterns, and report templates live under
rules/,references/, andtemplates/. Load only what the current phase needs — the body ofSKILL.mdis a thin orchestrator.
The user passes one or more profile files. Accept any of:
| Format | Extension | Detection signal |
|---|---|---|
| React DevTools Profiler | .json (often .reactprofile) | Top-level keys include dataForRoots and rendererID / version |
| Chrome Performance trace | .json / .json.gz | Top-level traceEvents array (or NDJSON with ph, ts, cat) |
| Chrome CPU profile (legacy) | .cpuprofile | Top-level nodes, samples, timeDeltas |
| Chrome heap snapshot | .heapsnapshot | Top-level snapshot.meta.node_fields + nodes/edges/strings |
| Chrome heap timeline | .heaptimeline | Heap snapshot shape + samples array |
| Chrome heap profile (sampled allocations) | .heapprofile | Top-level head + samples (V8 sampling-allocation profile) |
If the file is gzipped, decompress with gunzip -k before parsing.
If multiple formats are passed, treat them as complementary evidence:
See rules/input-detection.md for the precise
detection logic.
Six phases. Do not skip a gate.
| Phase | Name | Rule file | Gate |
|---|---|---|---|
| 0 | Intake | rules/input-detection.md | Format detected, file size and validity confirmed |
| 1 | Measurement frame | rules/measurement-methodology.md | Baseline metric chosen (TBT, INP, p95 commit, retained MB, etc.) and target stated |
| 2 | Hotspot extraction | rules/react-profile-analysis.md, rules/chrome-trace-analysis.md, or rules/heap-snapshot-analysis.md | Top-N bottlenecks listed with concrete numbers (ms / MB / %, count) |
| 3 | Root-cause | rules/optimization-playbook.md | Each hotspot mapped to a code-level cause (file path / component / API) |
| 4 | Confidence gate | rules/confidence-loop.md | /confidence analysis ≥ 90% — else iterate (max 2 deep-dives) |
| 5 | Optimisation plan | templates/analysis-report.md | Report written with ranked fixes, expected impact, and verification plan |
Phases 2 and 3 branch on the input format (CPU / memory) — everything else is shared.
Load on demand — do not preload.
After the first pass at root-cause analysis, invoke the confidence skill in
analysis mode:
Skill(skill="confidence", args="analysis")
Apply this gate:
| Score | Action |
|---|---|
| ≥ 90% | Proceed to Phase 5 (optimisation plan). |
| 70–89% | Run one deeper pass: re-read the profile, look at the next-deepest frame, correlate sources. |
| < 70% | Surface the gap to the user with a question — do not propose code changes on speculation. |
After two deep-dive iterations without reaching 90%, stop and present
findings as a hypothesis with the evidence required to confirm it. This is
the /confidence iteration protocol applied to performance work — see
rules/confidence-loop.md.
<UserList> rendered 47 times in a 230ms commit, accounting for 38% of
that commit" is./confidence returns < 90%, dig
deeper or admit uncertainty. Do not paper over a weak diagnosis with a
confident-sounding fix.rules/optimization-playbook.md)
useMemo/useCallback everywhere without measuring (the
React Compiler exists, and unmeasured memoisation often regresses).Function call as the root cause without
expanding the call stack.When the input is a heap snapshot / timeline / profile:
heap-summary on the most recent snapshot for top constructors
and node-type breakdown:
node --max-old-space-size=4096 \
<skill_dir>/scripts/heap-summary.mjs <snapshot.heapsnapshot>
heap-diff for the leak case to find what grew between two
snapshots:
node --max-old-space-size=4096 \
<skill_dir>/scripts/heap-diff.mjs <before.heapsnapshot> <after.heapsnapshot>
rules/heap-snapshot-analysis.md
Phases 3–4 to go from constructor name → source file → retainer pattern.The full methodology (capture protocol, how to interpret the diff, common
leak shapes) is in rules/heap-snapshot-analysis.md.
Don't preload it — only when an input is detected as a heap format.
/confidence analysis reached ≥ 90% (or two deep-dives recorded
with the remaining uncertainty surfaced to the user).templates/analysis-report.md, with
ranked fixes, expected ms / MB saved, and a re-profile verification step.