Srbhr resume matcher tailwind patterns 1.0.1

Skill VRIL-LABS/skill-jam/skills/web-frontend/srbhr-resume-matcher-tailwind-patterns-1.0.1

Welcome to the skill-jam ☄️🏀

Install

npx -y skills add VRIL-LABS/skill-jam --skill srbhr-resume-matcher-tailwind-patterns-1.0.1

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.3 KB, 677 tokens by cl100k_base, as published. Nobody here has run it

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