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 skills add TanStack/devtools --skill devtools-event-clientgit clone --depth 1 https://github.com/TanStack/devtoolsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/tanstack/devtools/devtools-event-client)<a href="https://agentmods.dev/skills/tanstack/devtools/devtools-event-client"><img src="https://agentmods.dev/badge/skills/tanstack/devtools/devtools-event-client/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/tanstack/devtools/devtools-event-client"><img src="https://agentmods.dev/badge/skills/tanstack/devtools/devtools-event-client.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium Tool Misuse · line 267 Tool defaults are unsafe or overly permissive (e.g. disabled TLS verification, no authentication, world-writable permissions). Unsafe defaults widen the attack surface.Fix: Override unsafe defaults with secure settings (verify=True, auth required, restrictive permissions). Review and harden all tool configurations.
What 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.1 | $0.00079 | $0.02500 |
| Opus 5.5 | $0.00032 | $0.01000 |
| Sonnet 5.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 1mo ago.
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.
- 1mo ago First seen · 291 lines · 79 tokens per session scan A 4f5b9db9ba03
devtools-event-client is a skill published in the GitHub repository TanStack/devtools (506 stars, last pushed today), licensed MIT. It adds 79 tokens to every session and 2,500 once invoked, about $0.0003 per session on Opus 5.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
walkeros-create-destination
Use when creating a new walkerOS destination to send events to a vendor or API (GA4/gtag, Meta/Facebook Pixel, Mixpanel, Amplitude, a custom HTTP API, Measurement Protocol), web or server-side. Example-driven workflow: research the vendor SDK and define step examples before implementing the destination interface, env…
walkeros-create-source
Use when creating a new walkerOS source to capture events (browser source, dataLayer interception, server/HTTP source, webhook receiver, event capture), web or server-side. Example-driven workflow: research the input format and define step examples before implementing the push interface, createTrigger, and env pattern.
implementing-mcp-tools
Guide for exposing PostHog product endpoints as MCP tools. Use when creating new or updating API endpoints, adding MCP tool definitions, scaffolding YAML configs, or writing serializers with good descriptions. Covers the full pipeline from Django serializer to generated TypeScript tool handler.
webiny-api-cms-content-models
Creating Headless CMS content models via code using the ModelFactory pattern. Use this skill when the developer wants to create, modify, or understand content model definitions, define fields and validators, set up reference fields between models, configure field layouts (including nested layouts inside object or…
webiny-form-model
Building forms with the FormModel system — field types, renderers, layout, validation, conditional rules, computed fields, and dynamic zones. Use this skill when the developer needs to define form fields with the builder API, choose renderers, build layouts with tabs/rows/separators, add validation (Zod or…
webiny-api-permissions
Schema-based permission system for API features. Use this skill when implementing authorization in use cases, defining permission schemas with createPermissionSchema, creating injectable permissions via createPermissionsAbstraction/createPermissionsFeature, checking read/write/delete/publish permissions, handling…