メニュー
Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles. Provides colors, typography, borders, shadows, and component patterns.
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 | design-principles |
| description | Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles. Provides colors, typography, borders, shadows, and component patterns. |
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 Orange | #F97316 | Warning |
| Alert Red | #DC2626 | Danger |
| Steel Grey | #4B5563 | Secondary text |
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-* (except rounded-none)For dashboard/settings/empty states ONLY:
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
DO NOT use retro elements on resume components.
rounded-none on all componentsshadow-[Xpx_Xpx_0px_0px_#000000])