Skip to main content
James Madson

Canon A curated gallery of design skills for AI agents.

In progress Self-initiated · Updated August 2026

Encoding design judgment into agent plugins, so the craft travels with the tools.

Canon cover artwork

Overview

Client

Self-initiated

Role

Design and build, end to end

Status

In progress, coming soon at canon.design

Tags
  • Editorial Curation
  • Product Design
  • Design Systems
  • Front-End Development
  • AI Tooling

Designers have started handing instructions to AI agents: plugin files that tell Claude, Cursor, or Codex how to think about motion, accessibility, or typography. Finding good ones means trawling GitHub. Canon is the editorial answer, hand-picked, license-verified, and written up with a point of view.

I built it because I kept re-explaining the same judgment to the same tools. An agent will happily animate everything, ship a 32px tap target, or invent a fifth grey, and it will do it fast. The fix is not more prompting, it is encoding the decision once and handing it over. That is what these plugins are, and once they exist they are worth sharing rather than hoarding.

What a plugin actually enforces

  • A gate before the animation

    The motion plugin asks whether the thing should animate at all before it asks how. Most of the time the answer is no, and that question is the part people skip.

  • Hit areas and keyboard paths, checked before ship

    The accessibility plugin holds the 44px minimum, real focus states, and a working tab order. It flags them while the work is in progress, not after somebody complains.

  • The brand, encoded once

    The brand plugin carries the actual palette, type scale, and logo rules, so every later pass inherits them instead of improvising a near-miss.

Early days. The gallery works today, kits are landing now, and the open questions further down are genuinely open. This page will look different in a month.

16

Curated skills, each read in full

4

Kits composed for a job

114

Tests across content, filters, and install scripts

0

Colors in the finished palette

As of August 2026

The problem

The directories that existed were aggregators: thousands of entries, one-line descriptions, view counts, no judgment. They tell you a skill exists.

They do not tell you whether it is any good, what is actually inside it, or whether you are allowed to use it. And nothing showed you what you were installing until after you installed it.

Where it is now

Sixteen skills, each read in full, license-checked, and given an original write-up with an honest gotcha section. Every entry shows which agents it works with, what is inside the package, and where it came from.

Three things no other directory does:

  • Structure maps

    An interactive diagram of every skill's actual file tree and internal outline, generated from the real GitHub repo, so you can see what you are installing before you install it.

  • Kits

    Skills composed for a job: a full redesign, a marketing site, a product UI, a mobile review. Each one phased in working order, with a generated one-command install script and a portable digest for tools that cannot run skills natively.

  • An editorial voice

    Ratings that mean something, and entries I turned down for not being good enough.

The site is data, not pages. A skill entry, abbreviated:

slug: design-motion-principles
name: Design Motion Principles
tagline: >-
  Three named motion philosophies, weighted by project context,
  with a frequency gate that decides whether it should animate at all.
sourceUrl: https://github.com/kylezantos/design-motion-principles
sourceAuthor: Kyle Zantos
tools: [claude-code, cursor, generic]
categories: [motion]
rating: 5
lastVerified: 2026-08-11
fileTree:                 # generated from the real repo
  - path: SKILL.md
    type: file
  - path: references/emil-kowalski.md
    type: file
contentOutline:           # parsed from the skill's own headings
  - title: The Frequency Gate
    subsections: [Duration Guidelines, The Golden Rule]

And a kit, which is just composition with reasons attached:

slug: full-redesign
name: Full Redesign
tagline: Brand foundation through pre-ship audits, the long arc, in working order.
phases:
  - title: Brand foundation
    entries:
      - skill: brand-guidelines
        why: Encode the real palette, type, and logo rules once so every
             later pass inherits them instead of improvising.
      - skill: frontend-design
        why: Forces a named point of view before pixels.
  - title: Pre-ship audits
    entries:
      - skill: better-accessibility
        why: Keyboard paths and hit areas checked before launch, not after
             a complaint.
digestPath: /kits/full-redesign-digest.md

Designing it

The visual system went through three passes: a Swiss-modernist grid direction (Aicher, Müller-Brockmann, the Vignelli Canon the project is named for), then an are.na-influenced density pass that turned cards into flush hairline tiles, then a final strip to full monochrome.

Color kept doing compositional work that type and value should have been doing, so it went. That includes hover and focus, which now shift value instead of hue.

Dogfooding

Canon curates a mobile-review skill suite, so I installed it and pointed it at Canon. It found twelve objective platform defects and five design decisions I had been avoiding: sub-44px tap targets, iOS input zoom, a filter panel that pushed every result below the fold on a phone.

I fixed the defects and made the calls. The best proof a curation site can offer is that its curator uses the things.

How it is built

Astro with schema-validated content collections, so a malformed entry fails the build instead of shipping.

Every feature runs spec, then plan, then implementation, with review gates at each step. 114 tests cover the content corpus, the filter engine, and the install-script generator.

Open questions

The parts I have not settled, kept here on purpose:

  • Where curation stops

    Sixteen entries is small enough to read everything. It will not stay that way, and "curated" stops meaning anything past some number I have not found yet.

  • Whether the digest travels

    Kits ship a one-file digest for tools that cannot run skills. Figma accepts single-file skills natively, so the same file may work in two places. Unverified.

  • What happens when the format moves

    An open packaging standard is forming, backed by several of the big agent vendors. Betting on it early is either free portability or a rewrite.

Changelog

  • Aug 2026 Kits: four curated bundles with generated install scripts.
  • Aug 2026 Stripped the palette to monochrome; hover and focus now shift value, not hue.
  • Aug 2026 Ran the site's own mobile-review skills against it; fixed twelve defects.
  • Jul 2026 First eleven skills, structure maps, faceted gallery.

Still building. The gallery works today, kits land next, and the parts above are genuinely undecided.

Coming soon at canon.design