Agent-Skills.md

Agent Skills: Tailwind CSS Component Patterns

|

UncategorizedID: srbhr/resume-matcher/tailwind-patterns

Repository

srbhr/resume-matcher
srbhrLicense: Apache-2.0
26,4164,754

Install this agent skill to your local

pnpm dlx add-skill https://github.com/srbhr/Resume-Matcher/tree/HEAD/.github/skills/tailwind-patterns

Skill Files

Browse the full folder contents for tailwind-patterns.

Download Skill

Loading file tree…

.github/skills/tailwind-patterns/SKILL.md

Skill Metadata

Name
tailwind-patterns
Description
|

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 (always rounded-none)
  • shadow-sm/md/lg/xl (always hard shadow-[...])
  • 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