Argent React Native Profiler
Record Hermes CPU and React commit profiles on a RN app and get a ranked report of re-render and hotspot issues before or after a fix.
Overview
argent-react-native-profiler is an agent skill most often used in Ship (also Operate when diagnosing production-like slowness) that measures Hermes CPU and React commit performance and outputs ranked issues.
Install
npx skills add https://github.com/software-mansion/argent --skill argent-react-native-profilerWhat is this skill?
- react-profiler-start / react-profiler-stop pair for Hermes CPU sampling plus React commit-capture hooks
- Optional sample_interval_us control (default 100) for profiling granularity
- Ranks slow components, re-renders, and CPU hotspots into an issue report
- Designed for before/after comparisons when validating an optimization change
- Complements argent-react-native-optimization—profiles first, does not replace fix guidance
- Default CPU sample_interval_us of 100 when starting react-profiler-start
- Session stores cpuProfile and commitTree on react-profiler-stop
Adoption & trust: 1.9k installs on skills.sh; 1.2k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React Native app feels janky but you cannot tell whether wasted re-renders or CPU hotspots are the real bottleneck.
Who is it for?
Indie RN developers who need evidence-backed perf work on Hermes with structured start/stop tooling—not anecdotal FPS guesses.
Skip if: Teams only needing bundle-size or startup workflow help without measurement sessions (use app-workflow or optimization skills first).
When should I use this skill?
Optimizing RN performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report.
What do I get? / Deliverables
You end with stored cpuProfile and commitTree data and a ranked performance issue report to guide argent-react-native-optimization or targeted code changes.
- Recorded cpuProfile and commitTree session artifacts
- Ranked performance issue report (slow components, re-renders, hotspots)
- Before/after comparison notes when validating a fix
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Performance measurement belongs in Ship when hardening the app before release, and ties to measurable pass/fail on sluggish UI. Perf is the canonical shelf because the skill centers on react-profiler-start/stop, CPU sampling, and commit trees—not everyday local run setup.
Where it fits
Profile a heavy screen while implementing infinite lists to confirm commit cost before merging.
Run a before/after profile session to prove a memoization change reduced commits ahead of store submission.
Reproduce reported jank in a staging build and capture a ranked hotspot report for a patch release.
How it compares
Measurement and ranking layer for RN Hermes—pair with optimization skills rather than ad-hoc console.log render tracing.
Common Questions / FAQ
Who is argent-react-native-profiler for?
Solo and indie React Native builders optimizing Hermes apps who want ranked re-render and CPU data before changing architecture or memoization.
When should I use argent-react-native-profiler?
In Ship perf passes before release; during Build when validating a suspected slow screen; in Operate when investigating recurring jank after users complain—always with a reproducible UI scenario under profile.
Is argent-react-native-profiler safe to install?
Profiling injects hooks and records CPU data locally—review the Security Audits panel on this Prism page and use only on dev builds you control.
Workflow Chain
Requires first: argent react native app workflow
Then invoke: argent react native optimization
SKILL.md
READMESKILL.md - Argent React Native Profiler
This skill is complementary to `argent-react-native-optimization`, not a replacement for it. ## 2. Tool Overview ### React Profiler (Hermes / React commits) | Tool | Purpose | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `react-profiler-start` | Start CPU sampling + inject React commit-capture hook. Optional: `sample_interval_us` (default 100). | | `react-profiler-stop` | Stop recording; stores cpuProfile + commitTree in session. | | `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. | | `react-profiler-analyze` | Run pipeline -> report with CPU-enriched hot commits, sorted by `totalRenderMs` DESC. Saves raw data to disk. | | `react-profiler-component-source` | AST lookup: file, line, memoization status, 50 lines of source for a component. | | `react-profiler-renders` | Live fiber walk: render counts + durations per component (no profiling session required). | | `react-profiler-fiber-tree` | Live fiber walk: full component hierarchy as JSON. | ### Drill-Down Query Tools (call after analyze) | Tool | Purpose | | -------------------------- | -------------------------------------------------------------------------------------------- | | `profiler-cpu-query` | Targeted CPU investigation: top functions, time-windowed CPU, call trees, per-component CPU. | | `profiler-commit-query` | Targeted commit investigation: by component, time range, commit index, or cascade tree. | | `profiler-stack-query` | iOS Instruments drill-down: hang stacks, function callers, thread breakdown, leak details. | | `profiler-combined-report` | Cross-correlated report when both React Profiler and native profiler ran in parallel. | | `profiler-load