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-event-clientnpx skills add TanStack/devtools --skill devtools-event-clientgit 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.00079 | $0.02500 |
| Opus 5 | $0.00039 | $0.01250 |
| Sonnet 5 | $0.00016 | $0.00500 |
| Haiku 4.5 | $0.00008 | $0.00250 |
Grade A, and why
devtools-event-client 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 — 291 lines — stays where its author put it; the contents beside it link to each section on GitHub.
devtools-event-client
Typed event emitter/listener that connects application code to TanStack Devtools panels. Framework-agnostic. Works in React, Vue, Solid, Preact, and vanilla JS.
Setup
Install the package:
npm i @tanstack/devtools-event-client
The package has two entry points — the root export (the real client in development, a no-op tree-shaken out of production), and the /production subpath (always the real client, for libraries that want devtools events in production):
import { EventClient } from '@tanstack/devtools-event-client'
Constructor Options
| Option | Type | Required | Default | Description |
|---|---|---|---|---|
pluginId |
string |
Yes | -- | Identifies this plugin in the event system. Must be unique across all plugins. |
debug |
boolean |
No | false |
Enable verbose console logging prefixed with [tanstack-devtools:{pluginId}-plugin]. |
enabled |
boolean |
No | true |
When false, emit() is a no-op and on() returns a no-op cleanup function. |
reconnectEveryMs |
number |
No | 300 |
Interval in ms between connection retry attempts (max 5 retries). |
Core Patterns
1. Define an Event Map and Create a Singleton Client
Define a TypeScript type mapping event suffixes to payload types. Extend EventClient and export a single instance at module level.
import { EventClient } from '@tanstack/devtools-event-client'
type StoreEvents = {
'state-changed': { storeName: string; state: unknown; timestamp: number }
'action-dispatched': { storeName: string; action: string; payload: unknown }
reset: void
}
class StoreInspectorClient extends EventClient<StoreEvents> {
constructor() {
super({ pluginId: 'store-inspector' })
}
}
// Module-level singleton -- one instance per plugin
export const storeInspector = new StoreInspectorClient()
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 · 291 lines · 79 tokens per session scan A 4f5b9db9ba03
devtools-event-client is a skill published in the GitHub repository TanStack/devtools (493 stars, last pushed 2d ago), licensed MIT. It adds 79 tokens to every session and 2,500 once invoked, about $0.0004 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.