mcpField
U
ui-review

ui-review

github.com/srbhrDesign & UI29.0k69 installsUpdated today
Repository

About ui-review

A pre-commit review workflow for checking frontend changes against Swiss International Style. It combines automated scans with a manual checklist and a structured report format for developers.

Key features

  1. 01Scan for forbidden corners, gradients, and shadows
  2. 02Check colors, typography, borders, and shadows
  3. 03Review buttons, cards, and inputs
  4. 04Report findings as FAIL, WARN, or PASS

Use cases

  1. 01Review frontend style changes before committing
  2. 02Find code that violates the Swiss design rules

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/srbhr/resume-matcher --skill ui-review

After installing, type/ui-reviewin Claude Code to confirm it loaded.

Details

From the project README

UI Review

Verify frontend changes comply with Swiss International Style before committing.

Step 1: Run Automated Checks

# Forbidden rounded corners
rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden gradients
rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden soft shadows
rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden blur
rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

Step 2: Manual Review

For each changed file check:

Colors
  • Background: Canvas #F0F0E8 or white
  • Text: Ink #000000
  • Links: Hyper Blue #1D4ED8
  • Success: Signal Green #15803D
  • Error: Alert Red #DC2626
  • No colors outside the Swiss palette
Typography
  • Headers: font-serif
  • Body: font-sans
  • Labels: font-mono text-sm uppercase tracking-wider
Borders & Shadows
  • All elements: rounded-none
  • Borders: border-2 border-black
  • Shadows: hard shadow-[Xpx_Xpx_0px_0px_#000000]
  • Hover: translate into shadow space
Components
  • Buttons: square corners, hard shadow, press effect
  • Cards: white bg, black border, hard shadow
  • Inputs: rounded-none, black border

Anti-Pattern Quick Scan

Flag immediately if found in changed files:

Anti-PatternWhy
rounded-sm/md/lg/xl/fullSharp corners only
bg-gradient-*No gradients
shadow-sm/md/lg/xlHard shadows only
blur-* / backdrop-blurNo blur effects
Pastel colorsSwiss palette is bold

Step 3: Report

[FAIL] file:line - Description of violation
[WARN] file:line - Potential issue to verify
[PASS] All checks passed

Reference

Full design system: docs/agent/design/style-guide.md

Comments

Markdown supported