@erclx/canon 4.97.0 → 4.99.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/README.md +29 -27
- package/claude/.claude-plugin/plugin.json +1 -1
- package/claude/skills/auto-ship/SKILL.md +6 -4
- package/claude/skills/draft-and-pick/REQUIREMENT.md +3 -1
- package/claude/skills/draft-and-pick/SKILL.md +3 -2
- package/claude/skills/draft-and-pick/references/frame.html +118 -0
- package/claude/skills/draft-ready/SKILL.md +3 -3
- package/claude/skills/git-pr/SKILL.md +41 -21
- package/claude/skills/test-craft/REQUIREMENT.md +1 -1
- package/claude/skills/test-first/REQUIREMENT.md +1 -1
- package/claude/skills/ui-checklist/REQUIREMENT.md +49 -0
- package/claude/skills/ui-checklist/SKILL.md +71 -0
- package/claude/skills/ux-audit/REQUIREMENT.md +1 -1
- package/claude/skills/ux-measure/REQUIREMENT.md +1 -1
- package/docs/agents/capture.md +2 -2
- package/docs/agents/demo.md +3 -1
- package/docs/agents/pr-evidence.md +34 -11
- package/docs/agents/pr-preview.md +4 -3
- package/docs/agents/tasks.md +3 -1
- package/docs/workflow/ai-workflow.md +4 -4
- package/docs/workflow/visual-design-workflow.md +2 -2
- package/package.json +1 -1
- package/scripts/core/regen-hero.sh +33 -1
- package/src/claude/cases/workflow.ts +3 -2
- package/src/commands/demo.ts +4 -3
- package/src/commands/pr.ts +53 -1
- package/src/commands/tasks.ts +16 -0
- package/src/demo/compile.ts +20 -0
- package/src/demo/drive.ts +1 -0
- package/src/migrate/skill-names.ts +14 -6
- package/src/pr/evidence.ts +36 -1
- package/src/sandbox/expect.ts +2 -1
- package/src/slides/styles.ts +28 -3
- package/src/tasks/archive.ts +115 -3
- package/standards/ready.md +2 -2
- package/standards/tasks.md +4 -2
- package/claude/skills/ui-test/REQUIREMENT.md +0 -48
- package/claude/skills/ui-test/SKILL.md +0 -87
package/src/slides/styles.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bareHex, colorValue } from '@/design/tokens'
|
|
1
|
+
import { bareHex, colorValue, TOKENS } from '@/design/tokens'
|
|
2
2
|
|
|
3
3
|
export type Variant = 'light' | 'dark'
|
|
4
4
|
|
|
@@ -23,11 +23,36 @@ const ROLES: Record<keyof Theme, readonly [dark: string, light: string]> = {
|
|
|
23
23
|
accent: ['accent', 'light-accent'],
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* `PptxGenJS` takes one installed family name where the record declares a
|
|
28
|
+
* stack, and a `.pptx` cannot embed the face. The first family is taken with
|
|
29
|
+
* its ` Variable` suffix dropped, since that suffix names the CSS package and
|
|
30
|
+
* not the installed family, and PowerPoint picks its own substitute when the
|
|
31
|
+
* face is missing.
|
|
32
|
+
*/
|
|
33
|
+
function familyName(role: string): string {
|
|
34
|
+
const token = TOKENS.typography.find((entry) => entry.role === role)
|
|
35
|
+
const family = token?.family
|
|
36
|
+
.split(',')[0]
|
|
37
|
+
?.trim()
|
|
38
|
+
.replace(/ Variable$/, '')
|
|
39
|
+
if (!family) {
|
|
40
|
+
throw new Error(`The design record declares no ${role} type role`)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return family
|
|
44
|
+
}
|
|
45
|
+
|
|
26
46
|
export const FONTS = {
|
|
27
|
-
heading: '
|
|
28
|
-
body: '
|
|
47
|
+
heading: familyName('display'),
|
|
48
|
+
body: familyName('body'),
|
|
29
49
|
} as const
|
|
30
50
|
|
|
51
|
+
/**
|
|
52
|
+
* Deck-owned point sizes. The record's `t0` to `t6` steps are screen pixels,
|
|
53
|
+
* which read as points on a 13.33 inch slide would shrink the cover to 38 and
|
|
54
|
+
* the body to 11, so only the face and the colors come from the record.
|
|
55
|
+
*/
|
|
31
56
|
export const TYPE = {
|
|
32
57
|
cover: 44,
|
|
33
58
|
section: 40,
|
package/src/tasks/archive.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { recordDir, recordDirs } from '@/record-root'
|
|
|
7
7
|
|
|
8
8
|
const TASKS = 'tasks'
|
|
9
9
|
const PLANS = 'plans'
|
|
10
|
+
const READY = 'ready'
|
|
10
11
|
const ARCHIVE = 'archive'
|
|
11
12
|
const DECLINED = 'declined'
|
|
12
13
|
const BACKLOG = 'backlog.md'
|
|
@@ -75,6 +76,12 @@ export interface PlanMove {
|
|
|
75
76
|
readonly to: string
|
|
76
77
|
}
|
|
77
78
|
|
|
79
|
+
/** A ready folder carried into the archive alongside the plan that is its verbatim source. */
|
|
80
|
+
export interface ReadyMove {
|
|
81
|
+
readonly from: string
|
|
82
|
+
readonly to: string
|
|
83
|
+
}
|
|
84
|
+
|
|
78
85
|
export interface ArchiveSuccess {
|
|
79
86
|
readonly ok: true
|
|
80
87
|
readonly stem: string
|
|
@@ -84,6 +91,8 @@ export interface ArchiveSuccess {
|
|
|
84
91
|
readonly indexRegenerated: boolean
|
|
85
92
|
/** Undefined when the task cited no live plan, or when another task still holds it. */
|
|
86
93
|
readonly plan: PlanMove | undefined
|
|
94
|
+
/** Undefined when the plan stays, or when no ready folder resolves and can move. */
|
|
95
|
+
readonly ready: ReadyMove | undefined
|
|
87
96
|
readonly closed: number
|
|
88
97
|
readonly cut: number
|
|
89
98
|
}
|
|
@@ -280,6 +289,32 @@ export function retargetPlanLine(text: string, target: string): string {
|
|
|
280
289
|
return text.replace(PLAN_PATTERN, () => planLine(target))
|
|
281
290
|
}
|
|
282
291
|
|
|
292
|
+
/** The `Ready:` line in either form, matched the way `PLAN_PATTERN` matches `Plan:`. */
|
|
293
|
+
const READY_PATTERN = /^Ready:[ \t]*(?:\[[^\]]*\]\(([^)]+)\)|(\S+))[ \t]*$/m
|
|
294
|
+
|
|
295
|
+
/** A ready folder path as a plan's constraints write it, the folder name captured. */
|
|
296
|
+
const READY_PATH_PATTERN = /(\.(?:canon|claude)\/ready\/)([^\s/`)]+)(?=\/)/g
|
|
297
|
+
|
|
298
|
+
export function readReadyTarget(text: string): string | undefined {
|
|
299
|
+
const match = READY_PATTERN.exec(text)
|
|
300
|
+
if (!match) return undefined
|
|
301
|
+
return match[1] ?? match[2]
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/**
|
|
305
|
+
* Builds a `Ready:` line as a link whose target keeps the trailing slash a
|
|
306
|
+
* folder carries, the label taken from the folder's own name.
|
|
307
|
+
*/
|
|
308
|
+
export function readyLine(target: string): string {
|
|
309
|
+
const folder = target.replace(/\/+$/, '')
|
|
310
|
+
|
|
311
|
+
return `Ready: [${basename(folder)}](${folder}/)`
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
export function retargetReadyLine(text: string, target: string): string {
|
|
315
|
+
return text.replace(READY_PATTERN, () => readyLine(target))
|
|
316
|
+
}
|
|
317
|
+
|
|
283
318
|
/**
|
|
284
319
|
* Builds the `Declined:` line recording why a task was decided against and by
|
|
285
320
|
* whom. Free prose after the colon, since the line names no file to link,
|
|
@@ -731,22 +766,41 @@ export async function archiveTask(
|
|
|
731
766
|
}
|
|
732
767
|
|
|
733
768
|
const plan = await planToArchive(dir, root, stem, text)
|
|
769
|
+
const ready = plan && (await readyToArchive(dir, root, text, plan))
|
|
734
770
|
const destination = archiveDir(root)
|
|
735
771
|
const to = join(destination, `${stem}.md`)
|
|
736
772
|
|
|
737
773
|
// The plan moves first so the line written below describes a file already at
|
|
738
774
|
// its new path. Writing the retarget first and failing the move would leave a
|
|
739
775
|
// pointer at a folder holding nothing, and `.canon/plans/` is gitignored, so
|
|
740
|
-
// no history recovers the target it named.
|
|
776
|
+
// no history recovers the target it named. The folder follows the plan and
|
|
777
|
+
// both precede the task, so a failed rename never leaves the task archived
|
|
778
|
+
// with its folder live, which the unattended post-merge hook cannot repair.
|
|
741
779
|
if (plan) {
|
|
742
780
|
await mkdir(dirname(plan.to), { recursive: true })
|
|
743
781
|
await rename(plan.from, plan.to)
|
|
744
782
|
}
|
|
745
783
|
|
|
784
|
+
if (ready) {
|
|
785
|
+
await mkdir(dirname(ready.to), { recursive: true })
|
|
786
|
+
await rename(ready.from, ready.to)
|
|
787
|
+
await writeFile(
|
|
788
|
+
plan.to,
|
|
789
|
+
retargetReadyPaths(await readFile(plan.to, 'utf8'), basename(ready.from)),
|
|
790
|
+
)
|
|
791
|
+
}
|
|
792
|
+
|
|
746
793
|
await mkdir(destination, { recursive: true })
|
|
747
794
|
await rename(from, to)
|
|
748
|
-
if (plan)
|
|
749
|
-
|
|
795
|
+
if (plan) {
|
|
796
|
+
const retargeted = retargetPlanLine(text, linkTo(destination, plan.to))
|
|
797
|
+
await writeFile(
|
|
798
|
+
to,
|
|
799
|
+
ready
|
|
800
|
+
? retargetReadyLine(retargeted, `${linkTo(destination, ready.to)}/`)
|
|
801
|
+
: retargeted,
|
|
802
|
+
)
|
|
803
|
+
}
|
|
750
804
|
|
|
751
805
|
const priorityRowRemoved = await clearPriorityRow(dir, stem)
|
|
752
806
|
const regen = await regenOne(dir, { dryRun: false })
|
|
@@ -759,6 +813,7 @@ export async function archiveTask(
|
|
|
759
813
|
priorityRowRemoved,
|
|
760
814
|
indexRegenerated: regen.action === 'written',
|
|
761
815
|
plan,
|
|
816
|
+
ready: ready || undefined,
|
|
762
817
|
closed: closed.length,
|
|
763
818
|
cut: cut.length,
|
|
764
819
|
}
|
|
@@ -797,6 +852,63 @@ async function planToArchive(
|
|
|
797
852
|
}
|
|
798
853
|
}
|
|
799
854
|
|
|
855
|
+
/**
|
|
856
|
+
* The ready folder that travels with the plan, or nothing. It is read from the
|
|
857
|
+
* task's `Ready:` line, falling back to a folder path in the plan's own text for
|
|
858
|
+
* a task written before the line was defined. It moves only with its plan,
|
|
859
|
+
* since the folder is the plan's verbatim source and a plan another task still
|
|
860
|
+
* cites still needs it, so the caller passes the plan `planToArchive` settled.
|
|
861
|
+
*
|
|
862
|
+
* A target naming no folder, one already archived, or a destination taken
|
|
863
|
+
* yields nothing and refuses nothing, the way a mistyped `Plan:` does.
|
|
864
|
+
*/
|
|
865
|
+
async function readyToArchive(
|
|
866
|
+
dir: string,
|
|
867
|
+
root: string,
|
|
868
|
+
text: string,
|
|
869
|
+
plan: PlanMove,
|
|
870
|
+
): Promise<ReadyMove | undefined> {
|
|
871
|
+
const live =
|
|
872
|
+
readyFolder(dir, root, text) ??
|
|
873
|
+
readyFolder(dir, root, await readFile(plan.from, 'utf8'))
|
|
874
|
+
if (!live) return undefined
|
|
875
|
+
|
|
876
|
+
const to = join(recordDir(root, READY, ARCHIVE), basename(live))
|
|
877
|
+
if (existsSync(to)) return undefined
|
|
878
|
+
|
|
879
|
+
return { from: live, to }
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
function readyFolder(
|
|
883
|
+
dir: string,
|
|
884
|
+
root: string,
|
|
885
|
+
text: string,
|
|
886
|
+
): string | undefined {
|
|
887
|
+
const target = readReadyTarget(text)
|
|
888
|
+
const named = target ? [resolve(dir, target), resolve(root, target)] : []
|
|
889
|
+
const constrained = [...text.matchAll(READY_PATH_PATTERN)].map(([, , name]) =>
|
|
890
|
+
join(recordDir(root, READY), name),
|
|
891
|
+
)
|
|
892
|
+
const archives = recordDirs(root, READY, ARCHIVE)
|
|
893
|
+
|
|
894
|
+
return [...named, ...constrained].find(
|
|
895
|
+
(path) =>
|
|
896
|
+
recordDirs(root, READY).some((base) => dirname(path) === base) &&
|
|
897
|
+
basename(path) !== ARCHIVE &&
|
|
898
|
+
!archives.some((base) => isUnder(path, base)) &&
|
|
899
|
+
existsSync(path),
|
|
900
|
+
)
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
/** Points the plan's literal folder paths at `ready/archive/`, since the folder no longer sits where they say. */
|
|
904
|
+
function retargetReadyPaths(text: string, folder: string): string {
|
|
905
|
+
return text.replace(
|
|
906
|
+
READY_PATH_PATTERN,
|
|
907
|
+
(whole: string, prefix: string, name: string) =>
|
|
908
|
+
name === folder ? `${prefix}${ARCHIVE}/${name}` : whole,
|
|
909
|
+
)
|
|
910
|
+
}
|
|
911
|
+
|
|
800
912
|
/**
|
|
801
913
|
* The archived plan as the archived task cites it. Both halves land a folder
|
|
802
914
|
* deeper than the live pair, so the link is measured between the two
|
package/standards/ready.md
CHANGED
|
@@ -78,7 +78,7 @@ Below the frontmatter, state in prose what the worker still owns beyond copying
|
|
|
78
78
|
## Lifecycle
|
|
79
79
|
|
|
80
80
|
- Write the ready folder in the same session that writes the files it carries. A folder assembled later from memory is a plan with extra steps, not a handoff.
|
|
81
|
-
-
|
|
81
|
+
- Leave the move to `canon tasks archive`, which carries the folder to `.canon/ready/archive/<nn>-<slug>/` with its plan when the task that shipped it archives, and retargets the task's `Ready:` line. A plan another live task still cites keeps its folder.
|
|
82
82
|
- Never delete a ready folder. The archived copy sits beside the merged pull request as the exact text that shipped, the way an archived plan sits beside the reasoning that produced it.
|
|
83
83
|
|
|
84
84
|
## Anti-patterns
|
|
@@ -86,7 +86,7 @@ Below the frontmatter, state in prose what the worker still owns beyond copying
|
|
|
86
86
|
- **The folder with an undeclared destination.** A file the plan's `**Files to touch:**` does not list passes the collision check unseen, and a second track can write the same path without either side finding out.
|
|
87
87
|
- **The rewritten copy.** A worker that reads the folder's files as inspiration and writes its own version loses the exact text the handoff exists to carry.
|
|
88
88
|
- **The folder as scratch.** Notes, alternates, or draft passages left in the folder beside the real files leave the worker guessing which is the source.
|
|
89
|
-
- **The folder left live after shipping.** A ready folder
|
|
89
|
+
- **The folder left live after shipping.** A ready folder the archive verb did not move reads as unshipped work to the next session that lists the live folder. The verb skips one whose task carries no `Ready:` line and cites no folder path in its plan.
|
|
90
90
|
|
|
91
91
|
## Template
|
|
92
92
|
|
package/standards/tasks.md
CHANGED
|
@@ -213,7 +213,9 @@ A task with no origin is either lost context or work nobody decided to do. The i
|
|
|
213
213
|
|
|
214
214
|
An intake folder answers that direction at folder scope rather than item scope, since one dump dispositions many items and most close without ever becoming a task. What names a folder is every item answered and no task citing it, on the board or in the archive. That is a dump nobody acted on. Counting the archive and declined folder beside the board is what separates it from one already promoted and settled, and a check reading the board alone calls every finished folder abandoned.
|
|
215
215
|
|
|
216
|
-
`Plan:`, `Groundwork:`, and `Intake:` name their target as a markdown link whose text is the file or folder stem, so the line resolves on a ctrl-click the way `priority.md` rows already do. Write the path relative to `.canon/tasks/`, which makes it `../plans/`, `../groundwork/`, and `../intake/`. A path written from the project root renders as a link and resolves to nothing in an editor rooted at the project. `
|
|
216
|
+
`Plan:`, `Groundwork:`, and `Intake:` name their target as a markdown link whose text is the file or folder stem, so the line resolves on a ctrl-click the way `priority.md` rows already do. Write the path relative to `.canon/tasks/`, which makes it `../plans/`, `../groundwork/`, and `../intake/`. A path written from the project root renders as a link and resolves to nothing in an editor rooted at the project. `Ready:` names the ready folder a task's plan copies from, as a link to `../ready/<nn>-<slug>/` with the trailing slash a folder carries. Include it only when the folder exists. `canon tasks archive` reads it to move the folder, and falls back to a `.canon/ready/<nn>-<slug>/` path in the plan when a task carries no line.
|
|
217
|
+
|
|
218
|
+
`Issue:` stays a bare `#NNN`, since an issue number is not a path and a full URL would write the remote into a gitignored file.
|
|
217
219
|
|
|
218
220
|
Phase-label format and where labels may appear are governed by `standards/versioning.md`.
|
|
219
221
|
|
|
@@ -257,7 +259,7 @@ The archive nests inside `.canon/tasks/` rather than sitting beside it as a flat
|
|
|
257
259
|
|
|
258
260
|
One destination rather than a per-project choice is what lets the move happen without asking. It mirrors the plans archive at `.canon/plans/archive/`, sitting inside the folder it archives the same way, and it inherits the board's own ignore entry rather than needing one of its own. The cost is that an archived task does not appear in diffs, which is the cost the live board already carries.
|
|
259
261
|
|
|
260
|
-
Archiving a task archives its plan alongside it, when the closing task is that plan's last live citation. The archived task's `Plan:` line is retargeted at `../../plans/archive/feature-<slug>.md`, a folder deeper than the live task wrote it, so a completed task still leads to the reasoning behind it. A plan several tasks share stays live and the task archives anyway, since moving it on the first task to close strands every sibling's pointer at a path that has gone.
|
|
262
|
+
Archiving a task archives its plan alongside it, when the closing task is that plan's last live citation. The archived task's `Plan:` line is retargeted at `../../plans/archive/feature-<slug>.md`, a folder deeper than the live task wrote it, so a completed task still leads to the reasoning behind it. The ready folder the task's `Ready:` line names moves with the plan to `.canon/ready/archive/<nn>-<slug>/`, and the `Ready:` line and the plan's path to the folder are retargeted, since the folder is the plan's verbatim source. A plan several tasks share stays live and the task archives anyway, since moving it on the first task to close strands every sibling's pointer at a path that has gone. Its ready folder stays with it.
|
|
261
263
|
|
|
262
264
|
One act rather than two is what makes the pair safe. The merge is the event that settles a plan, and a `post-merge` hook reaching the archive with nobody watching cannot act on a warning, so a second call after it would be a second failure point leaving the task archived and the plan live.
|
|
263
265
|
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: ui-test
|
|
3
|
-
description: Why UI changes split into what a browser can assert and what only an eye can judge, and why the visual half is written to disk rather than printed
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# UI test requirement
|
|
7
|
-
|
|
8
|
-
## Gap
|
|
9
|
-
|
|
10
|
-
Without this skill, UI work ships on the confidence of the session that wrote it. What verification does happen mixes the two kinds without noticing, so a checklist item about spacing sits beside one about a form submission, and neither is done properly because they need different work from different people. Tests get written against a config the project does not use, or duplicate what a component test already covers.
|
|
11
|
-
|
|
12
|
-
The automatable half fails the other way. Sending every interaction, state, and form to Playwright leaves the layers unrouted, so a loading state lands in a full browser run and the end to end suite grows on each UI change. A state a component test reaches costs a browser to check, and the cost recurs on every later run.
|
|
13
|
-
|
|
14
|
-
The visual half is where the record is lost. A checklist printed into chat scrolls away before anyone verifies it, so the ship step has nothing to gate on and the work reads as verified because a list was produced. Written from a linked worktree against `pwd`, the file lands where the caller does not look.
|
|
15
|
-
|
|
16
|
-
Writing the checklist correctly to disk does not close the gap either. The file sits under a gitignored folder on the machine that authored it, so a pull request reviewer, on that machine or another, never sees it. A record that only the author can open reads as verified for the same reason a record that never existed does.
|
|
17
|
-
|
|
18
|
-
## Must
|
|
19
|
-
|
|
20
|
-
- Split every change into visual-only and automatable before writing anything, then route each automatable one to its layer through `test-craft`
|
|
21
|
-
- Write end to end only for a journey or a behavior only a real browser renders, and component or unit tests for the rest
|
|
22
|
-
- Name a missing component runner in the output and put the state on the checklist
|
|
23
|
-
- Read the project's existing test config and patterns before writing a test against them
|
|
24
|
-
- Assert a user action and its outcome per test, covering the happy path and the key edge cases
|
|
25
|
-
- Run the tests after writing them and fix what fails
|
|
26
|
-
- Write a produced checklist to the `.canon/tmp/handoff/ui-checklist/<slug>.md` handoff at the main worktree root, overwriting
|
|
27
|
-
- Report that everything is covered rather than manufacturing a checklist to show work
|
|
28
|
-
|
|
29
|
-
## Must not
|
|
30
|
-
|
|
31
|
-
- Try to assert a visual property programmatically
|
|
32
|
-
- Re-test what unit or component tests written during implementation already cover
|
|
33
|
-
- Route a state a component test reaches into end to end, or fall back to end to end silently when no runner exists
|
|
34
|
-
- Repeat the full checklist in chat, which is what made it evaporate
|
|
35
|
-
- Stage or commit the checklist, which is gitignored scratch
|
|
36
|
-
- Talk to GitHub directly. Posting the checklist to a pull request belongs to `git-pr`, the sole consumer of the handoff file
|
|
37
|
-
|
|
38
|
-
## Guards
|
|
39
|
-
|
|
40
|
-
- No implementation context in the session: stop, since there is nothing to derive tests from
|
|
41
|
-
- Every change automatable: skip the file write and report the coverage
|
|
42
|
-
|
|
43
|
-
## Out of scope
|
|
44
|
-
|
|
45
|
-
- Judging whether the UI is any good, which `ux-audit` owns
|
|
46
|
-
- The rules for choosing a layer, which `test-craft` owns
|
|
47
|
-
- Deciding whether an outstanding checklist blocks the ship, which the calling pipeline gates on
|
|
48
|
-
- Performing the visual verification, which needs a person
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: ui-test
|
|
3
|
-
description: Routes each UI change to the test layer that can catch its break, writes end to end tests only for journeys and browser-only behavior, and produces a manual checklist for visual-only items. Use after implementing UI changes, or when asked "what should I test", "what do I verify", or "give me a test checklist". Do NOT use in empty sessions with no implementation context.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# UI test
|
|
7
|
-
|
|
8
|
-
## Guards
|
|
9
|
-
|
|
10
|
-
- If no implementation context exists in the session, stop: `❌ No implementation context. Describe what you built first.`
|
|
11
|
-
- Load `canon:test-craft` before writing any test, and report it rather than proceeding silently when it does not resolve.
|
|
12
|
-
|
|
13
|
-
## Analysis
|
|
14
|
-
|
|
15
|
-
Review the session to identify what was built or changed. Categorize each change, then route it:
|
|
16
|
-
|
|
17
|
-
- **Visual-only:** spacing, alignment, color, typography, layout proportions, animation timing. These become a manual checklist.
|
|
18
|
-
- **Journey or browser-only:** a flow across routes, a route change, or a behavior only a real browser renders, such as scroll, focus order across pages, or layout. These become end to end tests.
|
|
19
|
-
- **Everything else:** interactions, state transitions, form submissions, keyboard handling, conditional rendering, loading, empty, and error states. Route these through the `test-craft` layer table to a component test, or to a unit test when the logic renders nothing.
|
|
20
|
-
|
|
21
|
-
Never write an end to end test for a state a component test reaches. Exclude anything already covered by tests written during implementation.
|
|
22
|
-
|
|
23
|
-
## Component and unit tests
|
|
24
|
-
|
|
25
|
-
- Read the project's test config and an existing test at the layer first, and follow its runner, suffix, and placement.
|
|
26
|
-
- Read the `test-craft` component reference before the first component test.
|
|
27
|
-
- Assert each state through what a user sees or does, covering the happy path and the key edges.
|
|
28
|
-
- When the project has no component runner, write the checklist item for that state instead of an end to end test, and name the missing runner in the output. Do not fall back to end to end silently.
|
|
29
|
-
|
|
30
|
-
## E2e tests
|
|
31
|
-
|
|
32
|
-
Write Playwright tests for journeys and browser-only behavior only. Follow these rules:
|
|
33
|
-
|
|
34
|
-
- Read the `test-craft` end to end reference before the first one.
|
|
35
|
-
- Add tests to the project's existing `e2e/` layout and naming. If none exists, create `e2e/<feature>.spec.ts`.
|
|
36
|
-
- Use the project's existing Playwright config and test patterns. Read them first.
|
|
37
|
-
- Each test performs a user action across the journey and asserts the expected outcome.
|
|
38
|
-
- For Chrome extensions: load the unpacked extension via Playwright's `--load-extension` flag and use the extension's sidepanel or popup URL as the test target.
|
|
39
|
-
- Run every test written, at every layer. Fix failures before finishing.
|
|
40
|
-
|
|
41
|
-
Test structure:
|
|
42
|
-
|
|
43
|
-
```typescript
|
|
44
|
-
test('description of user flow', async ({ page }) => {
|
|
45
|
-
// Arrange: navigate, set up state
|
|
46
|
-
// Act: perform user action
|
|
47
|
-
// Assert: verify expected outcome
|
|
48
|
-
})
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Manual checklist
|
|
52
|
-
|
|
53
|
-
For visual-only items that cannot be asserted programmatically, and for any state left without a runner, produce a checklist. Group by feature area. Use `- [ ]` checkbox syntax.
|
|
54
|
-
|
|
55
|
-
```markdown
|
|
56
|
-
**What to verify visually:**
|
|
57
|
-
|
|
58
|
-
**<Feature area>**
|
|
59
|
-
|
|
60
|
-
- [ ] <action> → <expected visual result>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
If every change is covered by a test, skip the manual checklist:
|
|
64
|
-
|
|
65
|
-
`✅ All changes covered by tests. No manual verification needed.`
|
|
66
|
-
|
|
67
|
-
### Persist the checklist
|
|
68
|
-
|
|
69
|
-
Derive `<slug>` per `${CLAUDE_SKILL_DIR}/../../standards/slug.md`. Fall back to `latest` on an empty result.
|
|
70
|
-
|
|
71
|
-
When a manual checklist is produced, write it directly to `.canon/tmp/handoff/ui-checklist/<slug>.md` at the main worktree root, not the current worktree. Resolve that root the way `session-worktree` does. Create the directory if it does not exist. Always overwrite. This is a handoff file rather than a deliverable: `git-pr` posts it as a pull request comment once one opens, then removes it, and nothing here talks to `gh` directly.
|
|
72
|
-
|
|
73
|
-
From a linked worktree the file-editing tools refuse that path, so the checklist goes out through `Bash`. Send the `mkdir -p` and the heredoc as two plain commands rather than joining them with `&&`, which is refused as compound.
|
|
74
|
-
|
|
75
|
-
Skip the file write when every change is covered by tests and no checklist was produced.
|
|
76
|
-
|
|
77
|
-
The `.canon/tmp/` directory is gitignored. Do not stage or commit the file.
|
|
78
|
-
|
|
79
|
-
## Output order
|
|
80
|
-
|
|
81
|
-
1. Write and run the tests, naming each one's layer (report pass/fail)
|
|
82
|
-
2. Name any state left to the checklist for want of a component runner
|
|
83
|
-
3. If a manual checklist was produced, write it to file, then output only the file path in chat:
|
|
84
|
-
`📝 Wrote .canon/tmp/handoff/ui-checklist/<slug>.md`
|
|
85
|
-
4. If no checklist was needed: `✅ All changes covered by tests. No manual verification needed.`
|
|
86
|
-
|
|
87
|
-
Do not repeat the full checklist in chat.
|