designing-ui-for-cli
CLI UI Design
Before any display or output code is written, the agent runs a 7-stage design discipline rooted in per-project PRODUCT.md, DESIGN.md (base design system — colours, tokens, typography, components), and DESIGN.TUI.md (TUI supplement — inherits from DESIGN.md, adds behavioural rules for output channels, symbols, and interaction). When both are present, load both: DESIGN.md provides the palette; DESIGN.TUI.md provides the terminal-specific contract. The skill governs registration, shape brief, implementation, critique, audit, and polish for any Typer, Rich, Textual, or Questionary surface.
Setup Gates
The agent MUST satisfy each gate before progressing past it. Check order is top-down.
| Gate | Required check | If fail | Hard Rule |
|---|---|---|---|
| Context | First turn invokes scripts/load-design-context.py to load PRODUCT.md, DESIGN.TUI.md, DESIGN.md from project root, .claude/context/, or docs/ |
Skip only if context already in conversation history; otherwise run loader | Stage 0 actor |
| Product | PRODUCT.md present, non-empty, no [TODO] placeholders, ≥200 chars |
Run inline interview using ./references/product-md-schema.md template, write file with user confirmation, re-run loader, resume original task |
PRODUCT.md absence re-entry |
| Shape | Shape brief produced and user-confirmed before any display code is written | Stop. Do not write display code until brief is signed off | Stage 2 sign-off gate |
| Mutation | Any code change to display logic must trace to a confirmed shape brief or recorded follow-up deferral | Reject change. Loop back to Shape | Stage 2 sign-off gate |
Golden Path — 7 Stages
Stages run in order. Stages 4–6 also act as quality gates on existing UI code when invoked against a target.