What is canon-density?

A set of rules for offering compact, default, and comfortable interface spacing while keeping text sizes readable.

Use it to define spacing, row heights, padding, and control sizes for dashboards, tables, admin tools, and content-heavy interfaces.

It lets data-heavy screens fit more information without shrinking text, while reading-focused screens can have more room.

canon-density — Skill for Claude Code and Codex by Dragoon0x/canon

Install

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.

Any agent

npx skills add Dragoon0x/canon --skill canon-density

Clone the repo

git clone --depth 1 https://github.com/Dragoon0x/canon

Made for: Claude Code, Codex.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/dragoon0x/canon/canon-density/github.svg)](https://agentmods.dev/skills/dragoon0x/canon/canon-density)

Your own site

<a href="https://agentmods.dev/skills/dragoon0x/canon/canon-density"><img src="https://agentmods.dev/badge/skills/dragoon0x/canon/canon-density/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/dragoon0x/canon/canon-density"><img src="https://agentmods.dev/badge/skills/dragoon0x/canon/canon-density.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 62 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 783 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

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.00062	$0.00783
Opus 5.5	$0.00025	$0.00313
Sonnet 5.5	$0.00012	$0.00157
Haiku 4.5	$0.00006	$0.00078

Measured 2mo ago against content hash 7771b58d910d, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

canon-density 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 2mo 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.

source/skills/canon-density/SKILL.md · 84 lines

How it starts

The opening of the file, as written. The whole thing — 84 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CANON · Density

Density is spacing, not font size. Changing density means scaling gaps, padding, and row heights while keeping type legible.

Three density modes

Mode	Use	Spacing multiplier
Compact	Power users, data tables, dashboards, admin tools	0.75×
Default	Most apps	1×
Comfortable	Content-heavy, reading-focused, onboarding	1.25×

What scales

Property	Compact	Default	Comfortable
Row height	32px	48px	56px
Card padding	12px	16px	24px
Button height	32px	40px	48px
Input height	32px	40px	48px
Gap between items	8px	16px	24px
Section spacing	24px	40px	56px

What does NOT scale

Font sizes. 14px body stays 14px across all densities. Compact reads the same text; it just packs it tighter.
Touch targets on mobile. 44px floor stays, regardless of density mode. Density modes are desktop-only unless you're building for stylus input.
Icon sizes. Icons stay at their grid-aligned size (16, 20, 24px).
Border radius. Stays consistent.
Line height. Governed by type size, not density.

Implementation — CSS custom properties

:root {
  --density: 1;
  --space-unit: calc(8px * var(--density));
}
[data-density="compact"]  { --density: 0.75; }
[data-density="comfortable"] { --density: 1.25; }

.card { padding: calc(var(--space-unit) * 2); }
.row { min-height: calc(var(--space-unit) * 6); }

Or use discrete scales where continuous math creates half-pixel values.

User control

Toggle in settings or toolbar.
Persist in localStorage.
Per-view override OK (table might be compact while the page is default).
Default is "default." Don't auto-compact on small screens — that's responsive design, not density.

Anti-patterns

Anti-pattern	Why it fails
Shrinking font size for compact	Illegibility; density is spacing, not type
Compact mode on mobile with touch targets < 44px	WCAG 2.5.5 violation
Comfortable mode that doubles spacing everywhere	Wastes real estate, looks broken
No user toggle	Forces one density on everyone
Mixing density modes within a single component	Visual incoherence

Read the full file on GitHub · 84 lines

Changes

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.

2mo ago First seen · 84 lines · 62 tokens per session scan A 7771b58d910d

Subscribe to this mod's changes

canon-density is a skill published in the GitHub repository Dragoon0x/canon (6 stars, last pushed 6mo ago), licensed MIT. It adds 62 tokens to every session and 783 once invoked, about $0.0002 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.

Claude Code Design and UX accessibility ai-agent ai-coding audit codex

canon-density next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
canon-densityDragoon0x/canon	Skill	6	6mo ago	MIT	A	62	Claude Code, Codex
accessibilitydiegosouzapw/awesome-omni-skills	Skill	170	4mo ago	MIT	C	119	Claude Code, Codex
accessibilityericrisco/rsc-harness	Skill	503	2d ago	MIT	A	86	Claude Code, Codex
accessibility-auditoyi77/1ai-skills	Skill	17	yesterday	MIT	A	29	Claude Code
a11y-auditgreglas75/zuvo	Skill	7	3d ago	MIT	A	147	Claude Code
axe-audittonone-ai/tonone	Skill	77	23d ago	MIT	A	47	Claude Code
accessibility-compliance-accessibility-audit-v2diegosouzapw/awesome-omni-skills	Skill	170	4mo ago	MIT	A	76	Claude Code