feat(performance): add frontend anti-pattern detection and delta attribution skills

[MajorLift]

Builds out the performance domain around one idea: shift performance work left in the loop — catch the regression at review time, prove the fix moved something, and do both against a shared, non-duplicated body of knowledge.

Supersedes #82 and #49, both closed; all three shared the same knowledge substrate, so they review as one change.

The loop

Stage	What lands here
Catch it at review	effect-antipattern-scan, selector-antipattern-scan — grep-driven checklists over a PR diff, with extension and mobile overlays
Prove it moved	react-render-delta — re-render counts, selector recomputes, A/B arms at a fixed commit
Measure it honestly	data-analysis — turn raw numbers into a defensible before/after; benchmark-design — design a benchmark that measures what you think it does; extension-profiling — compare branches with WDYR and the React DevTools Profiler
Know the codebase	the mm-* reference library and its audit playbook, for MetaMask Mobile

Knowledge is the single source

knowledge/selector-antipatterns.md and knowledge/effect-antipatterns.md are the canonical, platform-agnostic taxonomy. Everything else names them rather than restating them.

That mattered because the definitions had started to exist in two places — these files, and the performance skill's mm-* references already on main. Same patterns, same worked examples, two homes that would drift. Now:

• The knowledge files are the union of both sides. The selector file absorbed mutation in the result function and over-broad input from mm-selector-memoization; the effect file absorbed the dependency-side patterns from mm-hook-dependency-arrays and the lifecycle-side ones (derived state, effect chains, uncancelled async).
• mm-selector-memoization.md keeps everything only it can say — this codebase's selector creators, the verified instance table with file:line, the fix recipes, the scoped greps, the don't-over-correct caveats — and now maps each generic pattern onto the codebase instead of redefining it. No mobile-specific content was removed.

Citations are by name, not relative link — deliberately. tools/install copies domain knowledge/ and a skill's references/ as siblings under the installed skill directory, while in the repo they sit three levels apart. So ../../../knowledge/x.md resolves here and breaks once installed; ../knowledge/x.md does the reverse. No relative path is correct in both layouts. Section anchors are gone for a related reason — they broke the moment the taxonomy was renumbered.

Worth stating plainly since "single source" invites the question: on disk, a consumer still receives one copy of each knowledge file per skill — install calls copy_domain_knowledge once per skill per operator. The single source is in this repo (one file to edit, no authored drift), not in the installed output.

react-render-delta

Prove a rendering or memoization change actually reduced work. The falsifier is the interesting part: an arm whose treatment never reached the built bundle. A null from undelivered treatment is indistinguishable from a null from a genuinely small effect, and reports as the second — so the skill gates on delivery before reading any delta. Covers why-did-you-render counts, reselect's real .recomputations(), and A/B arms toggled at a fixed commit rather than across a merge boundary.

Mobile reference library

Field-tested before review — it produced 13 tickets in previously unidentified areas, and its own guardrails ruled out roughly 90% of candidate findings, which are encoded back into the references.

• Compiler error triage (mm-react-compiler-error-triage) — the 'Todo' split plus the panicThreshold ratchet; turns ~7,000 apparent errors into a 31-file backlog.
• Cascade repair (mm-selector-cascade) — traverse the selector graph to closure, fix the root, then delete the downstream isEqual band-aids instead of accumulating more.
• Cache thrashing (mm-state-normalization) — parameterized selectors with single-entry caches recompute per row, forever.
• Effect lifecycle (mm-useeffect-antipatterns) — the missing other half of mm-hook-dependency-arrays.

Showcase — react-render-delta on a real cascade

The regressions that hide worst are in repeated work — renders, selector recomputations, allocations that run more often than they need to. A single-action stopwatch reads them as noise and production telemetry never emits them at all. The count is the signal, and it only exists once you add the instrument.

A render-cascade epic in metamask-extension, measured across both arms with why-did-you-render:

Arm	Commit	Re-renders
Baseline	1d6d1811b8	178
Epic complete	0d37542a08	61

Same flow, same build configuration, arms differing only by commit — a 66% reduction that no timing measurement would have surfaced, because each individual render is far below the noise floor of a stopwatch.

Two of the constituent fixes show what the counts localise to:

• #39312 — broken memoization in getPendingApprovals
• #37147 — broken memoization in getInternalAccounts

Both are selectors returning a fresh reference on every call, so every consumer re-rendered on every state change. Invisible in a profile as anything but diffuse cost; unambiguous as a count.

The falsifier the skill enforces: an arm whose treatment never reached the built bundle. A null result from undelivered treatment is indistinguishable from a null result from a small effect, and reports as the second. So delivery is checked in each arm before any delta is interpreted — the counting instrument has to be present and the change actually built, or the comparison means nothing.

Notes

• No CHANGELOG entry. Per CONTRIBUTING, that file tracks consumer-facing changes to the @metamask/skills CLI package; skill-only PRs don't add one.
• Removed references to private planning tickets — five internal epic/audit-ticket identifiers that shouldn't sit on a public repo. Surrounding guidance unchanged; only the identifiers are gone.
• Two sanity checks where mobile knowledge beats mine: the per-slice reference-stability framing in the cascade file versus the store's actual behavior, and the compiler error categories versus what the Babel logger emits in practice (names verified against the babel-plugin-react-compiler@1.0.0 dist this repo ships).
• Sources: contributor-docs frontend-performance.md · metamask-extension#38007, #37147 · Is there a benefit to removing existing memoization code? reactwg/react-compiler#16. Validation tickets: metamask-mobile#31490–#31501, #31507, #31509.

---

Validation runs

Trial runs of this PR's skills against merged metamask-extension PRs nobody flagged. Every claim was re-verified against the real diff before posting. Clean results are included on purpose — a skill that only ever reports problems cannot be calibrated.

PR	Skill	Verdict	Finding
#39310	react-render-delta	Gap	"149 consumers" counts call sites, not renders
#40859	react-render-delta	Gap	deep-equal to reference-equal: recomputations may rise
#44392	selector-antipattern-scan	Gap	?? {} fresh object, unmemoized, into useSelector
mobile#33578	mobile perf	Unmeasured	class property → per-render const feeding a FlashList

Each comment carries a trial-run disclaimer and links back here for feedback.

Coverage gap this surfaced. No skill here detects renderItem identity instability: neither antipattern-scan mobile overlay mentions renderItem, FlatList, or FlashList, and the performance overlay carries the guidance without a detection for it. The run also hit the overlay's own rule — don't suggest useMemo/useCallback without profiler evidence — so the comment reports the identity delta and names what to measure rather than prescribing the patch.

[MajorLift]

Context budget

What this PR costs an agent, measured from an install rather than read from the diff. Three tiers, and only the first is unavoidable.

Skill	Frontmatter	Selected	+ refs & knowledge
data-analysis	221 chars	~1,428 tok	~1,428 tok
effect-antipattern-scan	89 chars	~1,193 tok	~1,193 tok
extension-profiling	134 chars	~680 tok	~680 tok
react-render-delta	780 chars	~1,938 tok	~1,938 tok
selector-antipattern-scan	100 chars	~2,510 tok	~2,510 tok
benchmark-design	109 chars	~882 tok	~882 tok

Frontmatter is the only tier paid unconditionally — every agent loads it on every run once the skill is installed, used or not, because it is what the agent reads to decide relevance. The 28 skills across the eleven open skill PRs sit at a median of ~1,716 tokens selected and ~1,860 with references followed. All are within the 1,536-character description budget.

Selected is paid only when the agent picks the skill. + refs & knowledge is the ceiling if every bundled reference is then read; it is a worst case, not an expectation.

Method

tools/install --repo metamask-extension --maturity experimental against this branch at c18c751a7, measured per installed skill directory. Repo overlays are merged into the emitted SKILL.md, so they land in the selected tier rather than being missed by a source-byte count. Token figures are bytes/4 — a proxy for scale, not accounting.

These figures are pinned to the commit above and drift on every push; #96 tracks automating them.