Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Tailwind CSS and shadcn/ui design system v1.0.0

Use this resource to set up the tokens, theme and components of a design system for a site

New

  • 413 downloads
  • 238 likes
  • 120 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install tailwind-shadcn-design-system

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent initializes Tailwind and shadcn/ui, writes color tokens as CSS variables in oklch, wires up the light and dark theme and wraps components in primitives that enforce your rules. Each step has a checkpoint. You get a centralized style base where a color changes in one place.

Mostly picked by

Updated November 2, 2026

Color token file and buttons shown in light and dark themes

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • Node.js
  • Tailwind CSS 4.1 or later
  • shadcn/ui
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: five steps with checkpoints, examples, constraints and best practices
  • references/component-wrapping.md: full primitive examples (Button, Text, Stack)
  • references/theming.md and globals.css.example: multiple themes and a starter token file

Good fit for

  • Creating the visual base of a new site with a brand palette
  • Adding a dark mode or several brand themes to an existing project
  • Enforcing consistent colors and components across a whole team

Not for

  • Designing the palette or logo (the skill assumes you already have your colors)
  • Projects that use neither Tailwind nor shadcn/ui
  • Installing a single component without touching the design system

Tags

  • tailwind
  • shadcn
  • tokens
  • theming
  • design-system

About

You say

"Set up a Tailwind v4 design system with shadcn/ui: tokens for my deep blue brand, dark mode and a wrapped button."

Color token file and buttons shown in light and dark themes

Skill published by giuseppe-trisciuoglio under the MIT license.

Show more

Prerequisites

You bring
Your brand colors and A web project running on Node.js (React or Next.js)
Dependencies
Node.js, Tailwind CSS 4.1 or later, and shadcn/ui

How to use it

  1. Copy the skill folder into your agent's skills directory.
  2. Give your brand colors and say whether you need a dark theme.
  3. Pass each checkpoint (build, tokens present, dark mode) before moving to the next step.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.5 KB
  • references/component-wrapping.md4.8 KB
  • references/globals.css.example7.8 KB
  • references/theming.md5.8 KB
  • SKILL.md9.7 KB

Origin and licence

Modified by PalateKit

Author
giuseppe-trisciuoglio
Source
github.com/giuseppe-trisciuoglio/developer-kit/tree/fe73fb33a09ee6562eeec7415a3f9a3bcf795177/plugins/developer-kit-typescript/skills/tailwind-design-system
Licence
MIT

Notice

Version modifiée de « tailwind-design-system » (giuseppe-trisciuoglio, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do I need to install other skills?

No. The skill names tailwind-css-patterns and shadcn-ui as companions but works with its own files.

Does it work with Tailwind v3?

The @theme directives need Tailwind v4.1 or later. For v3, use tailwind.config.js with theme.extend, as the skill notes.