tour: Skill for Claude Code

Webapp perf cross-check

Prerequisites

The React-renders instrument requires agent-browser to be opened with React DevTools enabled:

agent-browser open <url> --enable react-devtools

Without this flag, react renders start fails with a non-obvious error about the DevTools hook not being installed. Chrome trace and MutationObserver work without it.

The trap

React DevTools' render profile reports a DOM column per component (e.g. 320/325). It counts fiber commits, not browser DOM mutations. A component can show "320 DOM updates" while the actual browser performed zero. React schedules a commit, the reconciler diffs the new tree against the old, finds nothing to update, but the profiler still ticks the counter.

Treat React DevTools render counts as a hypothesis, never as evidence of real cost. Confirm with browser-side signals before writing any patch.

Cross-check pattern

Run all three before deciding a cascade is real. agent-browser supports all three.

1. React renders (fiber commits — often inflated)

agent-browser react renders start
# ... do the action ...
agent-browser react renders stop --json

Note the Re-renders and DOM columns and the change reasons — they tell you which prop / state changed, which is the actual diagnostic value.

2. Chrome trace (real browser work)

agent-browser trace start
# ... do the action ...
agent-browser trace stop
# trace is saved under ~/.agent-browser/tmp/traces/trace-<ts>.json
python3 scripts/aggregate-trace.py <path-to-trace.json> "<label>"

scripts/aggregate-trace.py sums main-thread cost per event name and per EventDispatch:<type>, then prints the cross-check targets summary.

Targets per interaction:

• EventDispatch:click / keydown < 50 ms → no long task
• Layout count ≤ 2 per interaction (more = layout thrash)
• Paint < 16 ms → frame budget intact

3. MutationObserver (real DOM mutations)

agent-browser eval "
  window.__mut = 0;
  const o = new MutationObserver((muts) => { window.__mut += muts.length });
  o.observe(document.body, {childList:true, subtree:true, attributes:true, characterData:true});
  'observing'
"
# ... do the action ...
agent-browser eval "window.__mut"