fix(performance): replace npx with yarn; trim to installed/Expo-native 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>

Author: andrepimenta

domains/performance/skills/performance/references/bundle-analyze-js.md

@@ -1,170 +1,79 @@
 ---
 title: Analyze JS Bundle Size
 impact: CRITICAL
-tags: bundle, analysis, source-map-explorer, expo-atlas
+tags: bundle, analysis, expo-atlas
 ---
 
 # Skill: Analyze JS Bundle Size
 
-Use source-map-explorer and Expo Atlas to visualize what's in your JavaScript bundle.
+Use **Expo Atlas** to visualize what's in your JavaScript bundle. metamask-mobile
+is an Expo project (Metro bundler), and Atlas is the Expo-first-party analyzer —
+its hooks are built into the Expo CLI, so you enable it on the `expo export` you
+already run.
 
 ## Quick Command
 
 ```bash
-# React Native CLI
-npx react-native bundle \
-  --entry-file index.js \
-  --bundle-output output.js \
-  --platform ios \
-  --sourcemap-output output.js.map \
-  --dev false --minify true && \
-npx source-map-explorer output.js --no-border-checks
-
-# Expo
-EXPO_UNSTABLE_ATLAS=true npx expo export --platform ios && npx expo-atlas
+# One-time: add the Atlas viewer (Expo pins the SDK-compatible version)
+yarn expo install expo-atlas
+
+# Emit bundle data, then open the treemap viewer
+EXPO_ATLAS=1 yarn expo export --platform ios
+yarn expo-atlas
 ```
 
+> Don't `npx expo-atlas` — `npx` fetches and runs an unpinned remote version on
+> every call. `yarn expo install` pins the SDK-compatible version once.
+
 ## When to Use
 
 - JS bundle seems too large
 - Want to identify heavy dependencies
 - Investigating startup time issues
 - Before/after optimization comparison
 
-> **Note**: This skill involves visual treemap output (source-map-explorer, Expo Atlas). When regression checks include device flows, use `agent-device` for app evidence; install it through the environment's approved/trusted path or ask the user if verification needs it and it is missing. Treemap analysis itself may still require exported reports, browser screenshots, or human review.
+> **Note**: Atlas produces a visual treemap (browser UI). Treemap analysis may
+> require exported reports, browser screenshots, or human review.
 
 ## Understanding Hermes Bytecode
 
 Modern React Native (0.70+) uses Hermes bytecode, not raw JavaScript:
+
 - Skips parsing at runtime
 - Still benefits from smaller bundles
 - Heavy imports still execute on startup
 
 **Impact of bundle size:**
+
 - Larger bytecode = longer download from store
 - More imports on init path = slower TTI
 
-## Method 1: source-map-explorer
+## Expo Atlas
 
-### Generate Bundle with Source Map
+The Atlas **data emission** is built into the Expo CLI (the `EXPO_ATLAS` env var
+on `expo export` / `expo start`); the `expo-atlas` package provides the
+**viewer**. Add it once with `yarn expo install expo-atlas`.
 
-**React Native CLI:**
+### Generate + view
 
 ```bash
-npx react-native bundle \
-  --entry-file index.js \
-  --bundle-output output.js \
-  --platform ios \
-  --sourcemap-output output.js.map \
-  --dev false \
-  --minify true
-```
+# Export with Atlas enabled
+EXPO_ATLAS=1 yarn expo export --platform ios
 
-**Expo (SDK 51+):**
+# Or while running the dev server
+EXPO_ATLAS=1 yarn expo start
 
-```bash
-npx expo export --platform ios --source-maps --output-dir dist
-# Bundle at: dist/ios/_expo/static/js/ios/*.js
-# Source map at: dist/ios/_expo/static/js/ios/*.map
+# Open the treemap viewer (reads .expo/atlas.jsonl)
+yarn expo-atlas
 ```
 
-### Analyze
-
-```bash
-npx source-map-explorer output.js --no-border-checks
-```
-
-**Note**: `--no-border-checks` needed due to Metro's non-standard source maps.
-
-Opens browser with treemap visualization:
-
-![Bundle Treemap from source-map-explorer](images/bundle-treemap-source-map-explorer.png)
-
-The treemap shows:
-- **Hierarchy**: `node_modules/` → `react-native/` → `Libraries/` → individual files
-- **Size**: Box area proportional to file size (KB shown in labels)
-- **Major components visible**: 
-  - `react-native` (724.18 KB, 80.5%)
-  - `Renderer` (208.44 KB) - ReactNativeRenderer-prod.js, ReactFabric-prod.js
-  - `Components` (125.29 KB) - Touchable, ScrollView, etc.
-  - `Animated` (79.48 KB) - Animation system
-  - `virtualized-lists` (57.57 KB) - FlatList internals
-
-Click on any section to drill down into that directory.
-
-**Limitation**: May lose ~30% info due to mapping issues.
-
-## Method 2: Expo Atlas
-
-More accurate for Expo projects (or with workaround for bare RN).
-
-### For Expo Projects
-
-```bash
-# Start with Atlas enabled
-EXPO_UNSTABLE_ATLAS=true npx expo start --no-dev
-
-# Or export
-EXPO_UNSTABLE_ATLAS=true npx expo export
-```
-
-Then launch UI:
-
-```bash
-npx expo-atlas
-```
+(The older env var name `EXPO_UNSTABLE_ATLAS=true` still works on some versions.)
 
 ![Expo Atlas Treemap](images/expo-atlas-treemap.png)
 
-Expo Atlas provides more accurate visualization for Expo projects, with similar treemap interface showing module sizes and dependencies.
-
-### For Non-Expo Projects
-
-Use `expo-atlas-without-expo` package.
-
-## Method 3: Re.Pack Bundle Analysis (Webpack/Rspack)
-
-If using Re.Pack:
-
-### webpack-bundle-analyzer
-
-```bash
-rspack build --analyze
-```
-
-### bundle-stats / statoscope
-
-```bash
-# Generate stats
-npx react-native bundle \
-  --platform android \
-  --entry-file index.js \
-  --dev false \
-  --minify true \
-  --json stats.json
-
-# Analyze
-npx bundle-stats --html --json stats.json
-```
-
-### Rsdoctor
-
-```javascript
-// rspack.config.js
-const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
-
-module.exports = {
-  plugins: [
-    process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
-  ].filter(Boolean),
-};
-```
-
-Run with:
-
-```bash
-RSDOCTOR=true npx react-native start
-```
+The treemap shows module sizes and dependencies — box area is proportional to
+size. Drill into `node_modules/` to find the heaviest packages (e.g.
+`react-native` core, renderer, `Animated`, `virtualized-lists`).
 
 ## What to Look For
 
@@ -173,17 +82,17 @@ RSDOCTOR=true npx react-native start
 | Finding | Problem | Solution |
 |---------|---------|----------|
 | Entire library imported | Barrel exports | Use direct imports |
-| Duplicate packages | Multiple versions | Dedupe in package.json |
+| Duplicate packages | Multiple versions | Dedupe in `package.json` |
 | Dev dependencies in bundle | Incorrect imports | Check conditional imports |
-| Large polyfills | Unnecessary for Hermes | Remove (see native-sdks-over-polyfills.md) |
-| Moment.js with locales | Bloated date library | Switch to date-fns or dayjs |
+| Large polyfills | Unnecessary for Hermes | Remove (see [native-sdks-over-polyfills.md](./native-sdks-over-polyfills.md)) |
+| Moment.js with locales | Bloated date library | Switch to `dayjs` (already installed) |
 
 ### Common Offenders
 
-- **Lodash full import**: Use `lodash-es` or specific imports
-- **Moment.js**: Replace with `date-fns` or `dayjs`
-- **Intl polyfills**: Check Hermes API and method coverage before removing them
-- **AWS SDK**: Import specific services only
+- **Lodash full import**: use specific submodule imports (`import x from 'lodash/x'`)
+- **Moment.js**: replace with `dayjs` (already installed)
+- **Intl polyfills**: check Hermes API and method coverage before removing them
+- **AWS SDK**: import specific services only
 
 ## Code Examples
 
@@ -192,68 +101,17 @@ RSDOCTOR=true npx react-native start
 ```tsx
 // BAD: Imports entire library through barrel
 import { format } from 'date-fns';
-
-// In bundle: All of date-fns loaded
+// In bundle: all of date-fns loaded
 
 // GOOD: Direct import
 import format from 'date-fns/format';
-
-// In bundle: Only format function
+// In bundle: only the format function
 ```
 
 ## Comparing Bundles
 
-### source-map-explorer
-
-```bash
-# Generate baseline
-npx react-native bundle ... --bundle-output baseline.js --sourcemap-output baseline.js.map
-
-# Make changes, generate new bundle
-npx react-native bundle ... --bundle-output current.js --sourcemap-output current.js.map
-
-# Compare manually in browser
-```
-
-### Re.Pack (automated)
-
-```bash
-npx bundle-stats compare baseline-stats.json current-stats.json
-```
-
-## Quick Commands
-
-**React Native CLI:**
-
-```bash
-# iOS bundle analysis
-npx react-native bundle \
-  --entry-file index.js \
-  --bundle-output ios-bundle.js \
-  --platform ios \
-  --sourcemap-output ios-bundle.js.map \
-  --dev false \
-  --minify true && \
-npx source-map-explorer ios-bundle.js --no-border-checks
-
-# Android bundle analysis  
-npx react-native bundle \
-  --entry-file index.js \
-  --bundle-output android-bundle.js \
-  --platform android \
-  --sourcemap-output android-bundle.js.map \
-  --dev false \
-  --minify true && \
-npx source-map-explorer android-bundle.js --no-border-checks
-```
-
-**Expo:**
-
-```bash
-# Use Expo Atlas (recommended for Expo projects)
-EXPO_UNSTABLE_ATLAS=true npx expo export --platform ios
-npx expo-atlas
-```
+Run Atlas before and after a change (or on two branches) and compare the
+treemaps — the heaviest boxes that grew/shrank show where the change landed.
 
 ## Related Skills
 

domains/performance/skills/performance/references/bundle-library-size.md

@@ -17,11 +17,8 @@ Evaluate third-party library size impact before adding to your project.
 ## Quick Command
 
 ```bash
-# Check size before installing
+# Check size before installing — no install needed:
 # Visit: https://bundlephobia.com/package/[package-name]
-
-# Or use CLI
-npx bundle-phobia-cli <package-name>
 ```
 
 ## When to Use
@@ -142,14 +139,14 @@ import get from 'lodash/get';        // 8K (gzipped: 2.9K)
 | aws-sdk (full) | 200+ KB | @aws-sdk/client-* |
 | crypto-js | ~15 KB | react-native-quick-crypto |
 
-## Quick Size Check Script
+## Quick Size Check
 
 ```bash
-# Check size before installing
-npx bundle-phobia-cli <package-name>
+# Check size before installing — no install needed:
+# https://bundlephobia.com/package/<package-name>
 
-# Or use npm directly (less accurate)
-npm pack <package-name> --dry-run 2>&1 | grep "total files"
+# Or inspect the published tarball metadata via the package manager:
+yarn npm info <package-name> dist.unpackedSize
 ```
 
 ## Decision Matrix

domains/performance/skills/performance/references/bundle-tree-shaking.md

@@ -182,7 +182,7 @@ Or specify files with side effects:
 ## Verification
 
 1. Build production bundle (see [bundle-analyze-js.md](./bundle-analyze-js.md))
-2. Analyze with source-map-explorer (see [bundle-analyze-js.md](./bundle-analyze-js.md))
+2. Analyze with Expo Atlas (see [bundle-analyze-js.md](./bundle-analyze-js.md))
 3. Search for functions you know are unused
 4. If found → tree shaking not working
 

domains/performance/skills/performance/references/js-measure-fps.md

@@ -100,14 +100,14 @@ flashlight measure
 **iOS (React Native CLI):**
 ```bash
 # Run Metro in production mode
-npx react-native start --reset-cache
+yarn react-native start --reset-cache
 # Then build release variant
 ```
 
 **Expo:**
 ```bash
 # Start Metro without dev mode
-npx expo start --no-dev --minify
+yarn expo start --no-dev --minify
 # For accurate measurements, use EAS Build for release testing
 ```