@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.
- package/CHANGELOG.md +10 -0
- package/claude/.claude-plugin/plugin.json +1 -1
- package/claude/skills/create-skill/references/skill-practice.md +1 -0
- package/claude/skills/design-record/references/design.md +1 -1
- package/claude/skills/design-taste/REQUIREMENT.md +2 -1
- package/claude/skills/design-taste/SKILL.md +6 -5
- package/claude/skills/design-taste/references/adopted.md +136 -8
- package/claude/skills/design-taste/references/craft.md +1 -1
- package/claude/skills/design-taste/references/kinds.md +8 -2
- package/claude/skills/design-taste/references/preflight.md +3 -3
- package/claude/skills/design-taste/references/tells.md +26 -5
- package/claude/skills/plan-feature/SKILL.md +2 -2
- package/claude/skills/plan-feature/references/plan.md +24 -3
- package/claude/skills/review-craft/SKILL.md +1 -1
- package/claude/skills/role-worker/SKILL.md +2 -1
- package/claude/skills/ui-checklist/SKILL.md +1 -1
- package/claude/skills/ui-craft/REQUIREMENT.md +29 -0
- package/claude/skills/ui-craft/SKILL.md +44 -0
- package/{governance/rules/ui → claude/skills/ui-craft/references}/a11y.md +0 -10
- package/claude/skills/ui-craft/references/adopted.md +27 -0
- package/{governance/rules/ui/surface-capture.md → claude/skills/ui-craft/references/capture.md} +0 -10
- package/{governance/rules/ui/ux-controls.md → claude/skills/ui-craft/references/controls.md} +3 -10
- package/claude/skills/ui-craft/references/copy.md +45 -0
- package/{governance/rules/ui → claude/skills/ui-craft/references}/forms.md +0 -9
- package/{governance/rules/ui → claude/skills/ui-craft/references}/keyboard.md +0 -10
- package/{governance/rules/ui → claude/skills/ui-craft/references}/motion.md +0 -10
- package/{governance/rules/ui → claude/skills/ui-craft/references}/pointer.md +0 -10
- package/{governance/rules/ui/ux-completeness.md → claude/skills/ui-craft/references/states.md} +0 -10
- package/claude/skills/ux-audit/SKILL.md +1 -1
- package/claude/skills/write-human/references/adopted.md +4 -1
- package/docs/agents/install-and-sync.md +2 -2
- package/docs/target/migrations.md +3 -3
- package/docs/target/sync.md +3 -2
- package/docs/workflow/skill-map.md +1 -0
- package/docs/workflow/visual-design-workflow.md +2 -2
- package/governance/detect.toml +1 -45
- package/governance/ledger/lib/test-scope.md +1 -1
- package/governance/ledger/{ui → skills/ui-craft}/a11y.md +3 -3
- package/governance/ledger/{ui/surface-capture.md → skills/ui-craft/capture.md} +3 -3
- package/governance/ledger/{ui/ux-controls.md → skills/ui-craft/controls.md} +12 -7
- package/governance/ledger/skills/ui-craft/copy.md +102 -0
- package/governance/ledger/{ui → skills/ui-craft}/forms.md +3 -3
- package/governance/ledger/{ui → skills/ui-craft}/keyboard.md +3 -3
- package/governance/ledger/{ui → skills/ui-craft}/motion.md +3 -3
- package/governance/ledger/{ui → skills/ui-craft}/pointer.md +3 -3
- package/governance/ledger/{ui/ux-completeness.md → skills/ui-craft/states.md} +3 -3
- package/governance/ledger/ui/craft.md +19 -0
- package/governance/renames.toml +17 -3
- package/governance/rules/lib/test-scope.md +1 -1
- package/governance/rules/ui/craft.md +22 -0
- package/governance/splits.toml +0 -2
- package/package.json +1 -1
- package/src/claude/cases/misc.ts +5 -0
- package/src/claude/skills-audit.ts +150 -12
- package/src/commands/claude.ts +5 -0
- package/src/commands/tooling.ts +4 -1
- package/src/gate/measures.ts +4 -3
- package/src/gov/audit.ts +6 -1
- package/src/inventory/subjects.ts +1 -1
- package/src/tooling/package.ts +22 -13
- package/tooling/web/reference.md +3 -1
- package/governance/ledger/ui/copy.md +0 -49
- package/governance/ledger/ui/design-taste.md +0 -19
- package/governance/ledger/ui/interface-casing.md +0 -47
- package/governance/ledger/ui/link-behavior.md +0 -29
- package/governance/rules/ui/copy.md +0 -28
- package/governance/rules/ui/design-taste.md +0 -18
- package/governance/rules/ui/interface-casing.md +0 -29
- package/governance/rules/ui/link-behavior.md +0 -19
- /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
|
|
|
@@ -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.
|
|
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
|
|
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
|
|
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
|
|
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`
|
|
152
|
-
- States, empty and loading coverage, destructive confirmation, truncation: the same
|
|
153
|
-
- Rendered copy casing, button labels, error message shape: the same
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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.
|
|
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. `
|
|
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`
|
|
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`
|
|
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 `
|
|
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 `
|
|
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`
|
|
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`
|
|
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.
|
|
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,
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|