Communitygithub.com

callstackincubator/react-devtools

React DevTools CLI pour agents IA. Utilisez-le lorsque l'utilisateur vous demande de déboguer une application React ou React Native en cours d'exécution, d'inspecter les props/état/hooks des composants, de diagnostiquer les performances de rendu, de profiler les re-rendus, de trouver les composants lents ou de comprendre pourquoi quelque chose se re-rend. Les déclencheurs incluent « pourquoi cela se re-rend », « inspecter le composant », « quelles props a X », « profiler l'application », « trouver les composants lents », « déboguer l'interface utilisateur », « vérifier l'état du composant », « l'application est lente », ou toute tâche de débogage React en cours d'exécution.

Qu'est-ce que react-devtools ?

Ce skill permet à un agent IA d'utiliser React DevTools en ligne de commande pour inspecter et déboguer des applications React et React Native en temps réel. Il est particulièrement utile pour diagnostiquer les problèmes de performance, les re-rendus inutiles, et l'état interne des composants. L'agent peut exécuter des commandes pour afficher l'arbre des composants, examiner les props et l'état, profiler les performances de rendu, et identifier les composants lents. Il fonctionne via l'API CLI de React DevTools, en se connectant à l'application cible. Les déclencheurs courants incluent des questions sur les re-rendus, l'inspection de composants, ou les performances de l'application. Ce skill est compatible avec les agents utilisant des outils CLI via MCP et est destiné aux développeurs travaillant sur des applications React ou React Native.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/callstackincubator/agent-react-devtools/tree/main/skills/react-devtools
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait react-devtools ?

React DevTools CLI pour agents IA. Utilisez-le lorsque l'utilisateur vous demande de déboguer une application React ou React Native en cours d'exécution, d'inspecter les props/état/hooks des composants, de diagnostiquer les performances de rendu, de profiler les re-rendus, de trouver les composants lents ou de comprendre pourquoi quelque chose se re-rend. Les déclencheurs incluent "pourquoi cela se re-rend", "inspecter le composant", "quelles props a X", "profiler l'application", "trouver les composants lents", "déboguer l'interface utilisateur", "vérifier l'état du composant", "l'application est lente", ou toute tâche de débogage React en cours d'exécution.

Skills associés

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