ReddRadar
Agent skill
tailwind-patterns
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.
Install this agent skill to your Project
npx add-skill https://github.com/srbhr/Resume-Matcher/tree/main/.github/skills/tailwind-patterns
SKILL.md
Tailwind CSS Component Patterns
Spacing Scale
Use increments of 4: gap-4, p-6, py-8, space-y-12, py-16, py-24
Responsive Breakpoints (Mobile-First)
| 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 |
Essential Patterns
// 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">
Swiss International Style Overrides
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">
Swiss Colors
| 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 |
NEVER in Resume Matcher
rounded-sm/md/lg/xl/full(alwaysrounded-none)shadow-sm/md/lg/xl(always hardshadow-[...])bg-gradient-*,blur-*,backdrop-blur- Pastel or off-palette colors
Button Sizes
- Small:
px-3 py-1.5 text-sm - Default:
px-4 py-2 - Large:
px-6 py-3 text-lg
Full Reference
Complete patterns: .claude/skills/tailwind-pattern/SKILL.md
Swiss design: docs/agent/design/style-guide.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
srbhr/Resume-Matcher
ui-review
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.
srbhr/Resume-Matcher
codebase-navigator
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.
srbhr/Resume-Matcher
fastapi
Build Python APIs with FastAPI, Pydantic v2, and async patterns. Covers project structure, JWT auth, validation, database integration, and 7 documented error preventions. Use when creating Python APIs, implementing auth, or troubleshooting 422 validation, CORS, async blocking, or schema errors.
srbhr/Resume-Matcher
full-stack
Full-stack development skill that coordinates backend and frontend changes together. Use for features that span both layers: new API endpoint + UI, data model changes, end-to-end flows.
srbhr/Resume-Matcher
code-review
Review code for correctness, security, performance, and Resume Matcher conventions. Use when receiving code review feedback or before submitting PRs. Requires technical rigor, not performative agreement.
srbhr/Resume-Matcher
navigator
Quick codebase orientation for Resume Matcher. Points to key directories, architecture docs, and available skills. Use as a starting point before diving into code. For advanced search, use the codebase-navigator skill.
Didn't find tool you were looking for?