@erclx/canon 4.90.0 → 4.93.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +5 -5
  2. package/claude/.claude-plugin/plugin.json +1 -1
  3. package/claude/skills/design-taste/REQUIREMENT.md +78 -0
  4. package/claude/skills/design-taste/SKILL.md +148 -0
  5. package/claude/skills/design-taste/references/craft.md +58 -0
  6. package/claude/skills/design-taste/references/kinds.md +52 -0
  7. package/claude/skills/design-taste/references/preflight.md +77 -0
  8. package/claude/skills/design-taste/references/systems.md +49 -0
  9. package/claude/skills/design-taste/references/tells.md +101 -0
  10. package/claude/skills/design-taste/references/vocabulary.md +62 -0
  11. package/claude/skills/draft-and-pick/REQUIREMENT.md +8 -2
  12. package/claude/skills/draft-and-pick/SKILL.md +13 -5
  13. package/claude/skills/draft-ready/REQUIREMENT.md +53 -0
  14. package/claude/skills/draft-ready/SKILL.md +118 -0
  15. package/claude/skills/draft-ready/references/assembly.md +67 -0
  16. package/claude/skills/session-compact/REQUIREMENT.md +44 -0
  17. package/claude/skills/session-compact/SKILL.md +60 -0
  18. package/claude/skills/session-compact/references/handoff-note.md +68 -0
  19. package/claude/skills/session-map/REQUIREMENT.md +3 -2
  20. package/claude/skills/session-map/SKILL.md +2 -2
  21. package/claude/skills/session-resume/SKILL.md +3 -3
  22. package/claude/skills/teach-workspace/references/lesson-craft.md +1 -1
  23. package/docs/agents/capture.md +12 -5
  24. package/docs/agents/commands.md +3 -3
  25. package/docs/agents/rule-citations.md +1 -1
  26. package/docs/agents/teach.md +2 -2
  27. package/docs/workflow/ai-workflow.md +3 -1
  28. package/governance/rules/claude/563-ready.md +4 -0
  29. package/governance/rules/lib/305-e2e-reliability.md +3 -2
  30. package/governance/rules/lib/306-test-scope.md +1 -2
  31. package/governance/rules/ui/410-a11y.md +9 -0
  32. package/governance/rules/ui/420-forms.md +9 -0
  33. package/governance/rules/ui/460-design-taste.md +29 -0
  34. package/governance/rules/ui/470-motion.md +23 -0
  35. package/governance/stacks/astro.toml +1 -1
  36. package/governance/stacks/react.toml +1 -1
  37. package/package.json +3 -2
  38. package/scripts/core/regen-hero.sh +4 -3
  39. package/src/capture/render.ts +15 -1
  40. package/src/claude/cases/authoring.ts +5 -0
  41. package/src/claude/cases/misc.ts +10 -0
  42. package/src/cli.ts +1 -1
  43. package/src/commands/capture.ts +26 -1
  44. package/src/commands/design.ts +5 -0
  45. package/src/commands/feedback.ts +1 -0
  46. package/src/commands/serve.ts +11 -1
  47. package/src/commands/slides.ts +3 -0
  48. package/src/commands/transcripts.ts +1 -0
  49. package/src/design/base.css +25 -19
  50. package/src/design/css.ts +4 -0
  51. package/src/design/fonts.ts +17 -0
  52. package/src/design/tokens.ts +45 -30
  53. package/src/gate/measures.ts +5 -4
  54. package/src/gate/stages.ts +1 -1
  55. package/src/serve/static.ts +90 -6
  56. package/src/teach/render.ts +2 -2
  57. package/src/teach/workspace.ts +1 -0
  58. package/standards/ready.md +2 -0
  59. package/standards/session.md +1 -0
  60. package/tooling/astro/configs/playwright.config.ts +2 -0
  61. package/tooling/nextjs/configs/playwright.config.ts +2 -0
  62. package/tooling/vite-react/configs/playwright.config.ts +2 -0
  63. package/src/teach/render-fixture.tsx +0 -95
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  canon is a CLI and Claude Code plugin that stops your AI conventions drifting apart across repositories. It keeps one authoritative copy and installs it into each project on demand.
8
8
 
9
- ![The canon catalog, listing skills, governance rules, and standards with the count each ships, the workflow skills named, and a sample of the rule and standard names](assets/hero.png)
9
+ ![The canon catalog, listing skills, governance rules, and standards with the count each ships, the workflow skills named, and a sample of the rule and standard names](assets/evidence/hero.png)
10
10
 
11
11
  The counts above are read from the catalogs when the image is built, so they're what the repo actually ships today. See it live at [canon.erclx.dev](https://canon.erclx.dev).
12
12
 
@@ -39,7 +39,7 @@ claude plugin marketplace add https://github.com/erclx/canon
39
39
  claude plugin install canon@canon
40
40
  ```
41
41
 
42
- ![Adding the canon marketplace and installing the plugin in Claude Code](assets/install.png)
42
+ ![Adding the canon marketplace and installing the plugin in Claude Code](assets/evidence/install.png)
43
43
 
44
44
  The skills land as `/canon:<name>`. If your session was already open, run `/reload-plugins` to pick them up.
45
45
 
@@ -67,19 +67,19 @@ Each domain has a canonical source in this repo and a thin install or sync CLI o
67
67
 
68
68
  Those domains split on one line: some are copied into your project and become yours to edit, and some are never copied at all.
69
69
 
70
- ![canon tooling list and canon standards list side by side, the first showing five stacks with their dependency and script counts, the second showing standards against the artifact each governs](assets/install-surface.png)
70
+ ![canon tooling list and canon standards list side by side, the first showing five stacks with their dependency and script counts, the second showing standards against the artifact each governs](assets/evidence/install-surface.png)
71
71
 
72
72
  A tooling stack lands as real files under version control, because a config is something your build reads and your project owns. A standard stays here and is opened by name, so there is no copy in your repo to drift from this one.
73
73
 
74
74
  Governance is the third shape, and it is worth seeing rather than reading about, because the glob beside each rule is what decides whether it reaches a session at all.
75
75
 
76
- ![canon gov list, showing seven stacks with the rules each carries and a sample of rules beside the path glob that loads each one](assets/governance.png)
76
+ ![canon gov list, showing seven stacks with the rules each carries and a sample of rules beside the path glob that loads each one](assets/evidence/governance.png)
77
77
 
78
78
  Stacks compose, so a react project inherits node and node inherits base. A rule with a glob loads only when a matching path is edited, and a rule with none loads every session. Both counts and every row above are read from the catalogs when the image is built.
79
79
 
80
80
  The toolkit tracks its own work the same way, in a task board no catalog can read back.
81
81
 
82
- ![the task board's Run now table, one row per task in flight, each naming the files it touches and the plan it runs under](assets/task-board.png)
82
+ ![the task board's Run now table, one row per task in flight, each naming the files it touches and the plan it runs under](assets/evidence/task-board.png)
83
83
 
84
84
  `.canon/tasks/` is gitignored session scratch, so unlike the two frames above, this one is a hand-taken snapshot rather than something the build reads live, and it goes stale the moment the board moves.
85
85
 
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "canon",
3
3
  "description": "Automated governance, versioning, and discovery tools for Claude Code.",
4
- "version": "4.90.0",
4
+ "version": "4.93.0",
5
5
  "author": {
6
6
  "name": "Eric Le",
7
7
  "url": "https://github.com/erclx"
@@ -0,0 +1,78 @@
1
+ ---
2
+ name: design-taste
3
+ description: Why a design round needs a stated layer ordering and a taste catalog, and why neither half works without the other
4
+ ---
5
+
6
+ # Design taste requirement
7
+
8
+ ## Gap
9
+
10
+ Without this skill, a design round has no vocabulary to declare what it is varying and no standard of quality once it has. Both halves failed together and each is measured.
11
+
12
+ The failure was measured on a real page. Four `draft-and-pick` rounds ran against one landing page in a single working session, and three changed nothing the operator could see. Each varied a property at Surface, being palette, figure treatment, heading separation and underline reach, against a page whose defect sat at composition.
13
+
14
+ The instruction against that already existed. `draft-and-pick` Step 1 says to name the layer and Step 2 says a palette cannot be picked ahead of a composition. All four rounds skipped both, and nothing reported it. A session told to name a layer has no catalog to name from, so the rule had nothing behind it.
15
+
16
+ The second half is the output itself. A model with no stated direction draws the population average of its training data, which produces interfaces that satisfy every craft rule and still read templated.
17
+
18
+ Prose is already governed in two halves and design is governed in neither. Banned words ship as data a command reads, and the shapes no closed word set can match needed a skill of their own, because each is a pattern rather than a token. `standards/design.md` governs the shape of a project's design document and is silent on whether its values are any good.
19
+
20
+ Importing an external catalog wholesale fails on what those catalogs turn out to carry. The largest is 1,206 lines in one file, pinned to one framework, one styling library and one animation package, and it scopes itself out of dashboards, data tables and multi-step product UI. A second bans default fonts by name and prescribes a component library.
21
+
22
+ A session handed either one unfiltered adopts a stack the project does not use, or silently ignores the item. No later reader can tell which happened, which is why the adopted-and-declined record exists.
23
+
24
+ ## Must
25
+
26
+ - Require a declared read in the output before any candidate is authored, naming the kind, the audience, the overriding constraint and the layer, since a layer named privately is a layer nobody can check
27
+ - Enumerate the layers in settle order, so an instruction to name one has a catalog behind it
28
+ - State that a round varies one layer, and that a complaint is worked at the lowest layer it reaches rather than the cheapest one to change
29
+ - Carry grey-boxing as the operational form of the ordering rule, since removing the higher layers from view is what makes a lower one judgeable
30
+ - Cite the correctness floor rather than restating it. `400-ui`, `410-a11y`, `420-forms` and `430-ux-completeness` already carry accessibility, keyboard, forms, states and rendered copy on the rendered paths, and a second copy here drifts with nothing comparing the two.
31
+ - Hold in the body what every design moment pays for, being the read, the layers, the ordering, grey-boxing and the locks, and defer everything a single moment needs.
32
+ - State what has to stay constant across a whole surface, since coherence is a property of the whole and each of those is broken one section at a time.
33
+ - Detect the mode before reading anything when a surface already exists, and name what cannot change silently, since a slug, a field name or an analytics event breaks something outside the surface.
34
+ - Carry a final filter the session runs against its own output, with every item tracing to a rule stated here, since an unenforced rule and an unchecked one fail the same way.
35
+ - Name the machine defaults as a catalog of shapes with replacements, held behind a stated trigger so a round that needs none pays no read
36
+ - Record which external patterns were adopted, which declined, and the measurement behind each, so a later session extends the position instead of re-deriving it
37
+ - Stay general-purpose across kinds, naming what a kind optimizes for rather than which packages to install
38
+ - Say when a read names a kind the references do not cover, rather than inventing guidance for it
39
+
40
+ ## What earns a place
41
+
42
+ A rule belongs in this skill only when all four hold. Three of the four reject most design advice, which is the point: a criterion admitting everything is not a criterion.
43
+
44
+ 1. **An unguided model gets it wrong.** The model already knows a control needs padding, so writing that down costs a read and buys nothing. It does not know to avoid three equal cards. Only the second kind earns a line.
45
+ 2. **Nothing else owns it.** A `ui` rule, a standard, or a sibling skill owning the topic makes this a pointer rather than a rule.
46
+ 3. **It is judgment rather than a threshold.** A contrast ratio has a number and belongs to the floor. Whether a palette reads cheap has no number and belongs here.
47
+ 4. **One line states it, and something could violate that line.** "Use whitespace intentionally" fails, since nothing could break it. "No three consecutive image-and-text splits" passes, since it can be counted.
48
+
49
+ A rule failing any of the four is recorded as considered and declined rather than argued again, in the reference where it would have gone.
50
+
51
+ ## Must not
52
+
53
+ - Name a framework, a styling library, an animation package, a component library or an icon set as a default. A rule that survives only inside one stack is not a taste rule.
54
+ - Ship a frozen corpus of palettes, font pairings or product examples. A copy becomes a file some sync reconciles forever, and a traced reference is current by construction where a frozen one is not.
55
+ - Restate the banned words, characters or spellings, which `markdown.md` states and `canon markdown audit` gates from package data
56
+ - Express intensity as a numeric scale. A session picks a middle value and reports compliance, which satisfies the rule and decides nothing.
57
+ - Claim the reported failure is closed. Nothing measures whether a round follows these rules, so this skill states them and the measurement is owed separately.
58
+ - Duplicate a rule a surface already states for itself, such as slide layout or terminal color, where pointing at that surface is the whole of the correct answer
59
+ - Be reached only by an author typing its name. `standards/skill.md` makes this a review criterion rather than a check, since nothing answers it before the skill has run. The intended non-author caller is the declared read in `draft-and-pick`'s output. A round producing no read, with this skill never loaded, is the evidence that the description's triggers are too weak.
60
+
61
+ ## Guards
62
+
63
+ - A kind with no per-kind guidance gets the body's rules and a stated absence, never invented guidance
64
+ - A grey-boxed set is announced as grey-boxed, since an unannounced grey page reads as unfinished work rather than as the question being asked
65
+ - Accessibility and the state set outrank an aesthetic preference wherever the two collide, rather than being traded against it
66
+
67
+ ## Out of scope
68
+
69
+ - Accessibility, keyboard interaction, ARIA and alt text, which `410-a11y` owns on every rendered path
70
+ - State coverage, empty and loading treatment, destructive confirmation and truncation, which `430-ux-completeness` owns
71
+ - Validation timing, error placement and save blocking, which `420-forms` owns
72
+ - Rendered copy casing, button labels and error wording, which `400-ui` owns
73
+ - The candidate loop, the arm set, the render and the pick, which `draft-and-pick` owns and which this skill is loaded alongside rather than inside
74
+ - Tracing a reference's color, type and spacing values, which is `sketch-design`
75
+ - The shape of the project's design document, its sections and its token tables, which `standards/design.md` governs
76
+ - Spatial layout and interaction intent of one named surface, which `standards/wireframes.md` governs
77
+ - Prose on the surface being designed, which `write-human` and `markdown.md` govern between them
78
+ - Measuring whether finished output followed these rules, which needs a check this skill does not carry and which no command reaches while a render is an image rather than a parse
@@ -0,0 +1,148 @@
1
+ ---
2
+ name: design-taste
3
+ description: Carries the layer model that decides which design decision settles first, the rules that keep a surface coherent across sections, and the catalog of defaults a model reaches for when nothing states a direction. Use when drafting or judging an interface, a page, or any rendered surface, when output reads generic or templated, when redesigning something that already exists, or when asked to "make this look designed", "why does this look like AI made it", "give it taste", "what layer is this decision at", or "grey-box this first". Do NOT use for accessibility, forms, or state coverage, which the `ui` governance rules carry, for the shape of the project's design document, which `design.md` governs, to run the candidate loop, which is `draft-and-pick`, or to trace a reference's values, which is `sketch-design`.
4
+ ---
5
+
6
+ # Design taste
7
+
8
+ A model with no stated direction draws the population average of what it has seen. That is why unguided design output reads as templated while satisfying every rule of craft it was given, and it is why adding more craft rules does not fix it. This skill carries the direction: where a decision sits, what settles before it, and which defaults to reach past.
9
+
10
+ Load this before drafting rather than after. A revision pass recovers a color and never recovers the composition the draft already settled.
11
+
12
+ Skip it for work that does not change how something looks, feels, moves, or is interacted with.
13
+
14
+ ## The defaults you are reaching past
15
+
16
+ This is what the population average looks like. Each one is what gets drawn when nothing states otherwise, and each is recognizable on sight:
17
+
18
+ - Three equal cards in a row under a heading.
19
+ - A centered headline over a dark gradient wash, with two buttons under it.
20
+ - A violet-to-blue gradient used as the accent.
21
+ - Numbered labels above sections: `001 / Capabilities`, `Phase 02`, `Step 1`.
22
+ - A scroll cue at the bottom of the first screen.
23
+ - A colored dot before every navigation item, row or badge.
24
+ - A glow standing in for elevation, on a pure black or pure white ground.
25
+ - A product screenshot built out of styled rectangles.
26
+ - Placeholder that announces itself: `Acme`, a stock person name, 99.9%, one portrait used twice.
27
+ - Verbs chosen for warmth rather than for meaning, of the `elevate` and `unleash` family.
28
+
29
+ Reaching past a default means choosing something else on purpose, not avoiding the word. A brief that genuinely calls for one of these gets it, and the difference is that somebody decided.
30
+
31
+ `${CLAUDE_SKILL_DIR}/references/tells.md` holds the full catalog, of which these ten are the most common. Read it on the trigger stated below rather than now.
32
+
33
+ ## Declare the read
34
+
35
+ State one line before authoring any candidate, page, or component, and put it in the output rather than holding it privately. Where the surface already exists, name the mode first, since the mode decides how much of the read is yours to set:
36
+
37
+ > Reading this as: `<kind>` for `<audience>`, `<the constraint that overrides taste>`, working at `<layer>`.
38
+
39
+ Two worked examples:
40
+
41
+ > Reading this as: an application surface for an operator who already knows the domain, density beats first impression, working at composition.
42
+
43
+ > Reading this as: a marketing page for a stranger who has never run the tool, every claim must be a thing the tool did, working at content.
44
+
45
+ The read fixes the kind, which decides which rules apply, and names the layer, which decides what may vary. A round that cannot state its read has not decided what it is doing.
46
+
47
+ Put the read to the operator through the structured question surface where it genuinely forks, per `005-behavior`. Where context settles it, declare and proceed rather than asking.
48
+
49
+ ## The layers, and the order they settle
50
+
51
+ A lower layer constrains every layer above it. Two consequences follow, they run in opposite directions, and collapsing them is the mistake worth avoiding.
52
+
53
+ Settling a higher layer over a broken lower one changes nothing, which is why a palette round against a broken composition is wasted. Judging a lower layer through a finished higher one is nearly impossible, which is why grey-boxing works.
54
+
55
+ The model is Jesse James Garrett's five planes from _The Elements of User Experience_ (2000), subdivided to the granularity a drafting round works at.
56
+
57
+ | Order | Layer | The question it answers |
58
+ | ----- | ----------- | -------------------------------------------------------------------------- |
59
+ | 1 | Content | What is actually here, and what does it say |
60
+ | 2 | Composition | Which sections exist, in what order, carrying what relative weight |
61
+ | 3 | Layout | How a section divides its space: grid, columns, alignment, container width |
62
+ | 4 | Space | Rhythm and proximity, meaning what groups with what |
63
+ | 5 | Typography | Scale, weight, measure, casing, pairing |
64
+ | 6 | Surface | Elevation, border, radius, fill, depth |
65
+ | 7 | Palette | Ground, accent, saturation, contrast |
66
+ | 8 | Imagery | What a picture carries, and where it sits |
67
+ | 9 | Motion | What moves, why, and how far |
68
+
69
+ ### What follows from the order
70
+
71
+ - Work at the lowest layer the complaint reaches. A complaint is voiced at the layer a person can name and usually lives lower. "It feels gloomy" reads as palette and is frequently composition, since a page with one section shape reads flat whatever color it is.
72
+ - A round varies one layer and says which. Varying three answers nothing, because the pick cannot say which difference decided it.
73
+ - Never settle a higher layer before the one below it. Imagery and palette are the one pair that settle together, since a real photograph sets a ground rather than accepting one.
74
+ - Content leads the order and is frequently absent when drafting starts. Draft against real copy where it exists, stand in for it where it does not, and treat the composition as unsettled until real copy has run through it.
75
+ - Name the layer the complaint sits at, then check the layers below are settled. Where one is not, that is the round, and say so rather than drafting the requested one.
76
+
77
+ ## Grey-box when judging layers 1 to 4
78
+
79
+ Judging content, composition, layout or space through a finished surface is the failure the ordering exists to prevent. Remove the higher layers from view instead:
80
+
81
+ - Draw every element as a flat neutral block with no fill variation, no accent color, no imagery, no motion.
82
+ - Keep real text at real length. Placeholder text hides whether the composition survives the copy it will carry, so greek only what does not exist yet and never what does.
83
+ - Mark a region with no content yet as FPO at its true size, so nobody reads a placeholder as a decision.
84
+ - Return to the finished surface once the layer under judgment is settled. A grey-box is a stage, not a deliverable.
85
+
86
+ Say when a set is grey-boxed and why. An operator meeting an unannounced grey page reads it as unfinished work rather than as the question being asked.
87
+
88
+ ## Lock what must not vary across a surface
89
+
90
+ Coherence is a property of the whole and every one of these is broken one section at a time:
91
+
92
+ - **One accent.** Chosen once, used everywhere. A warm-grey surface does not grow a blue action in its seventh section.
93
+ - **One radius system.** Mixed radii are allowed only under a stated rule applied everywhere, such as pill actions over square containers.
94
+ - **One theme.** No inverted section dropped between its neighbors. A reader must not feel they walked into a different product mid-scroll.
95
+ - **One copy register.** Technical, editorial and promotional voices do not mix in one composition unless the brand states that they do.
96
+ - **One light source.** Every shadow on the surface falls the same way, and a shadow is tinted toward the ground rather than pure black.
97
+
98
+ ## Working on something that already exists
99
+
100
+ Name the mode before reading anything, since misclassifying it is the largest source of bad redesign work:
101
+
102
+ - **Greenfield:** nothing rendered yet, or a full replacement is agreed.
103
+ - **Preserve:** modernize without breaking the brand. Extract what exists before proposing anything.
104
+ - **Overhaul:** new visual language over existing content and structure.
105
+
106
+ Apply the cheapest lever that satisfies the brief, in this order: typography, then space and rhythm, then color recalibration, then motion, then recomposing key sections, then replacing a block outright.
107
+
108
+ Never change these without saying so and getting agreement, because each one breaks something outside the surface: URL and route slugs, primary navigation labels, form field names and their order, the logo, and legal or consent copy.
109
+
110
+ ## Setting up the scales
111
+
112
+ Read `${CLAUDE_SKILL_DIR}/references/systems.md` when establishing or revising what a surface draws from, being the space scale, the type scale, and the relationships a palette holds. Every other reference here is read against a draft. That one is read before there is one, so a project reaches for it at the start and on a system revision rather than on an ordinary round.
113
+
114
+ It states no values. A value belongs to the project's own design document.
115
+
116
+ ## The rest of the catalog
117
+
118
+ Read `${CLAUDE_SKILL_DIR}/references/tells.md` before handing over anything a model drafted, and whenever output satisfies every rule here and still reads generic. The ten above are the common cases. It holds the rest, plus the countable composition limits, the first-screen budget, and the record of which external items were adopted, which declined, and why.
119
+
120
+ Skip it on a small change to a surface with a settled direction. The catalog is a diagnostic and costs a read on every invocation that does not need one.
121
+
122
+ ## When it reads almost right
123
+
124
+ Read `${CLAUDE_SKILL_DIR}/references/craft.md` when a layout is correct and still looks off. It covers optical rather than mathematical alignment, alignment across side-by-side items, hierarchy built from weight rather than size, and the small failures that survive every structural rule.
125
+
126
+ ## Rules that differ by kind
127
+
128
+ Read `${CLAUDE_SKILL_DIR}/references/kinds.md` once the read names a kind. A read naming a kind it does not cover gets the body's rules and a stated absence, never invented guidance.
129
+
130
+ ## Naming a pattern
131
+
132
+ Read `${CLAUDE_SKILL_DIR}/references/vocabulary.md` when a shape needs a name, whether to ask for it, to compare two arms, or to record a pick.
133
+
134
+ ## Before handing anything over
135
+
136
+ Run `${CLAUDE_SKILL_DIR}/references/preflight.md` against the output. It is the last filter and every box traces to a rule stated here or in a reference. An item that cannot be honestly ticked is unfinished work rather than a judgment call.
137
+
138
+ ## What this delegates
139
+
140
+ - Focus, keyboard, ARIA, alt text, and every accessibility floor: the `ui` governance rules, which fire on the same paths this skill does and are the single source
141
+ - States, empty and loading coverage, destructive confirmation, truncation: the same rules
142
+ - Rendered copy casing, button labels, error message shape: the same rules
143
+ - The candidate loop, the arm set, the render, and the pick: `draft-and-pick`
144
+ - Tracing a reference's color, type and spacing values: `sketch-design`
145
+ - The shape of the project's design document and its token tables: `${CLAUDE_SKILL_DIR}/../../standards/design.md`
146
+ - Spatial layout and interaction intent of one surface: `${CLAUDE_SKILL_DIR}/../../standards/wireframes.md`
147
+ - Reading source for roughness: `ux-audit`. Measuring what a running interface costs to paint: `ux-measure`
148
+ - Prose on the surface being designed: the `write-human` skill
@@ -0,0 +1,58 @@
1
+ ---
2
+ title: Craft
3
+ description: The failures that survive every structural rule, where a layout is correct by measurement and still reads wrong to the eye
4
+ ---
5
+
6
+ # Craft
7
+
8
+ Read this when a layout satisfies the ordering, the locks and the tells, and still looks amateur. Everything here is a property of the eye rather than of the markup, so no measurement catches any of it.
9
+
10
+ ## Optical against mathematical
11
+
12
+ The eye and the arithmetic disagree, and the eye is the one being served.
13
+
14
+ - **Centering by the numbers is not centering.** A triangle inside a circle, an icon beside a label, a glyph inside a round button all sit visually left or low when centered by their bounding box. Nudge until it looks right, usually a pixel or two.
15
+ - **Equal vertical padding reads bottom-heavy.** A block with matching top and bottom padding looks like it is sinking. Give the bottom slightly more.
16
+ - **Optical size beats declared size.** A circle and a square at the same declared size do not read as the same size. The circle needs to be larger.
17
+ - **Type alignment follows the letterform, not the box.** A quotation mark, a bullet or an opening parenthesis at the start of a line should hang outside the text edge so the text itself lines up.
18
+
19
+ ## Alignment across siblings
20
+
21
+ A row of cards is judged as a row, so every shared element has to land on the same line.
22
+
23
+ - Titles, values, descriptions and actions align across all items in a row. One card with a two-line title pushing everything below it down is the most common version of this failure.
24
+ - Pin actions to the bottom of each card so they form one horizontal line whatever the content above them does.
25
+ - Feature lists in comparison columns start at the same vertical position. Fix with a fixed-height header block rather than by hoping the copy matches.
26
+ - Equal-height cards forced by the layout engine are the wrong fix. Either allow variable heights deliberately or align the shared elements.
27
+
28
+ ## Hierarchy without scale
29
+
30
+ Reaching for size is the first instinct and the weakest tool.
31
+
32
+ - A page carrying only regular and bold has two levels. Introducing the weights between them gives four, at no cost in space.
33
+ - Color, spacing and position all carry hierarchy. A heading set in a muted tone above tighter spacing reads as a level without being larger.
34
+ - An enormous heading over uniform body text is shouting rather than structuring, and it flattens every level under it.
35
+
36
+ ## Type detail
37
+
38
+ - **Orphans.** A single word alone on the last line of a heading. Let the renderer balance short headings rather than forcing the break by hand.
39
+ - **Measure.** Body text running the full width of a wide container is unreadable however good the type is.
40
+ - **Figures in columns.** Numbers that change, in a table, a price or a timer, need tabular figures or the column jitters.
41
+ - **Tracking by size.** Large type wants tighter letter spacing, small uppercase labels want looser. Body text wants whatever the face was drawn with.
42
+ - **Casing.** Sentence case for headings and labels. Title case on every heading reads as a template.
43
+
44
+ ## Depth and texture
45
+
46
+ - A shadow is tinted toward the surface it falls on. Pure black at low opacity reads as dirt.
47
+ - Flat with zero texture reads sterile at large sizes. A trace of noise or a soft gradient gives a large ground something to be.
48
+ - An even linear gradient across a whole section is the laziest depth available. Break it or drop it.
49
+ - Elements sitting flat beside each other with no overlap read as a diagram. Let something cross a boundary.
50
+
51
+ ## Small things that read as unfinished
52
+
53
+ - A link or action that goes nowhere.
54
+ - Navigation with no indication of where the reader currently is.
55
+ - The same portrait used for several different people.
56
+ - Every item dated identically, which no real collection ever is.
57
+ - An exclamation mark in a success message. Confidence is quieter than that.
58
+ - An error opening on an apology rather than on what to do next.
@@ -0,0 +1,52 @@
1
+ ---
2
+ title: Rules by kind
3
+ description: What each broad surface kind optimizes for, where a rule written for one is wrong for another, and which surface governs the kinds this file does not cover
4
+ ---
5
+
6
+ # Rules by kind
7
+
8
+ Read this once the declared read names a kind. The body's rules hold on every kind. This file holds only what differs, because a rule that holds everywhere belongs in the body and a rule stated twice drifts.
9
+
10
+ ## Marketing and promotional
11
+
12
+ Landing pages, campaign pages, portfolios. The reader has never used the thing and owes it no attention.
13
+
14
+ - **Optimizes for** comprehension in the first screen, then one clear next action.
15
+ - **Composition carries the weight.** A marketing page is judged on section order and variation before anything else, which is why a palette round against a flat composition changes nothing a reader notices.
16
+ - **Vary the section shape.** Alternate alignment, container width and the ratio between sections. A page where every section is a centered heading over centered body reads as a template regardless of its values.
17
+ - **Low density.** Whitespace is the argument that the thing is considered. This is the one kind where less information on screen is usually better.
18
+ - **Every claim names a real thing.** A page asserting what a tool does, illustrated by something the tool did not produce, breaks its own thesis in the place it is making it.
19
+ - **Motion is permitted and rationed.** Entrance motion for what genuinely leads the eye, nothing looping forever.
20
+ - **Where a rule from another kind is wrong here:** dense tabular comparison, persistent chrome, and state indicators all read as product UI leaking onto a marketing page.
21
+
22
+ ## Application and product UI
23
+
24
+ Dashboards, tools, admin surfaces, agentic and assistant interfaces. The reader is mid-task and already knows the domain.
25
+
26
+ - **Optimizes for** throughput and state legibility. How fast can the reader see what is happening and act on it.
27
+ - **High density is correct.** Cramming is a failure and spaciousness is also a failure, since a surface that shows six rows where thirty fit costs the reader a scroll per glance.
28
+ - **The states carry the design weight.** Loading, empty, error, partial and stale are not edge cases on this kind, they are most of what the reader sees, so they are composed rather than handled. Whether each exists at all is the `ui` rules' question and not this one.
29
+ - **An agentic surface adds three states of its own:** work in progress with something to read while it runs, work that needs the person before it continues, and work that finished with a result to inspect. Each needs a visible resting place and none should be a spinner.
30
+ - **Chrome is persistent and quiet.** Navigation, status and context stay put and stay recessive, since they are read constantly and looked at rarely.
31
+ - **Motion is feedback, not entrance.** A thing moving should be reporting that something changed.
32
+ - **Where a rule from another kind is wrong here:** generous whitespace, entrance animation on every panel, and hero-scale typography all read as a marketing page wearing a product's clothes.
33
+
34
+ ## Content and long-form
35
+
36
+ Documentation, articles, reference pages, learning material. The reader arrived to read and will stay if reading is comfortable.
37
+
38
+ - **Optimizes for** sustained reading and for finding one thing without reading everything.
39
+ - **Measure is capped** so the eye reaches the next line without hunting.
40
+ - **Hierarchy comes from weight and space** rather than from size. A page of large headings reads as shouting and flattens the levels below.
41
+ - **Navigation is a map.** A reader who cannot see where they are in the whole cannot judge whether to keep going, which is what a scrollspy or a persistent outline buys.
42
+ - **Code, tables and figures are first-class.** They are what the reader scans for, so they are styled as content rather than as interruptions.
43
+ - **Motion is almost always wrong.** Movement during reading competes with reading.
44
+ - **Where a rule from another kind is wrong here:** density tuned for an application surface makes long prose unreadable, and marketing whitespace between every paragraph breaks a section into unrelated fragments.
45
+
46
+ ## Kinds this file does not cover
47
+
48
+ - **Transactional flows** such as checkout, sign-up and settings are read as application UI. Their distinctive rules are state coverage and error recovery, which the `ui` governance rules already carry.
49
+ - **Presentation surfaces** such as slide decks are governed by `${CLAUDE_SKILL_DIR}/../../standards/slides.md` and drafted by `draft-slides`. Take the layer ordering and the floor from the body and the rest from there.
50
+ - **Terminal and text-mode surfaces** have no layout engine and their own color rules, stated where the writing surface is decided rather than here.
51
+
52
+ A read naming any of the three above takes the body's rules and says it has no per-kind guidance, naming the surface that governs it. A read naming a kind this file does not list at all says so rather than borrowing the nearest section.
@@ -0,0 +1,77 @@
1
+ ---
2
+ title: Pre-flight
3
+ description: The last filter before handing design work over, one box per rule stated in the body or a reference
4
+ ---
5
+
6
+ # Pre-flight
7
+
8
+ Run this against the output before handing it over. Every box traces to a rule stated in the skill body or one of its references, so a box that cannot be honestly ticked names unfinished work rather than a judgment call.
9
+
10
+ Skip nothing on the ground that it is obviously fine. A rule is on this list because it was obviously fine to somebody who shipped it broken.
11
+
12
+ ## The read
13
+
14
+ - [ ] The read is stated in the output, naming kind, audience, overriding constraint and layer
15
+ - [ ] The arms or the change vary the layer the read named, not a cheaper one
16
+ - [ ] Every layer below the one under judgment is settled
17
+ - [ ] Mode named where the surface already exists, and nothing on the never-change list moved without agreement
18
+
19
+ ## Coherence
20
+
21
+ - [ ] One accent across every section
22
+ - [ ] One radius system, or a stated rule applied everywhere
23
+ - [ ] One theme, with no inverted section between its neighbors
24
+ - [ ] One copy register
25
+ - [ ] Every shadow falls the same way and is tinted toward its ground
26
+
27
+ ## Composition
28
+
29
+ - [ ] No layout family used twice. Eight sections carry at least four families
30
+ - [ ] No three consecutive sections sharing the image-and-text split
31
+ - [ ] Small uppercase labels above headings number no more than one per three sections
32
+ - [ ] At most one horizontal marquee
33
+ - [ ] Grid cells equal content items, with no blank tile filling a gap
34
+ - [ ] Lists over five items use something other than a longer list
35
+ - [ ] The first screen carries the point and the primary action without scrolling
36
+ - [ ] The first screen carries at most four text elements
37
+
38
+ ## Systems
39
+
40
+ Skip this group where the surface draws on a system already settled.
41
+
42
+ - [ ] Every gap comes from one scale, and the distinct spacing values number under about eight
43
+ - [ ] Space between groups exceeds space within them
44
+ - [ ] The type scale carries five to seven steps, each visibly different from its neighbors
45
+ - [ ] The accent is rare enough to read as an accent
46
+ - [ ] Neutrals sit in one family at one temperature
47
+ - [ ] Adjacent surfaces separate by a little and content separates from ground by a lot
48
+ - [ ] No semantic color borrows the accent
49
+
50
+ ## Craft
51
+
52
+ - [ ] Shared elements align across every item in a row, and actions form one line
53
+ - [ ] Nothing centered by arithmetic that reads off-center
54
+ - [ ] No orphaned word closing a heading
55
+ - [ ] Body text measure is capped
56
+ - [ ] Changing numbers set in tabular figures
57
+ - [ ] Hierarchy carried by weight, color and space rather than size alone
58
+
59
+ ## Content
60
+
61
+ - [ ] Every visible string re-read in one pass, with anything broken, unclear or performatively clever rewritten
62
+ - [ ] Every number either real, labeled as sample, or removed
63
+ - [ ] No placeholder that reads as placeholder: generic names, generic company names, reused portraits, identical dates
64
+ - [ ] No filler verbs
65
+ - [ ] Sentence case throughout
66
+ - [ ] Every claim about what the product does is a thing it does
67
+
68
+ ## Motion
69
+
70
+ - [ ] Every animation justified in one sentence naming hierarchy, sequence, feedback or state change
71
+ - [ ] Nothing loops forever without input
72
+ - [ ] Motion claimed is motion present, and motion absent is not claimed
73
+
74
+ ## Handover
75
+
76
+ - [ ] The weakest thing on the surface is named out loud, per `draft-and-pick` Step 3, and fixed where naming it would embarrass the work
77
+ - [ ] The floor the `ui` governance rules carry has been applied, not assumed
@@ -0,0 +1,49 @@
1
+ ---
2
+ title: Systems
3
+ description: The scales and relationships set once for a project rather than judged per draft, being space, type and palette
4
+ ---
5
+
6
+ # Systems
7
+
8
+ Read this when establishing or revising the scales a surface draws from. Every other reference here is read against a draft. This one is read before there is a draft, which is why it sits apart from them.
9
+
10
+ Nothing below states a value. A value belongs to the project's own design document, and these are the relationships that decide whether the values work.
11
+
12
+ ## Space
13
+
14
+ An unguided model reaches for whatever number looks right at each point, which produces a surface with thirty spacing values and no rhythm.
15
+
16
+ - **Every gap comes from one scale.** Count the distinct spacing values on a finished surface. More than about eight means there is no scale, only arithmetic.
17
+ - **The steps grow, they do not add.** A scale stepping 4, 8, 12, 16, 24, 32, 48, 64 gives usable distinctions at both ends. One stepping 10, 20, 30, 40 gives four values that all read the same at large sizes and none that work at small.
18
+ - **Space between groups exceeds space within them.** This is the one spacing rule carrying real meaning, since proximity is what tells a reader which things belong together. A surface with one gap everywhere has told the reader nothing, and it is the most common spacing failure in generated output.
19
+ - **Section rhythm is two or three tiers, not a value per section.** Pick the tiers, then assign each section to one.
20
+ - **Space responds to viewport, type mostly does not.** A layout that scales every value together arrives at a phone reading like a shrunken desktop.
21
+
22
+ ## Type
23
+
24
+ - **One scale, with fewer steps than feels sufficient.** Five to seven covers a surface. A scale with twelve steps has several nobody can tell apart.
25
+ - **Adjacent steps are visibly different.** Two steps two pixels apart read as a mistake rather than as a level. If two steps are hard to distinguish side by side, one of them is not a step.
26
+ - **Body size anchors the scale and everything derives from it.** Picking a display size first and working down produces body text sized by whatever was left.
27
+ - **Line height moves opposite to size.** Large type wants it tighter, small type wants it looser, so one value across the scale is wrong at both ends.
28
+ - **The scale carries weights beside sizes.** A scale of sizes alone forces every hierarchy decision to be a size decision, which is the failure `craft.md` names.
29
+
30
+ ## Palette
31
+
32
+ The layer a model is worst at, and the layer where rules are hardest to make falsifiable. Everything below is a relationship, since a rule naming a value is a value ban and values belong to the project.
33
+
34
+ - **An accent is defined by rarity, not by hue.** A color used on a third of the surface is a ground, whatever it was chosen as. If the accent appears more than a handful of times per screen, there is no accent.
35
+ - **Neutrals are one family at one temperature.** Warm grays beside cool grays read as a mistake rather than as a decision, and it is a mistake a model makes by pulling neutrals from different sources.
36
+ - **Adjacent surfaces separate by a little, content separates from ground by a lot.** Generated output routinely inverts this: cards that shout against the page, and text that does not.
37
+ - **A semantic color is not the accent.** Error, success and warning carry meaning. Borrowing the accent for one of them makes the accent mean something, and it stops being available for anything else.
38
+ - **Dark mode is re-derived, not inverted.** The relationships above are what carry across, and the values are settled again. A palette flipped by algorithm gets the relationships wrong in both directions.
39
+ - **Saturation has a budget across the surface, not per color.** Several colors each individually reasonable produce a surface that reads loud, which is why the rule is about the total rather than about any one value.
40
+
41
+ ## Considered and declined
42
+
43
+ Each failed the test in `REQUIREMENT.md`. Recorded so they are not argued again.
44
+
45
+ - **Control sizing and proportion.** An unguided model produces reasonable controls without instruction, so it fails the first question.
46
+ - **Specific ratios for a type scale**, such as a named musical interval. Falsifiable and arbitrary, and a project picking a different ratio is not wrong.
47
+ - **Named palettes or banned hues.** A value ban, which belongs to the project's design document. This is where every external catalog of this kind ends up, and it is why theirs cannot be imported.
48
+ - **A minimum contrast figure.** A threshold with a number, which the accessibility rules own.
49
+ - **Imagery as a system.** There is no scale to establish. What a model gets wrong about images is using fake ones, which `tells.md` already covers, so the layer stays thin on purpose rather than by oversight.