shadcn-ui: a Claude Code skill by Giuseppe Trisciuoglio

For React developers setting up shadcn/ui components, Zod forms and Tailwind themes. Skip it if your project does not use React and Tailwind CSS.

Copy install command View the source

Score: 64of 100
Rank: #215of 239
Installs: 22.7Kon skills.sh
Security: Clear 5 scanners
Updated: Sep 102026
Context: ~96tokens always

Install

npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill shadcn-ui

Run it in your terminal. View the source

Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app

What does shadcn-ui do?

shadcn-ui is a skill that walks Claude through adding the shadcn/ui component library to a React or Next.js project. It covers npx shadcn@latest init, installing components such as button, form, dialog, sheet, select, toast, table and chart, and the supporting packages. Code samples show button variants, a login form built with React Hook Form and Zod validation, dialogs, toast calls and a TanStack data table. Reference files go deeper on setup, forms, Recharts charts, Next.js App Router integration and custom variants. It also warns that components are fetched from a remote registry and copied into your code, so review them before production.

When should you use shadcn-ui?

Use it when

You are starting a Next.js app with shadcn/ui
You need a validated form with React Hook Form and Zod
You want dark mode through CSS variables

Skip it when

Your stack is Vue, Svelte or plain HTML
You don't use Tailwind CSS

What it needs and what it can touch

You need

Node.js with npm and npx
A React project with Tailwind CSS

What it can do

Runs shell commands (npx shadcn, npm install)
Reads, writes and edits project files
Downloads component code from the shadcn registry

From reading its instructions, not from running it.

Why it scores 64

Strongest on quality (100 of 100), weakest on adoption (36).

Adoption35 points 36
Upkeep20 points 84
Trust20 points 65
Quality15 points 100
Reader answers10 points Not enough answers yet, so this does not count

How the formula works

Is shadcn-ui safe to install?

Every scanner that checked it passed it. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.

Scanner	Result	Date
Gen Agent Trust Hub	Passed	Sep 15, 2026
Socket	Passed	Sep 15, 2026
Snyk	Low risk	Sep 15, 2026
Runlayer	Low risk	Mar 1, 2026
ZeroLeaks	Passed	Apr 16, 2026

Details

Installs: 22,686
Repository stars: 367
Last repository change: Sep 10, 2026
Tokens always loaded: about 96
Tokens when used: about 2,767
License: MIT
Data confidence: High

Alternatives to shadcn-ui

All skills for this job

tailwind-design-system

For developers setting up a component library or design tokens on Tailwind CSS v4.

Score 76 73K installs

Get tailwind-design-system
shadcn

For React developers on shadcn/ui who want Claude to add and compose components through the CLI.

Score 93 415K installs Official

Get shadcn
clerk-custom-ui

For apps on Clerk that need their own sign-in screens or Clerk components styled to match the brand.

Score 78 57.6K installs Official

Get clerk-custom-ui
migrate-radix-to-base

For shadcn and React teams moving off Radix UI to Base UI one component at a time.

Score 84 49.9K installs Official

Get migrate-radix-to-base