UI Quality Loop

Overview

Run a tight quality loop until the UI clears gates (or hit the iteration cap). This is the pack’s mini lifecycle — not full /spec→/ship, but build → prove → audit → fix until it’s good.

JUDGE* → BUILD → TEST → AUDIT ──Critical/High──▶ FIX ──▶ TEST → AUDIT …
                         │
                       PASS → DONE

* Judgment only on blank-canvas / first pass (see design-direction skip rules).

When to use

• User asks “rapihin sampai bagus”, “sampai lulus audit”, keep iterating until gates pass
• /polish or natural language equivalent of the loop
• After a /design//audit with Critical/High findings and user wants them cleared

When to skip

• “Rapihin detail” / feels off → polish (one pass)
• Copy / “tulisan AI” → content-design
• “Rapikan kode” → anti-slop-code
• Single-line token tweak with no quality ask
• Pure audit with no fix permission (“audit saja”)
• User said stop / “cukup” / accepted remaining Medium/Low

Agents (orchestrate — do not nest personas forever)

You (the session agent) are the loop controller. Personas do not call each other; you invoke their workflows in sequence.

Gates (pass / fail)

Loop continues while any Critical or High remains on touched UI. Medium/Low do not block DONE unless the user asked for zero findings.

Do not invent a test stack just to satisfy the Tests gate — waive and list residual risk.

Iteration cap

• Default max 3 full AUDIT→FIX cycles after the first build
• On cap: stop, ship best effort, list remaining findings + what would need another round
• Never infinite-loop

Workflow

Round 0 — Direction + build

1. Load design-direction if non-trivial / blank-canvas
2. After direction: (+ prototype if comparing/stressing) → tokens → (+ marketing if landing) → (+ app-shell / data-fetching / forms if needed) → components → (+ design-surfaces when radius/control geometry is implicated) → anti-slop-code → responsive → motion (light shell; marketing = families/patterns from motion-families.md, hand-roll) → anti-slop-design → polish → accessibility (+ webgl / seo if needed)
3. Produce UI + Conventions check (references/compliance-gates.md)

Each cycle — Prove + audit + fix

1. TEST — testing via test-engineer (/test-ui workflow) for touched surfaces
2. AUDIT — design-reviewer scorecard (/design or /audit). Mark unevaluated honestly.
3. DECIDE
   • All Critical/High clear → DONE (report scorecard + remaining Medium/Low)
   • Else if iterations left → FIX with ui-developer (only findings that block gates; include design-surfaces when radius is implicated)
   • Else → STOP at cap with remaining list

Fix discipline

• Fix highest severity first
• Prefer token/system fixes over one-off hacks
• Re-run TEST for behavior you changed
• Do not expand scope to unrelated pages

Output template (every cycle)

## Quality loop — cycle N/3

### Test
- … pass/fail …

### Audit scorecard
| Metric | Status | Notes |
|--------|--------|-------|
| … | … | … |

### Blocking (Critical/High)
1. …

### Action
FIX … | DONE | STOP (cap)

Final output (DONE or STOP)

1. What shipped / changed
2. Final scorecard
3. Remaining Medium/Low (if any)
4. Cycles used

Checklist

• Judgment only when blank-canvas / first pass (skip rules honored)
• Build chain includes responsive + motion (+ marketing if landing) or waivers
• Gates table evaluated each cycle (Anti-slop, Feel, Tokens, Responsive, Hierarchy, Typography, Motion, Shell, Landing, A11y, States, Tests)
• Shell chrome: theme topbar + avatar menu + custom selects (or waivers)
• Marketing landing: section stack hand-roll (or n/a / waiver)
• Conventions check filled before DONE
• Control geometry Conventions line covers radius token, text/icon optical balance, and relevant states (or valid n/a/waiver)
• Cap ≤3 fix cycles; STOP lists remaining Critical/High if any
• No fabricated audit scores

Depth

Craft review: use references/prototype.md → Craft comparison, not a taste score for matched captures, local readability and causal fixes. Geometry exceptions follow references/component-patterns.md: explicit measured morph needs endpoint/playback evidence and stable neighboring targets; accidental shifts remain defects.

• Lifecycle A→Z: references/fe-lifecycle.md
• Judgment: design-direction
• Build: tokens, components, design-surfaces when radius is implicated, anti-slop-code, responsive, motion (motion-families.md), anti-slop-design, polish, accessibility
• Test: testing (+ devtools when measuring)
• Audit: design-reviewer + references/anti-patterns.md / references/polish.md / a11y / performance as needed