Canon

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` ·