Files
msd-core/gsd-core/templates/UI-SPEC.md
Dave 4bce86650d feat(#1867): add UI Considerations section to UI-SPEC template (WIRE-02)
Record resolved UI-state considerations in the UI-SPEC, backward-compatibly
(Phase 2, WIRE-02). templates/UI-SPEC.md gains a '## UI Considerations' section
(analog of SPEC '## Edge Coverage') after '## Copywriting Contract' — a
| Category | Element(s) | Status | Resolution / Reason | table with
covered/backstop/unresolved rows in the locked probe-core projectTruths format
the shipped plan-phase lift (plan-phase.md:921) reads. Empty/error COPY stays in
Copywriting; this section covers shape-rooted STATE and references those rows
(de-dup).

Tests: docs-fixtures parsed-heading assertion (UI Considerations present +
distinct from Copywriting Contract; allow-test-rule, parsed structure); typed
backward-compat (projectTruths(undefined/[])===[], old UI-SPEC still plans —
Hyrum), format-match, and idempotency (proposeElements determinism). The
template-structure test was the RED driver.

Install-parity cascade (INVENTORY-MANIFEST + 16 golden fixtures +
agent-size-baseline) deferred to Phase 3 SHIP-01, as planned.

Claude-Session: https://claude.ai/code/session_01BKt4hgNZwXSeJYJtYAQUSS
2026-07-10 14:40:03 -04:00

3.8 KiB

phase, slug, status, shadcn_initialized, preset, created
phase slug status shadcn_initialized preset created
N
phase-slug
draft false none
date

Phase {N} — UI Design Contract

Visual and interaction contract for frontend phases. Generated by gsd-ui-researcher, verified by gsd-ui-checker.


Design System

Property Value
Tool {shadcn / none}
Preset {preset string or "not applicable"}
Component library {radix / base-ui / none}
Icon library {library}
Font {font}

Spacing Scale

Declared values (must be multiples of 4):

Token Value Usage
xs 4px Icon gaps, inline padding
sm 8px Compact element spacing
md 16px Default element spacing
lg 24px Section padding
xl 32px Layout gaps
2xl 48px Major section breaks
3xl 64px Page-level spacing

Exceptions: {list any, or "none"}


Typography

Role Size Weight Line Height
Body {px} {weight} {ratio}
Label {px} {weight} {ratio}
Heading {px} {weight} {ratio}
Display {px} {weight} {ratio}

Color

Role Value Usage
Dominant (60%) {hex} Background, surfaces
Secondary (30%) {hex} Cards, sidebar, nav
Accent (10%) {hex} {list specific elements only}
Destructive {hex} Destructive actions only

Accent reserved for: {explicit list — never "all interactive elements"}


Copywriting Contract

Element Copy
Primary CTA {specific verb + noun}
Empty state heading {copy}
Empty state body {copy + next step}
Error state {problem + solution path}
Destructive confirmation {action name}: {confirmation copy}

UI Considerations

Populated by the ui-phase UI-consideration probe (Step 9.5) and lifted by plan-phase (plan-phase.md:921) via the identical rule as SPEC ## Edge Coverage. Shape-rooted UI state coverage (empty / loading / error / populated / partial / overflow / zero-one-many / long-text). Empty-state and error-state COPY live in ## Copywriting Contract above — this section covers state coverage and REFERENCES those rows rather than restating the copy (de-dup).

Applicable state considerations resolved: {N covered, M backstop, K unresolved — or "none applicable"}

Category Element(s) Status Resolution / Reason
{empty} {list-collection} ✅ covered {concrete truth string — e.g. "Empty results render the documented 'No results' copy"}
{long-text} {static-content} 🧪 backstop {held-out/visual UI-state test — lifts as { statement, verification: backstop }}
{overflow} {list-collection} ⚠ unresolved {planner treats as assumption}

Registry Safety

Registry Blocks Used Safety Gate
shadcn official {list} not required
{third-party name} {list} shadcn view + diff required

Checker Sign-Off

  • Dimension 1 Copywriting: PASS
  • Dimension 2 Visuals: PASS
  • Dimension 3 Color: PASS
  • Dimension 4 Typography: PASS
  • Dimension 5 Spacing: PASS
  • Dimension 6 Registry Safety: PASS

Approval: {pending / approved YYYY-MM-DD}