React Devtools
Drive agent-react-devtools CLI and daemon to inspect React trees, wait for components, and profile connected apps over WebSocket.
Overview
React Devtools is an agent skill most often used in Build (also Ship testing) that connects agents to live React apps via agent-react-devtools for tree inspection and wait-for-component workflows.
Install
npx skills add https://github.com/callstackincubator/agent-react-devtools --skill react-devtoolsWhat is this skill?
- Daemon on default port 8097 with start/stop/status and auto-start on CLI use
- wait --connected and wait --component with configurable timeouts
- get tree with depth, stable @cN labels, and type tags (fn, cls, host, memo, …)
- Blocks until apps connect or named components appear after reload
- Status output: connected apps, component count, profiling state, uptime
- Default daemon port 8097
- Default wait timeout 30s for --connected and --component
Adoption & trust: 1.4k installs on skills.sh; 224 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent cannot see what actually rendered in the browser after a change, so debugging React structure requires guesswork from source alone.
Who is it for?
Solo builders automating React debugging with Claude Code, Cursor, or Codex alongside a local dev server and agent-react-devtools wired in.
Skip if: Non-React stacks, production-only environments without dev WebSocket hookup, or workflows that only need visual design review.
When should I use this skill?
Inspecting React component hierarchy, managing devtools daemon lifecycle, or waiting for app connection or named components via agent-react-devtools CLI.
What do I get? / Deliverables
You get CLI-driven tree snapshots and blocking waits until apps or named components are present, so agents reason on live hierarchy not static files.
- Indented component tree with @cN labels and type tags
- Daemon status including apps connected, component count, profiling state
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Component tree inspection is anchored in Build while implementing React UIs agents can see and query. Frontend subphase matches React hierarchy, display names, and render timing during feature work.
Where it fits
After an agent edits a route, run get tree --depth N to confirm the expected child components mounted.
Use wait --component CheckoutBanner before asserting agent-driven fixes in an integration repro.
Reproduce a user report by waiting --connected then dumping the tree to spot missing error boundaries.
How it compares
Agent-oriented CLI + daemon integration—not the in-browser React DevTools extension UI.
Common Questions / FAQ
Who is react-devtools for?
Indie developers and agent users who want programmatic React tree reads and wait primitives during automated coding sessions.
When should I use react-devtools?
During Build frontend when verifying component trees; after reloads when waiting for a named UI piece; at Ship when confirming a fix rendered the expected hierarchy.
Is react-devtools safe to install?
It runs a local daemon and opens ports; review Security Audits on this page and only connect dev apps you trust on localhost.
SKILL.md
READMESKILL.md - React Devtools
# Command Reference ## Daemon Management ### `agent-react-devtools start [--port N]` Start the background daemon. Default port: 8097. The daemon listens for WebSocket connections from React apps and IPC connections from the CLI. Auto-starts when you run any other command, so you rarely need this explicitly. ### `agent-react-devtools stop` Stop the daemon process. All connection state is lost. ### `agent-react-devtools status` Show daemon status: port, connected apps, component count, profiling state, uptime, and last connection event. Output: ``` Daemon: running (port 8097) Apps: 1 connected, 42 components Last event: app connected 3s ago Uptime: 120s ``` If profiling is active, shows `Profiling: active`. ### `agent-react-devtools wait --connected [--timeout S]` Block until at least one React app connects via WebSocket. Resolves immediately if already connected. Default timeout: 30s. Exits non-zero on timeout. ### `agent-react-devtools wait --component <name> [--timeout S]` Block until a component with the given display name appears in the tree. Uses exact name matching. Useful after a reload to wait for a specific part of the UI to render. Default timeout: 30s. Exits non-zero on timeout. ## Component Inspection ### `agent-react-devtools get tree [--depth N]` Print the component hierarchy as an indented tree. Each node shows: - Label (`@c1`, `@c2`, ...) — stable within a session, resets on app reload - Type tag (`fn`, `cls`, `host`, `memo`, `fRef`, `susp`, `ctx`) - Display name - Key (if present) Use `--depth N` to limit tree depth. Recommended for large apps. ### `agent-react-devtools get component <@cN | id>` Inspect a single component. Shows: - **props** — all prop values (functions shown as `ƒ`, long values truncated at 60 chars) - **state** — state values (class components and useState) - **hooks** — all hooks with current values and sub-hooks Accepts a label (`@c5`) or numeric React fiber ID. ### `agent-react-devtools find <name> [--exact]` Search components by display name. Default is case-insensitive substring match. Use `--exact` for exact match. Returns a flat list of matching components with labels, types, and keys. ### `agent-react-devtools count` Count components by type. Output: `42 components (fn:25 host:12 memo:3 cls:2)`. ### `agent-react-devtools errors` List all components that have non-zero error or warning counts. React tracks console errors and warnings per component; this command surfaces them. Output example: ``` @c5 [fn] Form ⚠2 ✗1 @c8 [fn] Input ✗3 ``` `⚠N` = N warnings, `✗N` = N errors. Returns "No components with errors or warnings" when everything is clean. Error/warning annotations also appear in `get tree`, `get component`, and `find` output when counts are non-zero. ## Profiling ### `agent-react-devtools profile start [name]` Start a profiling session. Optional name for identification. Only one session can be active at a time. ### `agent-react-devtools profile stop` Stop profiling and collect data from React. Shows a summary with duration, commit count, and top rendered components. ### `agent-react-devtools profile slow [--limit N]` Rank components by average render duration (slowest first). Default limit: 10. Output columns: label, type tag, component name, avg duration, max duration, render count, all causes, changed keys. ### `agent-react-devtools profile rerenders [--limit N]` Rank components by render count (most re-renders first). Default limit: 10. Output columns: label, type tag, component name, render count, all causes, changed keys. ### `agent-react-devtools profile report <@cN | id>` Detailed render report for a single component: render count, avg/max/total duration, all render causes, changed keys. ### `agent-react-devtools profile timeline [--limit N] [--offset N] [--sort duration|timeline]` Chronological list of React commits during the profiling session. Each entry: index, duration, component count. Default limit: 20. The header shows how many commits