Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →giuseppe-trisciuoglio/tailwind-design-system
Skill for creating and managing a Design System using Tailwind CSS and shadcn/ui.
Passed 21 of 22 test cases with the skill, and 18 of 22 without it.
and 2 more in the full report
3 fixed18 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
I am starting a new frontend project and want to build a system-level component library combining Tailwind CSS and shadcn primitives. Please walk me through initializing the project CLI dependencies, setting up `globals.css` with semantic color tokens using modern oklch CSS variables for both light and dark modes, bridging them to Tailwind utility classes, and providing a quick terminal script to verify that all required token variables are defined.
| Checked | Without skill | With skill |
|---|---|---|
| Defines color tokens directly using functional oklch(...) notation inside CSS custom properties in globals.css | Missed | Passed |
| Uses the @theme inline directive in CSS to bridge custom properties to Tailwind utility classes | Missed | Passed |
| Does not create a tailwind.config.ts file or JS helper functions for color parsing | Missed | Passed |
The instructions your model reads when the skill loads.
Expert guide for creating and managing a centralized Design System using Tailwind CSS (v4.1+) and shadcn/ui. This skill provides structured workflows for defining design tokens, configuring themes with CSS variables, and building a consistent UI component library based on shadcn/ui primitives.
Relationship with other skills:
globals.css with a centralized theming system (light/dark mode)Run these commands to set up the project:
# Check if Tailwind is installed
npx tailwindcss --version
# For Tailwind v4 (recommended)
npx @tailwindcss/vite@latest init # or: npm install -D tailwindcss @tailwindcss/vite
# Initialize shadcn/ui CLI
npx shadcn@latest init
# Install core shadcn/ui components
npx shadcn@latest add button card input -y
test cases passed, vs 18 / 22 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.