Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/17/2026
What it changes
Passed 21 of 22 test cases with the skill, and 18 of 22 without it.
Without skill82%
With skill95%
Checks it passed that the model alone missed
The button variant uses the size-10 utility class.
The CSS block uses @theme inline to reference CSS variables.
The @keyframes definitions are declared inside the @theme block.
and 2 more in the full report
4 fixed17 passed either way0 still failing1 broke
Pass-rate lift
+14 pp
Tokens
+251%
Agent turns
0%
Response time
-15%
Model gemini-3.6-flashMeasured 8/17/2026v121 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 4
Prompt
We are building an icon button size variant that needs equal width and height dimensions of 2.5rem (40px). What single modern utility class should be applied instead of setting separate width and height classes?
What was checked, without and with the skill
Checked
Without skill
With skill
The button variant uses the size-10 utility class.
Missed
Passed
case-15 · gemini-3.6-flash · 8/17/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md861 linessingle file
Tailwind Design System (v4)
Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.
Note: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the upgrade guide.
When to Use This Skill
Creating a component library with Tailwind v4
Implementing design tokens and theming with CSS-first configuration
Building responsive and accessible components
Standardizing UI patterns across a codebase
Migrating from Tailwind v3 to v4
Setting up dark mode with native CSS features
Key v4 Changes
v3 Pattern
v4 Pattern
tailwind.config.ts
@theme in CSS
@tailwind base/components/utilities
@import "tailwindcss"
darkMode: "class"
@custom-variant dark (&:where(.dark, .dark *))
theme.extend.colors
@theme { --color-*: value }
require("tailwindcss-animate")
CSS @keyframes in @theme + @starting-style for entry animations
Quick Start
/* app.css - Tailwind v4 CSS-first configuration */
@import "tailwindcss";
/* Define your theme with @theme */
@theme {
/* Semantic color tokens using OKLCH for better color perception */
--color-background: oklch(100% 0 0);
--color-foreground: oklch(14.5% 0.025 264);
--color-primary: oklch(14.5% 0.025 264);
--color-primary-foreground: oklch(98% 0.01 264);