← 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 · ★ 2 · Web & Frontend · score 58
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. **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. ### 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 - L6: checkable acceptance; every top-level item explicitly contains `Given`, then `When`, then `Then`, with the proof required for that item Evidence is criterion-shaped: visible states require rendered inspection at named target viewports; behavior requires an interaction trace or automated check; implementation health uses the relevant tests, type/lint checks, or affected build when available. Planning-only work names the future proof instead of claiming it exists. Where the proof is a