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-gridsgit 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-grids)<a href="https://agentmods.dev/skills/dragoon0x/canon/canon-grids"><img src="https://agentmods.dev/badge/skills/dragoon0x/canon/canon-grids/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-grids"><img src="https://agentmods.dev/badge/skills/dragoon0x/canon/canon-grids.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.00081 | $0.00968 |
| Opus 5 | $0.00041 | $0.00484 |
| Sonnet 5 | $0.00016 | $0.00194 |
| Haiku 4.5 | $0.00008 | $0.00097 |
Grade A, and why
canon-grids 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 — 123 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CANON · Grids
Grid is for 2D layout (rows AND columns). Flexbox is for 1D layout (row OR column). Pick the right tool and the layout writes itself.
Grid vs Flexbox decision
| Use Grid when | Use Flexbox when |
|---|---|
| Layout has rows AND columns | Layout is a single row or single column |
| You need items to align both axes | You need items to distribute along one axis |
| Complex page layout | Navbar, toolbar, button group |
| Card grids with equal-height rows | Inline icon + text alignment |
| Dashboard with mixed-size tiles | Centering something |
Using Grid for a toolbar or Flexbox for a 3×4 card grid is possible but harder than necessary.
Grid template patterns
Equal columns (auto-responsive)
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
Fixed sidebar + fluid content
.layout {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-areas: "sidebar main";
}
Dashboard with mixed sizes
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.widget-large { grid-column: span 2; grid-row: span 2; }
.widget-wide { grid-column: span 2; }
auto-fill vs auto-fit
| Keyword | Behavior |
|---|---|
auto-fill |
Creates as many columns as fit. Empty tracks remain (keeps grid structure). |
auto-fit |
Creates as many columns as fit. Empty tracks collapse (items stretch). |
Use auto-fill when you want consistent column count. Use auto-fit when you want items to stretch to fill available space.
Gap
Use gap (not margin hacks). Follow canon-spatial spacing scale.
| Context | Gap |
|---|---|
| Dense dashboard | 12–16px |
| Card grid | 16–24px |
| Marketing sections | 24–40px |
| Sidebar + content | 24–32px |
Alignment
/* Align all items in the grid */
.grid { align-items: start; justify-items: center; }
/* Align one item */
.item { align-self: end; justify-self: stretch; }
/* Distribute space */
.grid { justify-content: space-between; align-content: start; }
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 · 123 lines · 81 tokens per session scan A 94b953afe443
canon-grids is a skill published in the GitHub repository Dragoon0x/canon (5 stars, last pushed 4mo ago), licensed MIT. It adds 81 tokens to every session and 968 once invoked, about $0.0004 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
accessibility
Use when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA roles/names/live regions, contrast, tap-target size. NOT palette or visual intent (that is design), NOT test-runner setup (that is testing-web), NOT LCP/page-speed (that is…
accessibility-audit
Fast, high-signal accessibility triage for pages, components, or PRs targeting WCAG 2.2 AA compliance.
token-architecture
Design token architecture — multi-tier token systems, semantic naming, theme switching, CSS custom properties, Tailwind mapping, and Figma variable sync.
memoire-design-tooling
Set up and operate Mémoire's CLI, MCP server, agent kits, design preflight, UX audits, craft checks, tokens, and registry evidence. Use when a repository explicitly needs Mémoire tooling; use portable design skills when Mémoire is unavailable.
swiftui-layout-components
Build SwiftUI layouts using stacks, grids, lists, scroll views, forms, and controls. Covers VStack/HStack/ZStack, LazyVGrid/LazyHGrid, List with sections and swipe actions, ScrollView with ScrollPosition and scroll-driven reveal surfaces, Form with validation, Toggle/Picker/Slider, .searchable, and overlay patterns.…
better-typography
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, checking heading hierarchy, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or…