How do I install the 050103 Tailwind Implement skill?

Run npx skillmds@latest add natuleadan/050103-tailwind-implement in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is 050103 Tailwind Implement safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with 050103 Tailwind Implement?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is 050103 Tailwind Implement free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published 050103 Tailwind Implement?

natuleadan (@natuleadan) published this skill. Their other Agent Skills are listed on their SkillMD profile.

050103 Tailwind Implement by natuleadan

Name: 050103 Tailwind Implement
Author: natuleadan

File contents

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

---name: 050103-tailwind-implementdescription: Tailwind CSS v4 CSS-first configuration and shadcn/ui component composition — CVA factories, styling rules, forms, icons, Base vs Radix API.license: MIT---# Tailwind CSS v4 & shadcn/ui CompositionImplementation 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](references/tailwind-v4.md) || shadcn styling: semantic colors, gap-*, size-*, truncate, cn(), no dark: overrides, no z-index on overlays | [references/shadcn-styling.md](references/shadcn-styling.md) || shadcn forms: FieldGroup/Field, InputGroup, ToggleGroup, FieldSet, validation states | [references/shadcn-forms.md](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](references/shadcn-composition.md) || shadcn icons: data-icon, no sizing, pass as objects, stroke consistency, no emoji | [references/shadcn-icons.md](references/shadcn-icons.md) || Base vs Radix API: asChild vs render, Select, Accordion, Slider, ToggleGroup differences | [references/shadcn-base-radix.md](references/shadcn-base-radix.md) || Data Table with TanStack: column defs, sorting, filtering, pagination, row selection, visibility | [references/shadcn-data-table.md](references/shadcn-data-table.md) || Charts with Recharts: ChartContainer, bar/line/area/pie/radial, tooltip, legend | [references/shadcn-charts.md](references/shadcn-charts.md) |## When to Use| Trigger | Use ||---|---|| Setting up Tailwind v4 theme | [references/tailwind-v4.md](references/tailwind-v4.md) || Building form UI | [references/shadcn-forms.md](references/shadcn-forms.md) || Composing Card/Dialog/Sheet | [references/shadcn-composition.md](references/shadcn-composition.md) || Placing icons in buttons | [references/shadcn-icons.md](references/shadcn-icons.md) || Deciding asChild vs render | [references/shadcn-base-radix.md](references/shadcn-base-radix.md) || Using semantic colors correctly | [references/shadcn-styling.md](references/shadcn-styling.md) || Building a data table with TanStack | [references/shadcn-data-table.md](references/shadcn-data-table.md) || Building charts with Recharts | [references/shadcn-charts.md](references/shadcn-charts.md) |

Frequently asked questions

050103 Tailwind Implement