Can I use this skill with React Native?

Yes, it supports both web-based React and React Native applications via the standard React DevTools protocol.

How are components referenced in the CLI?

The tool assigns stable, token-efficient labels like @c1 and @c2 to components, allowing the AI to reference specific nodes in follow-up commands.

Does it require a browser to function?

While it connects to running apps, if you are using it with agent-browser, you must use headed mode to ensure the DevTools scripts execute properly.

Can I inspect hooks with this tool?

Absolutely. You can view the current values and types of hooks, including useState, useMemo, and useCallback, for any selected component.

Can it help me find performance bottlenecks?

Yes, the profiling feature identifies slow components, tracks render counts, and highlights the specific props or state changes that triggered a re-render.

React DevTools for AI Agents

Name: React DevTools for AI Agents
Author: piotrski

bypiotrski

•

Mobile Development

Debugs React and React Native applications by inspecting component hierarchies, state, and performance metrics via a command-line interface.

This skill empowers Claude to perform deep runtime debugging and performance analysis on React and React Native applications by exposing the React DevTools protocol to the AI agent. It enables the inspection of component props, state, and hooks, as well as the identification of performance bottlenecks through real-time profiling and render-cause analysis. Whether diagnosing unnecessary re-renders, exploring complex component trees, or fixing state management issues, this tool provides the token-efficient data needed to resolve frontend bugs accurately and optimize user interfaces.

Key Features

01Access real-time props, state, and hooks data for any component

0237 GitHub stars

03Inspect full React component hierarchies with stable reference labels

04Profile application performance to identify slow components and render causes

05Fuzzy search for components by display name across the entire tree

06Monitor connection status between the AI agent and the running React application

Use Cases

01Optimizing app performance by finding the slowest components during specific user interactions

02Identifying why a specific React component is re-rendering unexpectedly by analyzing render causes

03Debugging complex state management issues by inspecting hooks and props at runtime

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotrski/agent-react-devtools react-devtools

For use in Claude.ai and ChatGPT

Download Skill