skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

agent-react-devtools

Inspect React component trees, props, state, hooks, and rendering performance from the command line.

4|Updated May 16, 2026
Search Tags:#debugging#React#cli#React Native#devtools#performance profiling#component inspection
One-click install
npx skills add https://github.com/reason-machines/devtools-skills --skill agent-react-devtools-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agent-react-devtools
Source: https://github.com/reason-machines/devtools-skills/tree/main/skills/agent-react-devtools
Command: npx skills add https://github.com/reason-machines/devtools-skills --skill agent-react-devtools-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI agents and developers lack programmatic access to a running React application's internals, making it hard to debug component state, props, and rendering performance without opening a browser DevTools panel manually. ## Core Features & Use Cases - Component Tree Inspection: Browse the live component hierarchy, search components by name, and view props, state, and hooks for any component via stable IDs like @c5. - Performance Profiling: Record profiling sessions, find the slowest components, detect excessive re-renders, inspect commit timelines, and export or diff profiling results. - Automation-Friendly Daemon: A persistent background daemon with wait commands and exit codes enables CI checks and scripted monitoring of React apps. - Use Case: While an AI agent drives your app with a browser automation tool, run a profiling session to identify which components re-render most during a search interaction, then inspect the offending component's props and hooks directly from the terminal. ## Quick Start Start the agent-react-devtools daemon, connect my running React app, and show me the component tree with the slowest rendering components.

Frequently Asked Questions about agent-react-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect React component props and state from the command line?▼

Start the agent-react-devtools daemon, connect your app, then run "agent-react-devtools get tree" to list components and "agent-react-devtools get component @cN" to view a specific component's props, state, and hooks.

How to profile React rendering performance and find slow components?▼

Run "agent-react-devtools profile start", perform the interaction in your app, then "profile stop" followed by "profile slow" or "profile rerenders" to list the slowest and most frequently re-rendered components.

Does agent-react-devtools work with Vite and Next.js projects?▼

Yes. Run "npx agent-react-devtools init" to auto-detect and patch Vite, Next.js, or CRA configs, or add the reactDevtools() Vite plugin manually before react() in your plugins array.

Can I use React DevTools CLI with React Native apps?▼

Yes, React Native connects automatically once the daemon is started alongside the Metro bundler. For physical devices, forward the port with "adb reverse tcp:8097 tcp:8097".

Why is my React app not connecting to the devtools daemon?▼

Connection only works in development builds, not production. Verify the daemon is running with "status", ensure the connect import is the first import in your entry file, and check the browser console for WebSocket errors.

Why do profile commands return no data?▼

Profiling data is only collected after you stop the session with "agent-react-devtools profile stop". Run the stop command first, then use profile slow, rerenders, or export to view results.

Related Skills

Explore More Software Engineering Skills→
sombeksombek

expo-web-to-native

Migrate a web React app to a native iOS/Android app with Expo, screen by screen.

Community
Advanced
nexus-substratenexus-substrate
18

performance-optimization

Measure p50/p95 bottlenecks, apply targeted fixes, and verify improvements.

Official
Intermediate
WeKruitWeKruit

browser-use

Automate browser interactions for web testing, form filling, screenshots, and data extraction.

Official
Advanced
LynxLabVNLynxLabVN

node-inspect-debugger

Debug Node.js applications via Chrome DevTools Protocol with breakpoints and variable inspection.

Official
Advanced