Argent React Native Profiler

This skill is complementary to argent-react-native-optimization, not a replacement for it.

Physical iPhone: not supported; react-profiler-* reject kind: "device". Profile on a simulator.

2. Tool Overview

React Profiler (Hermes / React commits)

Drill-Down Query Tools (call after analyze)

For native profiling (CPU hotspots, UI hangs, memory leaks), see the argent-native-profiler skill.

3. Agent Behavior Guidelines

Follow these rules throughout the profiling workflow:

• 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.
• 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

After analysis: ask about next steps

After presenting the analysis report, always ask the user what they want to do next. Present these options:

1. Investigate further — drill down into specific findings using query tools (CPU call trees, commit cascades, hang stacks, etc.) to identify root causes with confidence before making changes.
2. Implement fixes — apply changes based on the current findings, then re-profile to measure whether the metric changed (improved, regressed, or stayed flat).
3. Done for now — accept the report as-is.

Do NOT silently move on after the report. The report is the starting point, not the end — query tools exist specifically to let you dig deeper into anything the report flags.

During investigation: use query tools proactively

When drilling down, chain query tool calls based on what you find:

• A hot commit -> profiler-commit-query mode=by_index to see all components -> profiler-cpu-query mode=component_cpu for the slowest one -> profiler-cpu-query mode=call_tree for the hot function -> read the source file -> propose a fix.
• A memory leak -> profiler-stack-query mode=leak_stacks to identify the responsible module -> read the native source if actionable.
• A native hang -> profiler-stack-query mode=hang_stacks to get the native call chain -> correlate with React commit timing.

After fixes: always re-profile

When you apply a fix, always re-profile the same scenario afterward. Compare before/after metrics (commit durations, CPU time, render counts) and report honestly: did the target metric improve, stay flat, or regress? Did any _other_ metric get worse? If you need to reference the original data, use profiler-load to reload the pre-fix session. If the fix showed no improvement or introduced a regression, say so explicitly and reconsider the approach.

Use flows for reproducible profiling

When profiling requires a specific interaction sequence (scroll a list, navigate screens, trigger an animation), record the interaction as a flow using the argent-create-flow skill before the first profiling run. Then replay the same flow for every subsequent run. This eliminates interaction variance as a confounder and makes before/after comparisons meaningful. Especially important when:

• You are about to re-profile after applying a fix (Step 8).
• The user asks you to compare multiple profiling sessions.
• The interaction path is more than 2-3 steps long.

4. Standard Profiling Workflow

Complete all steps in order — do not break mid-flow.

Step 1: Start profiling

Mind the react-native and ios-native profiler selection mentioned above when starting the session and start the tools. Save `startedAtEpochMs` from the response — you will need it for annotation offsets. Every subsequent profiler/query call in this session must use the same device_id. Before beginning, define lightweight success criteria with the user: which metric matters most (e.g., totalRenderMs, specific commit duration, render count for a component) and what threshold would be meaningful. This anchors later evaluation. On success:

• if user asked you to perform the profiling, determine how to profile yourself using tools described in argent-device-interact skill.
• if the user stated they wish to perform the interaction themselves — suggest what interaction to perform (e.g. "scroll the list", "switch tabs") and wait for their reply.