Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/29/2026
What it changes
Passed 21 of 22 test cases with the skill, and 13 of 22 without it.
Without skill59%
With skill95%
Checks it passed that the model alone missed
The text-gradient utility includes bg-clip-text.
The component definitions omit React.forwardRef wrappers.
Dynamic variable mappings use the @theme inline directive.
and 8 more in the full report
8 fixed13 passed either way1 still failing0 broke
Pass-rate lift
+36 pp
Tokens
+202%
Agent turns
0%
Response time
-18%
Model gemini-3.6-flashMeasured 8/29/2026v121 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 8
Prompt
We want to define custom reusable styling utilities line-t and text-gradient in CSS for a Tailwind v4 design system. What is the recommended CSS directive?
What was checked, without and with the skill
Checked
Without skill
With skill
Custom styling utilities are declared using the @utility directive.
Passed
Passed
The text-gradient utility includes bg-clip-text.
Missed
Passed
case-07 · gemini-3.6-flash · 8/29/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md869 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);