{"id":"4900c43b-b2c1-4ed2-968d-288ef1092be6","shortId":"Dp6MtU","kind":"skill","title":"shadcn-tailwind","tagline":"Build UIs with Tailwind CSS v4 and shadcn/ui. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tai","description":"# Styling with Tailwind CSS\n\nBuild accessible UIs using Tailwind CSS v4 utility classes and shadcn/ui component patterns. **Tailwind v4 uses CSS-first configuration only - never create or modify `tailwind.config.js`/`tailwind.config.ts`.** Supports Radix UI (default) or Base UI as primitive libraries.\n\n## Critical Rules\n\n### No `tailwind.config.js` - CSS-First Only\n\nTailwind v4 configures everything in CSS. Migrate any JS/TS config:\n- `theme.extend.colors` → `@theme { --color-*: ... }`\n- `plugins` → `@plugin \"...\"` or `@utility`\n- `content` → `@source \"...\"`\n- `tailwindcss-animate` → `@import \"tw-animate-css\"`\n- `@layer utilities` → `@utility name { ... }`\n\n### Always Use Semantic Color Tokens\n\n```tsx\n// CORRECT - respects themes and dark mode\n<div className=\"bg-primary text-primary-foreground\">\n\n// WRONG - breaks theming\n<div className=\"bg-blue-500 text-white\">\n```\n\nAlways pair `bg-*` with `text-*-foreground`. Extend with success/warning/info in [theming.md](theming.md).\n\n### Never Build Class Names Dynamically\n\n```tsx\n// WRONG - breaks Tailwind scanner\n<div className={`bg-${color}-500`}>\n\n// CORRECT - complete strings via lookup\nconst colorMap = { red: \"bg-red-500\", blue: \"bg-blue-500\" } as const\n<div className={colorMap[color]}>\n```\n\n### cn() Merge Order\n\nDefaults first, consumer `className` last (tailwind-merge last-wins):\n```tsx\nclassName={cn(buttonVariants({ variant, size }), className)}  // correct\nclassName={cn(className, buttonVariants({ variant, size }))}  // wrong\n```\n\n### Animation Performance\n\n```tsx\n// WRONG - transition-all causes layout thrashing\n<div className=\"transition-all duration-300\">\n\n// CORRECT - transition only what changes\n<div className=\"transition-colors duration-200\">\n\n// CORRECT - respect reduced motion\n<div className=\"motion-safe:animate-fade-in\">\n```\n\n### `@theme` vs `@theme inline`\n\n- `@theme` - static tokens, overridable by plugins\n- `@theme inline` - references CSS variables, follows dark mode changes\n\n```css\n@theme { --color-brand: oklch(0.6 0.2 250); }          /* static */\n@theme inline { --color-primary: var(--primary); }       /* dynamic */\n```\n\nSee [components.md](components.md) for more pitfalls and [theming.md](theming.md) for color system reference.\n\n## Core Patterns\n\n### CSS Variables for Theming\n\nshadcn/ui uses semantic CSS variables mapped to Tailwind utilities:\n\n```css\n/* globals.css - Light mode */\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --border: oklch(0.922 0 0);\n  --radius: 0.5rem;\n}\n\n/* Dark mode */\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n}\n\n/* Tailwind v4: Map variables */\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n}\n```\n\n**Usage in components:**\n```tsx\n// Background colors omit the \"-background\" suffix\n<div className=\"bg-primary text-primary-foreground\">\n<div className=\"bg-muted text-muted-foreground\">\n<div className=\"bg-destructive text-destructive-foreground\">\n```\n\n### Component Authoring Pattern\n\nComponents use plain functions with `data-slot` attributes (React 19 - no `forwardRef`):\n\n```tsx\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-input bg-background hover:bg-accent\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 px-3 text-xs\",\n        lg: \"h-10 px-8\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"default\" },\n  }\n)\n\n// Plain function with React.ComponentProps (not forwardRef)\nfunction Button({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<\"button\"> & VariantProps<typeof buttonVariants>) {\n  return (\n    <button\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n// Usage\n<Button variant=\"outline\" size=\"sm\">Click me</Button>\n```\n\n**Icon spacing with `data-icon`:**\n```tsx\n<Button>\n  <Spinner data-icon=\"inline-start\" />\n  Generating...\n</Button>\n\n<Button>\n  <CheckIcon data-slot=\"icon\" />\n  Save Changes\n</Button>\n```\n\n### Responsive Design\n\nMobile-first breakpoints:\n\n```tsx\n// Stack on mobile, grid on tablet+\n<div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n\n// Hide on mobile\n<div className=\"hidden md:block\">\n\n// Different layouts per breakpoint\n<div className=\"flex flex-col md:flex-row lg:gap-8\">\n  <aside className=\"w-full md:w-64\">\n  <main className=\"flex-1\">\n</div>\n\n// Responsive text sizes\n<h1 className=\"text-3xl md:text-4xl lg:text-5xl\">\n```\n\n### Container Queries\n\nFirst-class in Tailwind v4, no plugin needed:\n\n```tsx\n<div className=\"@container\">\n  <div className=\"grid gap-4 @sm:grid-cols-2 @lg:grid-cols-3\">\n    Responds to container width, not viewport\n  </div>\n</div>\n\n// Named containers\n<div className=\"@container/sidebar\">\n  <nav className=\"hidden @md/sidebar:block\">\n```\n\n### Dark Mode\n\n```tsx\n// Use dark: prefix - but prefer semantic colors over manual dark: overrides\n<div className=\"bg-background text-foreground\">          // auto dark mode\n<div className=\"bg-white dark:bg-black\">                 // manual override\n\n// Use next-themes for toggle: useTheme() → setTheme(\"dark\" | \"light\")\n// Always add suppressHydrationWarning to <html> to prevent flash\n```\n\n## Common Component Patterns\n\n### Card\n\n```tsx\n<div className=\"rounded-xl border bg-card text-card-foreground shadow\">\n  <div className=\"flex flex-col space-y-1.5 p-6\">\n    <h3 className=\"font-semibold leading-none tracking-tight\">Title</h3>\n    <p className=\"text-sm text-muted-foreground\">Description</p>\n  </div>\n  <div className=\"p-6 pt-0\">Content</div>\n  <div className=\"flex items-center p-6 pt-0\">Footer</div>\n</div>\n```\n\n### Form Field\n\n```tsx\n<div className=\"space-y-2\">\n  <label className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n    Email\n  </label>\n  <input\n    type=\"email\"\n    className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n  />\n  <p className=\"text-sm text-muted-foreground\">Helper text</p>\n</div>\n```\n\n### Badge\n\n```tsx\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary text-primary-foreground shadow\",\n        secondary: \"border-transparent bg-secondary text-secondary-foreground\",\n        destructive: \"border-transparent bg-destructive text-destructive-foreground\",\n        outline: \"text-foreground\",\n      },\n    },\n  }\n)\n```\n\n## Layout Patterns\n\n### Centered Layout\n\n```tsx\n<div className=\"flex min-h-screen items-center justify-center\">\n  <div className=\"w-full max-w-md space-y-8 p-8\">\n    {/* Content */}\n  </div>\n</div>\n```\n\n### Sidebar Layout\n\n```tsx\n<div className=\"flex h-screen\">\n  <aside className=\"w-64 border-r bg-muted/40\">Sidebar</aside>\n  <main className=\"flex-1 overflow-auto\">Content</main>\n</div>\n```\n\n### Dashboard Grid\n\n```tsx\n<div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n  <Card className=\"col-span-2\">Wide card</Card>\n  <Card>Regular</Card>\n  <Card>Regular</Card>\n  <Card className=\"col-span-4\">Full width</Card>\n</div>\n```\n\n## Accessibility Patterns\n\n### Focus Visible\n\n```tsx\n<button className=\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\">\n```\n\n### Screen Reader Only\n\n```tsx\n<span className=\"sr-only\">Close dialog</span>\n```\n\n### Disabled States\n\n```tsx\n<button className=\"disabled:cursor-not-allowed disabled:opacity-50\" disabled>\n```\n\n## Tailwind v4 Features\n\n### CSS-First Configuration\n\n```css\n@import \"tailwindcss\";\n\n/* Custom utilities (replaces @layer utilities) */\n@utility tab-highlight-none {\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Custom variants */\n@custom-variant pointer-fine (@media (pointer: fine));\n\n/* Source control */\n@source inline(\"{hover:,}bg-red-{50,100,200}\");\n@source not \"./legacy\";\n```\n\n### @theme Directive\n\n```css\n@theme {\n  --color-primary: oklch(0.205 0 0);\n  --font-sans: \"Inter\", system-ui;\n}\n\n/* With CSS variables (shadcn/ui pattern) */\n@theme inline {\n  --color-primary: var(--primary);\n}\n```\n\n### Animation\n\n```css\n@import \"tw-animate-css\";\n```\n\n```tsx\n<div className=\"animate-fade-in\">\n<div className=\"animate-slide-in-from-top\">\n```\n\n### v4.1 Features\n\n```tsx\n// Text shadows\n<h1 className=\"text-shadow-sm text-4xl font-bold\">\n\n// Gradient masks for fade effects\n<div className=\"mask-linear-to-b\">Fades to transparent at bottom</div>\n\n// Pointer-aware sizing\n<button className=\"pointer-fine:py-1 pointer-coarse:py-3\">\n\n// Form validation after user interaction\n<input className=\"user-valid:border-success user-invalid:border-destructive\" />\n\n// Overflow wrap for long strings\n<p className=\"overflow-wrap-anywhere\">verylongwordthatneedstowrap</p>\n```\n\n### v4.2 Features (February 2026)\n\n```tsx\n// Logical block properties (RTL/writing-mode aware)\n<div className=\"pbs-4 pbe-8 mbs-2\">\n<div className=\"border-bs-2 border-be\">\n\n// Logical sizing (replaces w-*/h-* for logical layouts)\n<div className=\"inline-full block-screen\">\n\n// Font feature settings\n<p className=\"font-features-['tnum','liga']\">Tabular numbers</p>\n\n// New color palettes: mauve, olive, mist, taupe\n<div className=\"bg-mauve-100 text-olive-900\">\n```\n\n**Deprecation:** `start-*`/`end-*` deprecated in favor of `inset-s-*`/`inset-e-*`.\n\n## OKLCH Colors\n\nAll shadcn/ui colors use OKLCH format: `oklch(lightness chroma hue)`. Lightness 0-1, chroma 0-0.4 (0 = gray), hue 0-360. Base palettes: Neutral, Zinc, Slate, Stone, Gray. See [theming.md](theming.md) for complete palettes and OKLCH reference.\n\n## Best Practices\n\n### Prefer Semantic Colors\n\n```tsx\n// Good - uses theme\n<div className=\"bg-background text-foreground\">\n\n// Avoid - hardcoded\n<div className=\"bg-white text-black dark:bg-zinc-950\">\n```\n\n### Group Related Utilities\n\n```tsx\n<div className=\"\n  flex items-center justify-between\n  rounded-lg border\n  bg-card text-card-foreground\n  p-4 shadow-sm\n  hover:bg-accent\n\">\n```\n\n### Avoid Arbitrary Values\n\n```tsx\n// Prefer design tokens\n<div className=\"p-4 text-sm\">\n\n// Avoid when unnecessary\n<div className=\"p-[17px] text-[13px]\">\n```\n\n## Installation & CLI\n\n```bash\n# Create new project with visual style + primitive selection\nnpx shadcn create\n\n# Initialize in existing project\npnpm dlx shadcn@latest init\n\n# Add components\npnpm dlx shadcn@latest add button card form\n\n# Add from community registries\nnpx shadcn add @acme/button @internal/auth-system\n\n# View/search registries\nnpx shadcn view @acme/auth-system\nnpx shadcn search @tweakcn -q \"dark\"\nnpx shadcn list @acme\n\n# Add MCP server for AI integration\nnpx shadcn@latest mcp init\n\n# Update existing components\npnpm dlx shadcn@latest add button --overwrite\n```\n\n### Visual Styles\n\n`npx shadcn create` offers 5 built-in visual styles:\n- **Vega** - Classic shadcn/ui look\n- **Nova** - Compact, reduced padding\n- **Maia** - Soft and rounded, generous spacing\n- **Lyra** - Boxy and sharp, pairs with mono fonts\n- **Mira** - Dense, for data-heavy interfaces\n\nThese rewrite component code (not just CSS variables) to match the selected style.\n\n## Troubleshooting\n\n**Colors not updating:** Check CSS variable in globals.css → verify `@theme inline` includes the mapping → clear build cache.\n\n**Dark mode flash on load:** Add `suppressHydrationWarning` to `<html>` tag and ensure ThemeProvider wraps app with `attribute=\"class\"`.\n\n**Found `tailwind.config.js`:** Delete it. Run `npx @tailwindcss/upgrade` to auto-migrate to CSS-first config. All customization belongs in your CSS file via `@theme`, `@utility`, `@plugin`.\n\n**Classes not detected:** Check `@source` directives cover your component paths. Never construct class names dynamically (see Critical Rules).\n\n## Component Patterns\n\nFor detailed component patterns see [components.md](components.md):\n- **Composition**: asChild pattern, data-slot attributes\n- **Typography**: Heading scales, prose styles, inline code\n- **Forms**: React Hook Form + Zod, Field component with FieldSet/FieldGroup\n- **Icons**: Lucide icons with data-icon attributes\n- **Inputs**: OTP, file, grouped inputs\n- **Dialogs**: Modal patterns and composition\n- **Data Tables**: TanStack table integration\n- **Toasts**: Sonner notifications\n- **Pitfalls**: cn() order, form defaultValues, dialog nesting, sticky, server/client\n\n## Resources\n\nSee [theming.md](theming.md) for complete color system reference:\n- `@theme` vs `@theme inline` (critical for dark mode)\n- Status color extensions (success, warning, info)\n- Z-index scale and animation tokens\n- All base palettes (Neutral, Zinc, Slate, Stone, Gray)\n\n## Summary\n\nKey concepts:\n- **v4 CSS-first only** - no `tailwind.config.js`, all config in CSS\n- **Semantic colors only** - never use raw palette (`bg-blue-500`), always `bg-primary`\n- **Always pair** `bg-*` with `text-*-foreground`\n- **Never build class names dynamically** - use object lookup with complete strings\n- **cn() order** - defaults first, consumer `className` last\n- **No `transition-all`** - transition only specific properties\n- **`@theme inline`** for dynamic theming, `@theme` for static tokens\n- Author components as plain functions with `data-slot` (React 19)\n- Apply CVA for component variants\n- Use `motion-safe:` / `motion-reduce:` for animations\n- Choose Radix UI or Base UI as primitive library\n\nThis skill targets Tailwind CSS v4.2 with shadcn/ui. For component-specific examples, see [components.md](components.md). For color system, see [theming.md](theming.md).","tags":["shadcn","tailwind","skills","tenequm","agent-skills","ai-agents","claude-code","claude-skills","clawhub","erc-8004","mpp","openclaw"],"capabilities":["skill","source-tenequm","skill-shadcn-tailwind","topic-agent-skills","topic-ai-agents","topic-claude-code","topic-claude-skills","topic-clawhub","topic-erc-8004","topic-mpp","topic-openclaw","topic-skills","topic-solana","topic-x402"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/tenequm/skills/shadcn-tailwind","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add tenequm/skills","source_repo":"https://github.com/tenequm/skills","install_from":"skills.sh"}},"qualityScore":"0.461","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 23 github stars · SKILL.md body (14,571 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T01:01:40.608Z","embedding":null,"createdAt":"2026-04-18T23:05:24.246Z","updatedAt":"2026-04-22T01:01:40.608Z","lastSeenAt":"2026-04-22T01:01:40.608Z","tsv":"'-0.4':990 '-0.5':727 '-1':475,987 '-10':563 '-2':452,552 '-2.5':725 '-3':557 '-360':995 '-4':550 '-50':483 '-500':169 '-8':555,565 '-9':548,568 '/90':499,512 '/h-':944 '/legacy':861 '/lib/utils':438 '0':314,315,319,320,324,325,331,332,336,337,343,344,348,349,359,360,364,365,369,370,376,377,871,872,986,989,991,994 '0.145':318,358 '0.2':267 '0.205':323,375,870 '0.5':351 '0.556':342 '0.6':266 '0.922':347,368 '0.97':335 '0.985':330,363 '1':313 '100':857 '19':422,1435 '200':858 '2026':933 '250':268 '3.0':38 '4':542 '5':1122 '50':856 '500':181,186,1379 'accent':524,529,533 'access':53,797 'acm':1094 'acme/auth-system':1084 'acme/button':1077 'add':688,1060,1066,1070,1076,1095,1113,1193 'ai':1099 'alway':128,143,687,1380,1384 'anim':118,122,222,892,897,1345,1449 'app':1201 'appli':1436 'arbitrari':1028 'aschild':1260 'attribut':420,1203,1265,1289 'author':410,434,1425 'auto':672,1214 'auto-migr':1213 'avoid':1021,1027,1034 'awar':917,939 'background':311,356,386,388,403,407,520 'badg':709 'badgevari':712 'base':34,84,996,1348,1454 'bash':1039 'belong':1223 'best':1012 'bg':145,167,179,184,488,497,502,510,519,523,528,744,756,767,854,1377,1382,1386 'bg-accent':522,527 'bg-background':518 'bg-blue':183,1376 'bg-destruct':501,509,766 'bg-primari':487,496,743,1381 'bg-red':178,853 'bg-secondari':755 'block':936 'blue':182,185,1378 'border':345,514,516,723,741,753,764 'border-input':515 'border-transpar':740,752,763 'bottom':914 'boxi':1143 'brand':264 'break':141,162 'breakpoint':620,634 'build':4,44,52,156,1186,1391 'built':1124 'built-in':1123 'button':581,587,590,594,1067,1114 'buttonvari':210,218,440,597 'cach':1187 'card':697,792,1068 'caus':229 'center':447,450,719,779 'chang':236,259,614 'check':1174,1235 'choos':1450 'chroma':983,988 'class':60,157,432,642,1204,1232,1244,1392 'class-variance-author':431 'classic':1129 'classnam':166,190,199,208,213,215,217,582,595,600,1406 'clear':1185 'cli':37,1038 'click':603 'close':806 'cn':193,209,216,436,596,1309,1401 'code':1160,1272 'color':17,109,131,168,192,263,273,288,385,390,395,404,464,667,736,835,867,888,954,974,977,1016,1171,1323,1335,1370,1476 'color-background':384 'color-brand':262 'color-foreground':389 'color-primari':272,394,866,887 'colormap':176,191 'common':694 'communiti':1072 'compact':1133 'complet':171,1007,1322,1399 'compon':18,63,401,409,412,695,1061,1108,1159,1240,1250,1254,1279,1426,1439,1469 'component-specif':1468 'components.md':279,280,1257,1258,1473,1474 'composit':1259,1299 'concept':1357 'config':106,1220,1366 'configur':71,99,817 'const':175,188,439,711 'construct':1243 'consum':198,1405 'contain':638,652,657 'content':114,701,782,787 'control':849 'core':291 'correct':134,170,214,232,237 'cover':12,1238 'creat':74,1040,1050,1120 'critic':89,1248,1330 'css':8,13,51,57,69,94,102,123,254,260,293,300,306,815,818,864,881,893,898,1163,1175,1218,1226,1360,1368,1463 'css-first':68,93,814,1217,1359 'custom':821,837,840,1222 'custom-vari':839 'cva':21,427,441,713,1437 'dark':24,138,257,353,355,658,662,670,673,685,1090,1188,1332 'dashboard':788 'data':418,592,609,1154,1263,1287,1300,1432 'data-heavi':1153 'data-icon':608,1286 'data-slot':417,591,1262,1431 'default':82,196,486,546,571,573,739,1403 'defaultvalu':1312 'defaultvari':569 'delet':1207 'dens':1151 'deprec':960,963 'descript':700 'design':23,616,1032 'destruct':500,503,506,511,762,768,771 'detail':1253 'detect':1234 'dialog':807,1295,1313 'differ':631 'direct':863,1237 'disabl':476,481,808 'div':165,189 'dlx':1056,1063,1110 'dynam':159,277,1246,1394,1419 'e':972 'effect':909 'email':706 'end':962 'ensur':1198 'event':479 'everyth':100 'exampl':1471 'exist':1053,1107 'extend':149 'extens':1336 'fade':908,910 'favor':965 'featur':29,813,901,931,949 'februari':932 'field':704,1278 'fieldset/fieldgroup':1281 'file':1227,1292 'fine':844,847 'first':70,95,197,619,641,816,1219,1361,1404 'first-class':640 'flash':693,1190 'flex':444,716 'focus':466,472,799 'focus-vis':465,471 'follow':256 'font':460,732,874,948,1149 'font-medium':459 'font-san':873 'font-semibold':731 'footer':702 'foreground':148,316,328,340,361,373,391,393,493,507,534,749,761,772,776,1389 'form':703,919,1069,1273,1276,1311 'format':980 'forwardref':424,579 'found':1205 'full':795 'function':415,575,580,1429 'gap':451 'generat':612 'generous':1140 'ghost':525 'globals.css':307,1178 'good':1018 'gradient':905 'gray':992,1002,1354 'grid':625,789 'group':1023,1293 'h':547,554,562 'hardcod':1022 'head':1267 'heavi':1155 'helper':707 'hide':628 'highlight':829,834 'hook':1275 'hover':495,508,521,526,530,543,852 'hue':984,993 'icon':566,605,610,1282,1284,1288 'import':119,426,435,819,894 'includ':1182 'index':1342 'info':1339 'init':1059,1105 'initi':1051 'inlin':244,252,271,383,443,715,851,886,1181,1271,1329,1417 'inline-flex':442,714 'input':517,1290,1294 'inset':968,971 'inset-':967,970 'instal':1037 'integr':1100,1304 'inter':876 'interact':923 'interfac':45,1156 'internal/auth-system':1078 'item':446,718 'items-cent':445,717 'js/ts':105 'justifi':449 'justify-cent':448 'key':1356 'last':200,205,1407 'last-win':204 'latest':1058,1065,1103,1112 'layer':124,824 'layout':230,632,777,780,784,947 'lg':561 'librari':88,1458 'light':308,686,982,985 'link':535 'list':1093 'load':1192 'logic':935,940,946 'long':927 'look':1131 'lookup':174,1397 'lucid':1283 'lyra':1142 'maia':1136 'manual':669,675 'map':302,380,1184 'mask':906 'match':1166 'mauv':956 'mcp':1096,1104 'md':455,722 'media':845 'medium':461 'merg':194,203 'migrat':103,1215 'mira':1150 'mist':958 'mobil':618,624,630 'mobile-first':617 'modal':1296 'mode':25,139,258,309,354,659,674,1189,1333 'modifi':76 'mono':1148 'motion':240,1443,1446 'motion-reduc':1445 'motion-saf':1442 'mute':333,339 'muted-foreground':338 'name':127,158,656,1245,1393 'need':648 'nest':1314 'neutral':998,1350 'never':73,155,1242,1372,1390 'new':953,1041 'next':679 'next-them':678 'none':470,480,830 'notif':1307 'nova':1132 'npx':1048,1074,1081,1085,1091,1101,1118,1210 'number':952 'object':1396 'offer':1121 'offset':541 'oklch':16,265,312,317,322,329,334,341,346,357,362,367,374,869,973,979,981,1010 'oliv':957 'omit':405 'opac':482 'order':195,1310,1402 'otp':1291 'outlin':469,513,773 'outline-non':468 'overflow':924 'overrid':248,671,676 'overwrit':1115 'pad':1135 'pair':144,1146,1385 'palett':955,997,1008,1349,1375 'path':1241 'pattern':64,292,411,696,778,798,884,1251,1255,1261,1297 'per':633 'perform':223 'pitfal':283,1308 'plain':414,574,1428 'plugin':110,111,250,647,1231 'pnpm':1055,1062,1109 'pointer':478,843,846,916 'pointer-awar':915 'pointer-events-non':477 'pointer-fin':842 'practic':1013 'prefer':665,1014,1031 'prefix':663 'prevent':692 'primari':274,276,321,327,366,372,396,398,489,492,498,538,745,748,868,889,891,1383 'primary-foreground':326,371 'primit':36,87,1046,1457 'project':1042,1054 'prop':585,601 'properti':937,1415 'prose':1269 'px':549,556,564,724 'py':551,726 'q':1089 'queri':639 'radius':350 'radix':31,80,1451 'raw':1374 'react':421,1274,1434 'react.componentprops':577,586 'reader':803 'red':177,180,855 'reduc':239,1134,1447 'refer':253,290,1011,1325 'registri':1073,1080 'regular':793,794 'relat':1024 'rem':352 'replac':823,942 'resourc':1317 'respect':135,238 'respond':650 'respons':22,615,635 'return':589 'rewrit':1158 'ring':474 'root':310 'round':454,721,1139 'rounded-md':453,720 'rtl/writing-mode':938 'rule':90,1249 'run':1209 'safe':1444 'san':875 'save':613 'scale':1268,1343 'scanner':164 'screen':802 'search':1087 'secondari':751,757,760 'see':278,1003,1247,1256,1318,1472,1478 'select':1047,1168 'semant':130,299,666,1015,1369 'semibold':733 'server':1097 'server/client':1316 'set':950 'setthem':684 'shadcn':2,1049,1057,1064,1075,1082,1086,1092,1102,1111,1119 'shadcn-tailwind':1 'shadcn/ui':11,62,297,883,976,1130,1466 'shadow':494,750,904 'sharp':1145 'sidebar':783,786 'size':212,220,545,567,572,584,599,637,918,941 'skill':1460 'skill-shadcn-tailwind' 'slate':1000,1352 'slot':419,593,1264,1433 'sm':458,553 'soft':1137 'sonner':1306 'sourc':115,848,850,859,1236 'source-tenequm' 'space':606,1141 'specif':1414,1470 'stack':622 'start':961 'state':809 'static':246,269,1423 'status':1334 'sticki':1315 'stone':1001,1353 'string':172,928,1400 'style':41,48,1045,1117,1127,1169,1270 'success':1337 'success/warning/info':151 'suffix':408 'summari':1355 'support':30,79 'suppresshydrationwarn':689,1194 'system':289,878,1324,1477 'system-ui':877 'tab':828 'tab-highlight-non':827 'tabl':1301,1303 'tablet':627 'tabular':951 'tag':1196 'tai':47 'tailwind':3,7,27,50,56,65,97,163,202,304,378,644,811,1462 'tailwind-merg':201 'tailwind.config.js':77,92,1206,1364 'tailwind.config.ts':78 'tailwindcss':117,820 'tailwindcss-anim':116 'tailwindcss/upgrade':1211 'tanstack':1302 'tap':833 'target':1461 'taup':959 'text':147,457,491,505,532,537,559,636,708,729,747,759,770,775,903,1388 'text-accent-foreground':531 'text-destructive-foreground':504,769 'text-foreground':774 'text-primari':536 'text-primary-foreground':490,746 'text-secondary-foreground':758 'text-sm':456 'text-x':558,728 'theme':108,136,142,241,243,245,251,261,270,296,382,680,862,865,885,1020,1180,1229,1326,1328,1416,1420,1421 'theme.extend.colors':107 'themeprovid':1199 'theming.md':153,154,285,286,1004,1005,1319,1320,1479,1480 'thrash':231 'titl':699 'toast':1305 'toggl':682 'token':132,247,1033,1346,1424 'topic-agent-skills' 'topic-ai-agents' 'topic-claude-code' 'topic-claude-skills' 'topic-clawhub' 'topic-erc-8004' 'topic-mpp' 'topic-openclaw' 'topic-skills' 'topic-solana' 'topic-x402' 'transit':227,233,463,735,1410,1412 'transition-al':226,1409 'transition-color':462,734 'transpar':742,754,765,836,912 'troubleshoot':1170 'tsx':133,160,207,224,402,425,611,621,649,660,698,705,710,781,785,790,801,805,810,899,902,934,1017,1026,1030 'tw':121,896 'tw-animate-css':120,895 'tweakcn':1088 'type':428 'typographi':1266 'ui':5,32,35,54,81,85,879,1452,1455 'underlin':540,544 'underline-offset':539 'unnecessari':1036 'updat':1106,1173 'usag':399,602 'use':42,55,67,129,298,413,661,677,978,1019,1373,1395,1441 'user':922 'usethem':683 'util':59,113,125,126,305,822,825,826,1025,1230 'v4':9,58,66,98,379,645,812,1358 'v4.1':900 'v4.2':28,930,1464 'valid':920 'valu':1029 'var':275,387,392,397,890 'variabl':14,255,294,301,381,882,1164,1176 'varianc':433 'variant':19,211,219,484,485,570,583,598,737,738,838,841,1440 'variantprop':429,588 'vega':1128 'verifi':1179 'verylongwordthatneedstowrap':929 'via':173,1228 'view':1083 'view/search':1079 'viewport':655 'visibl':467,473,800 'visual':40,1044,1116,1126 'vs':242,1327 'w':943 'warn':1338 'webkit':832 'webkit-tap-highlight-color':831 'wide':791 'width':653,796 'win':206 'wrap':925,1200 'wrong':140,161,221,225 'xs':560,730 'z':1341 'z-index':1340 'zinc':999,1351 'zod':1277","prices":[{"id":"0c1838b2-9ed6-4c3a-bff5-7686640fc180","listingId":"4900c43b-b2c1-4ed2-968d-288ef1092be6","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"tenequm","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T23:05:24.246Z"}],"sources":[{"listingId":"4900c43b-b2c1-4ed2-968d-288ef1092be6","source":"github","sourceId":"tenequm/skills/shadcn-tailwind","sourceUrl":"https://github.com/tenequm/skills/tree/main/skills/shadcn-tailwind","isPrimary":false,"firstSeenAt":"2026-04-18T23:05:24.246Z","lastSeenAt":"2026-04-22T01:01:40.608Z"}],"details":{"listingId":"4900c43b-b2c1-4ed2-968d-288ef1092be6","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"tenequm","slug":"shadcn-tailwind","github":{"repo":"tenequm/skills","stars":23,"topics":["agent-skills","ai-agents","claude-code","claude-skills","clawhub","erc-8004","mpp","openclaw","skills","solana","x402"],"license":"mit","html_url":"https://github.com/tenequm/skills","pushed_at":"2026-04-14T16:24:57Z","description":"Agent skills for building, shipping, and growing software products","skill_md_sha":"fb3c13770dd77ea8cc4a2ddc40b339cf0eae98b7","skill_md_path":"skills/shadcn-tailwind/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/tenequm/skills/tree/main/skills/shadcn-tailwind"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"shadcn-tailwind","description":"Build UIs with Tailwind CSS v4 and shadcn/ui. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tailwind, styling shadcn/ui components, implementing themes, or working with utility-first CSS. Triggers on tailwind, shadcn, utility classes, CSS variables, OKLCH, component styling, theming, dark mode, radix ui."},"skills_sh_url":"https://skills.sh/tenequm/skills/shadcn-tailwind"},"updatedAt":"2026-04-22T01:01:40.608Z"}}