ui-review

Original：🇺🇸 English

Translated

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.

1installs

Sourcesrbhr/resume-matcher

Added on2026-02-14

NPX Install

npx skill4agent add srbhr/resume-matcher ui-review

SKILL.md Content

View Translation Comparison →

UI Review Agent

Use to verify frontend changes comply with Swiss International Style before committing.

Review Process

Step 1: Run automated checks

bash

# 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

tsx

// 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):

tsx

<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