Reference — generated from the toolkit
Source of truth: toolkit/templates/screen-spec.md. Edit it there; this page is regenerated on build.
Screen spec — {screen name}
- Owner: … Version: 0.1.0
- Flow(s): … (which UX flow(s) this screen belongs to)
Purpose
What this screen is for, in one sentence.
Wireframe / reference
Link or embed the wireframe/prototype frame.
Component inventory
Each element mapped to a named design-system component and tokens — no raw hex/px.
| Element | Design-system component | Tokens / variant | Notes |
|---|---|---|---|
| Primary action | Button | intent=primary | … |
| … | … | … | … |
State matrix
Every state specified — Build agents implement all of them:
| State | What the user sees |
|---|---|
| Default | … |
| Loading | … |
| Empty | … |
| Error | … |
| Denied / unauthorised | … |
Responsive behaviour
Breakpoint behaviour and any layout reflow.
Accessibility criteria
Screen-level WCAG 2.2 AA criteria: focus order, keyboard operability, labels/ARIA, contrast, error identification. Enforced at the Design Review gate and in Build (axe-core).