React Devtools

callstackincubator/agent-react-devtoolsOfficial

This connects Claude to a running React or React Native app via the DevTools protocol and exposes the component tree, props, state, hooks, and profiling data in a parseable format. You'd reach for it when debugging why something re-renders too often, profiling slow interactions, or inspecting component state without littering your code with console.logs. The CLI gives you stable component labels like @c1, @c2 that persist across commands, so you can get the tree, find the culprit, then drill into its props and render history. One catch: if you're using it with agent-browser, you must run in headed mode because headless Chromium won't execute the connection script properly. The profiling workflow is solid for isolating expensive commits and tracking down what props or state triggered each render.

skills.sh installs: 2.7K
GitHub stars: 252
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add callstackincubator/agent-react-devtools --skill react-devtools --agent claude-code

Installs into .claude/skills of the current project.

Files

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 with agent-react-devtools start. Use agent-react-devtools wait --connected to 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

SKILL.md on GitHub