v1.0 · all 52 skills shipped · open source · mit

The canonical design language for AI coding harnesses.

52 skills, 19 commands, 89 detector rules. Every rule traces to WCAG, Material 3, Apple HIG, or WAI-ARIA. Every threshold is quantified. Nothing is vibes.

npx canon-design detect ./src

Node 18+. Exit code 1 on critical findings.

github →npm →install →

skills

commands

detector rules

harnesses

01 / skillsFifty-two skills. All shipped.

Each skill: quantified rules, anti-pattern tables, decision trees, audit checklists, sources cited. The AI reads them before writing code.

fundamentals 12

typography

Scale, line-height inverse, tracking, weight pairing, OpenType.

color

OKLCH, WCAG contrast, three-layer tokens, dark mode inversion.

spatial

4/8 grid, 44px touch floor, breakpoint scale.

motion

Duration envelopes (100–600ms), easing intent, reduced-motion.

interaction

Six required states, focus-visible rings, keyboard bindings.

responsive

Mobile-first, container queries, clamp(), 100dvh.

accessibility

POUR, semantic HTML, WCAG 2.2 AA floor.

forms

16px mobile inputs, labels above, validation timing.

depth

Multi-layer shadows, 5-step elevation, whitespace first.

states

Loading, empty, error, populated. Skeleton specs.

performance

Core Web Vitals, LCP rules, bundle budgets.

ux-writing

Verbs on buttons, error anatomy, empty state structure.

components 16

buttons

One primary per screen, six states, icon-only a11y.

navigation

Top bar vs sidebar, skip link, active state rules.

modals

<dialog> first, focus trap, destructive focus on Cancel.

tables

Semantics, tabular-nums, sticky headers, mobile cards.

cards

Bleed rule, stretched-link, equal-height grids.

charts

Type matrix, zero baseline, colorblind-safe, no 3D pies.

icons

First-timer test, SVG over fonts, stroke consistency.

tooltips

Hover + focus, 500–700ms delay, no interactive content.

toasts

Undo pattern, timer pauses on hover, live regions.

tabs

Roving tabindex, URL sync, no nested tabs.

menus

Menu vs listbox vs combobox, native select first.

Combobox pattern, debounce, two-stage Escape.

pagination

Pagination vs infinite scroll, URL sync, total count.

avatars

Deterministic color from ID hash, ring-separated stacks.

badges

Badge vs chip vs tag, tonal over saturated, color + text.

accordion

<details> first, aria-expanded, multi-expand default.

themes 4

dark-mode

Lightness inversion, surface stacking, semantic tokens.

density

Compact/default/comfortable. Spacing scales, not font size.

rtl

CSS logical properties, mirroring rules, bidi text.

i18n

String externalization, ICU plurals, Intl API, 40% expansion.

content 3

brand-voice

Voice attributes, tone spectrum, banned phrases, AI guardrails.

content-strategy

Content-first design, progressive disclosure, scannability.

info-architecture

Flat vs deep, URL design, labeling, validation methods.

accessibility deep-dive 4

keyboard

Tab order = visual order, roving tabindex, shortcut rules.

screen-reader

Semantic HTML first, heading hierarchy, live regions.

focus

:focus-visible, 2–3px ring at 3:1, SPA focus management.

color-blindness

Color never sole signal, CVD-safe palettes, grayscale test.

patterns 7

micro-interactions

Trigger-feedback loop, 100–300ms budget, reduced-motion.

onboarding

Self-evident UI > defaults > empty states > coachmarks > tours.

error-handling

What/why/how anatomy, retry with backoff, error boundaries.

illustrations

When they help vs clutter, one style, accessibility.

cursors

Cursor-affordance pairing, hover+cursor rule.

grids

Grid for 2D, Flexbox for 1D, auto-fill/fit, subgrid.

data-viz

Big number + context, sparklines, progress bars, dashboards.

engineering 6

bundle-size

200KB JS budget, tree shaking, code splitting, lighter libs.

images

AVIF/WebP, srcset, LCP treatment, lazy below fold.

fonts-loading

font-display:swap, preload critical, WOFF2, subsetting.

seo

Semantic HTML, meta tags, JSON-LD, CWV as ranking factor.

meta-og

OG tags, Twitter cards, 1200×630 image, dynamic generation.

favicons

ICO + SVG + apple-touch + manifest, dark mode SVG.

02 / detector89 rules. Every finding names a fix.

Runs against HTML, CSS, JSX, TSX, Vue, Svelte. Findings include severity, source line, and a specific fix hint.

components/Modal.tsx high MD001 [canon-modals] L14 Custom modal div without role="dialog". fix: Use native <dialog> or add role="dialog" with focus trap. medium B002 [canon-buttons] L28 Button labeled "Submit" is generic. fix: Rename to match action: "Create account", "Save changes".

03 / commandsNineteen commands.

auditcritiquepolishdistillnormalizehardenanimatelayouttypesetcolorizeoptimizeclarifydelightadaptextractteachcraftquieterbolder

04 / harnessesFifteen AI coding harnesses.

claude-codecursorcodexvscode-copilotwindsurfclineaidercontinueopencodepigeminikirotraetrae-cnrovo-dev

05 / installGet it running.

As a CLI

# install globally
npm install -g canon-design

# audit a directory
canon detect ./src

# JSON for CI
canon detect ./src --json > canon-report.json

As a skills bundle

# Claude Code
cp -r dist/claude-code/.claude your-project/

# Cursor
cp -r dist/cursor/.cursor your-project/

# VS Code Copilot
cp -r dist/vscode-copilot/.github your-project/

From source

git clone https://github.com/Dragoon0x/canon
cd canon && npm test && npm run build