050103 tailwind implement
Multi-domain agent skills collection for AI coding agents (Claude, Cursor, Copilot, OpenCode, and more). Covers programming, biology, cooking, and future domains. Installable via npx skills add.
npx -y skills add natuleadan/skills --skill 050103-tailwind-implementAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 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
Tailwind CSS v4 CSS-first configuration and shadcn/ui component composition — CVA factories, styling rules, forms, icons, Base vs Radix API.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
2.5 KB, as published. Nobody here has run it
Tailwind CSS v4 & shadcn/ui Composition
Implementation layer of frontend design — translating design tokens into @theme blocks and composing shadcn/components following the component system rules.
References
| Topic | File |
|---|---|
Tailwind v4: @theme, @custom-variant, @utility, @starting-style, container queries, CVA patterns, v3→v4 migration | references/tailwind-v4.md |
| shadcn styling: semantic colors, gap-, size-, truncate, cn(), no dark: overrides, no z-index on overlays | references/shadcn-styling.md |
| shadcn forms: FieldGroup/Field, InputGroup, ToggleGroup, FieldSet, validation states | references/shadcn-forms.md |
| shadcn composition: Card, Empty, Alert, sonner toast, Dialog/Sheet/Drawer Title, Button loading, Tabs, Avatar, Separator, Skeleton, Badge | references/shadcn-composition.md |
| shadcn icons: data-icon, no sizing, pass as objects, stroke consistency, no emoji | references/shadcn-icons.md |
| Base vs Radix API: asChild vs render, Select, Accordion, Slider, ToggleGroup differences | references/shadcn-base-radix.md |
| Data Table with TanStack: column defs, sorting, filtering, pagination, row selection, visibility | references/shadcn-data-table.md |
| Charts with Recharts: ChartContainer, bar/line/area/pie/radial, tooltip, legend | references/shadcn-charts.md |
When to Use
| Trigger | Use |
|---|---|
| Setting up Tailwind v4 theme | references/tailwind-v4.md |
| Building form UI | references/shadcn-forms.md |
| Composing Card/Dialog/Sheet | references/shadcn-composition.md |
| Placing icons in buttons | references/shadcn-icons.md |
| Deciding asChild vs render | references/shadcn-base-radix.md |
| Using semantic colors correctly | references/shadcn-styling.md |
| Building a data table with TanStack | references/shadcn-data-table.md |
| Building charts with Recharts | references/shadcn-charts.md |