argent-react-native-optimization
starsforks
How to install argent-react-native-optimization?
software-mansion/argent/argent-react-native-optimization
$npx -y skills add software-mansion/argent --skill argent-react-native-optimizationOptimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Entry-point for all performance work. Use when the app feels slow, user asks to optimize, fix re-renders, reduce jank, or improve startup. Delegates to argent-react-nati
SKILL.md
| 1 | ## Rules |
| 2 | |
| 3 | - Do not apply shotgun optimizations. Measure first, define what "good enough" looks like (target metric + threshold), fix the top offender, re-measure honestly. |
| 4 | - **Quick scan** — `react-profiler-renders` for a live render count table. Identifies hot components instantly. |
| 5 | - **Deep measure** — load `argent-react-native-profiler` skill. `react-profiler-start` → interact → `react-profiler-stop` → `react-profiler-analyze`. |
| 6 | - **Inspect** — `react-profiler-component-source` per finding. `react-profiler-fiber-tree` to trace component ancestry and render cost. |
| 7 | - **Verify correctness** - before fixing, recollect information from steps above and make a logical conclusion whether the approach is worth undertaking. |
| 8 | - **Fix** — apply one fix. Validate with `debugger-evaluate` before committing. |
| 9 | - **Re-measure** — report whether the target metric improved, regressed, or stayed flat. Check for regressions in other areas. If no net benefit or unacceptable tradeoffs, revert. |
| 10 | - **Profile for discovery, not only verification.** Use the profiler to find issues static analysis missed, not only to confirm fixes. |
| 11 | - **One fix per cycle for architectural changes.** Mechanical batch fixes (inline styles, index keys) can be grouped — re-profile once after the batch. When the measurement involves device interaction, record it as a flow (`argent-create-flow` skill) before the first run so all subsequent cycles replay identical steps. |
| 12 | - **React Compiler**: if `react-profiler-analyze` reports `reactCompilerEnabled: true`, do NOT propose `useCallback`/`useMemo`/`React.memo` unless you confirmed compiler bail-out via `react-profiler-fiber-tree` (absent `useMemoCache`). |
| 13 | - **Sub-agents**: Phases 1–2 dispatch sub-agents — one per file for lint results, one per checklist item for semantic. Sub-agents CANNOT touch the device - all profiling and E2E verification must happen in the main agent. |
| 14 | |
| 15 | ## Pipeline |
| 16 | |
| 17 | **Lint and semantic sweeps catch deterministic issues cheaply. Profiling finds runtime bottlenecks that static analysis misses. Do both.** |
| 18 | |
| 19 | Copy this checklist into your TODO list: |
| 20 | |
| 21 | ``` |
| 22 | Optimization Progress: |
| 23 | - [ ] Phase 1: Lint sweep (deterministic — catch mechanical issues without a running app) |
| 24 | - [ ] Phase 2: Semantic sweep (judgment — memoization, lists, animations, etc.) |
| 25 | - [ ] Phase 3: Baseline profile (find real bottlenecks, fix top offenders) |
| 26 | - [ ] Phase 4: Verify no regressions (crashes, errors, red screens) |
| 27 | ``` |
| 28 | |
| 29 | ### Phase 1: Lint sweep |
| 30 | |
| 31 | Run ESLint once at the project root with a comprehensive RN performance ruleset. Dispatch sub-agents to fix results — one per file. |
| 32 | See [references/lint-rules.md](references/lint-rules.md) for ruleset and procedure. |
| 33 | |
| 34 | ### Phase 2: Semantic sweep |
| 35 | |
| 36 | Review each area requiring judgment — memoization, list rendering, animations, async patterns, effect cleanup, state hygiene, context architecture. Dispatch one sub-agent per checklist item. |
| 37 | See [references/semantic-checklist.md](references/semantic-checklist.md) for full checklist. |
| 38 | |
| 39 | ### Phase 3: Visual profiling |
| 40 | |
| 41 | 1. Load `argent-react-native-profiler` skill, start dual profiling |
| 42 | 2. Exercise key user flows (navigate screens the user specified, or all major flows) |
| 43 | 3. Analyze with `react-profiler-analyze` + `native-profiler-analyze` + `profiler-combined-report` |
| 44 | 4. Cross-reference profiling results with Phase 1–2 findings |
| 45 | 5. Fix highest-impact issues. Re-profile after architectural changes; batch mechanical fixes. If a recorded flow breaks after a fix (e.g., UI layout changed), follow `argent-create-flow` skill to repair the flow rather than silently discarding it. |
| 46 | |
| 47 | ### Phase 4: Verify no regressions |
| 48 | |
| 49 | Navigate every screen and UI flow within scope, confirm each renders without errors. If no scope was specified, verify the entire app — cover all reachable screens via `argent-device-interact`. Use `debugger-log-registry` to check for runtime errors and take screenshots to check for red/yellow error screens. Check for regressions introduced by fixes (e.g., fewer re-renders but higher CPU, or new jank in a different screen). Main agent only. |
| 50 | |
| 51 | ## App-wide optimization |
| 52 | |
| 53 | 1. **Phase 1**: run lint centrally (one command), dispatch sub-agents to fix per-file in parallel |
| 54 | 2. **Phase 2**: one sub-agent per checklist item for semantic sweep |
| 55 | 3. **Phase 3**: main agent profiles top offending screens; fixes architectural issues top-down |
| 56 | 4. **Phase 4**: main agent navigates all screens to verify nothing crashes |
| 57 | |
| 58 | After the entire run, run lint again to verify no new issues were introduced with your changes. |
| 59 | This also helps ensure you haven't missed any issues which could've been fixed. |
People who liked this also viewed
6 picksType
- tddSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeSkillsJul 2026
- qaSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidenceSkillsJul 2026
- webapp-testingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser lSkillsJul 2026
- playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, teSkillsJul 2026
