maintain-custom-addons-dev-watch

A development workflow for building custom TanStack add-ons and continuously syncing their compiled output into a test application.

In plain words
What is it for?
Initializing and compiling add-ons, running a development loop, creating a sandbox with watched files, and reapplying changed add-on metadata.
Why use it?
It prevents common setup and watch-mode mistakes that can stop changes from reaching the target app.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/tanstack/cli/maintain-custom-addons-dev-watch
Any agent
npx skills add TanStack/cli --skill maintain-custom-addons-dev-watch
Clone the repo
git clone --depth 1 https://github.com/TanStack/cli

Made for: Claude Code, Codex.

Per session 53 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 747 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00053 $0.00747
Opus 5 $0.00026 $0.00374
Sonnet 5 $0.00011 $0.00149
Haiku 4.5 $0.00005 $0.00075

Measured 2d ago against content hash 4bf93187664f, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

maintain-custom-addons-dev-watch 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 2d 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.

packages/cli/skills/maintain-custom-addons-dev-watch/SKILL.md · 121 lines

How it starts

The opening of the file, as written. The whole thing — 121 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Maintain Custom Add-ons In Dev Watch

Use this skill for local add-on authoring workflows where you continuously compile and sync package output into a target app.

Setup

npx @tanstack/cli add-on init
npx @tanstack/cli add-on compile

Core Patterns

Run add-on dev loop while editing source

npx @tanstack/cli add-on dev

Sync watched framework directory into a sandbox target app

# --dev-watch is a flag on `create`, not on `dev`
npx @tanstack/cli create my-sandbox --dev-watch ../path/to/framework-dir

Re-run compile before apply when changing metadata

npx @tanstack/cli add-on compile
npx @tanstack/cli add my-custom-addon

Common Mistakes

HIGH Use --dev-watch with --no-install

Wrong:

npx @tanstack/cli create my-sandbox --dev-watch ../my-addon-package --no-install

Correct:

npx @tanstack/cli create my-sandbox --dev-watch ../my-addon-package

Dev-watch rejects --no-install, so automated loops fail before any sync work starts.

Source: packages/cli/src/dev-watch.ts:112

HIGH Start dev-watch without valid framework directory

Wrong:

npx @tanstack/cli create my-sandbox --dev-watch ../missing-or-invalid-dir

Correct:

npx @tanstack/cli create my-sandbox --dev-watch ../valid-framework-dir

Watch setup validates that the path exists, is a directory, and contains at least one of add-ons/, assets/, or framework.json. Invalid targets fail before file syncing begins.

Source: packages/cli/src/command-line.ts:599

CRITICAL Author add-on from code-router project

Wrong:

npx @tanstack/cli add-on init

Correct:

# Run add-on init from a file-router project
npx @tanstack/cli add-on init

Custom add-on authoring expects file-router mode and exits when run from incompatible project modes.

Source: packages/create/src/custom-add-ons/add-on.ts

HIGH Run add-on workflows without scaffold metadata

Wrong:

npx @tanstack/cli add-on dev

Read the full file on GitHub · 121 lines

Changes

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.

  1. 2d ago First seen · 121 lines · 53 tokens per session scan A 4bf93187664f

Subscribe to this mod's changes

maintain-custom-addons-dev-watch is a skill published in the GitHub repository TanStack/cli (1,295 stars, last pushed 25d ago), licensed MIT. It adds 53 tokens to every session and 747 once invoked, about $0.0003 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.

Related

Other skills, from other repositories

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.

obra/superpowers · 21 tokens

next-cache-components-adoption

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…

vercel/next.js · 95 tokens

babysit-pr

Babysit a GitHub pull request after creation by continuously polling review comments, CI checks/workflow runs, and mergeability state until the PR is merged/closed or user help is required. Diagnose failures, retry likely flaky failures up to 3 times, auto-fix/push branch-related issues when appropriate, and keep…

openai/codex · 114 tokens

imagegen

Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output…

openai/codex · 113 tokens

cpu-profile-analysis

Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…

microsoft/vscode · 71 tokens

next-cache-components-optimizer

Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…

vercel/next.js · 170 tokens