Auto-activate for tailwind.config.ts, tailwind.config.js, @tailwind directives. Tailwind CSS v4: utility classes, responsive design, @apply, cn(), @theme config. Use when: styling with Tailwind, writing utility classes, configuring Tailwind v4, or building responsive layouts with Shadcn/ui. Not for Bootstrap, plain CSS, or CSS-in-JS solutions.
From flownpx claudepluginhub cofin/flow --plugin flowThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
/* styles.css */
@import "tailwindcss";
@theme {
--color-primary: oklch(0.5 0.2 240);
--radius-lg: 0.5rem;
}
</example>
// Flexbox
<div className="flex items-center justify-between gap-4">
// Grid
<div className="grid grid-cols-3 gap-4">
// Container
<div className="container mx-auto px-4">
</example>
// Padding
<div className="p-4 px-6 py-2">
// Margin
<div className="m-4 mx-auto my-2">
// Gap
<div className="gap-4 gap-x-2 gap-y-4">
</example>
<h1 className="text-4xl font-bold tracking-tight">
<p className="text-muted-foreground text-sm">
<span className="font-medium">
</example>
// Background
<div className="bg-background bg-primary bg-muted">
// Text
<span className="text-foreground text-primary text-muted-foreground">
// Border
<div className="border border-border border-primary">
</example>
// Width/Height
<div className="w-full h-screen w-64 h-12">
// Max/Min
<div className="max-w-md min-h-screen">
</example>
<div className="rounded-lg border border-border shadow-sm">
<div className="rounded-full">
</example>
<button className="hover:bg-primary/90 focus:ring-2 focus:ring-primary disabled:opacity-50">
<a className="hover:underline">
</example>
// Mobile-first breakpoints
<div className="w-full md:w-1/2 lg:w-1/3">
// Hide/show
<div className="hidden md:block">
<div className="block md:hidden">
</example>
// Built-in
<div className="animate-spin animate-pulse animate-bounce">
// Transitions
<div className="transition-colors duration-200 ease-in-out">
</example>
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
// Button variants
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
// Button sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
// Card
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
</CardHeader>
<CardContent>
Content here
</CardContent>
</Card>
</example>
// Automatic with system preference
<div className="bg-background text-foreground">
// Force dark
<div className="dark">
<div className="bg-background"> {/* Uses dark theme colors */}
</example>
import { cn } from "@/lib/utils"
interface Props {
className?: string
}
function Component({ className }: Props) {
return (
<div className={cn(
"flex items-center p-4 rounded-lg",
"bg-background border border-border",
className
)}>
Content
</div>
)
}
</example>
<form className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium">Email</label>
<Input type="email" placeholder="email@example.com" />
</div>
<Button type="submit" className="w-full">
Submit
</Button>
</form>
</example>
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>Title</CardTitle>
<Button variant="ghost" size="sm">Action</Button>
</CardHeader>
<CardContent className="space-y-4">
{/* Content */}
</CardContent>
</Card>
</example>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{items.map(item => (
<Card key={item.id}>...</Card>
))}
</div>
</example>
<Button disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Loading...
</>
) : (
'Submit'
)}
</Button>
</example>
</workflow>