ReddRadar
Agent skill
ui-review
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.
Install this agent skill to your Project
npx add-skill https://github.com/srbhr/Resume-Matcher/tree/main/.github/skills/ui-review
SKILL.md
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
#F0F0E8or 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-Pattern | Why |
|---|---|
rounded-sm/md/lg/xl/full |
Sharp corners only |
bg-gradient-* |
No gradients |
shadow-sm/md/lg/xl |
Hard shadows only |
blur-* / backdrop-blur |
No blur effects |
| Pastel colors | Swiss 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
srbhr/Resume-Matcher
codebase-navigator
Navigate, search, and understand the Resume Matcher codebase using ripgrep, ack, or grep. Find functions, classes, components, API endpoints, trace data flows, and understand architecture. Use FIRST when exploring code, finding files, or understanding project structure.
srbhr/Resume-Matcher
fastapi
Build Python APIs with FastAPI, Pydantic v2, and async patterns. Covers project structure, JWT auth, validation, database integration, and 7 documented error preventions. Use when creating Python APIs, implementing auth, or troubleshooting 422 validation, CORS, async blocking, or schema errors.
srbhr/Resume-Matcher
tailwind-patterns
Production-ready Tailwind CSS patterns for responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, dark mode, and Swiss International Style overrides for Resume Matcher.
srbhr/Resume-Matcher
full-stack
Full-stack development skill that coordinates backend and frontend changes together. Use for features that span both layers: new API endpoint + UI, data model changes, end-to-end flows.
srbhr/Resume-Matcher
code-review
Review code for correctness, security, performance, and Resume Matcher conventions. Use when receiving code review feedback or before submitting PRs. Requires technical rigor, not performative agreement.
srbhr/Resume-Matcher
navigator
Quick codebase orientation for Resume Matcher. Points to key directories, architecture docs, and available skills. Use as a starting point before diving into code. For advanced search, use the codebase-navigator skill.
Didn't find tool you were looking for?