@erclx/canon 5.50.0 → 5.52.0

package/tooling/web/reference.md

@@ -86,6 +86,11 @@ The web layer covers the tooling shared across Vite + React, Astro, and Next.js.
 - `.github/workflows/verify.yml` runs `static-checks`, `unit-tests`, `build-verify`, and `e2e-tests`. `unit-tests` installs Chromium and runs `test:browser` only when the project defines that script.
 - Read `governance/rules/tooling/ci-workflow.md` for when a workflow's commit-back is right and when a report is
 
+## Design references
+
+- Expect a seeded `canon/design/index.md` stub carrying `auto: false`, copied only when missing, so a project's own index is never replaced
+- Expect `governance/rules/ui/design-reference.md` to install once a group folder sits under `canon/design/`, since the stub alone is no reference
+
 ## Ports
 
 - Derive every served port from `scripts/worktree-port.sh`, never a port literal in a script string, since two worktrees of one repository otherwise attach to one server

package/tooling/web/seeds/canon/design/index.md

@@ -0,0 +1,23 @@
+---
+title: Design references
+description: The accepted design frames a build matches, grouped by app part, with the code each group governs
+auto: false
+---
+
+# Design references
+
+Each group holds accepted frames a build matches, light and dark. The `design-record` skill carries the folder standard, so load it before adding, redrawing, or removing a reference.
+
+## Layout
+
+- Give each app part one plain kebab-case folder, such as `home` or `inspector`
+- Put tokens, colors, and the logo under `foundations/`
+- Name each file `<name>-dark` or `<name>-light`, a PNG beside its frame HTML
+- Put what every frame loads under `kit/`
+
+## Groups
+
+One row per group, `foundations` included. List no files, since the tree answers what exists.
+
+| Group | What the user sees | Code | States |
+| ----- | ------------------ | ---- | ------ |