Tailwind shadcn

Skill Deadlymind/nanolama/skills/tailwind-shadcn

A portable Claude Code skills library (plugin) for a Django 5.2 + Next.js 16 house stack: 30 model-agnostic, tenant-isolation-and-security-first skills.

Install

npx -y skills add Deadlymind/nanolama --skill tailwind-shadcn

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

21 days oldThe repository was created 21 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Implements the design system on a Next.js 16 frontend — Tailwind v4 CSS-first theming with @theme and OKLCH CSS variables, semantic surface/-foreground token pairs, light plus .dark sets, and shared shadcn/ui components extended via cva. Use when implementing an approved screen or component, adding or restyling a component, turning token roles into @theme CSS variables, wiring dark mode, coding a button/badge variant, or asking how theming works here. Not for deciding which tokens, component variants and patterns should exist — the system's definition and governance (see design-system), page/route structure or data fetching (see nextjs-module), or RTL and logical-property direction handling (see i18n-rtl).

SKILL.md

3.9 KB, as published. Nobody here has run it

Tailwind + shadcn/ui (implementing the design system)

When to use

Styling anything on the frontend: adding a component, restyling one, coding a color or spacing token, wiring dark mode, or adding a variant. The rule of thumb — reach for a token and a shared component before writing raw CSS or a new one-off. Which roles, variants, and patterns should exist is decided upstream in design-system; this skill turns those decisions into working code.

Pattern

Two invariants:

Colors and spacing are tokens, never raw values. Define them once as OKLCH CSS variables in @theme, in semantic surface / surface-foreground pairs, with a light set on :root and a dark override on .dark. No hex, no hsl(), no tailwind.config.js color map — Tailwind v4 is CSS-first.
Reuse the shared shadcn component; extend it with cva. Add a variant to the existing component instead of forking a new one, so every button/badge stays in sync.

Declare tokens CSS-first in your global stylesheet — semantic names, OKLCH, each paired with a -foreground; the .dark block overrides the same names:

/* app/globals.css */
@import "tailwindcss";
@theme {
  --color-surface: oklch(1 0 0);              /* page background */
  --color-surface-foreground: oklch(0.21 0.01 285);
  --color-primary: oklch(0.62 0.19 259);      /* brand */
  --color-primary-foreground: oklch(0.98 0 0);
  --radius-lg: 0.5rem;
}
.dark {
  --color-surface: oklch(0.21 0.01 285);      /* same names, dark values */
  --color-surface-foreground: oklch(0.98 0 0);
}

These generate utilities automatically — bg-surface, text-surface-foreground, bg-primary, rounded-lg. Toggle dark mode by putting .dark on <html>.

Extend the shared shadcn component with cva rather than forking one: define a cva(base, { variants, defaultVariants }) map keyed on token utilities only (e.g. bg-primary text-primary-foreground for a variant, h-8 px-3 for a size), export its VariantProps as the component's prop type, and consume it in markup with className={button({ variant: "ghost" })}. Never inline a hex or a magic px value.

Adapt to your repo

Rename the semantic tokens to your palette (surface, primary, accent, muted, destructive, border) and pick real OKLCH values — keep the -foreground pairing and the light/.dark split. Confirm your globals.css uses @import "tailwindcss" and @theme (v4), not a legacy tailwind.config.js theme.extend.colors. If shadcn's CLI scaffolded HSL variables, migrate them to OKLCH once, centrally.

Gotchas

No hardcoded hex/rgb/hsl in components and no arbitrary bg-[#...] — that value can't follow the theme into dark mode. Only tokens flip.
A color used without a matching -foreground fails contrast in one mode — always define and use the pair.
Don't reintroduce tailwind.config.js colors alongside @theme; pick CSS-first and keep tokens in one place, or the two drift.
Extend the shared component; a forked MyButton skips future token/a11y fixes.
Use logical utilities (ms-, me-, ps-, pe-) not ml-/pl- so RTL works (see i18n-rtl).