TanStack Devtools: one unified debugging panel for your TanStack apps
Consolider le débogage Query, Router et IA en un seul panneau à base de plugins — plugins intégrés, plugins custom, l'intégration Vite, et les bonnes pratiques de garde en production
- Quoi
- Consolider le débogage Query, Router et IA en un seul panneau à base de plugins — plugins intégrés, plugins custom, l'intégration Vite, et les bonnes pratiques de garde en production
- Coût
- Gratuit
- Prérequis
- un projet React/TanStack où vous voulez le panneau de débogage — les paquets npm sont ajoutés à VOTRE app par vous-même (le skill est une documentation que l'agent lit, pas un installateur automatique)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill de @tanstack-skills pour le panneau TanStack Devtools : une interface de débogage unifiée et extensible qui consolide les devtools de TanStack Query, Router et autres librairies en un seul panneau, construit avec Solid.js pour des performances légères. Il couvre la configuration de base (npm install @tanstack/react-devtools, monter <TanStackDevtools/> dans le QueryClientProvider), les plugins intégrés (Query — ReactQueryDevtoolsPanel ; Router — TanStackRouterDevtoolsPanel avec l'instance du router ; IA — AIDevtoolsPanel pour les workflows IA : inspecteur de messages, suivi des tokens et coûts, visualisation du streaming, débogage des appels d'outils, visualiseur de tokens de raisonnement, bascule d'adaptateurs), le système de plugins (l'interface DevtoolsPlugin — id, name, render — avec recettes de plugins custom et d'enregistrement dynamique comme un inspecteur d'état ou un logger réseau), l'intégration du plugin Vite, les considérations de production (inclure uniquement en développement, ou lazy-load), le support des frameworks (React alpha ; Solid, Vue, Angular prévus), et les bonnes pratiques plus les pièges courants (IDs de plugins uniques, fonctions render légères, ne pas livrer les devtools en production sans tree-shaking). Bémols honnêtes : statut alpha — attendre des changements d'API ; le skill est une documentation que l'agent lit, pas un installateur automatique — vous ajoutez vous-même les paquets npm à votre app ; les devtools appartiennent aux builds de développement uniquement. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet React/TanStack où vous voulez le panneau de débogage — les paquets npm sont ajoutés à VOTRE app par vous-même (le skill est une documentation que l'agent lit, pas un installateur automatique) Installe-moi « TanStack Devtools : un panneau de débogage unifié pour vos apps TanStack ». Il donne à mon agent le skill TanStack Devtools de @tanstack-skills : configuration (npm install @tanstack/react-devtools, monter le panneau dans le provider), plugins intégrés (Query, Router, IA), recettes de plugins custom et d'enregistrement dynamique, le plugin Vite, les gardes de production, et bonnes pratiques/pièges. Licence MIT. Dépôt : https://github.com/tanstack-skills/tanstack-skills/blob/main/plugins/tanstack-devtools/skills/tanstack-devtools/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « tanstack-devtools ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. npm install @tanstack/react-devtools dans votre projet et monter <TanStackDevtools/> uniquement dans les builds de développement). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.