React Devtools
Profile and inspect React Native component trees, hooks, and rerender causes from your coding agent via the agent-device CLI.
Overview
react-devtools is an agent skill most often used in Build (also Operate) that inspects and profiles React Native component trees through agent-device.
Install
npx skills add https://github.com/callstackincubator/agent-device --skill react-devtoolsWhat is this skill?
- Routes agent requests through `agent-device react-devtools` for tree, props, state, hooks, and render ownership
- Requires agent-device >= 0.14.0 with upgrade path when the CLI is too old
- Bounded reads with `--depth`/`find` and `@c` refs treated as reload-local
- Performance profiling scoped to the interaction under investigation
- Separates RN internals from device-level UI via standard agent-device commands for screenshots, logs, and network
Adoption & trust: 1.3k installs on skills.sh; 2.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You see jank or mystery rerenders in React Native but cannot explain which components, props, or hooks are responsible from chat alone.
Who is it for?
Solo builders debugging React Native performance, excessive rerenders, or state/props mismatches with agent-device already in the workflow.
Skip if: Pure web React debugging, projects without agent-device, or teams that cannot install or upgrade the global agent-device CLI.
When should I use this skill?
React Native performance, profiling, props, state, hooks, render causes, slow components, excessive rerenders, or questions like why a component rerendered.
What do I get? / Deliverables
You get bounded component-tree reads, ownership of renders, and interaction-scoped profiles so you can fix the right RN surface faster.
- Bounded component-tree inspection
- Render-ownership and profiling notes for the investigated interaction
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
React Native UI debugging sits in the build phase where solo builders iterate on screens and performance before ship. Component trees, props, state, and render profiling are frontend concerns even on native mobile stacks.
Where it fits
Trace which parent state change causes a list item to rerender on every keystroke.
Profile a navigation transition to find slow components before release.
Reproduce a production build jank report and map it to specific hook subscriptions.
How it compares
Use for RN scene-graph introspection via CLI—not generic browser DevTools or ad-hoc screenshot-only debugging.
Common Questions / FAQ
Who is react-devtools for?
Indie and solo developers shipping React Native apps who use agent-device and want their coding agent to drive DevTools-style inspection.
When should I use react-devtools?
During build when tuning UI performance or tracing hooks and props; during operate when reproducing slow screens or rerender storms on device builds.
Is react-devtools safe to install?
Review the Security Audits panel on this Prism page and treat agent-device shell access like any local dev tool before granting agent automation.
SKILL.md
READMESKILL.md - React Devtools
# react-devtools Router for React Native internals. Private setup before using this skill: ```bash agent-device --version ``` Require `agent-device >= 0.14.0`; older CLIs lack these help topics. If older, run `npm install -g agent-device@latest`, recheck, then continue. If you cannot upgrade, stop and tell the user. Do not include version/upgrade commands in final plans. Read current CLI guidance: ```bash agent-device help react-devtools ``` Use `agent-device react-devtools ...` for component tree, props, state, hooks, render ownership, performance profiling, slow components, or rerenders. Use normal `agent-device` commands for visible UI, refs, screenshots, logs, network, or device-level perf. Keep reads bounded with `--depth`/`find`, treat `@c` refs as reload-local, and profile only the investigated interaction. Let `help react-devtools` provide exact command shapes, remote bridge ordering, pinned package details, and current workflow guidance.