Menu
Tailwind CSS patterns for modern UI. Use when styling components, building responsive layouts, creating design systems, or any Tailwind/CSS work.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
REST API design principles and best practices. Use when designing API endpoints, request/response schemas, versioning, error formats, or reviewing API design.
Python asyncio patterns for high-performance async code. Use when writing async functions, managing concurrency, working with aiohttp, asyncpg, or any async I/O in Python.
Celery background task patterns for Python apps. Use when implementing background jobs, scheduled tasks, email sending, image processing, or any async work that shouldn't block a web request.
Docker, docker-compose, and deployment configuration best practices. Use when writing Dockerfiles, docker-compose.yml, CI/CD configs, or setting up any containerized deployment.
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
End-to-end testing patterns with Playwright. Use when writing browser automation tests, integration tests, testing user flows, or setting up E2E test suites.
| name | tailwind-css |
| description | Tailwind CSS patterns for modern UI. Use when styling components, building responsive layouts, creating design systems, or any Tailwind/CSS work. |
import type { Config } from 'tailwindcss'
export default {
content: ['./src/**/*.{ts,tsx}', './app/**/*.{ts,tsx}'],
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
600: '#2563eb',
900: '#1e3a8a',
},
// Use CSS variables for theming
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
},
fontFamily: {
sans: ['Inter var', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
borderRadius: { DEFAULT: '0.5rem' },
animation: {
'fade-in': 'fadeIn 0.2s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
} satisfies Config
const buttonVariants = {
primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50',
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
ghost: 'text-gray-700 hover:bg-gray-100',
}
export function Button({ variant = 'primary', size = 'md', className, ...props }) {
return (
<button
className={cn(
'inline-flex items-center justify-center rounded-md font-medium',
'focus:outline-none focus:ring-2 focus:ring-offset-2',
'disabled:opacity-50 disabled:cursor-not-allowed',
'transition-colors duration-150',
{
'px-3 py-1.5 text-sm': size === 'sm',
'px-4 py-2 text-sm': size === 'md',
'px-6 py-3 text-base': size === 'lg',
},
buttonVariants[variant],
className,
)}
{...props}
/>
)
}
export function Card({ children, className }: { children: React.ReactNode; className?: string }) {
return (
<div className={cn('bg-white rounded-xl border border-gray-200 shadow-sm p-6', className)}>
{children}
</div>
)
}
// Mobile-first: base = mobile, sm/md/lg = progressively larger
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{items.map(item => <Card key={item.id} />)}
</div>
// Sidebar layout
<div className="flex min-h-screen">
<aside className="hidden lg:flex lg:w-64 lg:flex-col bg-gray-900 text-white">
{/* Sidebar */}
</aside>
<main className="flex-1 overflow-auto">
{/* Content */}
</main>
</div>
// tailwind.config.ts: darkMode: 'class'
// Root layout:
<html className={isDark ? 'dark' : ''}>
// Components use dark: prefix:
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
// twMerge handles conflicting classes: cn('p-4', 'p-6') → 'p-6'
// Loading skeleton
<div className="animate-pulse space-y-3">
<div className="h-4 bg-gray-200 rounded w-3/4" />
<div className="h-4 bg-gray-200 rounded w-1/2" />
</div>
// Badge
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Active
</span>
// Input with error state
<input className={cn(
'block w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2',
error
? 'border-red-300 focus:ring-red-500 text-red-900 placeholder:text-red-300'
: 'border-gray-300 focus:ring-primary-500'
)} />
// Modal overlay
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4">
{/* Modal content */}
</div>
</div>
cn() from clsx + tailwind-merge to compose dynamic classesgap- not space-x/y- for flex/grid layouts (more predictable)dark: prefix + class strategy (not media query)@tailwindcss/forms for better default form styling