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/dyeoman2/tanstack-start-template/designnpx skills add dyeoman2/tanstack-start-template --skill designgit clone --depth 1 https://github.com/dyeoman2/tanstack-start-templateWhat 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.00088 | $0.00953 |
| Opus 5 | $0.00044 | $0.00477 |
| Sonnet 5 | $0.00018 | $0.00191 |
| Haiku 4.5 | $0.00009 | $0.00095 |
Grade A, and why
design 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 today.
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 — 82 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design
Use this skill to turn vague frontend requests into repo-compatible design decisions. Apply the article's emphasis on clear art direction, explicit constraints, strong hierarchy, and browser verification without replacing the repo's existing routing, token, shadcn, or copy patterns.
Workflow
- Read references/repo-ui-patterns.md before changing page-level layout, tokens, or visual tone.
- Classify the surface before coding:
- marketing or auth
- authenticated app, admin, or operational workspace
- Write a compact internal brief with:
- visual thesis
- content plan
- interaction thesis
- hard constraints
- Keep the first viewport organized around one clear composition. Do not default to a generic grid of disconnected cards unless the surface is truly data-dense.
- Implement with existing route, feature, and UI primitive boundaries.
- Verify in the browser and refine spacing, hierarchy, responsive behavior, and states after the first pass.
Surface Rules
Marketing and Auth
- Allow more visual expressiveness than the app shell.
- Prefer one strong composition above the fold: headline, supporting proof, and one primary action.
- Use real product copy, not design commentary.
- Add imagery only when it clarifies the offer. Decorative texture alone is not a visual anchor.
- Preserve the repo's existing public-route pattern when creating or reshaping top-level marketing pages.
App, Admin, and Operations
- Default to utility copy over marketing copy.
- Start with the working surface itself: KPIs, filters, tables, status, tasks, or current context.
- Do not add a hero section unless the user explicitly asks for one.
- Give each section one job: orient, explain status, show data, or enable action.
- Keep motion sparse and purposeful. Orientation and clarity come before flourish.
Repo Guardrails
- Preserve the existing shadcn and Tailwind variable approach. Extend the system before inventing a new one.
- Prefer composing from
~/components/ui/*before creating new primitives. - Reuse
cn()and existing variant patterns for class composition. - Keep global token work in
src/styles/app.css. Prefer adjusting CSS variables or section-level styling over hard-coded one-off palettes. - Avoid global font swaps, dramatic visual rebrands, or wholesale restyling unless the user explicitly asks for them.
- Preserve TanStack Start route boundaries, pending states, and error boundaries.
- Keep UI components pure. Put business logic in hooks, Convex hooks, or server modules.
- Use
~/aliases and static imports.
What ships with it
2 files 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.
- today First seen · 82 lines · 88 tokens per session scan A 536289a026f7
design is a skill published in the GitHub repository dyeoman2/tanstack-start-template (26 stars, last pushed 4mo ago), licensed MIT. It adds 88 tokens to every session and 953 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-09-01.
Other skills, from other repositories
ai-core/middleware
Chat lifecycle middleware hooks: onConfig, onStart, onChunk, onBeforeToolCall, onAfterToolCall, onUsage, onFinish, onAbort, onError. Use for analytics, event firing, tool caching (toolCacheMiddleware), logging, and tracing. Middleware array in chat() config, left-to-right execution order. NOT onEnd/onFinish callbacks…
ai-core/structured-outputs
Type-safe JSON schema responses from LLMs using outputSchema on chat() and useChat(). Supports Zod, ArkType, and Valibot schemas. The adapter handles provider-specific strategies transparently — never configure structured output at the provider level. Pass stream:true alongside outputSchema for incremental JSON deltas…
docs
Use when writing, editing, or organizing documentation, when planning what docs a feature needs, and whenever planning or implementing a new feature or change in a repo (docs ship with the code). Also use when tempted to write docs without showing the discovered readers to the user, without asking for tone, or without…
pr-sweep
Sweep open (or listed) PRs with up to 100 parallel agents: security-scan outside contributors, rebase onto main when behind (push --force-with-lease), approve pending first-time-contributor CI when relevant, optionally rebase in-house PRs, and report who should review. Supports full, changed-only, behind-only, and…
ai-core/ag-ui-protocol
Server-side AG-UI streaming protocol implementation: StreamChunk event types (RUNSTARTED, TEXTMESSAGESTART/CONTENT/END, TOOLCALLSTART/ARGS/END, RUNFINISHED, RUNERROR, STEPSTARTED/STEPFINISHED, STATESNAPSHOT/DELTA, CUSTOM), toServerSentEventsStream() for SSE format, toHttpStream() for NDJSON format. For backends…
pr-description
Use when writing a pull request title or body, when about to run gh pr create, when about to git push on a branch that already has an open PR, or when the user says /pr-description, "write the PR description", or "update the PR title". Don't use for commit messages, changelogs, or review comments.