UI Review Agent Use to verify frontend changes comply with Swiss International Style before committing. Review Process Step 1: Run automated checks
Check for forbidden rounded corners
rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
Check for gradient usage (forbidden)
rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
Check for soft shadows (should be hard only)
rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
Check for blur effects (forbidden)
rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n
Check for off-palette colors
rg 'bg-(red|green|blue|yellow|purple|pink|indigo|teal|cyan|emerald|violet|fuchsia|rose|sky|lime|amber|stone|zinc|neutral|slate)-[0-9]' apps/frontend/ --glob '*.tsx' --no-heading -n
Verify hard shadows are used
rg 'shadow-[' apps/frontend/ --glob '*.tsx' --no-heading -n Step 2: Manual review checklist For each changed file: Colors Background uses Canvas
F0F0E8
or white Text uses Ink
000000
(no grey for main text) Links use Hyper Blue
1D4ED8
Success states use Signal Green
15803D
Error states use Alert Red
DC2626
Warning states use Alert Orange
F97316
No colors outside the Swiss palette Typography Headers use font-serif Body text uses font-sans Labels/metadata use font-mono text-sm uppercase tracking-wider No decorative fonts Borders & Shadows All elements use rounded-none Borders are border-2 border-black (or border ) Shadows are hard: shadow-[Xpx_Xpx_0px_0px_#000000] Hover effects translate into shadow space Components Buttons: square corners, hard shadow, press effect Cards: white bg, black border, hard shadow Inputs: rounded-none , black border Labels: mono, uppercase, tracking-wider Status dots: w-3 h-3 with no border-radius Layout Grid-based layouts Consistent spacing (multiples of 4) Mobile-first responsive breakpoints Swiss Design System Allowed Colors Name Hex Tailwind Canvas
F0F0E8
bg-[#F0F0E8] Ink
000000
text-black White
FFFFFF
bg-white Hyper Blue
1D4ED8
text-blue-700 / bg-blue-700 Signal Green
15803D
text-green-700 Alert Orange
F97316
text-orange-500 Alert Red
DC2626
text-red-600 Steel Grey
4B5563
text-gray-600 Component Templates // Correct button < button className = " rounded-none border-2 border-black px-4 py-2 shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all "
// Correct card < div className = " bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6 "
// Correct label < label className = " font-mono text-sm uppercase tracking-wider "
// Correct status indicator < div className = " w-3 h-3 bg-green-700 " /> Anti-Pattern Quick Scan If ANY of these appear in changed files, flag immediately: Anti-Pattern Why rounded-sm/md/lg/xl/full Swiss style: sharp corners only bg-gradient- No gradients allowed shadow-sm/md/lg/xl Must use hard shadow-[...] blur- / backdrop-blur No blur effects opacity-* (decorative) Flat, opaque elements only Pastel colors Swiss palette is bold animate-pulse/bounce Minimal animation only Retro Terminal Elements For dashboard/settings/empty states ONLY (not resume content): < span className = " font-mono text-xs uppercase "
[ STATUS: READY ] </ span
Never use retro elements on resume editing or PDF preview areas. Reference Full design system: docs/agent/design/style-guide.md Extended tokens: docs/agent/design/design-system.md