メニュー
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.
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 | tailwind-patterns |
| description | 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. |
Use increments of 4: gap-4, p-6, py-8, space-y-12, py-16, py-24
| Breakpoint | Min Width | Example |
|---|---|---|
| Base | 0px | text-base |
| sm | 640px | sm:text-lg |
| md | 768px | md:grid-cols-2 |
| lg | 1024px | lg:px-8 |
| xl | 1280px | xl:max-w-7xl |
// Page Container
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
// Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
// Section
<section className="py-16 sm:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
Resume Matcher uses Swiss Brutalist design:
// Card (Swiss)
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">
// Button (Swiss)
<button className="rounded-none border-2 border-black px-4 py-2 shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all">
// Input (Swiss)
<input className="rounded-none border-2 border-black p-3 font-sans w-full">
// Label (Swiss)
<label className="font-mono text-sm uppercase tracking-wider">
| Color | Hex | Tailwind |
|---|---|---|
| Canvas | #F0F0E8 | bg-[#F0F0E8] |
| Ink | #000000 | text-black |
| Hyper Blue | #1D4ED8 | bg-blue-700 |
| Signal Green | #15803D | text-green-700 |
| Alert Red | #DC2626 | text-red-600 |
rounded-sm/md/lg/xl/full (always rounded-none)shadow-sm/md/lg/xl (always hard shadow-[...])bg-gradient-*, blur-*, backdrop-blurpx-3 py-1.5 text-smpx-4 py-2px-6 py-3 text-lgComplete patterns: .claude/skills/tailwind-pattern/SKILL.md
Swiss design: docs/agent/design/style-guide.md