ui-review_skill

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