$npx -y skills add software-mansion/argent --skill argent-react-native-profilerProfile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report.
| 1 | This skill is complementary to `argent-react-native-optimization`, not a replacement for it. |
| 2 | |
| 3 | ## 2. Tool Overview |
| 4 | |
| 5 | ### React Profiler (Hermes / React commits) |
| 6 | |
| 7 | | Tool | Purpose | |
| 8 | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 9 | | `react-profiler-start` | Start CPU sampling + inject React commit-capture hook. Optional: `sample_interval_us` (default 100). | |
| 10 | | `react-profiler-stop` | Stop recording; stores cpuProfile + commitTree in session. | |
| 11 | | `react-profiler-status` | **Call if you were interrupted in the middle of the flow, never in another scenario** (debugger drop, Metro reload, pause, subagent handoff, any doubt). Returns `session_status: "active" \| "taken_over" \| "stopped" \| "no_react_runtime"`. Side-effect free. | |
| 12 | | `react-profiler-analyze` | Run pipeline -> report with CPU-enriched hot commits, sorted by `totalRenderMs` DESC. Saves raw data to disk. | |
| 13 | | `react-profiler-component-source` | AST lookup: file, line, memoization status, 50 lines of source for a component. | |
| 14 | | `react-profiler-renders` | Live fiber walk: render counts + durations per component (no profiling session required). | |
| 15 | | `react-profiler-fiber-tree` | Live fiber walk: full component hierarchy as JSON. | |
| 16 | |
| 17 | ### Drill-Down Query Tools (call after analyze) |
| 18 | |
| 19 | | Tool | Purpose | |
| 20 | | -------------------------- | -------------------------------------------------------------------------------------------- | |
| 21 | | `profiler-cpu-query` | Targeted CPU investigation: top functions, time-windowed CPU, call trees, per-component CPU. | |
| 22 | | `profiler-commit-query` | Targeted commit investigation: by component, time range, commit index, or cascade tree. | |
| 23 | | `profiler-stack-query` | iOS Instruments drill-down: hang stacks, function callers, thread breakdown, leak details. | |
| 24 | | `profiler-combined-report` | Cross-correlated report when both React Profiler and native profiler ran in parallel. | |
| 25 | | `profiler-load` | List and reload previous profiling sessions from disk for re-investigation with query tools. | |
| 26 | |
| 27 | For native profiling (CPU hotspots, UI hangs, memory leaks), see the `argent-native-profiler` skill. |
| 28 | |
| 29 | --- |
| 30 | |
| 31 | ## 3. Agent Behavior Guidelines |
| 32 | |
| 33 | Follow these rules throughout the profiling workflow: |
| 34 | |
| 35 | - Start `react-profiler-start` and `native-profiler-start` in parallel (two tool calls in one message). Both need `device_id`; use the same UDID for both so their data can be correlated later. This gives best coverage. |
| 36 | - If the user only wants native profiling, use the `argent-native-profiler` skill workflow. Only skip `native-profiler-start` if the user has **already explicitly said** they don't want native profiling in this session |
| 37 | |
| 38 | ### After analysis: ask about next steps |
| 39 | |
| 40 | After presenting the analysis report, always ask the user what they want to do next. Present these options: |
| 41 | |
| 42 | 1. **Investigate further** — drill down into specific findings using query tools (CPU call trees, commit |