Summary
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.
Install to Claude Code
npx -y skills add callstackincubator/agent-react-devtools --skill react-devtools --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
