design-canonlisted

# Design Canon ## When to Use Use this skill when the task creates, redesigns, or reviews a user interface. Do not load the entire rule catalog blindly. Select the closest profile and compile only the relevant canon. Do not use benchmark or calibration scripts during normal design work. Design Canon's compilation, linting, and agent-adapter workflows are local and do not require provider-backed evaluation. ## Resolve the CLI Before running a command, determine which CLI is actually available: 1. In a Design Canon source checkout, use `node ./bin/design-canon.js`. 2. In a project with an explicitly installed and verified package version, use the local `design-canon` binary. 3. Do not assume npm publication from a Git tag. Do not fetch an unpinned package merely to satisfy this skill. Use `node ./bin/design-canon.js --version` or `design-canon --version` and report the resolved version when it matters to the task. ## Procedure 1. Classify the surface as `marketing`, `product-app`, or `editorial`. 2. Compile the selected profile to `DESIGN.md` using the resolved CLI. 3. Read the compiled `DESIGN.md` before planning the implementation. 4. State one concrete visual direction and define the initial token system. 5. Implement hierarchy and layout before decorative effects. 6. Run lint against the relevant source path and selected profile. 7. Use `static`, `auto`, or `browser` mode deliberately. Do not claim browser-assisted evidence when the browser capability was skipped.