Menu
Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
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.
Next.js 15 critical performance fixes. Use when writing React components, data fetching, Server Actions, or optimizing bundle size.
| name | design-principles |
| description | Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles. |
| user-invocable | true |
Invoke when: Creating new components, modifying styles, or building new pages. Skip when: Backend work, API changes, logic-only changes.
Read the full design specs in docs/agent/design/:
| Name | Hex | Usage |
|---|---|---|
| Canvas | #F0F0E8 | Background |
| Ink | #000000 | Text, borders |
| Hyper Blue | #1D4ED8 | Primary actions |
| Signal Green | #15803D | Success |
| Alert Red | #DC2626 | Danger |
font-serif → Headers
font-mono → Labels, metadata (uppercase, tracking-wider)
font-sans → Body text
// Button: Square corners, hard shadow, press effect
<button className="rounded-none border-2 border-black shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">
// Card: Hard shadow, no rounded corners
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">
// Label: Mono, uppercase
<label className="font-mono text-sm uppercase tracking-wider">
<div className="w-3 h-3 bg-green-700" /> // Ready
<div className="w-3 h-3 bg-amber-500" /> // Warning
<div className="w-3 h-3 bg-red-600" /> // Error
<div className="w-3 h-3 bg-blue-700" /> // Active
❌ rounded-* - Always use rounded-none
❌ Gradients or blur shadows
❌ Custom colors outside palette
❌ Pastel or soft colors
❌ Decorative icons without function
Use bracket syntax for UI chrome ONLY (dashboard, settings, empty states):
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
<span className="font-mono text-xs uppercase">[ LOADING... ]</span>
DO NOT use retro elements on resume components - keep resume areas professional.
rounded-none on all componentsshadow-[Xpx_Xpx_0px_0px_#000000])