Skip to main content
Gelium UI
Blog View source 0.6.5 Theme Gallery
Recipe

Native behavior · Default for behavior · Gelium defaults · Native baseline

Appearance
Menu

UI definition of done

Use this checklist before accepting UI from a human or an LLM. It does not replace user research; it raises the floor so deliveries match Gelium’s sourced criteria.

Pass = every applicable item is true. Cite page IDs (FEED-*, DATA-*, JOURNEY-*) in the PR or agent summary.

DoD checklist

Product framing

  1. User job stated in one sentence.
  2. Surface mode Operate | Read | Persuade | Experience (Agent workflow).
  3. Screen type chosen (Screens).
  4. Journey shape named if >1 step (Journeys).
  5. One primary action visible per view.

Structure

  1. Hierarchy: H1 → context → primary → main → secondary.
  2. Nav pattern justified (Screens nav table).
  3. Collection uses a DATA-* pattern (Data display).
  4. Density mode named for the surface (Density).

Page and section architecture

  1. Every major region has a distinct purpose and a SECTION-CONTRACT before components or tokens are selected (Page + section architecture).
  2. DOM order is entry → primary → supporting → recovery; repeated card anatomy is not mistaken for page architecture.
  3. Section actions are subordinate unless the section owns the one declared page-primary action.
  4. Each applicable data/action section has recoverable loading, empty, error, and success behavior with a no-JS path.

States and feedback

  1. Loading / empty / error defined for every collection (FEED-LOAD-*, FEED-EMPTY, FEED-LOAD-FAIL).
  2. Forms use summary + inline errors on validation (FEED-VAL), not toast-only.
  3. Success landing is correct (FEED-OK-PAGE vs FEED-OK-TOAST).
  4. Destructive flows use confirm (FEED-CONFIRM).

Implementation contracts

  1. Controls follow Forms + Choose the right control.
  2. Server: GET read, POST+303 mutate, 422 + X-Gelium-Validation when needed.
  3. Theme via theme-* classes; no one-off hex for core chrome.
  4. Narrow viewport: stack, min-width: 0, no body overflow-x: hidden (Responsive).
  5. Motion is NONE or justified; prefers-reduced-motion honored (Motion).
  6. Copy follows Content style (errors say the fix).

Agent extras

  1. Workflow passes: shape → architecture → build → audit → polish (no endless redesign loops).
  2. /llms-ux.txt rules followed (FEED/DATA/JOURNEY/WF/ARCH ids in notes).
  3. Domain skeleton used if applicable (Patterns).
  4. bash scripts/ux-detect.sh clean when working in this monorepo (or consumer equivalent).
  5. Anti-slop list reviewed (Agent workflow) without breaking the theme.

Failure handling

If any item fails: fix before shipping. Do not “pass with toast” on validation or skip empty states.

See also