Antigravity Skills - Build and Discover AI Agent SkillsAntigravity Skills

Shadcn/ui Skill · Development

shadcn/ui AI Agent Skill for Developers

Manage shadcn/ui components and projects with this AI skill.

Add components via CLI, compose UIs, and follow 4 core principles. Perfect for developers building modern design systems.

  • shadcn/ui
  • Tailwind CSS
  • design system
  • component library
  • CLI
  • React

About This Skill

The shadcn/ui skill helps developers manage components and projects with 4 core principles: use existing components first, compose don't reinvent, use built-in variants, and use semantic colors. It supports adding components via CLI and retrieving documentation.

Quick Start

  1. 1Initialize a shadcn project: npx shadcn@latest init
  2. 2Add a component: npx shadcn@latest add button
  3. 3Search registries before writing custom UI: npx shadcn@latest search
Example Command
npx shadcn@latest add card

Core Capabilities

Use Existing Components First

Search registries with `npx shadcn@latest search` before writing custom UI. Check community registries for reusable components.

Compose, Don't Reinvent

Build complex UIs by composing existing components: Settings page = Tabs + Card + form controls; Dashboard = Sidebar + Card + Chart + Table.

Use Built-in Variants

Leverage built-in variants like `variant="outline"` and `size="sm"` before writing custom styles.

Use Semantic Colors

Apply semantic color classes like `bg-primary` and `text-muted-foreground` instead of raw values like `bg-blue-500`.

Usage Examples

Before

No button component installed

After

Button component added to /components/ui/button.tsx

Input

Show me the documentation for the Card component

Output

npx shadcn@latest docs card

Input

Search for a table component in registries

Output

npx shadcn@latest search table

SKILL.md

---
name: shadcn
description: Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
user-invocable: false
risk: safe
source: https://github.com/shadcn-ui/ui/tree/main/skills/shadcn
date_added: "2026-03-07"
---

# shadcn/ui

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.

> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.

## When to Use
- Use when adding new components from shadcn/ui or community registries.
- Use when styling, composing, or debugging existing shadcn/ui components.
- Use when initializing a new project or switching design system presets.
- Use to retrieve component documentation, examples, and API references.

## Current Project Context

```json
!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'`
```

The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.

## Principles

1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.

## Critical Rules

These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.

### Styling & Tailwind → [styling.md](./rules/styling

Frequently Asked Questions

FAQ

Which package managers does shadcn/ui support?
shadcn/ui supports npm, pnpm, and bun. Use the project's package manager: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`.
Who is this skill for?
This skill is for frontend developers, UI engineers, and design system maintainers who use shadcn/ui to build modern, composable interfaces with Tailwind CSS.
How is shadcn/ui different from other UI libraries?
Unlike traditional UI libraries, shadcn/ui adds components as source code directly into your project via CLI, giving you full control over styling and customization without a separate package dependency.
Does shadcn/ui support languages other than TypeScript?
shadcn/ui components are written in TypeScript, but they can be used in JavaScript projects. The CLI and documentation are available in English.
What results can I expect from using this skill?
You can expect faster UI development by leveraging 4 core principles: using existing components, composing UIs, using built-in variants, and applying semantic colors. The skill helps you add components, retrieve docs, and follow best practices.

Discussion

Discussion

0 comments
U

On This Page

Trigger Phrases

Use these phrases to activate this skill in your AI coding assistant:

add shadcn componentshadcn initshadcn docsshadcn searchshadcn buttonshadcn cardshadcn variantshadcn semantic colorsshadcn composeshadcn community registryshadcn design systemshadcn project setup