ui-review

name	ui-review
description	Review UI changes against Swiss International Style design system. Checks colors, typography, borders, shadows, spacing, and anti-patterns. Use before committing any frontend UI changes.
metadata	{"author":"resume-matcher","version":"1.0.0"}
allowed-tools	Bash(rg:*) Bash(npm:*) Read

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