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/owenhochwald/volt/volt-ui-designnpx skills add owenHochwald/volt --skill volt-ui-designgit clone --depth 1 https://github.com/owenHochwald/voltWrote 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/owenhochwald/volt/volt-ui-design)<a href="https://agentmods.dev/skills/owenhochwald/volt/volt-ui-design"><img src="https://agentmods.dev/badge/skills/owenhochwald/volt/volt-ui-design.svg" alt="Measured on agentmods" height="20"></a>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 | $0.00077 | $0.00646 |
| Opus 5 | $0.00039 | $0.00323 |
| Sonnet 5 | $0.00015 | $0.00129 |
| Haiku 4.5 | $0.00008 | $0.00065 |
Grade A, and why
volt-ui-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 5d 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 — 70 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Volt UI Design
Apply Volt's canonical design language without inventing component-local colors or interaction patterns.
Load the canonical references
Before UI work, read ../../../DESIGN_SYSTEM.md completely.
For themes, settings, configuration discovery, imports, exports, or custom
colors, also read ../../../CUSTOMIZATION.md completely.
Treat those files as authoritative. Update the canonical document in the same change when intentionally extending the system.
Workflow
- Inspect the affected models, views, update paths, layout tests, and current screenshots or captures.
- List the relevant states before styling: idle, focused, busy, empty, success, partial failure, failure, disabled, cancelled, and narrow as applicable.
- Reuse the documented component vocabulary and semantic theme roles. Do not add raw color literals outside the design/theme layer.
- Preserve keyboard-first behavior. Define focus entry, movement, activation, cancellation, and focus return for new interactions.
- Follow the repository's test-driven workflow. Add a failing state or layout test, implement the smallest behavior, then refactor.
- Verify wide, focused, minimum-size, ANSI-256, and mono behavior in proportion to the change.
- Check animation cadence, stop conditions, stable widths, and reduced-motion behavior for any timed UI.
- Run focused tests and then the full Go test suite before handoff.
Design constraints
- Keep the idle interface neutral and controlled. Use violet for brand/focus and charge for primary action/live execution.
- Make focus visible through at least two properties and understandable without color.
- Keep success, warning, error, HTTP methods, charts, brand, and focus as separate semantic roles.
- Reserve the large ASCII logo for startup, About, and promotional output.
- Prefer rails, separators, spacing, and alignment to nested rounded boxes.
- Treat load testing as the visual centerpiece, with live progress, stable metrics, and a real bounded time series for sparklines.
- Do not animate idle screens or decorative borders.
- Do not let user themes alter layout, spacing, key behavior, or semantic meaning.
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.
- 5d ago First seen · 70 lines · 77 tokens per session scan A d14f90051516
volt-ui-design is a skill published in the GitHub repository owenHochwald/volt (141 stars, last pushed 1mo ago), licensed MPL-2.0. It adds 77 tokens to every session and 646 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
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
local-ai-agents
Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…
chronicle
Analyze Copilot session history for standup reports, usage tips, session search, and session reindexing. Use when the user asks for a standup, daily summary, usage tips, workflow recommendations, wants to search or find past sessions by keyword/file/PR, wants to reindex their session store, or asks about deleting…
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…
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
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…