Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/tailwind-v4-shadcn
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors.
Passed 22 of 22 test cases with the skill, and 17 of 22 without it.
and 6 more in the full report
5 fixed17 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
I am setting up keyframe animations for shadcn components in a Tailwind CSS v4 project. Should I install tailwindcss-animate as usual in my package.json, or is there a different animation package required for v4 compatibility?
| Checked | Without skill | With skill |
|---|---|---|
| Recommends installing tw-animate-css instead of tailwindcss-animate. | Missed | Passed |
| Instructs adding import tw-animate-css directive to primary index.css file. | 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.
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2026-01-20 Versions: [email protected], @tailwindcss/[email protected] Status: Production Ready ✅
# 1. Install dependencies
pnpm add tailwindcss @tailwindcss/vite
pnpm add -D @types/node tw-animate-css
pnpm dlx shadcn@latest init
# 2. Delete v3 config if exists
rm tailwind.config.ts # v4 doesn't use this file
vite.config.ts:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
});
test cases passed, vs 17 / 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.