How do I install the Shadcn UI Builder skill?

Run npx skillmds@latest add tomevault-io/shadcn-ui-builder 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 Shadcn UI Builder safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shadcn UI Builder?

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 Shadcn UI Builder free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Shadcn UI Builder?

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

Shadcn UI Builder by tomevault-io — Agent Skill

Name: Shadcn UI Builder
Author: tomevault-io

File contents

shadcn/ui builder (monorepo + Tailwind v4)

Use this skill when you need to add or update UI components/blocks via the shadcn CLI, or when refactoring UI to follow the repo’s conventions.

Hard rules (this repo)

Don’t hardcode Tailwind palette colors. Use semantic tokens like bg-background, text-foreground, border-border, etc.
Prefer shared components from @workspace/ui/*.
Keep filenames kebab-case.

Where components live

Shared UI components: packages/ui/src/components/* (import as @workspace/ui/components/<name>)
Shared UI styles: packages/ui/src/styles/globals.css
App-specific composition/components: apps/user-application/src/components/*

shadcn CLI (latest)

The shadcn CLI supports monorepos. In this repo, each workspace has a components.json that tells the CLI where to write files.

Inspect registry items before adding

View an item: pnpm dlx shadcn@latest view button
Search/list items: pnpm dlx shadcn@latest search @shadcn -q "dialog"

Add components (recommended)

Run from the app workspace so the CLI can resolve monorepo paths correctly:

From repo root: pnpm dlx shadcn@latest add button --cwd apps/user-application
Or cd first: cd apps/user-application && pnpm dlx shadcn@latest add button

Notes:

Adding a “block” (e.g. login-01) may install primitives into packages/ui and the composed block into the app.
If you need to control where files land, use --path (and prefer app-level composition in apps/user-application/src/components).

Updating existing components

Shadcn recommends re-adding components to pick up upstream improvements. This overwrites local modifications.

Commit first.
Then (example): pnpm dlx shadcn@latest add --all --overwrite --cwd apps/user-application

Tailwind v4 + React 19 notes (upstream)

Tailwind v4 shadcn components use CSS variables and @theme inline patterns.
Many components removed forwardRef and added data-slot attributes for styling.
toast is deprecated upstream in favor of sonner.

Quick repo sanity checks after UI changes

Lint UI package: pnpm --filter @workspace/ui lint
Typecheck user app: pnpm -C apps/user-application tsc --noEmit
Typecheck UI package: pnpm -C packages/ui tsc --noEmit

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: shadcn-ui-builderdescription: Use this when adding/updating shadcn/ui components or blocks in this monorepo (Tailwind v4, shared UI package, CSS variable theming).---# shadcn/ui builder (monorepo + Tailwind v4)Use this skill when you need to add or update UI components/blocks via the shadcn CLI, or when refactoring UI to follow the repo’s conventions.## Hard rules (this repo)- Don’t hardcode Tailwind palette colors. Use semantic tokens like `bg-background`, `text-foreground`, `border-border`, etc.- Prefer shared components from `@workspace/ui/*`.- Keep filenames kebab-case.## Where components live- Shared UI components: `packages/ui/src/components/*` (import as `@workspace/ui/components/<name>`)- Shared UI styles: `packages/ui/src/styles/globals.css`- App-specific composition/components: `apps/user-application/src/components/*`## shadcn CLI (latest)The shadcn CLI supports monorepos. In this repo, each workspace has a `components.json` that tells the CLI where to write files.### Inspect registry items before adding- View an item: `pnpm dlx shadcn@latest view button`- Search/list items: `pnpm dlx shadcn@latest search @shadcn -q "dialog"`### Add components (recommended)Run from the app workspace so the CLI can resolve monorepo paths correctly:- From repo root: `pnpm dlx shadcn@latest add button --cwd apps/user-application`- Or cd first: `cd apps/user-application && pnpm dlx shadcn@latest add button`Notes:- Adding a “block” (e.g. `login-01`) may install primitives into `packages/ui` and the composed block into the app.- If you need to control where files land, use `--path` (and prefer app-level composition in `apps/user-application/src/components`).### Updating existing componentsShadcn recommends re-adding components to pick up upstream improvements. This overwrites local modifications.- Commit first.- Then (example): `pnpm dlx shadcn@latest add --all --overwrite --cwd apps/user-application`## Tailwind v4 + React 19 notes (upstream)- Tailwind v4 shadcn components use CSS variables and `@theme inline` patterns.- Many components removed `forwardRef` and added `data-slot` attributes for styling.- `toast` is deprecated upstream in favor of `sonner`.## Quick repo sanity checks after UI changes- Lint UI package: `pnpm --filter @workspace/ui lint`- Typecheck user app: `pnpm -C apps/user-application tsc --noEmit`- Typecheck UI package: `pnpm -C packages/ui tsc --noEmit`---> Converted and distributed by [TomeVault](https://tomevault.io/claim/ldsgroups225) — claim your Tome and manage your conversions.

Frequently asked questions

Shadcn UI Builder