feat(skill): pre-draw checkpoint, docs-sync gate, packaged self-check, ADRs

- SKILL.md: confirm type/pattern/size/cuts with the user before rendering;
  checklist hooks for the checkpoint and the packaged self-check
- scripts/verify-docs-sync.py: CI now fails when the frontmatter description
  loses a type's lexical hook, the gallery can't reach a shipped example, or
  the README tree names a missing file
- skills/diagram-design/scripts/self_check.py: distilled output checker that
  ships with the skill so installed agents can verify their own diagrams;
  adversarial suite in scripts/test-self-check.py
- assets/index.html: six new tabs (OAuth sequence + five single-variant
  examples with a data-single variant lock) so every shipped example is
  browsable
- docs/adr/0001-0004: settled policies recorded (pinned controller, taxonomy
  freeze, reveal-only autoplay, byte cap + trigger-rich description)
- README: It's-working-if section, new gates documented; CONTRIBUTING: gate
  table, ADR guidance, type-addition invariants; CI: two new steps

README.md

@@ -344,7 +344,8 @@ diagram-design/
 │       │   └── primitive-terminal.md
 │       ├── scripts/
 │       │   ├── drawio_extract.py    — draw.io → structured IR
-│       │   └── mermaid_extract.py   — Mermaid → structured IR
+│       │   ├── mermaid_extract.py   — Mermaid → structured IR
+│       │   └── self_check.py        — packaged output self-check (runs installed)
 │       └── assets/
 │           ├── index.html           — live gallery, tabbed
 │           ├── template*.html       — scaffolds for new diagrams
@@ -359,6 +360,7 @@ diagram-design/
 │   ├── sample-flowchart.mmd
 │   ├── sample-readme-with-mermaid.md
 │   └── sample-adversarial.mmd
+├── docs/adr/                        — short records of settled design decisions
 └── docs/screenshots/                — images used in this README
 ```
 
@@ -378,6 +380,8 @@ If you touch the Mermaid import path, `python3 scripts/verify-mermaid-import.py`
 it covers all supported grammars, multi-block Markdown, adversarial labels, trust-boundary
 behavior, resource caps, named failures, and reference/command wiring.
 
+Docs and routing surfaces are themselves gated: `python3 scripts/verify-docs-sync.py` fails CI if the SKILL.md description loses a type's lexical hook, the gallery can't reach a shipped example, or the README tree names a file that doesn't exist. The skill also ships `skills/diagram-design/scripts/self_check.py` — a distilled output checker installed agents can run on their own generated diagrams; `python3 scripts/test-self-check.py` keeps it honest. Settled design decisions (why one pinned controller, why patterns never add types, the autoplay policy, the SKILL.md byte cap) live as short ADRs in `docs/adr/` — read them before relitigating one, add one when you settle a new policy.
+
 All pull requests and pushes are automatically validated across Linux, Windows, and macOS runners via GitHub Actions CI (`.github/workflows/ci.yml`).
 
 ### What loads when
@@ -402,6 +406,17 @@ No matter how many types exist, the agent only reads the one you need. Add a new
 
 ---
 
+## It's working if…
+
+- A routine request ("make me a flowchart") loads `SKILL.md` plus exactly one type reference — nothing else.
+- Before drawing, the agent states the chosen type, pattern, size, and planned cuts, then renders.
+- The output is one `.html` file that opens double-clicked, offline, with no network requests beyond Google Fonts.
+- Screen readers announce the diagram's title and description; `prefers-reduced-motion` shows the complete static frame.
+- `python3 skills/diagram-design/scripts/self_check.py <file>` prints `OK` on the generated file.
+- After brand onboarding, new diagrams use your site's paper, ink, accent, and fonts — with a fidelity receipt naming each.
+
+If any of these fail, that's a bug worth filing.
+
 ## The design system (in one paragraph)
 
 One accent color, 1–2 focal elements per diagram. Three font families: Instrument Serif (title + italic callouts), Geist sans (node names), Geist Mono (technical sublabels). 1px hairline borders, no shadows, max border-radius 10px. Every coord, width, and gap divisible by 4 — non-negotiable, it's what keeps the diagrams from feeling AI-generated. Mono is for technical content (ports, URLs, field types), not a blanket "dev" aesthetic. Coral-tinted focal nodes draw the eye to the 1–2 things that matter. Full spec in [`SKILL.md`](skills/diagram-design/SKILL.md#5-design-system).