CANON

The canonical design language for AI coding harnesses.

52 skills, 19 commands, 89 detector rules. Ships to Claude Code, Cursor, Codex, Copilot, Windsurf, Cline, Aider, Continue, and 7 more.

npx canon-design detect ./src

---

What this is

Most AI coding tools produce frontends that look generated. CANON is a set of rules the AI reads before it writes. Every rule traces to a cited source (WCAG, Material 3, Apple HIG, WAI-ARIA, Refactoring UI). Every threshold is quantified. Nothing is vibes.

Install

npm install -g canon-design       # globally
npx canon-design detect ./src     # or run without install

Usage

Drop skills into a project

cp -r dist/claude-code/.claude your-project/    # Claude Code
cp -r dist/cursor/.cursor your-project/          # Cursor
cp -r dist/codex/.codex your-project/            # Codex
cp -r dist/vscode-copilot/.github your-project/  # VS Code Copilot

All 15 harnesses: claude-code · cursor · opencode · pi · gemini · codex · vscode-copilot · kiro · trae · trae-cn · rovo-dev · windsurf · cline · aider · continue

Run the detector

canon detect ./src                    # audit
canon detect ./src --json             # JSON for CI
canon detect ./src --skill=canon-buttons  # filter by skill
canon detect ./src --severity=high    # filter by severity

Invoke commands inside the AI harness

/audit · /critique · /polish · /distill · /normalize · /harden · /animate
/layout · /typeset · /colorize · /optimize · /clarify · /delight · /adapt
/extract · /teach · /craft · /quieter · /bolder

Skill roster (52)

Fundamentals (12)

typography · color · spatial · motion · interaction · responsive · accessibility · forms · depth · states · performance · ux-writing

Components (16)

buttons · navigation · modals · tables · cards · charts · icons · tooltips · toasts · tabs · menus · search · pagination · avatars · badges · accordion

Themes (4)

dark-mode · density · rtl · i18n

Content (3)

brand-voice · content-strategy · information-architecture

Accessibility deep-dive (4)

keyboard · screen-reader · focus · color-blindness

Patterns (7)

micro-interactions · onboarding · error-handling · illustrations · cursors · grids · data-viz

Engineering (6)

bundle-size · images · fonts-loading · seo · meta-og · favicons

Development

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

Source of truth: source/skills/ and source/commands/. Edit there, run npm run build to regenerate harness bundles.

License

MIT. See LICENSE and DISCLAIMER.md.

Author

Dragoon0x — https://github.com/Dragoon0x