← ClaudeAtlas

ux-speclisted

Declaration-first UI spec (six-layer spec.md). Use when turning a short product/UI ask into six-layer spec.md, or when goal, edge-state, acceptance, or evidence requirements are missing before build.
Bandersnatch0x/design-playbook · ★ 1 · Web & Frontend · score 57
Install: claude install-skill Bandersnatch0x/design-playbook
# ux-spec Write a **six-layer `spec.md`**: the functional **declaration** for what must be true. Visual skin, tokens, and Badge-vs-Tag choices are out of scope. ## Steps ### 1. Pin L1 From the ask, fix the user-visible goal, target user, in-scope scenes, **non-goals**, and always/ask/never boundaries. Ask only when a missing answer materially changes one of them; otherwise record a conservative assumption. When `.scratch/<run>/reference/contract.md` exists (ADR-0011), **read it before writing L1–L6**. Fold its functional constraints, non-goals implied by Do not copy, and always/ask/never hints into L1 (and later L5/L6 edges). Cite the path; do not re-derive the screenshot from memory. The reference contract is input only — it does not replace any L1���L6 heading. **Done when:** all five L1 fields are explicit — goal, target user, in-scope scenes, non-goals, and always/ask/never boundaries — with each assumption labeled as such; none left blank or implied; and if a reference contract exists, its functional constraints are reflected (or an explicit rejected-with-reason note is recorded). ### 2. Expand L2–L4 - L2 regions and duties - L3 states and transitions - L4 control behavior per relevant state Use the headings in [`references/spec-template.md`](references/spec-template.md). **Done when:** every primary user job has a state path; every region has an owner duty. ### 3. Force L5–L6 - L5: empty, loading, error, permission — each with what the user can do next