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

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:

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