القائمة
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.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation
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.
Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles.
Build Python APIs with FastAPI, Pydantic v2, and SQLAlchemy 2.0 async. Covers project structure, JWT auth, validation, and database integration with uv package manager. Prevents 7 documented errors. Use when: creating Python APIs, implementing JWT auth, or troubleshooting 422 validation, CORS, async blocking, form data, background tasks, or OpenAPI schema errors.
Codebase orientation. Use FIRST when exploring code, finding files, or understanding project structure. For advanced search, see the codebase-navigator skill.
| 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. |
Verify frontend changes comply with Swiss International Style before committing.
# 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
For each changed file check:
#F0F0E8 or white#000000#1D4ED8#15803D#DC2626font-seriffont-sansfont-mono text-sm uppercase tracking-widerrounded-noneborder-2 border-blackshadow-[Xpx_Xpx_0px_0px_#000000]rounded-none, black borderFlag 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 |
[FAIL] file:line - Description of violation
[WARN] file:line - Potential issue to verify
[PASS] All checks passed
Full design system: docs/agent/design/style-guide.md