メニュー
Inspect and profile React Native component trees from agent-device. Use when debugging React Native props, state, hooks, render causes, slow components, excessive re-renders, or questions like why a component re-rendered.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | react-devtools |
| description | Inspect and profile React Native component trees from agent-device. Use when debugging React Native props, state, hooks, render causes, slow components, excessive re-renders, or questions like why a component re-rendered. |
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.
agent-device to open the React Native app and verify the visible state when needed.agent-device react-devtools status.get tree, find, and get component.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.
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
agent-device skill.get tree --depth 3 or find <name> to keep output bounded.@c5 reset when the app reloads or components remount. After reload, run wait --connected and inspect again.profile start and profile stop.adb reverse tcp:8097 tcp:8097 for React DevTools. If Metro is local, also set adb reverse tcp:8081 tcp:8081.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.| File | When to read |
|---|---|
| commands.md | Command reference and common inspection flows |
| profiling.md | Render profiling workflow and interpretation |
Automates interactions for Apple-platform apps (iOS, tvOS, macOS) and Android devices. Use when navigating apps, taking snapshots/screenshots, tapping, typing, scrolling, extracting UI info, or collecting logs, network inspection, and perf snapshots across mobile, TV, and desktop targets.
Inspect Pi session history, analyze repeated assistant mistakes, and turn durable learnings into corrective skills or context updates. Use when the user asks to review previous sessions, learn from a failed interaction, or stop the model repeating a mistake.
Maintain Pi extensions in this repository with explicit runtime boundaries, tests, docs, and verification.