1. Habit
  2. Skills
  3. shadcn skill
shadcn-ui · 119K installs

shadcn skill
Runs by itself, once a week.

Your parts stay current and your own edits stay safe.

Install the shadcn skill and make it a habit: follow https://gethabit.dev/skills/shadcn-ui/shadcn.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

119K installs126K starsMIT licenceSource on GitHub ↗

shadcn

by shadcn-ui · 119K installs

The skill

Adds and updates shadcn parts in your app.

Only when you ask.

Time saved

Your parts stay current and your own edits stay safe. Less manual work, fewer bugs.

↻ Runs by itselfonce a week

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

weekly component sync. Runs in Claude Code routine.

  • ↻ weekly component sync
  • 0 9 * * 1

02

It checks its work

typecheck and rules pass. If a check fails, it tells you.

  • ✓the project typecheck passes
  • ✓no space-x-* or space-y-* classes in changed files
  • ✓every Dialog, Sheet and Drawer has a Title
  • ✓--overwrite was never used without approval

03

It remembers

pending component merges. The next run reads it first: components with local changes waiting for a merge decision.

loops/shadcn-upstream-sync-loop/board.md

One run, step by step.
Then it stops.

Stop ruleStops after 10 components per run, with at most 1 retry.

  1. 01

    Get context

    Run npx shadcn@latest info to get installed components, aliases, base and iconLibrary.

  2. 02

    Preview

    For each component run add with --dry-run to list affected files.

  3. 03

    Diff

    Run add with --diff per file to compare upstream with local.

  4. 04

    Merge

    Take upstream where there are no local changes, and merge by hand where there are.

  5. 05

    Ask before overwrite

    Ask the user before using --overwrite on any file.

  6. 06

    Review

    Read changed files, check the critical rules and run the typecheck.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the shadcn skill helps.

Use it when

  • ✓ Your project has a components.json
  • ✓ You add or update shadcn components
  • ✓ You build a design system from a DESIGN.md

Skip it when

  • – You do not use shadcn/ui
  • – You only need plain CSS without components

Questions

shadcn skill, answered.

Will it fetch files from GitHub?

No. The skill says to always use the CLI, never raw files.

What if I changed a component?

The loop reads your file and applies upstream changes while keeping yours.

Does it switch presets?

No. Preset switches need your choice of overwrite, partial, merge or skip.

How do I install the shadcn skill?

Copy the prompt at the top into your agent. It installs the skill from shadcn-ui/ui and sets up the habit. Or run npx skills add shadcn-ui/ui --skill shadcn.

Is the shadcn skill free?

Yes. It is published under MIT. Habit is free too.

shadcn. Now as a habit.

Install the shadcn skill and make it a habit: follow https://gethabit.dev/skills/shadcn-ui/shadcn.md

  • Free
  • No account
  • Undo in one line

All shadcn-ui skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by shadcn-ui, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.