Globales Ranking · von 601 Skills
tanstack-devtools AI Agent Skill
Quellcode ansehen: oakoss/agent-skills
SafeInstallation
npx skills add oakoss/agent-skills --skill tanstack-devtools 43
Installationen
TanStack DevTools
Overview
TanStack DevTools provides debugging panels for inspecting Query cache state, Router route trees, and Form field state in React applications. There are two approaches: standalone devtools per library (ReactQueryDevtools, TanStackRouterDevtools) and the unified TanStack Devtools panel that combines all libraries into a single interface with plugin architecture.
When to use: Setting up devtools for TanStack libraries, debugging query cache behavior, inspecting route matching, monitoring form field state, or combining multiple TanStack devtools into one panel.
When NOT to use: Production debugging (devtools are tree-shaken in production by default), non-React frameworks without adapter support, or custom state management unrelated to TанStack libraries.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Query devtools (floating) | <ReactQueryDevtools /> |
Auto-connects to nearest QueryClient |
| Query devtools (embedded) | <ReactQueryDevtoolsPanel /> |
Embed in custom layout |
| Router devtools (floating) | <TanStackRouterDevtools /> |
Place in root route component |
| Router devtools (embedded) | <TanStackRouterDevtoolsPanel /> |
Requires router prop outside provider |
| Form devtools | <ReactFormDevtoolsPanel /> |
Plugin for unified devtools |
| Unified devtools | <TanStackDevtools plugins={[...]} /> |
Single panel for all TanStack libraries |
| Vite plugin | devtools() in vite config |
Source injection, enhanced logs, production removal |
| Production devtools | ReactQueryDevtoolsInProd |
Opt-in for production environments |
| Lazy loading | React.lazy(() => import(...)) |
Reduce bundle size in development |
| Open hotkey | config={{ openHotkey: ['Shift', 'D'] }} |
Keyboard shortcut for unified panel |
Unified Devtools Config
| Option | Type | Purpose |
|---|---|---|
position |
'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' |
Trigger button location |
panelLocation |
'top' | 'bottom' |
Panel slide direction |
theme |
'dark' | 'light' |
Panel color scheme |
defaultOpen |
boolean |
Open panel on load |
hideUntilHover |
boolean |
Hide trigger until hover |
openHotkey |
KeyboardKey[] |
Toggle panel shortcut |
inspectHotkey |
KeyboardKey[] |
Source inspector shortcut |
requireUrlFlag |
boolean |
Only activate with URL parameter |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
| Importing devtools in production bundle | Standalone devtools auto-tree-shake; use React.lazy for code-splitting |
Passing router prop when inside RouterProvider |
Omit router prop; devtools auto-detect context |
Using ReactQueryDevtools position for panel placement |
buttonPosition controls logo position; position controls panel edge |
| Mixing standalone and unified devtools | Choose one approach; both rendering causes duplicate panels |
| Rendering devtools outside QueryClientProvider | Place ReactQueryDevtools inside provider or pass client prop |
Using TanStackRouterDevtools outside route tree |
Place in root route component or pass router prop explicitly |
| Forgetting Vite plugin for unified devtools | Add devtools() from @tanstack/devtools-vite to vite config |
| Using unified devtools without framework adapter | Install both @tanstack/react-devtools and library-specific plugin packages |
Delegation
- Devtools setup review: Use
Taskagent to verify correct placement and configuration - Bundle size analysis: Use
Exploreagent to check devtools are tree-shaken in production - Code review: Delegate to
code-revieweragent
If the
tanstack-queryskill is available, delegate query-specific debugging patterns to it.
Otherwise, recommend:npx skills add oakoss/agent-skills --skill tanstack-queryIf the
tanstack-routerskill is available, delegate route debugging patterns to it.
Otherwise, recommend:npx skills add oakoss/agent-skills --skill tanstack-routerIf the
tanstack-formskill is available, delegate form state management and validation patterns to it.
References
Installationen
Sicherheitsprüfung
Quellcode ansehen
oakoss/agent-skills
Mehr aus dieser Quelle
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
So verwenden Sie diesen Skill
Install tanstack-devtools by running npx skills add oakoss/agent-skills --skill tanstack-devtools in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.
Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.
Der Skill verbessert das Verständnis Ihres Agenten für tanstack-devtools, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.
Was Sie erhalten
Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.
Kompatibilität
Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
App herunterladen:
