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 Dragoon0x/canon --skill canon-illustrationsgit clone --depth 1 https://github.com/Dragoon0x/canonWrote 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/dragoon0x/canon/canon-illustrations)<a href="https://agentmods.dev/skills/dragoon0x/canon/canon-illustrations"><img src="https://agentmods.dev/badge/skills/dragoon0x/canon/canon-illustrations/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/dragoon0x/canon/canon-illustrations"><img src="https://agentmods.dev/badge/skills/dragoon0x/canon/canon-illustrations.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.00066 | $0.00661 |
| Opus 5 | $0.00033 | $0.00331 |
| Sonnet 5 | $0.00013 | $0.00132 |
| Haiku 4.5 | $0.00007 | $0.00066 |
Grade A, and why
canon-illustrations 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 9d 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 — 72 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CANON · Illustrations
An illustration earns its space by explaining something words can't, or by giving an emotional moment visual weight. Decorative illustrations that do neither are clutter.
When illustrations help
| Context | Purpose | Effective? |
|---|---|---|
| Empty state | Softens the blank page, invites action | Yes — if paired with a CTA |
| Error page (404, 500) | Humanizes the failure | Yes — keeps it light |
| Onboarding | Explains a concept visually | Yes — if the concept is spatial/abstract |
| Feature marketing | Shows the benefit | Yes — if it's specific, not generic |
| Success confirmation | Celebration moment | Maybe — keep it subtle |
| Every card in a grid | Decoration | No — visual noise |
| Loading screen | Distraction | No — use skeleton |
Style rules
- One illustration style per product. Mixing styles (flat + 3D + hand-drawn) looks like different products.
- Consistent stroke weight, color palette, and level of detail across all illustrations.
- Match the brand voice. Playful brands get whimsical illustrations. Enterprise tools get cleaner, geometric ones.
- No stock illustration without customization. Generic "person at laptop" illustrations signal low effort.
Sizing
| Placement | Size |
|---|---|
| Spot illustration (empty state) | 120–200px |
| Feature explanation (inline) | 200–320px |
| Hero / marketing | 400–600px |
| Error page | 200–320px |
Never let an illustration dominate the page over the content or CTA.
Accessibility
- Illustrations are decorative unless they convey information.
- Decorative:
aria-hidden="true"oralt="". - Informative:
alt="Description of what the illustration shows". - Don't rely on the illustration to convey critical information.
Anti-patterns
| Anti-pattern | Why it fails |
|---|---|
| Illustration on every empty state regardless of context | Noise |
| Stock illustrations with inconsistent styles | Looks patchwork |
| Giant hero illustration pushing content below the fold | Users came for content, not art |
| No alt text on informative illustrations | Accessibility fail |
| Animation on illustrations without reduced-motion respect | Motion sensitivity |
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.
- 9d ago First seen · 72 lines · 66 tokens per session scan A a985f3ae1279
canon-illustrations is a skill published in the GitHub repository Dragoon0x/canon (5 stars, last pushed 4mo ago), licensed MIT. It adds 66 tokens to every session and 661 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-31.
Other skills, from other repositories
a11y-audit
Dedicated WCAG 2.2 AA/AAA accessibility audit across 10 dimensions (A1-A10) covering semantic HTML, keyboard navigation, ARIA patterns, color contrast, forms, images/media, responsive/zoom, motion/animation, reading/content, and legal compliance. Goes far beyond surface-level design-review checks with deep…
motion-video
Product animation, UI motion, portfolio videos — Apple-grade reveals, motion tokens, full production pipelines.
mermaid-jam
Route Mermaid and markdown diagram source into the Mermaid Jam FigJam plugin for editable native FigJam output.
accessibility
Accessibility (a11y) workflow skill. Use this skill when the user needs Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". Do NOT use for SEO (use seo)…
desktop-brand-builder
Generate a branded Qwen Code desktop package from the Tauri desktop shell using a minimal brandId and logo. Use when the user wants a custom, white-label, or rebranded desktop client, installer, DMG/EXE/AppImage/deb, or one-click brand build on top of packages/desktop-shell.
create-openbitfun-cinematic-wallpaper-skin
Apply the cinematic animated-wallpaper style recipe to a OpenBitFun Appearance skin. Use after loading the parent create-openbitfun-skin Skill when the user provides animated character artwork and wants a host-managed video background, source-derived glass materials, image-led cards, illustrated dialogs, reproducible…