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 markoblogo/abvx-agent-skills --skill html-diagram-artifactgit clone --depth 1 https://github.com/markoblogo/abvx-agent-skillsWrote 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/markoblogo/abvx-agent-skills/html-diagram-artifact)<a href="https://agentmods.dev/skills/markoblogo/abvx-agent-skills/html-diagram-artifact"><img src="https://agentmods.dev/badge/skills/markoblogo/abvx-agent-skills/html-diagram-artifact/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/markoblogo/abvx-agent-skills/html-diagram-artifact"><img src="https://agentmods.dev/badge/skills/markoblogo/abvx-agent-skills/html-diagram-artifact.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00056 | $0.00557 |
| Opus 5 | $0.00028 | $0.00279 |
| Sonnet 5 | $0.00011 | $0.00111 |
| Haiku 4.5 | $0.00006 | $0.00056 |
Grade A, and why
html-diagram-artifact 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 11d 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 — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML Diagram Artifact
Produce a standalone HTML deliverable, not a production app surface.
Review:
references/architecture-example.htmlreferences/style-notes.md
Best Fit
- architecture overviews;
- request or event flows;
- stack explainers;
- system boundary maps;
- component relationship diagrams;
- interactive walkthroughs where flow highlighting genuinely improves understanding.
Not The Best Fit
- full product frontends;
- landing pages;
- dense prose reports;
- diagrams that would be clearer as Mermaid or a static image;
- speculative visual polish without a concrete explanation job.
Output Contract
Create one self-contained .html file that:
- works without a build step;
- uses semantic HTML plus inline CSS and JS only when needed;
- includes a dark mode toggle;
- persists theme via
localStorage; - applies theme before paint in
<head>; - uses SVG as the primary diagram surface;
- drives SVG colors from CSS variables rather than hard-coded values inside the SVG;
- remains usable on desktop and mobile widths.
Diagram Rules
- Lead with structure first, decoration second.
- Keep prose light: title, framing line, labels, and optional detail panel.
- Prefer 1-2 dominant flows over showing every possible edge.
- Group by zones, boundaries, or ownership domains.
- Make important nodes distinct through role, not random styling.
- Use interaction only when it helps explain sequence, causality, or scope.
- Respect reduced-motion preferences.
Visual Rules
- Use a restrained palette with one accent family.
- Use hierarchy through typography, spacing, and contrast.
- Keep labels short and scannable.
- Avoid dashboard chrome, fake browser frames, and decorative card spam.
- If serif headings help, use them sparingly.
Verification
Before finishing:
- Open the artifact in a browser.
- Check desktop and mobile layouts.
- Check there is no horizontal overflow.
- Check the theme toggle works and persists.
- Check SVG text remains legible in both themes.
- Check interactive highlighting if present.
- Report limitations honestly.
What ships with it
4 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.
- 11d ago First seen · 90 lines · 56 tokens per session scan A 6948b426c676
html-diagram-artifact is a skill published in the GitHub repository markoblogo/abvx-agent-skills (16 stars, last pushed 2d ago), licensed MIT. It adds 56 tokens to every session and 557 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.
Other skills, from other repositories
screenshot-sweep
Use whenever a screenshot is captured or supplied — a bug report, a Playwright capture, a design review, a "does this look right". Read the WHOLE image, not just the thing it was sent for: sweep it against the defect checklist below, file the findings, and add them to the todo list. When a defect is later reported…
codebase-design
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
cli-e2e
Write, modify, or debug Docker-based Composio CLI end-to-end tests under ts/e2e-tests/cli, including binary invocation, fixture isolation, output assertions, and package manifests. Use for CLI E2E test suites only; use cli-command for CLI source implementation.
app-screenshot-debug
Drive the running termio app via AppleScript / System Events to reach a UI state (focus the window, click a sidebar project, a terminal pane, a control), capture a pixel-accurate screenshot of just that window, and read it back for visual analysis — for diagnosing layout / spacing / alignment / 'this looks ugly'…
trace
Dispatch trace subagent to investigate unknown issues — reproduces, traces, and reports root cause for fix handoff.
codex-agent
Use when you want a second-opinion review via Codex CLI, cross-verification after another agent implements changes, debugging help, or alternative implementation proposals. Requires Codex CLI to be installed and authenticated.