# Build shadcn/ui Interfaces Faster

Modern React teams need consistent shadcn/ui components without repeated setup research. This skill guides component selection, installation, theming, migration, and quality checks.

## Install

```bash
npx skillstore add google-labs-code/shadcn-ui
```

## Metadata

- Status: approved
- Slug: google-labs-code-shadcn-ui
- Skillstore revision: r1
- Version status: missing
- Tree hash: 501863db7e3305a3f30d8f70c7648a6b7f3e8a4e2ffd3540a3747ffebcd24bb3
- Author: google-labs-code
- GitHub username: google-labs-code
- License: MIT
- Repository: https://github.com/google-labs-code/stitch-skills/tree/main/skills/shadcn-ui/
- Ref: 30c73eac2afe762f6aa9c4553158769369d47351
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: filesystem, external\_commands, scripts, network
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/google-labs-code-shadcn-ui
- Manifest: https://skillstore.pages.dev/api/skills/google-labs-code-shadcn-ui/manifest

## Capabilities

- Explains shadcn/ui setup for new and existing React projects.
- Guides component discovery with shadcn MCP tools and registry workflows.
- Provides theming, typography, variant, and wrapper component patterns.
- Shows form, authentication, and data table implementation examples.
- Covers migration guidance from common React UI libraries.
- Includes an optional shell script for local setup validation.

## Use Cases

- Add Components to a React App: Install and adapt shadcn/ui components while preserving Tailwind and project alias conventions.
- Standardize a Design System: Create shared theme tokens, variants, and wrapper components around copied shadcn/ui source.
- Migrate from Another UI Kit: Plan phased replacement of Material UI, Chakra UI, or Ant Design components with shadcn/ui patterns.

## Prompt Templates

### Add a Basic Component

```
Help me add a shadcn/ui Button to my React project. Explain the install step, imports, and a simple usage pattern.
```

### Set Up an Existing App

```
Review my project setup for shadcn/ui. Check Tailwind, components.json, aliases, and the cn utility before adding components.
```

### Customize Theme and Variants

```
Create a plan to customize shadcn/ui colors, typography, and button variants. Keep accessibility and dark mode support intact.
```

### Plan a UI Library Migration

```
Compare my current component library with shadcn/ui. Map replacements, migration order, risks, and validation checks for a staged rollout.
```

## Limitations

- It does not audit third-party npm package contents.
- It cannot guarantee that external shadcn documentation is current.
- Generated examples still need project-specific testing and review.
- CLI commands may modify files and install dependencies.

## Best Practices

- Use the shadcn CLI for standard components, then review the copied source before committing.
- Keep accessibility behavior, ARIA attributes, keyboard support, and focus indicators when customizing components.
- Run type checks, linting, visual review, and accessibility checks after component changes.

## Anti Patterns

- Do not install large component sets before deciding which screens need them.
- Do not overwrite custom component changes without reviewing upstream diffs.
- Do not remove Radix or Base UI behavior to solve styling issues quickly.

## Security Audit

- Audited at: 2026-07-05T14:37:49.688\+00:00
- Summary: Static analysis produced many alerts, but reviewed evidence shows markdown examples, relative documentation links, TypeScript annotations, and local verification commands. No evidence found of prompt injection, data exfiltration, credential access, or hidden execution. The skill uses Bash, Write, web fetch, and shadcn tools for normal component setup, so install commands should remain explicit.

## Stats

- Views: 443
- Downloads: 9
- Favorites: 0
- Popularity score: 0