dankofly/ui-review

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