@erclx/canon 5.62.0 → 5.63.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 (70) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/claude/.claude-plugin/plugin.json +1 -1
  3. package/claude/skills/create-skill/references/skill-practice.md +1 -0
  4. package/claude/skills/design-record/references/design.md +1 -1
  5. package/claude/skills/design-taste/REQUIREMENT.md +2 -1
  6. package/claude/skills/design-taste/SKILL.md +6 -5
  7. package/claude/skills/design-taste/references/adopted.md +136 -8
  8. package/claude/skills/design-taste/references/craft.md +1 -1
  9. package/claude/skills/design-taste/references/kinds.md +8 -2
  10. package/claude/skills/design-taste/references/preflight.md +3 -3
  11. package/claude/skills/design-taste/references/tells.md +26 -5
  12. package/claude/skills/plan-feature/SKILL.md +2 -2
  13. package/claude/skills/plan-feature/references/plan.md +24 -3
  14. package/claude/skills/review-craft/SKILL.md +1 -1
  15. package/claude/skills/role-worker/SKILL.md +2 -1
  16. package/claude/skills/ui-checklist/SKILL.md +1 -1
  17. package/claude/skills/ui-craft/REQUIREMENT.md +29 -0
  18. package/claude/skills/ui-craft/SKILL.md +44 -0
  19. package/{governance/rules/ui → claude/skills/ui-craft/references}/a11y.md +0 -10
  20. package/claude/skills/ui-craft/references/adopted.md +27 -0
  21. package/{governance/rules/ui/surface-capture.md → claude/skills/ui-craft/references/capture.md} +0 -10
  22. package/{governance/rules/ui/ux-controls.md → claude/skills/ui-craft/references/controls.md} +3 -10
  23. package/claude/skills/ui-craft/references/copy.md +45 -0
  24. package/{governance/rules/ui → claude/skills/ui-craft/references}/forms.md +0 -9
  25. package/{governance/rules/ui → claude/skills/ui-craft/references}/keyboard.md +0 -10
  26. package/{governance/rules/ui → claude/skills/ui-craft/references}/motion.md +0 -10
  27. package/{governance/rules/ui → claude/skills/ui-craft/references}/pointer.md +0 -10
  28. package/{governance/rules/ui/ux-completeness.md → claude/skills/ui-craft/references/states.md} +0 -10
  29. package/claude/skills/ux-audit/SKILL.md +1 -1
  30. package/claude/skills/write-human/references/adopted.md +4 -1
  31. package/docs/agents/install-and-sync.md +2 -2
  32. package/docs/target/migrations.md +3 -3
  33. package/docs/target/sync.md +3 -2
  34. package/docs/workflow/skill-map.md +1 -0
  35. package/docs/workflow/visual-design-workflow.md +2 -2
  36. package/governance/detect.toml +1 -45
  37. package/governance/ledger/lib/test-scope.md +1 -1
  38. package/governance/ledger/{ui → skills/ui-craft}/a11y.md +3 -3
  39. package/governance/ledger/{ui/surface-capture.md → skills/ui-craft/capture.md} +3 -3
  40. package/governance/ledger/{ui/ux-controls.md → skills/ui-craft/controls.md} +12 -7
  41. package/governance/ledger/skills/ui-craft/copy.md +102 -0
  42. package/governance/ledger/{ui → skills/ui-craft}/forms.md +3 -3
  43. package/governance/ledger/{ui → skills/ui-craft}/keyboard.md +3 -3
  44. package/governance/ledger/{ui → skills/ui-craft}/motion.md +3 -3
  45. package/governance/ledger/{ui → skills/ui-craft}/pointer.md +3 -3
  46. package/governance/ledger/{ui/ux-completeness.md → skills/ui-craft/states.md} +3 -3
  47. package/governance/ledger/ui/craft.md +19 -0
  48. package/governance/renames.toml +17 -3
  49. package/governance/rules/lib/test-scope.md +1 -1
  50. package/governance/rules/ui/craft.md +22 -0
  51. package/governance/splits.toml +0 -2
  52. package/package.json +1 -1
  53. package/src/claude/cases/misc.ts +5 -0
  54. package/src/claude/skills-audit.ts +150 -12
  55. package/src/commands/claude.ts +5 -0
  56. package/src/commands/tooling.ts +4 -1
  57. package/src/gate/measures.ts +4 -3
  58. package/src/gov/audit.ts +6 -1
  59. package/src/inventory/subjects.ts +1 -1
  60. package/src/tooling/package.ts +22 -13
  61. package/tooling/web/reference.md +3 -1
  62. package/governance/ledger/ui/copy.md +0 -49
  63. package/governance/ledger/ui/design-taste.md +0 -19
  64. package/governance/ledger/ui/interface-casing.md +0 -47
  65. package/governance/ledger/ui/link-behavior.md +0 -29
  66. package/governance/rules/ui/copy.md +0 -28
  67. package/governance/rules/ui/design-taste.md +0 -18
  68. package/governance/rules/ui/interface-casing.md +0 -29
  69. package/governance/rules/ui/link-behavior.md +0 -19
  70. /package/tooling/web/{configs → seeds}/e2e/home.spec.ts +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Changelog
2
2
 
3
+ ## [5.63.0](https://github.com/erclx/canon/compare/v5.62.0...v5.63.0) (2026-10-24)
4
+
5
+
6
+ ### Features
7
+
8
+ * **design:** ground design-taste rules and gate ledgers on a citation ([#2682](https://github.com/erclx/canon/issues/2682)) ([b265be3](https://github.com/erclx/canon/commit/b265be30b359797ebe5d0019c8d1cd59acfe465b))
9
+ * **plan:** add a verbatim section for settled wording ([#2688](https://github.com/erclx/canon/issues/2688)) ([1b3e337](https://github.com/erclx/canon/commit/1b3e3371f3f6b84ff780f1e9d956981783ee9515))
10
+ * **skills:** move the ui practice into a ui-craft skill ([#2687](https://github.com/erclx/canon/issues/2687)) ([47ef097](https://github.com/erclx/canon/commit/47ef0979613a70d46721068db504c877210d7e2d))
11
+ * **tooling:** read later majors as ahead and seed the starter spec ([#2683](https://github.com/erclx/canon/issues/2683)) ([dc3bc06](https://github.com/erclx/canon/commit/dc3bc06e2ca157ebbb1c3ba723251b21eb478c0a))
12
+
3
13
  ## [5.62.0](https://github.com/erclx/canon/compare/v5.61.0...v5.62.0) (2026-10-24)
4
14
 
5
15
 
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "canon",
3
3
  "description": "Runs your agent's work and keeps its code good, on one setup for every repo.",
4
- "version": "5.62.0",
4
+ "version": "5.63.0",
5
5
  "author": {
6
6
  "name": "Eric Le",
7
7
  "url": "https://github.com/erclx"
@@ -43,6 +43,7 @@ Follow every concern group with `## Excuses and rebuttals`, `## Red flags`, and
43
43
 
44
44
  - Carry `references/adopted.md` in every practice skill, recording each external source the body draws on.
45
45
  - Link each source, or pin it to a commit, so a reader can open the version the body adopted.
46
+ - Mark a threshold no source states as a table row whose source cell opens with `House choice`, since a ledger carrying neither a link nor one such row cites nothing and the audit fails it.
46
47
  - State what was adopted, what was declined, and why for each, so a later session extends the position rather than re-deriving it.
47
48
  - Draw first from the default shelf, [Software Engineering at Google](https://abseil.io/resources/swe-book/html/toc.html) and [Google's engineering practices](https://google.github.io/eng-practices/), and record a source from elsewhere the same way.
48
49
 
@@ -89,7 +89,7 @@ In an intent record, `## Colors` carries a `Role | Property | Intent` table and
89
89
 
90
90
  Add either optional section when the project has content for it:
91
91
 
92
- - `## Layout`: page width, breakpoints, and grid rules as current constraints. The surface-capture rule reads breakpoints here, so a project declaring none is captured at the 320 reflow floor alone.
92
+ - `## Layout`: page width, breakpoints, and grid rules as current constraints. `ui-craft` captures at these breakpoints, so a project declaring none is captured at the 320 reflow floor alone.
93
93
  - `## Mark`: the logo's construction rules and the files that carry it
94
94
 
95
95
  ## The uncertainty tag
@@ -29,7 +29,8 @@ The output has no standard of quality either. A model with no stated direction d
29
29
 
30
30
  ## Out of scope
31
31
 
32
- - Accessibility, keyboard interaction, state coverage, forms, and rendered copy, which the `a11y`, `keyboard`, `ux-completeness`, `forms`, and `copy` rules own
32
+ - Accessibility, keyboard interaction, state coverage, forms, and rendered copy, which `ui-craft` owns
33
+ - The focus ring's floors, which `ui-craft` owns, though its weight is this skill's
33
34
  - The candidate loop and the pick, which `pick-by-eye` owns
34
35
  - The shape of the project's design document, which `design-record`'s design reference governs
35
36
  - Prose on the surface being designed, which `write-human` and `markdown-craft` own
@@ -1,6 +1,6 @@
1
1
  ---
2
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, or to run the candidate loop, which is `pick-by-eye`.
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 `ui-craft` carries, for the shape of the project's design document, which `design.md` governs, or to run the candidate loop, which is `pick-by-eye`.
4
4
  metadata:
5
5
  family: build
6
6
  ---
@@ -58,7 +58,7 @@ A lower layer constrains every layer above it. Two consequences follow in opposi
58
58
  - Settling a higher layer over a broken lower one changes nothing, which is why a palette round against a broken composition is wasted
59
59
  - Judging a lower layer through a finished higher one is nearly impossible, which is why grey-boxing works
60
60
 
61
- 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.
61
+ The model is Jesse James Garrett's five planes from [The Elements of User Experience](http://www.jjg.net/elements/) (2000), subdivided to the granularity a drafting round works at.
62
62
 
63
63
  | Order | Layer | The question it answers |
64
64
  | ----- | ----------- | -------------------------------------------------------------------------- |
@@ -101,6 +101,7 @@ Coherence is a property of the whole and every one of these is broken one sectio
101
101
  - **One theme.** No inverted section dropped between its neighbors. A reader must not feel they walked into a different product mid-scroll.
102
102
  - **One copy register.** Technical, editorial and promotional voices do not mix in one composition unless the brand states that they do.
103
103
  - **One light source.** Every shadow on the surface falls the same way, and a shadow is tinted toward the ground rather than pure black.
104
+ - **One focus ring weight.** Chosen once and drawn the same on every control. The `ui-craft` skill owns its visibility, contrast, and floor, and this lock sets the weight above them.
104
105
 
105
106
  ## Working on something that already exists
106
107
 
@@ -148,9 +149,9 @@ Run `${CLAUDE_SKILL_DIR}/references/preflight.md` against the output. It is the
148
149
 
149
150
  ## What this delegates
150
151
 
151
- - 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
152
- - States, empty and loading coverage, destructive confirmation, truncation: the same rules
153
- - Rendered copy casing, button labels, error message shape: the same rules
152
+ - Focus, keyboard, ARIA, alt text, and every accessibility floor: the `ui-craft` skill, which the same pointer rule loads beside this one and is the single source
153
+ - States, empty and loading coverage, destructive confirmation, truncation: the same skill
154
+ - Rendered copy casing, button labels, error message shape: the same skill
154
155
 
155
156
  ### Other skills
156
157
 
@@ -1,17 +1,143 @@
1
1
  ---
2
2
  title: Adopted and declined
3
- description: Which external design catalogs this skill adopted from, which items it declined, and why, so a later session extends the position instead of re-deriving it
3
+ description: Where each design-taste rule comes from, being a quoted authority, the community catalog of model-output tells, or a house threshold, plus what was declined and why
4
4
  ---
5
5
 
6
6
  # Adopted and declined
7
7
 
8
- External catalogs were read and filtered rather than imported. This file is the record, and a later session extends it rather than re-deriving it.
8
+ Every rule in this skill traces to one of three origins. A reader arguing against a rule finds its origin here, and a session extending the skill adds a row rather than re-deriving one.
9
9
 
10
- ## Adopted
10
+ - **An authority.** A typographer, a usability lab, a platform guideline, or the CSS reference states the rule, and the row quotes the passage relied on.
11
+ - **The catalog.** Community prompt skills recorded what models draw when nothing states a direction. A tell from them is an observation of model output, not established practice.
12
+ - **A house choice.** The toolkit chose the threshold so a tell can be counted, and no source stands behind the number.
11
13
 
12
- **Adopted with no change.** The three equal cards, the centered hero over a wash, enumerated eyebrows, scroll cues, decorative status dots, atmospheric strips, the fake screenshot built from boxes, filler verbs, and placeholder that reads as placeholder. Each names a shape, each carries a replacement, and none depends on a stack.
14
+ A rule a quoted passage only partly backs names the part it backs, and the rest sits in the catalog or the house class.
13
15
 
14
- **Adopted with the stack removed.** Source items naming an icon set, a component library, a font by name, or an animation package were rewritten to state what the rule is about. "Do not use Inter" became one family doing every job, since the defensible claim is about pairing and role separation rather than about one typeface.
16
+ ## Contents
17
+
18
+ - [The layer model](#the-layer-model)
19
+ - [Craft rules an authority states](#craft-rules-an-authority-states)
20
+ - [Systems rules an authority states](#systems-rules-an-authority-states)
21
+ - [Tells an authority states](#tells-an-authority-states)
22
+ - [The catalog](#the-catalog)
23
+ - [House choices](#house-choices)
24
+ - [Declined from the catalogs](#declined-from-the-catalogs)
25
+ - [Declined from the systems reference](#declined-from-the-systems-reference)
26
+ - [Carried as a caution](#carried-as-a-caution)
27
+
28
+ ## The layer model
29
+
30
+ The body's layer order subdivides the five planes of Jesse James Garrett's [The Elements of User Experience](http://www.jjg.net/elements/). Its second chapter states the dependency the order rests on, that "Each plane is dependent on the planes below it."
31
+
32
+ The same passage gives the constraint running the other way, that "the choices available to us on each plane are constrained by the decisions we make about issues on the planes below it". The nine layers and the grey-box stage are the skill's own subdivision of those planes.
33
+
34
+ ## Craft rules an authority states
35
+
36
+ Rows for `craft.md`, grouped by its sections.
37
+
38
+ ### Type detail
39
+
40
+ Each rule below is stated by the type reference or the CSS property that implements it.
41
+
42
+ | Rule | Source |
43
+ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
44
+ | Measure | [Practical Typography](https://practicaltypography.com/line-length.html): "Aim for an average line length of 45–90 characters, including spaces." |
45
+ | Figures in columns | [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric): `tabular-nums` sets figures "the same size, allowing them to be easily aligned" |
46
+ | Small caps tracked | [Practical Typography](https://practicaltypography.com/letterspacing.html): "always add 5–12% extra letterspacing to text in all caps or small caps" |
47
+ | Large type tighter | The same page: typographers "will often remove letterspacing from lowercase text used at larger sizes" |
48
+ | Orphans | [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap): `balance` suits "a short number of lines, such as headings, captions, and blockquotes" |
49
+ | Hanging punctuation | [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation): "An opening bracket or quote at the start of the first formatted line" hangs |
50
+
51
+ Casing is the `ui-craft` copy reference's, which `craft.md` points at rather than restating.
52
+
53
+ ### Optical size, hierarchy, and unfinished work
54
+
55
+ The rows below back one bullet each. The error row backs the fix half of its bullet alone.
56
+
57
+ | Rule | Source |
58
+ | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
59
+ | Optical size | [Wikipedia, Overshoot](https://en.wikipedia.org/wiki/Overshoot_%28typography%29): round letters overshoot "to achieve an optical effect of being the same size" |
60
+ | Hierarchy from weight | [Practical Typography](https://practicaltypography.com/headings.html): with a bold heading, "you can also try reducing the point size" |
61
+ | Where the reader is | [NN/g](https://www.nngroup.com/articles/navigation-you-are-here/): "Navigation should not only show where you can go but also where you are now." |
62
+ | Error opens on a fix | [NN/g](https://www.nngroup.com/articles/error-message-guidelines/): "offer some potential remedies" |
63
+
64
+ That an apology should not lead the error is the catalog's observation, since the NN/g page allows one on a total failure.
65
+
66
+ ### Craft rules from the catalog
67
+
68
+ The remaining `craft.md` rules are catalog observations of model output. They are optical centering, bottom-heavy padding, alignment across siblings, color and space carrying hierarchy, the shouting heading, every depth and texture rule, the dead link, the reused portrait, and the copy that reads unfinished.
69
+
70
+ ## Systems rules an authority states
71
+
72
+ Rows for `systems.md`. The counts it states sit under house choices below.
73
+
74
+ | Rule | Source |
75
+ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
76
+ | Between groups beats within | [NN/g](https://www.nngroup.com/articles/gestalt-proximity/): "Items close together are likely to be perceived as part of the same group" |
77
+ | One gap everywhere fails | The same page: a tight label reads as one group "compared to a larger margin before the next label-field pair" |
78
+ | Adjacent steps differ | [Practical Typography](https://practicaltypography.com/headings.html): "Use the smallest increment necessary to make a visible difference." |
79
+ | Fewer steps than feel enough | The same page: "Limit yourself to three levels of headings. Two is better." |
80
+ | Weights beside sizes | The bold heading passage under craft above |
81
+ | Dark mode re-derived | [Apple HIG](https://developer.apple.com/design/human-interface-guidelines/dark-mode): dark colors "aren't necessarily inversions of their light counterparts" |
82
+
83
+ ### Systems rules from the catalog
84
+
85
+ Geometric spacing steps, space responding to the viewport, body size anchoring the scale, and line height moving opposite to size are catalog observations. Practical Typography gives a line spacing range for body text alone, so it does not back the last.
86
+
87
+ Every palette rule but the dark mode row is catalog as well, being accent by rarity, one neutral temperature, the separation of surfaces from content, a semantic color kept off the accent, and the saturation budget.
88
+
89
+ ## Tells an authority states
90
+
91
+ Two tells and one application UI rule rest on a source rather than on the catalog.
92
+
93
+ | Rule | Source |
94
+ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
95
+ | Unstyled platform control | [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme): it adapts "The default colors of form controls" |
96
+ | Transparency with no checkerboard | [Wikipedia](https://en.wikipedia.org/wiki/Transparency_%28graphic%29): an editor "shows transparency by a special pattern, e.g. a checkerboard pattern" |
97
+ | Shortcut beside its command | [NN/g](https://www.nngroup.com/articles/ui-copy/): shortcuts sit "to the far right of the menu" and "alongside the command text in tool tips" |
98
+
99
+ ## The catalog
100
+
101
+ Every other tell in `tells.md`, and the ten defaults in the body, came from community prompt skills that recorded what models draw unguided. None of them is a design authority. Each tell is an observation of model output, falsifiable against a render, rather than established practice.
102
+
103
+ - **[Taste-Skill](https://github.com/leonxlnx/taste-skill)** and its fork **[claude-taste-skill](https://github.com/nxpatterns/claude-taste-skill)** supplied the composition, content, surface, and motion tells
104
+ - **[UI/UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)** was first read through a vendor listing and later from its repository. Its ranking puts accessibility first, and its lookup corpus was declined.
105
+ - **[frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design)**, Anthropic's skill, supplied the five clusters current AI design falls into, restated in `tells.md`
106
+ - **[Impeccable](https://github.com/pbakaus/impeccable)** supplied what a visual direction may lend an application screen and the category self-check, restated in `kinds.md`. Its themed browser surfaces lie behind the platform control tell.
107
+
108
+ No sentence from any of them is copied. Each idea is restated and cited here.
109
+
110
+ ### Adopted with no change
111
+
112
+ The three equal cards, the centered hero over a wash, enumerated eyebrows, scroll cues, decorative status dots, atmospheric strips, the fake screenshot built from boxes, filler verbs, and placeholder that reads as placeholder. Each names a shape, each carries a replacement, and none depends on a stack.
113
+
114
+ ### Adopted with the stack removed
115
+
116
+ Source items naming an icon set, a component library, a font by name, or an animation package were rewritten to state what the rule is about. "Do not use Inter" became one family doing every job, since the defensible claim is about pairing and role separation rather than about one typeface.
117
+
118
+ ## House choices
119
+
120
+ Each threshold below is the toolkit's, chosen so a tell can be counted rather than judged.
121
+
122
+ | Threshold | Source |
123
+ | ----------------------------- | ---------------------------------------------------------------------------------------------- |
124
+ | About eight spacing values | House choice: past it, a count tells a scale from arithmetic on a finished surface |
125
+ | Five to seven type steps | House choice: fewer forces size to carry every level, and more holds steps nobody tells apart |
126
+ | Two or three section tiers | House choice: enough tiers for rhythm, few enough that each section takes one |
127
+ | One marquee | House choice: a second sliding strip is where the device reads as filler |
128
+ | Two consecutive splits | House choice: a third alternation is where the pattern reads as filler |
129
+ | Four first-screen text items | House choice: a label, a headline, a supporting line, and the actions, so a fifth is countable |
130
+ | One layout family, five items | House choice: a repeated shape and a long run become counts a reviewer can check |
131
+
132
+ The uppercase label count belongs to the `ui-craft` copy reference, whose own ledger records it as a house choice.
133
+
134
+ ### The focus ring's weight
135
+
136
+ One more lock is the toolkit's own choice.
137
+
138
+ | Threshold | Source |
139
+ | --------------- | -------------------------------------------------------------------------------------------------------- |
140
+ | One ring weight | House choice: a ring varying by component reads as several products. The `ui-craft` skill owns the floor |
15
141
 
16
142
  ## Declined from the catalogs
17
143
 
@@ -21,7 +147,7 @@ Each item below is real advice placed in the wrong surface, or a rule that decid
21
147
 
22
148
  **Banned fonts by name.** A font ban is a value ban, and a value belongs to the project's own design document rather than to a skill that loads everywhere. A project that wants a typeface ruled out rules it out there.
23
149
 
24
- **Numeric intensity dials.** Every external source carries a 1-to-10 scale for variance, motion and density. A session picks a middle value and reports compliance. That satisfies the rule, decides nothing, and leaves no trace a later reader could check it by. The declared read carries the same information in a sentence somebody can argue with.
150
+ **Numeric intensity dials.** Every external source carries a 1-to-10 scale for variance, motion and density. A session picks a middle value and reports compliance, which decides nothing and leaves no trace a later reader could check. The declared read carries the same information in a sentence somebody can argue with.
25
151
 
26
152
  ### Rules owned elsewhere
27
153
 
@@ -29,17 +155,19 @@ Each item below is real advice placed in the wrong surface, or a rule that decid
29
155
 
30
156
  **The official-package map.** A table routing a brief to Fluent, Material, Carbon, Polaris, Primer or a government design system. It is real advice and it is a stack decision a project takes once, so it belongs in that project's own records rather than in a skill that loads on every design round.
31
157
 
32
- ### Scope
158
+ ### Scope and tooling
33
159
 
34
160
  **Scoping out application UI.** The largest source covers landing pages, portfolios and redesigns, and excludes dashboards, data tables and multi-step product UI. Those exclusions are most of what software projects actually build, so the kinds reference carries application UI as a first-class kind.
35
161
 
162
+ **A design detector hook.** Impeccable runs one after UI edits. A detector belongs beside an automated review probe once the tells are grounded, not inside a skill that carries guidance.
163
+
36
164
  ## Declined from the systems reference
37
165
 
38
166
  Each failed the test in `REQUIREMENT.md`. Recorded so they are not argued again.
39
167
 
40
168
  - **Control sizing and proportion.** An unguided model produces reasonable controls without instruction, so it fails the first question.
41
169
  - **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.
42
- - **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.
170
+ - **Named palettes or banned hues.** A value ban, which belongs to the project's design document. Every external catalog of this kind ends up here, which is why theirs cannot be imported.
43
171
  - **A minimum contrast figure.** A threshold with a number, which the accessibility rules own.
44
172
  - **Imagery as a system.** There is no scale to establish. What a model gets wrong about images is using fake ones, which `tells.md` covers, so the layer stays thin on purpose.
45
173
 
@@ -39,7 +39,7 @@ Reaching for size is the first instinct and the weakest tool.
39
39
  - **Measure.** Body text running the full width of a wide container is unreadable however good the type is.
40
40
  - **Figures in columns.** Numbers that change, in a table, a price or a timer, need tabular figures or the column jitters.
41
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. `interface-casing` states the rule and its exceptions.
42
+ - **Casing.** Sentence case for headings and labels. The `ui-craft` copy reference states the rule and its exceptions.
43
43
 
44
44
  ## Depth and texture
45
45
 
@@ -26,12 +26,18 @@ Dashboards, tools, admin surfaces, agentic and assistant interfaces. The reader
26
26
  - **Optimizes for** throughput and state legibility. How fast can the reader see what is happening and act on it.
27
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
28
  - **The states carry the design weight.** Loading, empty, error, partial and stale are most of what the reader sees on this kind, so they are composed rather than handled.
29
- - **Whether each state exists** is the `ui` rules' question, not this file's.
29
+ - **Whether each state exists** is the `ui-craft` skill's question, not this file's.
30
30
  - **An agentic surface adds three states.** Work running with something to read, work that needs the person, and work finished with a result to inspect. Each rests visibly, never as a spinner.
31
31
  - **Chrome is persistent and quiet.** Navigation, status and context stay put and stay recessive, since they are read constantly and looked at rarely.
32
32
  - **Motion is feedback, not entrance.** A thing moving should be reporting that something changed.
33
+ - **The visual direction lends four things.** Type, palette, density, and one signature move. Layout, the navigation model, and the controls stay the category's own.
34
+ - **A borrowed interface lends the same four.** A direction taken from a terminal or an instrument panel gives only what transfers, and the working screen never dresses up as its source.
35
+ - **Check each render against its category.** Cover the product name and ask whether the screen reads as a tool of its kind and whether the task can be done from it.
36
+ - **A command shows its shortcut.** A menu row carries the keys at its right edge and a tooltip names them beside the command, in the platform's own spelling.
33
37
  - **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.
34
38
 
39
+ The direction limits and the category check restate [Impeccable](https://github.com/pbakaus/impeccable)'s guidance for app screens. The shortcut placement follows [NN/g](https://www.nngroup.com/articles/ui-copy/).
40
+
35
41
  ## Content and long-form
36
42
 
37
43
  Documentation, articles, reference pages, learning material. The reader arrived to read and will stay if reading is comfortable.
@@ -46,7 +52,7 @@ Documentation, articles, reference pages, learning material. The reader arrived
46
52
 
47
53
  ## Kinds this file does not cover
48
54
 
49
- - **Transactional flows** such as checkout, sign-up and settings are read as application UI. Their distinctive rules, state coverage and error recovery, sit in the `ui` governance rules.
55
+ - **Transactional flows** such as checkout, sign-up and settings are read as application UI. Their distinctive rules, state coverage and error recovery, sit in the `ui-craft` skill.
50
56
  - **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
57
 
52
58
  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.
@@ -32,7 +32,7 @@ Each box here is a count from `tells.md`.
32
32
 
33
33
  - [ ] No layout family used twice. Eight sections carry at least four families
34
34
  - [ ] No three consecutive sections sharing the image-and-text split
35
- - [ ] Small uppercase labels above headings number no more than one per three sections, per `interface-casing`
35
+ - [ ] Small uppercase labels above headings number no more than one per three sections, per the `ui-craft` copy reference
36
36
  - [ ] At most one horizontal marquee
37
37
 
38
38
  ### Content and first screen
@@ -90,7 +90,7 @@ The detail boxes come from `craft.md`.
90
90
  Every word on the surface states what is true of it.
91
91
 
92
92
  - [ ] No filler verbs
93
- - [ ] Sentence case throughout, with exceptions per `interface-casing`
93
+ - [ ] Sentence case throughout, with exceptions per the `ui-craft` copy reference
94
94
  - [ ] Every claim about what the product does is a thing it does
95
95
 
96
96
  ## Motion
@@ -102,4 +102,4 @@ Every word on the surface states what is true of it.
102
102
  ## Handover
103
103
 
104
104
  - [ ] The weakest thing on the surface is named out loud, per `pick-by-eye` Step 3, and fixed where naming it would embarrass the work
105
- - [ ] The floor the `ui` governance rules carry has been applied, not assumed
105
+ - [ ] The floor the `ui-craft` skill carries has been applied, not assumed
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  title: Machine tells in design
3
- description: The visual defaults a model reaches for when nothing states a direction, each with what to do instead, plus the countable composition limits and the first-screen budget
3
+ description: The looks current AI design clusters in and the visual defaults a model reaches for when nothing states a direction, each with what to do instead, plus the countable composition limits and the first-screen budget
4
4
  ---
5
5
 
6
6
  # Machine tells in design
@@ -9,6 +9,20 @@ Each item below is a shape rather than a value, which is why no ban list of colo
9
9
 
10
10
  The skill body carries the ten most common of these, and this is the same catalog at full length. An item is a default to reach past, not a prohibition, so a brief that explicitly asks for one gets it, chosen rather than defaulted into.
11
11
 
12
+ ## Where current AI design clusters
13
+
14
+ Unguided output does not spread evenly. It lands in a handful of looks, and following every other rule in this catalog does not keep a page out of them.
15
+
16
+ - **The warm paper page.** A cream ground near `#F4F1EA` under a serif display set at strong contrast, accented in clay or terracotta.
17
+ - **Black with one loud accent.** A near-black ground lit by a single acid green or vermilion.
18
+ - **The newspaper imitation.** Hairline rules, square corners, and tight columns borrowed from print.
19
+ - **The card kit.** Every block in a matching rounded box under the same faint grey shadow, with gradient washes for decoration.
20
+ - **Template chrome.** A tracked uppercase label over each heading, meta joined by middle dots, monospace for small data, an arrow on link text, and off-black for black.
21
+
22
+ A page drafted under this skill landed on the first look at exactly that cream, which is why the list sits apart from the shapes below. Each look suits a brief that names it. Where the brief leaves an axis open, choose something else on purpose.
23
+
24
+ The five restate the calibration list in Anthropic's [frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design) skill.
25
+
12
26
  ## Composition
13
27
 
14
28
  - **The three equal cards.** Three identical boxes in a row under a heading. Reach for a two-column alternation, an asymmetric grid, a list with one item given weight, or a single worked example.
@@ -39,6 +53,13 @@ The skill body carries the ten most common of these, and this is the same catalo
39
53
  - **The gradient as a substitute for a decision.** A gradient over a section, a heading, or a button set because flat looked plain. Flat composition is fixed by composition, not gradient.
40
54
  - **Uniform radius and uniform elevation.** Every card at the same radius with the same shadow flattens hierarchy. Let the thing that matters differ.
41
55
 
56
+ ## Platform surfaces
57
+
58
+ The browser and the operating system draw some parts of every page, and a themed surface leaves them at their defaults unless someone decides otherwise.
59
+
60
+ - **An unstyled platform control.** A dark surface whose scrollbars, selects, or checkboxes still wear the light defaults. Declare the page's color scheme and take the accent from the palette.
61
+ - **A transparent color with no checkerboard.** An alpha swatch over a flat ground, where a faint red and a solid pink look alike. Draw it over a checkerboard, the way image editors do.
62
+
42
63
  ## Typography
43
64
 
44
65
  - **Scale as the only hierarchy.** An enormous heading over uniform body text. Weight, color, spacing and measure carry hierarchy at lower cost.
@@ -52,15 +73,15 @@ The skill body carries the ten most common of these, and this is the same catalo
52
73
  - **The permanent loop.** Anything animating forever with no input. It costs attention on every frame and earns none back.
53
74
  - **Motion on arrival for everything.** Every section fading up on scroll. Reserve entrance motion for what genuinely needs the eye.
54
75
  - **Motion claimed but absent, or present but unclaimed.** A "restrained" surface animating on every scroll, or a "fluid" one sitting still, has decided nothing. Ship the motion or drop the claim.
55
- - **Motion that ignores a reduced-motion preference.** A correctness failure the `ui` governance rules own, not a taste one. It sits here so a motion pass does not read this catalog as all motion owes.
76
+ - **Motion that ignores a reduced-motion preference.** A correctness failure the `ui-craft` skill owns, not a taste one. It sits here so a motion pass does not read this catalog as all motion owes.
56
77
 
57
78
  ## The countable limits
58
79
 
59
- These rules carry numbers, so they are checked by counting rather than by judging. Every one came out of production testing by people shipping model-drafted pages.
80
+ These rules carry numbers, so they are checked by counting rather than by judging. Each number is a house choice made so the tell can be counted, and `adopted.md` records it as one.
60
81
 
61
82
  - **A layout family appears once.** Once a section uses a shape, no other section on the surface uses it. Eight sections need at least four distinct families.
62
83
  - **Two consecutive splits, never three.** Alternating image sides reads as considered twice and as filler by the third. Break it with a full-width section, a vertical stack, or a grid.
63
- - **One small uppercase label per three sections.** The most over-reached default in model output, with the count in `interface-casing`. Usually delete it, since position already says what a section is.
84
+ - **One small uppercase label per three sections.** The most over-reached default in model output, counted in `ui-craft`. Usually delete it, since position already says what a section is.
64
85
  - **One marquee.** Two sliding strips on one surface read as filler rather than as a device.
65
86
  - **Cells equal items.** A grid with a hole in it, or a blank tile at the end, means the grid was shaped before the content was counted. Reshape it.
66
87
  - **Over five items wants a different component.** Group into clusters, split into columns, give each item a card, make them scrollable, or collapse the tail behind a disclosure.
@@ -75,4 +96,4 @@ These rules carry numbers, so they are checked by counting rather than by judgin
75
96
 
76
97
  ## Adopted, declined, and why
77
98
 
78
- The record of which external catalog items were adopted, which declined, and why sits in `adopted.md` beside this file.
99
+ Most items here are observations of what models draw unguided, gathered from community prompt skills rather than from a design authority. The record of which were adopted, which declined, and why sits in `adopted.md` beside this file, with the few an authority states and the links to the catalog behind the rest.
@@ -38,7 +38,7 @@ Read these in parallel from the project root, skipping any that do not exist:
38
38
 
39
39
  Also read `canon/DESIGN.md` when the feature touches code or UI, for visual intent and component rules, with values read from the stylesheet its lead names. Skip it for prose, docs, catalog, or config-only changes. For a UI feature, read `canon/design/index.md` too, if it exists, for the surfaces with an accepted design.
40
40
 
41
- Coding standards live in `.claude/rules/`. Claude Code loads them automatically, and path-scoped rules apply to the files they match. For a UI feature, load `canon:design-taste` whether or not `canon/DESIGN.md` exists.
41
+ Coding standards live in `.claude/rules/`. Claude Code loads them automatically, and path-scoped rules apply to the files they match. For a UI feature, load `canon:ui-craft` for how it behaves and `canon:design-taste` for how it looks, whether or not `canon/DESIGN.md` exists.
42
42
 
43
43
  ### Read the domain's context entry
44
44
 
@@ -86,7 +86,7 @@ Every `- Suggested:` line takes senior judgment, picking the best option in one
86
86
  - Suggest a real default when best practice, the codebase, or prior context points to one
87
87
  - Before `## Files to touch`, load `canon:codebase-layout` for a new path (its reason) and `canon:api-design` for a changed verb, flag, output, record shape, or endpoint. Report either if missing.
88
88
  - Fill `## Design references` with the `canon/design/<surface>/` folder for each surface a UI file in `## Files to touch` renders, and write `None identified.` in a project with no folder
89
- - Write `## Verification` as one bullet per outcome naming the test or command that proves it
89
+ - Write `## Verification` as one bullet per outcome naming the test or command that proves it, with a grep bullet per `## Verbatim` block of settled wording
90
90
  - Write `## Review focus` as the inputs or states that would break the change, carrying the risk you understood to the executor and the reviewer
91
91
 
92
92
  ### Sources and size
@@ -75,6 +75,7 @@ The document opens with `# Feature: <short title>` and one paragraph stating wha
75
75
  | `## Current behavior` | each command run against the thing being changed and what it showed | When the change touches something that runs |
76
76
  | `## Constraints` | durable rules the work must respect | When supplied |
77
77
  | `## Files to touch` | each file with a one-line reason | Always |
78
+ | `## Verbatim` | settled wording that lands unchanged in an existing file, one H3 per block | When wording is settled |
78
79
  | `## Design references` | the tracked design folders the change builds against, each with its surface | When Files to touch names a rendered-surface file |
79
80
  | `## Verification` | the test or command that proves each outcome | Always |
80
81
  | `## Risks` | conflicts, coupling, and the tricky spots | Always |
@@ -171,6 +172,16 @@ A batch in a fan-in set declares its side in a constraint bullet, ``Fan-in membe
171
172
 
172
173
  A constraint naming a `.canon/ready/` folder is a third shape beside the hold and the shared path. It makes that folder's files the verbatim source for the paths this plan's `## Files to touch` lists, per `ready.md`, so the executing session copies those paths rather than authoring them.
173
174
 
175
+ ### Verbatim
176
+
177
+ A `## Verbatim` section carries wording someone settled, landing in an existing file exactly as written. Wording the planner only proposes stays a `- Suggested:` question, and a whole new file goes in the ready folder per `ready.md`, so the two never describe the same file.
178
+
179
+ - Give each block an H3 naming it, then a lead sentence with the action, the full path, and the anchor, then a fenced `text` block holding the wording
180
+ - Name the action as Add, Insert, or Replace. A Replace quotes the old line in the lead's code span.
181
+ - Write the block as the project's formatter leaves it, since a formatter that re-pads a table row or rewraps a line makes the grep fail on correct text
182
+ - Name the outcome in a grep bullet and put a command past 200 characters in a fenced `bash` block under it, since `S4` reports a longer bullet
183
+ - Give each block one `## Verification` bullet running `grep -cF -e` on its whole first line against its file, so a reworded line fails a check the reviewer already runs.
184
+
174
185
  ### Design references
175
186
 
176
187
  A plan whose `## Files to touch` names a rendered-surface file (`.tsx`, `.jsx`, `.astro`, `.vue`, `.svelte`, `.html`, or `.css`) carries this section. It tells the building session which accepted design to open before it writes a line.
@@ -258,9 +269,9 @@ This contract inverts the one an intake folder keeps, where an empty slot means
258
269
 
259
270
  ## Template
260
271
 
261
- Each H3 below shows where a section groups once it passes 5 bullets. A section of 5 or fewer drops its H3s and keeps its bullets flat, except `## Risks`, which takes an H3 per risk at any count.
272
+ Each H3 below shows where a section groups once it passes 5 bullets. A section of 5 or fewer drops its H3s and keeps its bullets flat, except `## Risks` and `## Verbatim`, which take an H3 per risk or block at any count.
262
273
 
263
- ```markdown
274
+ ````markdown
264
275
  # Feature: <short title>
265
276
 
266
277
  <One paragraph on what is being built and why now.>
@@ -300,6 +311,16 @@ The files below share <the reason>.
300
311
 
301
312
  - `<path/to/file>`: <reason>
302
313
 
314
+ ## Verbatim
315
+
316
+ ### <Block name>
317
+
318
+ Add as <where> in `<path/to/file>`, after <anchor>.
319
+
320
+ ```text
321
+ <the wording, as the formatter leaves it>
322
+ ```
323
+
303
324
  ## Design references
304
325
 
305
326
  - `canon/design/<surface>/`: <the surface it governs>
@@ -335,4 +356,4 @@ The questions below decide <what>, numbered across the whole section.
335
356
  ## Sources
336
357
 
337
358
  - [<title>](url), backing <decision>: "<passage relied on>"
338
- ```
359
+ ````
@@ -49,7 +49,7 @@ An axis whose condition the diff meets is not optional. When the security or the
49
49
  Read each of these when the diff reaches what it names.
50
50
 
51
51
  7. **Security.** Read `${CLAUDE_SKILL_DIR}/references/security.md` when the diff runs a command, writes or deletes a file, takes outside input, touches a secret, adds a dependency, or changes a default.
52
- 8. **Rendered output.** Read `${CLAUDE_SKILL_DIR}/references/ui.md` when the diff touches a file that paints, or when the pull request carries an evidence comment.
52
+ 8. **Rendered output.** Read `${CLAUDE_SKILL_DIR}/references/ui.md` when the diff paints or the pull request carries evidence. Judge behavior by `ui-craft` and the look by `design-taste`.
53
53
  - A file that paints is markup, a stylesheet, a component, a template, or a design token
54
54
  - A stylesheet diff says what the author changed and only the screenshot says what a user sees, so the reference opens the images and checks whether any exist
55
55
  9. **Developer experience and operations.** Ports, hooks, scripts, config, and scaffold defaults a consumer installs.
@@ -23,6 +23,7 @@ This body states the role, the boundaries, and the channel, and starts no step o
23
23
  - Resolve `.canon/plans/`, `.canon/tasks/`, `.canon/review/`, and `.canon/ready/` at the main worktree root, never the linked worktree. Being gitignored, they are absent there rather than empty.
24
24
  - Report a plan that fails to resolve as unreadable from here, naming the main-root path. Reporting the task as having no plan is wrong about the world, and a reader cannot tell the two apart.
25
25
  - Build the plan the launch named. Never write a second one when the path fails to resolve, since a row citing a plan already has one.
26
+ - Load `ui-craft` before editing a rendered surface, pointer rule or not
26
27
  - Keep a task list from launch, one item per slice, and tick each as its slice lands. Skip it on a host that offers no list tool, since the list is for the operator watching and not a gate.
27
28
 
28
29
  ### Ready folders and the draft mark
@@ -60,7 +61,7 @@ A plan carrying a `**Design references:**` section names the accepted design for
60
61
 
61
62
  - Open each cited folder's light and dark images and its frame HTML before the first edit to that surface
62
63
  - Take sizes, spacing, and colors from the frame HTML rather than from the image
63
- - Report a reference that does not resolve in the working tree, naming the path, rather than building without it
64
+ - Report a missing reference by its path rather than building without it
64
65
  - Leave `None identified.` as it stands and build without a reference
65
66
 
66
67
  ## Scope after dispatch
@@ -48,7 +48,7 @@ The checkbox stays `- [ ]` followed by the action and the result, since the evid
48
48
 
49
49
  ## Boxes no engine reads
50
50
 
51
- The UI review runs axe over every route it reaches, so a box restating what axe checks, such as contrast, a missing name, or a page title, adds a drive and catches nothing. Derive a box instead for each behavior below that the changed surface carries:
51
+ The UI review runs axe over every route it reaches, so a box restating what axe checks, such as contrast, a missing name, or a page title, adds a drive and catches nothing. Derive a box instead from the `ui-craft` references the changed surface reads, for each behavior below that it carries:
52
52
 
53
53
  - **Hover content.** Content shown on hover or focus stays while the pointer moves onto it, and Escape dismisses it, per WCAG 1.4.13.
54
54
  - **Keyboard trap.** Tab and Shift+Tab leave every widget the change added, per WCAG 2.1.2.
@@ -0,0 +1,29 @@
1
+ ---
2
+ name: ui-craft
3
+ description: Why the UI behavior practice lives in one skill every role reads by name, and where it stops beside design-taste and design-record
4
+ ---
5
+
6
+ # UI craft requirement
7
+
8
+ ## Gap
9
+
10
+ Without this skill, the UI behavior practice reaches a session only as path rules a target has to sync, so a project holding the plugin without governance builds a component with none of it. A role that plans, builds, or reviews a rendered change has no name to load the practice by, and each one restates the part it remembers.
11
+
12
+ ## Must
13
+
14
+ - Every rule the retired ui practice rules carried sits in a reference, unchanged in wording, with its source row in a ledger beside the reference
15
+ - A rendered change reaches accessibility, keyboard, and state coverage on every read, and the other references by the change that needs them
16
+ - A rendered change that is about to be handed over reaches the capture reference
17
+ - A planning, building, or reviewing role reaches the skill by name, with or without the governance pointer installed
18
+
19
+ ## Must not
20
+
21
+ - Reword a moved rule in the move, since a wording change is a separate change with its own ledger row
22
+ - Restate the look, being layout, type, color, or the layer order
23
+ - Be reached only by an author typing its name, since the `craft` pointer rule and the planning, building, and reviewing skills are its callers
24
+
25
+ ## Out of scope
26
+
27
+ - How a surface looks, which `design-taste` owns
28
+ - The design folder, its references, and the comparison a pull request shows, which `design-record` and the `design-reference` rule own
29
+ - The visual checklist a reviewer reads, which `ui-checklist` owns