Dragoon0x

Canon — AI skill for Claude Code

AI community

the canonical design language for AI coding harnesses.

How to install Canon

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Dragoon0x/canon and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Canon does

the canonical design language for AI coding harnesses. 52 skills, 19 commands, 89 detector rules, 15 harnesses.

Alternatives in AI

Impeccable — The design language that makes your AI harness better at design 13.9k ★
Agent Rules Books — AGENTS.md rules / skills for AI coding agents: Codex, Cursor & Claude Code 2.6k ★
Rulesync — by dyoshikawa - A Node.js CLI tool that automatically generates configs (rules, ignore files, MCP servers, com 909 ★

README

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`