feat(performance): add mobile-performance skill for metamask-mobile by andrepimenta · Pull Request #19 · MetaMask/skills

andrepimenta · 2026-06-01T13:10:29Z

What

Adds a MetaMask-Mobile performance advisor skill under the performance domain. Installs as mms-performance on metamask-mobile.

Mobile-only by construction: it ships only repos/metamask-mobile.md (no metamask-extension overlay), so it sits alongside the existing extension perf-* skills and touches none of them.

Layout

domains/performance/skills/performance/
├── skill.md                  # name + (eval-optimized) description
├── repos/metamask-mobile.md  # the SKILL body (mobile-only)
└── references/               # 31 md (incl. onboarding) + images/

Coverage

Full lifecycle (planning → design → dev → review → testing → audit → debug → fix → production):

MetaMask-specific (mm-*): selector memoization, Redux/useSelector anti-patterns, Context perf, hook dependency arrays, unstable hook returns, layout animations (Reanimated v3), eager-work-on-mount, real-time/streaming data, a symptom-first tool guide (Perf Monitor / RN DevTools / Flashlight / trace() / Reassure / Release Profiler), the power-user scenario, React Compiler, planning & audit playbooks.
Adapted from Callstack (js-* / native-* / bundle-*, MIT): profiling, lists/FlashList, concurrent React, memory leaks, TTI, bundle/barrel, etc. — with MetaMask notes.

Notes for reviewers

Anti-pattern claims were verified against the metamask-mobile codebase (file:line cited). Findings that need on-device measurement are explicitly marked UNVALIDATED with measurement steps.
Two references point at internal Confluence pages (the Performance Guide recordings, and the Power-user SRPs page). Flag if you'd prefer those genericized or moved to a private overlay.
Description triggers reliably with precision; auto-trigger recall is modest — pairing with mms-pr-readiness-check is recommended.

🤖 Generated with Claude Code

Adds a MetaMask-Mobile performance advisor skill (installs as `mms-performance`) under the performance domain. Mobile-only: ships only a `repos/metamask-mobile.md` overlay (no metamask-extension overlay), so it coexists with the existing extension perf-* skills and touches none of them. Covers the full lifecycle (planning → design → dev → review → testing → audit → debug → fix → production) with MetaMask-specific guidance: selector memoization, Redux/useSelector anti-patterns, Context perf, hook dependency arrays, unstable hook returns, layout animations (Reanimated v3), eager-work-on-mount, real-time/streaming data, FlashList v2, TTI + the app/util/trace.ts instrumentation API, Reassure, bundle/barrel, and a symptom-first tool guide. Anti-pattern claims were verified against the metamask-mobile codebase; on-device-only findings are marked UNVALIDATED. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…codebase - Flashlight is not a dependency in metamask-mobile — reframe it as an optional/external tool, not part of the workflow (mm-tools.md, js-measure-fps.md). Day-to-day FPS uses Perf Monitor + RN DevTools. - Document the real component-level instrumentation convention: a per-feature `useXMeasurement` hook (usePredictMeasurement / usePerpsMeasurement / useSectionPerformance) that ends on conditions, which structurally enforces "end on data-loaded, not mount". Raw trace()/endTrace() is the core-init pattern (EngineService, Vault). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…e doc Adds a "Designed / vector animations → Rive" pointer to docs/readme/animations.md (which now carries a real in-app Rive example). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

NicolasMassart

issue (blocking): npx used throughout — installs and executes remote code on the fly, introducing supply chain risk.

Every npx <pkg> invocation fetches and executes whatever is currently published under that package name. The worst offender is npx react-compiler-healthcheck@latest — @latest guarantees it resolves to the most recently published version with no pinning. The fix is the same everywhere: install the tool as a pinned devDependency first, then invoke via yarn. For tools already present in the project (react-native, expo), use yarn <tool> directly.

Tool	Current	Fix
`react-native` (already a dep)	`npx react-native bundle`	`yarn react-native bundle`
`expo` (already a dep)	`npx expo export / start / install / lint`	`yarn expo export / start / install / lint`
`expo-atlas`	`npx expo-atlas`	`yarn add -D expo-atlas` → `yarn expo-atlas`
`source-map-explorer`	`npx source-map-explorer`	`yarn add -D source-map-explorer` → `yarn source-map-explorer`
`react-compiler-healthcheck`	`npx react-compiler-healthcheck@latest`	`yarn add -D react-compiler-healthcheck` → `yarn react-compiler-healthcheck`
`bundle-phobia-cli`	`npx bundle-phobia-cli <pkg>`	`yarn add -D bundle-phobia-cli` → `yarn bundle-phobia-cli <pkg>` — or use bundlephobia.com
`bundle-stats`	`npx bundle-stats`	`yarn add -D bundle-stats` → `yarn bundle-stats`

Affected files: mm-react-compiler.md:30, bundle-analyze-js.md (18 occurrences), mm-tools.md:176, onboarding.md:66, js-measure-fps.md:103,110, bundle-library-size.md:24,149, js-react-compiler.md:52,64,70,129,130,237,240.

…e tools Addresses PR review (supply-chain risk from npx): - react-native / expo: already deps -> `yarn <tool>` (no npx). - expo-atlas: kept as the one bundle analyzer; install via `yarn expo install` (SDK-pinned) + `EXPO_ATLAS=1 yarn expo export` + `yarn expo-atlas`. Never npx. - Excluded source-map-explorer, bundle-stats, bundle-phobia-cli (use bundlephobia.com), and react-compiler-healthcheck (use the installed ESLint react-compiler plugin instead) — none are installed and they overlap. - Rewrote bundle-analyze-js.md around Expo Atlas, dropping the source-map-explorer, bundle-stats, and Re.Pack/webpack sections (not used in this Metro/Expo app). No remaining `npx` except an explicit "don't npx" note. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

NicolasMassart

All npx instances addressed. The react-compiler-healthcheck fix is particularly good — routing through the already-installed ESLint plugin avoids a new dependency entirely. EXPO_UNSTABLE_ATLAS → EXPO_ATLAS is a nice bonus fix for SDK 54. LGTM.

…ile workflow (#40) ## What Follow-up to the merged `mobile-performance` skill (#19). Adds a recommended, validated workflow for root-causing a slow flow on a real / RC build using the **React Native Release Profiler**, with the resulting `.cpuprofile` analyzed either visually **or** by an AI coding agent. ### `references/mm-tools.md` - Rewrote the **Release Profiler** section as clear numbered steps: grab an RC build → shake → Performance Profiler → Start → run the flow → Stop → the `.cpuprofile` saves to Downloads → **analyze two ways:** - **Visualize the flame graph:** `yarn react-native-release-profiler --local <file.cpuprofile> [--sourcemap-path <maps>]` → SpeedScope / `chrome://tracing` / Perfetto. - **Or let AI read it:** hand the `.cpuprofile` to **Claude Code / your AI agent of choice** and ask "why is this slow?" — it parses the sampling profile and names the hot frames, no manual flame-graph reading. - Added an **"On an RC build"** decision-tree entry (RC tester / QA / a flow that's only slow in release) so the profiler isn't gated to production alerts only. ### `SKILL.md` - Added a trigger for *analyzing a captured `.cpuprofile` / React Native Release Profiler trace*, so handing over a profile fires this skill. Uses `yarn` throughout (no `npx`), consistent with the repo conventions and the rest of the skill. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

andrepimenta and others added 3 commits June 1, 2026 14:01

docs(performance): point the layout-animations skill to the Rive usag…

4818249

…e doc Adds a "Designed / vector animations → Rive" pointer to docs/readme/animations.md (which now carries a real in-app Rive example). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

NicolasMassart requested changes Jun 2, 2026

View reviewed changes

Comment thread domains/performance/skills/performance/references/mm-react-compiler.md Outdated

NicolasMassart approved these changes Jun 3, 2026

View reviewed changes

andrepimenta merged commit 75408fe into main Jun 3, 2026
21 checks passed

Mrtenz deleted the add-skill/mobile-performance branch June 4, 2026 09:18

andrepimenta mentioned this pull request Jun 5, 2026

docs(performance): recommend the Release Profiler → AI-agent .cpuprofile workflow #40

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(performance): add mobile-performance skill for metamask-mobile#19

feat(performance): add mobile-performance skill for metamask-mobile#19
andrepimenta merged 4 commits into
mainfrom
add-skill/mobile-performance

andrepimenta commented Jun 1, 2026

Uh oh!

NicolasMassart left a comment

Uh oh!

Uh oh!

NicolasMassart left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

andrepimenta commented Jun 1, 2026

What

Layout

Coverage

Notes for reviewers

Uh oh!

NicolasMassart left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

NicolasMassart left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants