Add design council skill and interaction-and-feedback contract

This commit is contained in:
2026-06-05 12:33:00 +03:00
parent 3839f92f1d
commit 7b8115f623
5 changed files with 276 additions and 5 deletions
+80
View File
@@ -0,0 +1,80 @@
---
name: council
description: Consult the design council — the external interaction, content, and accessibility canon (IBM Carbon, GOV.UK Design System, WAI-ARIA APG, Nielsen Norman) — before committing a user-facing design decision. Auto-invoke when writing user-facing error / empty-state / notification copy, or when designing the keyboard / focus / ARIA behavior of an interactive widget (modal, menu, listbox, toast, splitter, disclosure). Also invokable on demand for any interaction, content, accessibility, or usability decision.
disable-model-invocation: false
---
# Design Council
A standing panel of external design authorities, consulted the way we already consult
Carbon: **local corpora, grepped — not WebFetched.** The council **advises**; Astrolabe's
own contract **decides**. When a source conflicts with `SOUL.md`,
`docs/architecture/09-visual-design.md` (visual contract), or
`docs/architecture/10-interaction-and-feedback.md` (interaction contract), **our contract
wins** — note the divergence and move on.
## Two modes
- **Pointwise (now).** Consult on a single decision in front of you, via the routing table
below. Cheap, precise, fits the editing flow — this is the default, and what the
auto-triggers fire.
- **Audit (future).** Periodically sweep the **whole codebase** against the roster — every
interactive widget vs. APG, every user-facing string vs. GOV.UK/Carbon content rules,
every data surface vs. the loading/empty/error triad, every latency path vs. NN/g budgets
— and emit a prioritized gap list into `docs/architecture/10` + `// TODO`s. This is a
fan-out review (closer in shape to `/alignment`, but graded against external canon), best
run at **milestone boundaries**, not per change — and much of it is milestone-gated anyway
(you can't audit modals or datasets that don't exist yet).
## How to convene (the routing rule)
Pull the **minimal** relevant member(s) for the decision at hand — do **not** sweep all
four; that wastes tokens and dilutes the answer. Map the decision to its seat(s):
| Decision in front of you | Primary seat → then |
| ---------------------------------------------------------- | ------------------------------------------------------ |
| Error / failure / empty-state / notification **copy** | **GOV.UK** → Carbon notifications → NN/g heuristic #9 |
| Keyboard / focus / ARIA roles of an **interactive widget** | **WAI-ARIA APG** → Carbon component |
| **Latency / feedback / loading / progress** budgets | **NN/g** response-time limits → Carbon loading pattern |
| **Forms / validation / destructive-action** flow | **GOV.UK** → Carbon |
| General **usability** gut-check on a flow | **NN/g** 10 heuristics |
| **Visual** styling (type, spacing, colour, component look) | **Carbon** + our `docs/architecture/09` |
Then: read the cited file(s), extract the **specific** principle, and report it back with
a **citation (member + file path)** and a one-line "how it lands in Astrolabe." Don't
paraphrase the whole source — quote the rule that decides the question.
## The roster
All paths are under `/Users/oleh/code/reference/`. Treat clones as **inspiration, not
law** — they drift; the published guidance is the truth, the clone is the fast index.
| Member | Path | Authoritative for | How to query |
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **IBM Carbon** | `carbon-website/src/pages/` | Notification taxonomy, status levels, empty/loading states, content basics, data-viz styling | grep `.mdx` under `components/notification`, `patterns/{empty-states,loading,status-indicator}-pattern`, `guidelines/content` |
| **GOV.UK Design System** | `govuk-design-system/src/` | Error & validation messages, failure pages, forms, plain-language content, accessibility | `index.md` under `components/{error-message,error-summary,notification-banner}`, `patterns/{problem-with-the-service-pages,service-unavailable-pages,check-answers}`, `accessibility/` |
| **WAI-ARIA APG** | `aria-practices/content/patterns/` | Keyboard interaction, focus management, ARIA roles/states for widgets | `<pattern>/<pattern>-pattern.html` — e.g. `dialog-modal`, `alertdialog`, `alert`, `listbox`, `menu-button`, `disclosure`, `switch`, `tabs`, `tooltip`, `windowsplitter` |
| **Nielsen Norman (distilled)** | `principles/nielsen-norman.md` | 10 usability heuristics; response-time / feedback budgets (0.1s / 1s / 10s) | read directly — it is short and curated |
## Close the loop
The council exists so we **don't re-derive the same decision twice**. When a consultation
settles a _recurring_ question (not a one-off), capture the resolution into our own
contract — `docs/architecture/10-interaction-and-feedback.md` for interaction/feedback,
`09-visual-design.md` for visual — via the `/doc-update` skill. Upstream canon informs;
the downstream contract records. A code site that embeds such a rule should cite our
contract, not the external source.
## Adding a seat
1. If it's an open-source repo, shallow-clone it into `/Users/oleh/code/reference/`
(`git clone --depth 1 …`). If it's articles/blogs (not cloneable), **distill** the
stable parts into `reference/principles/<source>.md` with attribution + links, like
the NN/g note.
2. Add one row to **the roster** and one routing entry above.
3. Keep it lean — a seat earns its place only if it's authoritative for a decision the
others don't cover well.
Candidate future seats (not yet seated): **FT Visual Vocabulary / Datawrapper** (chart
choice — our domain), **Shopify Polaris** (UX-writing depth), **web.dev** (perceived
performance / PWA / offline UX).