메뉴
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 페이지를 검토하고 설치를 진행할 수 있습니다.
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.
SOC 직업 분류 기준
| 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