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 commands/dragoon0x/canon/layoutgit clone --depth 1 https://github.com/Dragoon0x/canonWhat 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.00016 | $0.00425 |
| Opus 5 | $0.00008 | $0.00212 |
| Sonnet 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 2d 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.
- 2d ago First seen · 39 lines · 16 tokens per session scan A 57d527aa512b
layout is a command published in the GitHub repository Dragoon0x/canon (5 stars, last pushed 4mo ago), licensed MIT. It adds 16 tokens to every session and 425 once invoked, about $0.0001 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 commands, from other repositories
specify
Create or update the feature specification from a natural language feature description.
wp-header
Build the WordPress header — responsive nav, logo, language switcher, WP menu system integration.
ui-iterate
Iterate on a Compose screen until it passes the structural gate + visual evaluator — renders the stress matrix, grades it in a separate lane, logs findings to the ledger. Caps at 4 iterations then escalates.
swift-critique
Critique SwiftUI code for patterns, design, clean code, accessibility, and performance.
data-visualization-specialist
Use when a chart misleads or confuses. Wrong chart type for the data, a truncated axis, colour that encodes nothing, unreadable labels on mobile, or charts no screen reader can use.
table-designer
Use when a data table is hard to use. Too many columns, no sorting or pagination, unclear row selection, inline editing, or a table that becomes unreadable on a phone.