playbooks

home / skills / srbhr / resume-matcher / ui-review

ui-review skill

/.agents/skills/ui-review

This skill helps ensure frontend changes conform to the Swiss International Style by validating colors, typography, borders, and shadows before commit.

npx playbooks add skill srbhr/resume-matcher --skill ui-review

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
4.2 KB
---
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

```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`

Overview

This skill reviews frontend UI changes to ensure they comply with the Swiss International Style design system before committing. It flags forbidden patterns, verifies palette and typography, and enforces strict border and shadow rules to keep interfaces consistent and print-friendly.

How this skill works

Run automated regex-based scans against changed files to detect rounded corners, gradients, soft shadows, blur effects, off-palette colors, and other anti-patterns. Follow a short manual checklist per changed file covering colors, typography, borders, shadows, components, and layout to confirm visual correctness and accessibility.

When to use it

  • Before committing any frontend UI changes or pull request merges
  • When introducing new components or updating global styles
  • During design-to-code handoff validation
  • Before publishing resume-editing or PDF preview UIs
  • As part of a CI pipeline pre-merge check

Best practices

  • Run automated scans first, then follow the manual checklist for context-specific decisions
  • Keep spacing in multiples of 4 and ensure mobile-first breakpoints
  • Use only the approved Swiss palette and avoid pastel or off-palette tones
  • Prefer hard shadows with explicit pixel offsets instead of soft shadow utilities
  • Use serif for headers, sans for body, and mono uppercase for labels/metadata

Example use cases

  • Detecting and removing rounded utilities (rounded-sm/md/...) introduced by a new button component
  • Catching accidental gradient backgrounds or blur effects before they reach production
  • Validating that cards, inputs, and status dots follow border and shadow conventions
  • Ensuring resume editor and PDF preview areas do not include retro terminal elements
  • Enforcing consistent typography when adding new headers or label styles

FAQ

What are the most common immediate rejects?

Any use of rounded-* utilities, gradient classes, soft shadow utilities, blur/backdrop-blur, or off-palette color classes should be flagged and corrected before merging.

Can I use animation classes like animate-pulse or bounce?

No — animations are limited. Minimal motion may be allowed if it matches the system, but avoid animate-pulse/bounce and decorative opacity classes.