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 damusix/atomic-claude --skill atomic-visual-optionsgit clone --depth 1 https://github.com/damusix/atomic-claudeWrote 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/damusix/atomic-claude/atomic-visual-options)<a href="https://agentmods.dev/skills/damusix/atomic-claude/atomic-visual-options"><img src="https://agentmods.dev/badge/skills/damusix/atomic-claude/atomic-visual-options/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/damusix/atomic-claude/atomic-visual-options"><img src="https://agentmods.dev/badge/skills/damusix/atomic-claude/atomic-visual-options.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00150 | $0.03048 |
| Opus 5.5 | $0.00060 | $0.01219 |
| Sonnet 5.5 | $0.00030 | $0.00610 |
| Haiku 4.5 | $0.00015 | $0.00305 |
Grade A, and why
atomic-visual-options 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 — 289 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Render the visual in the browser; make the decision in the terminal.
Auto-fire on:
- "show me a few options", "show me some options"
- "mock up some variants", "mock up some options"
- "let me see this side by side"
- "visual options for …", "compare these layouts"
- "wireframe some choices", "show layout options"
- "what would X look like", "can you visualize …"
Also fires when /atomic-plan encounters a design question that passes the see-it-over-read-it gate (see below).
The gate (just-in-time, see-it-over-read-it)
Only render visuals when the question is genuinely visual. The test: would the user understand it better seeing it than reading it?
A question that is merely about a UI topic is not automatically visual:
- "What should the settings wizard do?" — conceptual, answer in the terminal.
- "Which of these three settings wizard layouts works?" — visual, render in the browser.
Apply this test per question, not per session. A planning conversation might have five conceptual questions and one visual one; only the visual question gets a rendered file. When the answer is "no," stay in the terminal with a plain list or prose.
Workflow
1. Compose
Identify the decision dimensions. Each dimension becomes a panel (e.g. Layout, Color scheme, Navigation placement). For each panel:
- Assign a letter starting at A (panel A, panel B, panel C…).
- Generate 2–4 options. Label each with the panel letter + option number:
A1,A2,A3. No more than four options per panel — beyond four the comparison stops being useful. - Assign each option a short, descriptive title (e.g. "A2 — Two-column with sidebar").
2. Write
Write ONE self-contained HTML file to the scratchpad bundle:
$(atomic scratchpad path <topic>)/options.html
Paths come from atomic scratchpad / atomic where --json; if what you find on disk does not match, run atomic migrate --show-log for the change history.
The file must satisfy these constraints:
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 · 289 lines · 150 tokens per session scan A 079004f7779e
atomic-visual-options is a skill published in the GitHub repository damusix/atomic-claude (113 stars, last pushed today), licensed MIT. It adds 150 tokens to every session and 3,048 once invoked, about $0.0006 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
vc:tech-graph
Use when you need publish-grade SVG or PNG technical diagrams for architecture, flow, sequence, UML, state, or comparison visuals, with preview used afterward for review rather than generation.
designmatch
Use when matching a React Native screen to a Claude Design HTML canonical at ≥95% visual parity on real Android/iOS hardware — closes the loop with a VQA stub mode, Playwright canonical renderer at 1080×2444, and a dual-metric pixelmatch + SSIM diff harness producing composite triptychs.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
vc:frontend-design
Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.