What is react-devtools?

A command-line inspection tool for a running React or React Native application. It connects through React DevTools to show the component tree, properties, state, hooks, and profiling data.

Use it to inspect components, diagnose rendering behavior, and profile performance while interacting with the running app.

It helps explain runtime problems such as unexpected re-renders, slow components, or incorrect values without relying only on source-code guesses.

react-devtools — Skill for Claude Code by callstackincubator

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add callstackincubator/agent-react-devtools --skill react-devtools

Clone the repo

git clone --depth 1 https://github.com/callstackincubator/agent-react-devtools

Made for: Claude Code.

Its marketplace also offers this one on its own, as the plugin agent-react-devtools — /plugin install agent-react-devtools after adding the marketplace above.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/callstackincubator/agent-react-devtools/react-devtools/github.svg)](https://agentmods.dev/skills/callstackincubator/agent-react-devtools/react-devtools)

Your own site

<a href="https://agentmods.dev/skills/callstackincubator/agent-react-devtools/react-devtools"><img src="https://agentmods.dev/badge/skills/callstackincubator/agent-react-devtools/react-devtools/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/callstackincubator/agent-react-devtools/react-devtools"><img src="https://agentmods.dev/badge/skills/callstackincubator/agent-react-devtools/react-devtools.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 111 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,057 The whole file, excluding the scripts and references it only reads on demand.

Security scan B 1 finding. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

Socket pass 15 Sept 2026
Snyk pass 15 Sept 2026

How audits are shown

Origin 100% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00111	$0.02057
Opus 5.5	$0.00044	$0.00823
Sonnet 5.5	$0.00022	$0.00411
Haiku 4.5	$0.00011	$0.00206

Measured 1mo ago against content hash d9632bf43186, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade B, and why

react-devtools scanned grade B with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Unrestricted tool accessmediumExcessive agency

A wildcard tool grant or "run any command" leaves no least-privilege boundary at all.

allowed-tools: Bash(agent-react-devtools:*)

Origin

This is a copy

100% identical to react-devtools — 53 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

packages/agent-react-devtools/skills/react-devtools/SKILL.md · 183 lines

How it starts

The opening of the file, as written. The whole thing — 183 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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

Component Inspection

agent-react-devtools get tree           # Full component hierarchy (labels: @c1, @c2, ...)
agent-react-devtools get tree --depth 3 # Limit depth
agent-react-devtools get component @c5  # Props, state, hooks for a specific component
agent-react-devtools find Button        # Search by display name (fuzzy)
agent-react-devtools find Button --exact # Exact match
agent-react-devtools count              # Count by type: fn, cls, host, memo, ...
agent-react-devtools errors             # List components with errors or warnings

Performance Profiling

agent-react-devtools profile start              # Start recording
agent-react-devtools profile stop               # Stop and collect data
agent-react-devtools profile slow               # Slowest components by avg render time
agent-react-devtools profile slow --limit 10    # Top 10
agent-react-devtools profile rerenders          # Most re-rendered components
agent-react-devtools profile report @c5         # Detailed report for one component
agent-react-devtools profile timeline --limit 10                        # First 10 commits (use --limit; uncapped can dump 300+ lines)
agent-react-devtools profile timeline --limit 10 --offset 10           # Next 10 (pagination)
agent-react-devtools profile timeline --sort duration --limit 5        # Top 5 most expensive commits
agent-react-devtools profile timeline --sort timeline --limit 5        # Explicit chronological order (same as default)
agent-react-devtools profile commit 3           # Detail for commit #3
agent-react-devtools profile export profile.json # Export as React DevTools Profiler JSON
agent-react-devtools profile diff before.json after.json  # Compare two exports

Read the full file on GitHub · 183 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

1mo ago Changed · +1 lines d9632bf43186
1mo ago First seen · 182 lines · 111 tokens per session scan B 89d5fc50ba85

Subscribe to this mod's changes

react-devtools is a skill published in the GitHub repository callstackincubator/agent-react-devtools (251 stars, last pushed 1mo ago), licensed MIT. It adds 111 tokens to every session and 2,057 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it B with 1 finding (unrestricted tool access). It is 100% identical to react-devtools, differing in 53 lines, and is treated as a copy.

Debugging Frontend React

material-ui-nextjs

Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.

mui/material-ui · 76 tokens

devtools-react

React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.

vercel-labs/json-render · 58 tokens

migrate-oxlint

Guide for migrating a project from ESLint to Oxlint. Use when asked to migrate, convert, or switch a JavaScript/TypeScript project's linter from ESLint to Oxlint.

oxc-project/oxc · 44 tokens

inspector-workbench

Runs Inspector UI work on the standalone Threads state lab so the agent can see the overlay. Use when a CopilotKit employee asks an agent to fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions, launcher, Home, Threads, Playground, Memory, or any visual behavior in @copilotkit/web-inspector. Don't…

CopilotKit/CopilotKit · 112 tokens

devtools-bidirectional

Two-way event patterns between devtools panel and application. App-to-devtools observation, devtools-to-app commands, time-travel debugging with snapshots and revert. structuredClone for snapshot safety, distinct event suffixes for observation vs commands, serializable payloads only.

TanStack/devtools · 59 tokens

devtools-instrumentation

Analyze library codebase for critical architecture and debugging points, add strategic event emissions. Identify middleware boundaries, state transitions, lifecycle hooks. Consolidate events (1 not 15), debounce high-frequency updates, DRY shared payload fields, guard emit() for production. Transparent server/client…

TanStack/devtools · 64 tokens

react-devtools