01
It starts by itself
PR changes components/ui. Runs in GitHub Actions or Claude Code routine.
- ↻ PR changes components/ui
pull_request paths: components/ui/**
google-labs-code · 53K installsshadcn/ui skill
Runs by itself, when screen parts change.
New screen parts get checked every time.
Install the shadcn/ui skill and make it a habit: follow https://gethabit.dev/skills/google-labs-code/shadcn-ui.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
53K installs9K starsApache-2.0 licenceSource on GitHub ↗
shadcn/ui
by google-labs-code · 53K installs
The skill
Helps you add and tune ready-made parts for your website screens.
Only when you ask.
Fewer bugs
New screen parts get checked every time. Fewer bugs and a cleaner site.
↻ Runs by itselfwhen screen parts change
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one pull request and at most 2 fix retries per run.
- 01
List changed components
The agent reads the diff and lists new or changed files in components/ui.
- 02
Check metadata
It uses get_component_metadata to confirm each component's dependencies are in package.json.
- 03
Review the code
It checks cn() for class merging, cva for variants and ARIA attributes kept.
- 04
Check wrappers
It makes sure custom wrappers sit in components/ and not in components/ui/.
- 05
Type check and lint
It runs tsc --noEmit and the linter and fixes errors it caused.
- 06
Log results
It writes the checked components and any open accessibility notes to the run log.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only incomponents/**, loops/shadcn-component-check-loop/**
- Talks toapi.github.com
- Sendsnothing
- Your OKNothing goes out, so it needs no OK.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the shadcn/ui skill helps.
Use it when
- ✓ You add shadcn/ui components to a React app
- ✓ You set up components.json or theme variables
- ✓ Imports or styles break after install
Skip it when
- – Your project does not use Tailwind CSS
- – You want a packaged npm component library
shadcn/ui skill, answered.
Does it test accessibility?
The skill suggests tools like axe DevTools and screen reader tests. The loop logs those as notes; the hard gate is types and lint.
Does it install components?
It can use npx shadcn@latest add, but this loop checks components that a PR already added.
Does it work with Base UI?
Yes. shadcn/ui supports Radix UI or Base UI primitives, and the checks are the same.
How do I install the shadcn/ui skill?
Copy the prompt at the top into your agent. It installs the skill from google-labs-code/stitch-skills and sets up the habit. Or run npx skills add google-labs-code/stitch-skills --skill shadcn-ui.
Is the shadcn/ui skill free?
Yes. It is published under Apache-2.0. Habit is free too.
shadcn/ui. Now as a habit.
Install the shadcn/ui skill and make it a habit: follow https://gethabit.dev/skills/google-labs-code/shadcn-ui.md
All google-labs-code skills →More code skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by google-labs-code, published under Apache-2.0. Habit links to the original and never changes it. Is this your skill?