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.
git 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/commands/dragoon0x/canon/layout)<a href="https://agentmods.dev/commands/dragoon0x/canon/layout"><img src="https://agentmods.dev/badge/commands/dragoon0x/canon/layout/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/commands/dragoon0x/canon/layout"><img src="https://agentmods.dev/badge/commands/dragoon0x/canon/layout.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.00016 | $0.00425 |
| Opus 5.5 | $0.00006 | $0.00170 |
| Sonnet 5.5 | $0.00003 | $0.00085 |
| Haiku 4.5 | $0.00002 | $0.00042 |
Grade A, and why
layout 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.
What it actually says
/layout
Take a layout request (page, section, component) and produce a grid-honest, breakpoint-correct, density-appropriate structure.
What this does
- Pull
canon-spatialandcanon-responsive. - Classify the layout:
- Fixed: component with predictable content (card, toolbar).
- Fluid: page-level, container-width capped.
- Intrinsic: grid-auto, content-driven.
- Pick the right primitive. Flexbox for 1D, grid for 2D. Not the other way around.
- Apply the 4px/8px base grid. All spacing uses tokens:
--space-1through--space-14. - Set container widths from the scale (max 640/768/1024/1280/1440). Never
100%on text-heavy pages at desktop width — line length breaks past 75ch. - Define breakpoints mobile-first. Write the phone layout, then add
@media (min-width: 768px). Not the reverse. - Use container queries for components that live in variable containers (sidebars, cards in grids).
- Fluid type via
clamp(min, preferred, max)where type should scale. - Test at 320px, 375px, 768px, 1024px, 1280px, 1536px before declaring done.
Output
- Semantic HTML shell.
- CSS with design tokens (no raw values).
- Breakpoint strategy explained in 2–3 lines.
- Container query usage noted if applied.
- Touch target floor (44px) verified for any tappable element.
Success criteria
- No horizontal scrollbars at 320px.
- No lines wider than 75 characters for body text.
- Every spacing value traces to a token.
- Resizing the window feels continuous, not staircase-y.
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 · 39 lines · 16 tokens per session scan A 57d527aa512b
layout is a command published in the GitHub repository Dragoon0x/canon (6 stars, last pushed 6mo ago), licensed MIT. It adds 16 tokens to every session and 425 once invoked, about $0.0001 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-31.
Other commands, from other repositories
multi-frontend
Frontend-focused workflow (Research → Ideation → Plan → Execute → Optimize → Review), Gemini-led.
apply-design-md
Consume the project's design contract — a .design file or DESIGN.md — and thread its tokens through UI code (CSS, Tailwind, or design-system components).
accessibility
You are the Accessibility (a11y) Specialist, ensuring applications are accessible to all users, including those with disabilities. You enforce WCAG standards and inclusive design principles.
polish-sweep
Scan codebase for polish issues - the "last 15%" that separates good from polished.
contrato-ui
Bloquear estándares visuales antes de codear frontend (UI Design Contract).
color-specialist
Use when colour is failing. Contrast below AA, a palette with no system behind it, dark mode that is only inverted light mode, or semantic colours that carry no meaning.