Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/tanstack/devtools/devtools-vite-pluginnpx skills add TanStack/devtools --skill devtools-vite-plugingit clone --depth 1 https://github.com/TanStack/devtoolsWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00093 | $0.03411 |
| Opus 5 | $0.00046 | $0.01706 |
| Sonnet 5 | $0.00019 | $0.00682 |
| Haiku 4.5 | $0.00009 | $0.00341 |
Grade A, and why
devtools-vite-plugin scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 313 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Configure @tanstack/devtools-vite -- the Vite plugin that enhances TanStack Devtools with source inspection, console piping, enhanced logging, a server event bus, production stripping, editor integration, and a plugin marketplace. The plugin returns an array of sub-plugins, all using enforce: 'pre', so it must be the FIRST plugin in the Vite config.
Installation and Basic Setup
// vite.config.ts
import { devtools } from '@tanstack/devtools-vite'
export default {
plugins: [
devtools(),
// ... other plugins AFTER devtools
],
}
Install as a dev dependency:
pnpm add -D @tanstack/devtools-vite
There is also a defineDevtoolsConfig helper for type-safe config objects:
import { devtools, defineDevtoolsConfig } from '@tanstack/devtools-vite'
const config = defineDevtoolsConfig({
// fully typed options
})
export default {
plugins: [devtools(config)],
}
Exports
From packages/devtools-vite/src/index.ts:
devtools-- main plugin factory, returnsArray<Plugin>defineDevtoolsConfig-- identity function for type-safe configTanStackDevtoolsViteConfig-- config type (re-exported)ConsoleLevel--'log' | 'warn' | 'error' | 'info' | 'debug'
Architecture: Sub-Plugins
devtools() returns an array of Vite plugins. Each has enforce: 'pre' and only activates when its conditions are met (dev mode, serve command, etc.).
| Sub-plugin name | What it does | When active |
|---|---|---|
@tanstack/devtools:inject-source |
AST transform adding data-tsd-source attrs to JSX |
dev mode + injectSource.enabled |
@tanstack/devtools:config |
Reserved for future config modifications | serve command only |
@tanstack/devtools:custom-server |
Starts ServerEventBus, registers middleware for open-source/console-pipe endpoints | dev mode |
@tanstack/devtools:remove-devtools-on-build |
Strips devtools imports/JSX from production bundles | build command or production mode + removeDevtoolsOnBuild |
@tanstack/devtools:event-client-setup |
Marketplace: listens for install/add-plugin events via devtoolsEventClient | dev mode + serve + not CI |
@tanstack/devtools:console-pipe-transform |
Injects runtime console-pipe code into entry files | dev mode + serve + consolePiping.enabled |
@tanstack/devtools:better-console-logs |
AST transform prepending source location to console.log/console.error |
dev mode + enhancedLogs.enabled |
@tanstack/devtools:inject-plugin |
Detects which file imports TanStackDevtools (for marketplace injection) | dev mode + serve |
@tanstack/devtools:connection-injection |
Replaces __TANSTACK_DEVTOOLS_PORT__, __TANSTACK_DEVTOOLS_HOST__, __TANSTACK_DEVTOOLS_PROTOCOL__ placeholders |
dev mode + serve |
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 313 lines · 93 tokens per session scan A 0ae712b03665
devtools-vite-plugin is a skill published in the GitHub repository TanStack/devtools (493 stars, last pushed 2d ago), licensed MIT. It adds 93 tokens to every session and 3,411 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
install-next
Installs and wires @rsc-boundary/next into a Next.js App Router app (dependencies, root layout provider, optional explicit markers). Use when the user wants to add RSC Boundary, integrate @rsc-boundary/next, or set up server/client boundary devtools in Next.js. The unscoped rsc-boundary package on npm is deprecated …
install-start
Installs and wires the npm package @rsc-boundary/start into a TanStack Start app (dependencies, root route provider, optional explicit markers). Use when the user wants to add RSC Boundary to a TanStack Start / TanStack Router app, or set up server/client boundary devtools with TanStack.
dev-inspector
Use this skill when the user wants to add DevInspector (dev-inspector-mcp) to their project, integrate MCP for their editor, set up ACP agents, click-to-source in browser, or debug "inspector not showing" / "MCP not connecting" issues. Triggers on phrases like "add dev inspector", "click to component", "setup…
red-team-adversarial
Adversarial security and resilience analysis — auto-triggered during /review and /test based on task classification. Provides attack surface analysis, boundary testing, auth bypass attempts, dependency chain attacks, and Beast Mode stress testing.
auth-security
Secure authentication and authorization when credentials, sessions, roles, or permissions change.
karpathy-principles
Behavioral guidelines to reduce common LLM coding mistakes — Think Before Coding, Simplicity First, Surgical Changes, Goal-Driven Execution.