Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/callstackincubator/agent-react-devtools/react-devtoolsnpx skills add callstackincubator/agent-react-devtools --skill react-devtoolsgit clone --depth 1 https://github.com/callstackincubator/agent-react-devtoolsWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00111 | $0.01948 |
| Opus 5 | $0.00056 | $0.00974 |
| Sonnet 5 | $0.00022 | $0.00390 |
| Haiku 4.5 | $0.00011 | $0.00195 |
Grade B, and why
react-devtools scanned grade B with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Unrestricted tool accessmediumExcessive agency
A wildcard tool grant or "run any command" leaves no least-privilege boundary at all.
allowed-tools: Bash(agent-react-devtools:*) This is a copy
100% identical to react-devtools — 10 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 182 lines — stays where its author put it; the contents beside it link to each section on GitHub.
agent-react-devtools
CLI that connects to a running React or React Native app via the React DevTools protocol and exposes the component tree, props, state, hooks, and profiling data in a token-efficient format.
Core Workflow
- Ensure connection — check
agent-react-devtools status. If the daemon is not running, start it withagent-react-devtools start. Useagent-react-devtools wait --connectedto block until a React app connects. - Inspect — get the component tree, search for components, inspect props/state/hooks.
- Profile — start profiling, trigger the interaction (or ask the user to), stop profiling, analyze results.
- Act — use the data to fix the bug, optimize performance, or explain what's happening.
Essential Commands
Daemon
agent-react-devtools start # Start daemon (auto-starts on first command)
agent-react-devtools stop # Stop daemon
agent-react-devtools status # Check connection, component count, last event
agent-react-devtools wait --connected # Block until a React app connects
agent-react-devtools wait --component App # Block until a component appears
Component Inspection
agent-react-devtools get tree # Full component hierarchy (labels: @c1, @c2, ...)
agent-react-devtools get tree --depth 3 # Limit depth
agent-react-devtools get component @c5 # Props, state, hooks for a specific component
agent-react-devtools find Button # Search by display name (fuzzy)
agent-react-devtools find Button --exact # Exact match
agent-react-devtools count # Count by type: fn, cls, host, memo, ...
agent-react-devtools errors # List components with errors or warnings
Performance Profiling
agent-react-devtools profile start # Start recording
agent-react-devtools profile stop # Stop and collect data
agent-react-devtools profile slow # Slowest components by avg render time
agent-react-devtools profile slow --limit 10 # Top 10
agent-react-devtools profile rerenders # Most re-rendered components
agent-react-devtools profile report @c5 # Detailed report for one component
agent-react-devtools profile timeline --limit 10 # First 10 commits (use --limit; uncapped can dump 300+ lines)
agent-react-devtools profile timeline --limit 10 --offset 10 # Next 10 (pagination)
agent-react-devtools profile timeline --sort duration --limit 5 # Top 5 most expensive commits
agent-react-devtools profile timeline --sort timeline --limit 5 # Explicit chronological order (same as default)
agent-react-devtools profile commit 3 # Detail for commit #3
agent-react-devtools profile export profile.json # Export as React DevTools Profiler JSON
agent-react-devtools profile diff before.json after.json # Compare two exports
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 182 lines · 111 tokens per session scan B 89d5fc50ba85
react-devtools is a skill published in the GitHub repository callstackincubator/agent-react-devtools (240 stars, last pushed 1mo ago), licensed MIT. It adds 111 tokens to every session and 1,948 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it B with 1 finding (unrestricted tool access). It is 100% identical to react-devtools, differing in 10 lines, and is treated as a copy.
Other skills, from other repositories
orca-emulator-android
Control an Android emulator / device from inside Orca using the orca CLI. Use for listing/booting AVDs, taps, swipes, typing, hardware buttons (incl. Back and Recents), rotation, app install/launch, runtime permissions, the accessibility tree, and logcat — driving a real adb-connected device or emulator.…
speckit-analyze
Perform a non-destructive cross-artifact consistency and quality analysis across spec.md, plan.md, and tasks.md after task generation.
add-sample
Create a SamplesApp sample page with correct theming and attributes. Use when adding UI samples for controls.
mapping-to-snomed
Maps clinical concept spans extracted by OpenMed to SNOMED CT concepts through a USER-SUPPLIED terminology server (the user's own Ontoserver, Snowstorm, or UMLS/UTS), never a bundled vocabulary. Use when the user wants to code findings, disorders, procedures, body structures, or substances to SNOMED CT, run an ECL…
android-tombstone-symbolication
Symbolicate the .NET runtime frames in an Android tombstone file. Extracts BuildIds and PC offsets from the native backtrace, downloads debug symbols from the Microsoft symbol server, and runs llvm-symbolizer to produce function names with source file and line numbers. USE FOR triaging a .NET MAUI or Mono Android app…
auditing-subgroup-fairness
Audit an OpenMed NER or de-identification model for performance disparities across demographic subgroups (sex, age band, race/ethnicity when available) using openmed.eval.fairnessreport. Use when the user wants per-subgroup recall and leakage, wants to check whether de-identification under-protects a group, wants to…