Communitygithub.com

callstackincubator/react-devtools

Ferramenta de linha de comando do React DevTools para agentes de IA. Permite depurar aplicativos React e React Native em tempo de execução, inspecionar props/state/hooks de componentes, diagnosticar desempenho de renderização, identificar componentes lentos e entender por que algo está sendo re-renderizado.

O que é react-devtools?

Esta skill permite que agentes de IA, como Claude Code ou Cursor, executem comandos do React DevTools diretamente via linha de comando (CLI) para depuração de aplicativos React e React Native em tempo real. Ela é ativada por solicitações como "por que isso está re-renderizando", "inspecione o componente", "quais props X tem", "perfile o aplicativo", "encontre componentes lentos", "depure a UI" ou "o aplicativo parece lento". Ao usar esta skill, o agente pode inspecionar a árvore de componentes, examinar props, state e hooks, medir desempenho de renderização e identificar gargalos de performance. A skill suporta tanto aplicativos web React quanto React Native, e é baseada no pacote `@callstackincubator/react-devtools-cli`, que fornece uma interface de linha de comando para interagir com o React DevTools integrado ao aplicativo. Ela funciona conectando-se ao aplicativo em execução (por exemplo, via Chrome DevTools protocol para web ou depurador do React Native), executando comandos como `npx react-devtools-cli inspect` ou `npx react-devtools-cli profile`. É útil para desenvolvedores que usam assistentes de IA para depuração automatizada de React, pois elimina a necessidade de abrir manualmente as ferramentas de desenvolvedor do navegador.

Funciona com~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/callstackincubator/agent-react-devtools/tree/main/skills/react-devtools
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que react-devtools faz?

React DevTools CLI para agentes de IA. Use quando o usuário solicitar que você depure um aplicativo React ou React Native em tempo de execução, inspecione props/state/hooks de componentes, diagnostique o desempenho de renderização, analise re-renderizações, encontre componentes lentos ou entenda por que algo está re-renderizando. Os gatilhos incluem "por que isso está re-renderizando", "inspecione o componente", "quais props X tem", "perfile o aplicativo", "encontre componentes lentos", "depure a UI", "verifique o estado do componente", "o aplicativo parece lento" ou qualquer tarefa de depuração em tempo de execução do React.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community