Skill

react-devtools

Inspects and profiles React Native component trees, props, state, hooks, render causes, slow components, and re-renders via agent-device react-devtools. Use for debugging React internals not in accessibility tree.

React Native

React

mobile

performance

Install

npx claudepluginhub joshuarweaver/cascade-code-testing-misc --plugin callstackincubator-agent-device

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Use this skill when the task needs React Native internals that are not visible in the accessibility tree: component hierarchy, props, state, hooks, render causes, or profiling data.

Supporting Assets

references/commands.mdreferences/profiling.md

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

159.9k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

159.9k

next-compile

1 file

Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.

vercel-next-js-2

139.2k

Stats

Stars1886

Forks107

Last CommitApr 25, 2026

Actions

View Source View Plugin View on GitHub View README

react-devtools

Use this skill when the task needs React Native internals that are not visible in the accessibility tree: component hierarchy, props, state, hooks, render causes, or profiling data.

Run commands through agent-device react-devtools. The command dynamically runs pinned agent-react-devtools@0.4.0 and passes arguments through 1:1.

The first run may download the pinned package from npm. agent-device global flags work before or after react-devtools; use -- before downstream flags only when they intentionally share an agent-device global flag name.

Default flow

Use agent-device to open the React Native app and verify the visible state when needed.
Check agent-device react-devtools status.
If no app is connected, start or wait for the devtools daemon, then reload or relaunch the app.
Inspect with get tree, find, and get component.
Profile only around the interaction being investigated.
Verify the fix with the same command sequence and interaction.

For cross-platform validation with explicit --device, --udid, or --serial selectors, prefer an isolated --state-dir over separate named sessions. Named sessions enable bound-session locks during setup. Restart agent-device react-devtools between iOS and Android runs so status, get tree, and profiling clearly refer to the currently launched app.

Main commands

agent-device react-devtools status
agent-device react-devtools wait --connected
agent-device react-devtools get tree --depth 3
agent-device react-devtools find <ComponentName>
agent-device react-devtools get component @c5
agent-device react-devtools profile start
agent-device react-devtools profile stop
agent-device react-devtools profile slow --limit 5
agent-device react-devtools profile rerenders --limit 5

Decision rules

Need current UI text, refs, screenshots, logs, network, or device metrics: use the agent-device skill.
Need props, state, hooks, component ownership, render causes, or React profiler data: use this skill.
Start component-tree reads with get tree --depth 3 or find <name> to keep output bounded.
Labels like @c5 reset when the app reloads or components remount. After reload, run wait --connected and inspect again.
Profiling only captures renders between profile start and profile stop.
On Android, set adb reverse tcp:8097 tcp:8097 for React DevTools. If Metro is local, also set adb reverse tcp:8081 tcp:8081.
For Android sessions connected through agent-device connect --remote-config, run agent-device react-devtools ... normally. The CLI registers a bridge companion tunnel to the local DevTools daemon on 127.0.0.1:8097 and unregisters it when the command exits.
Remote Android React DevTools assumes the React Native-bundled DevTools behavior in React Native 0.83+. Do not assume older browser/Chromium DevTools workflows exist in remote sandboxes. For Expo apps, verify the SDK's bundled React Native version and runtime behavior first; no Expo SDK version is separately verified by this skill.

References

File	When to read
commands.md	Command reference and common inspection flows
profiling.md	Render profiling workflow and interpretation