Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.
Passed 22 of 23 test cases with the skill, and 7 of 23 without it.
and 18 more in the full report
15 fixed7 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 15 test cases the skill fixed. Same model, same prompt, with and without the skill.
Write a CSS theme configuration snippet that maps an external CSS font variable `--font-inter` to `--font-sans` inline.
| Checked | Without skill | With skill |
|---|---|---|
| The configuration uses the @theme inline directive. | Missed | Passed |
The instructions your model reads when the skill loads.
Repo notice (Asymmetric-al/core): This repository is Base UI only. Shared primitives come from
@base-ui/reactvia the shadcnbase-maiastyle inpackages/ui. Ignore any Radix UI guidance below — never addradix-ui/@radix-ui/*imports or dependencies; composition uses Base UI'srenderprop, notasChild. Seedocs/ai/rules/frontend.md.
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.
| 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 |
/* app.css - Tailwind v4 CSS-first configuration */
@import "tailwindcss";
/* Define your theme with @theme */
@theme {
/* Semantic color tokens using OKLCH for better color perception */
test cases passed, vs 7 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.