Loop UI work until quality gates pass — judge/build, test, audit, fix, repeat. Use when the user wants polished UI, "rapihin sampai bagus", polish until audit passes, fix Critical/High design findings, or /polish. Orchestrates frontend-judgment, design-tokens, ui-components, responsive-ui, motion, anti-ai-slop, ui-feel, accessibility, frontend-testing, and design-reviewer scorecard. Do not use for one-shot tiny tweaks unless the user asked to keep iterating.
설치
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Loop UI work until quality gates pass — judge/build, test, audit, fix, repeat. Use when the user wants polished UI, "rapihin sampai bagus", polish until audit passes, fix Critical/High design findings, or /polish. Orchestrates frontend-judgment, design-tokens, ui-components, responsive-ui, motion, anti-ai-slop, ui-feel, accessibility, frontend-testing, and design-reviewer scorecard. Do not use for one-shot tiny tweaks unless the user asked to keep iterating.
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 frontend-judgment skip rules).
When to use
User asks to polish, rapihin, “sampai lulus audit”, “UI bagus dulu baru selesai”
/polish or natural language equivalent
After a /design//audit with Critical/High findings and user wants them cleared
When to skip
Single-line copy/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)
Step
Agent
Judgment + build + fix
ui-developer
Test
test-engineer
Audit
design-reviewer
You (the session agent) are the loop controller. Personas do not call each other; you invoke their workflows in sequence.
Gates (pass / fail)
Gate
Pass when
Anti-slop
No Critical/High AI-aesthetic findings
UI feel
No Critical/High craft issues on touched UI (concentric radius, hit overlap, transition: all, broken press/enter)
Tokens
No Critical/High raw-hex / off-token issues; greenfield pack preset used decision tree + Token score / (explicit) / (hard-gate) / project system in Conventions check
Responsive
Conventions Responsive line present; full-width primary CTA <768; no Critical/High desktop-only layout on greenfield (320–1440)
Hierarchy
Hierarchy pass (one primary focus + one primary CTA) or waiver for tiny tweaks
Typography
One h1/page + sequential ladder (or waiver)
Motion
Shell light defaults or named families/patterns from motion-families.md; no decorative spam; reduced-motion; hand-roll (not registry default)
Shell
Theme in topbar; avatar → account menu; custom selects (or waivers) on dashboards
Landing
Marketing section stack via marketing-landing (not hero-only; hand-roll) — or n/a for app-shell-only
A11y
No Critical keyboard/label/contrast findings (potential or measured)
States
Loading/error/empty handled for interactive surfaces touched
Tests
Planned critical cases green, or explicit waiver if no test runner / out of scope (document why)
Perf (soft)
No Critical obvious LCP/CLS footguns in touched UI; else note as remaining
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
Load frontend-judgment if non-trivial / blank-canvas
After direction: design-tokens → (+ marketing-landing if landing) → (+ app-shell-routing / data-fetching / forms-validation if needed) → ui-components → responsive-ui → motion (light shell; marketing = families/patterns from motion-families.md, hand-roll) → anti-ai-slop → ui-feel → accessibility (+ webgl / fe-seo if needed)
Produce UI + Conventions check (references/compliance-gates.md)
Each cycle — Prove + audit + fix
TEST — frontend-testing via test-engineer (/test-ui workflow) for touched surfaces
AUDIT — design-reviewer scorecard (/design or /audit). Mark unevaluated honestly.
DECIDE
All Critical/High clear → DONE (report scorecard + remaining Medium/Low)
Else if iterations left → FIX with ui-developer (only findings that block gates)
