Awesome-omni-skills shadcn

shadcn/ui workflow skill. Use this skill when the user needs Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/shadcn" ~/.claude/skills/diegosouzapw-awesome-omni-skills-shadcn && rm -rf "$T"

manifest: skills/shadcn/SKILL.md

shadcn/ui

Overview

This public intake copy packages

plugins/antigravity-awesome-skills-claude/skills/shadcn

from

https://github.com/sickn33/antigravity-awesome-skills

into the native Omni Skills editorial shape without hiding its origin.

Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.

This intake keeps the copied upstream files intact and uses

metadata.json

plus

ORIGIN.md

as the provenance anchor for review.

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.

Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: Current Project Context, Key Patterns, Component Selection, Key Fields, Updating Components, Limitations.

When to Use This Skill

Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.

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.
Use when the request clearly matches the imported source intent: Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
Use when the operator should preserve upstream workflow detail instead of rewriting the process from scratch.

Operating Table

Situation	Start here	Why it matters
First-time use	`metadata.json`	Confirms repository, branch, commit, and imported path before touching the copied workflow
Provenance review	`ORIGIN.md`	Gives reviewers a plain-language audit trail for the imported source
Workflow execution	`agents/openai.yml`	Starts with the smallest copied file that materially changes execution
Supporting context	`assets/shadcn-small.png`	Adds the next most relevant copied source file without loading the entire package
Handoff decision	`## Related Skills`	Helps the operator switch to a stronger native skill when the task drifts

Workflow

This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.

Get project context — already injected above. Run npx shadcn@latest info again if you need to refresh.
Check installed components first — before running add, always check the components list from project context or list the resolvedPaths.ui directory. Don't import components that haven't been added, and don't re-add ones already installed.
Find components — npx shadcn@latest search.
Get docs and examples — run npx shadcn@latest docs <component> to get URLs, then fetch them. Use npx shadcn@latest view to browse registry items you haven't installed. To preview changes to installed components, use npx shadcn@latest add --diff.
Install or update — npx shadcn@latest add. When updating existing components, use --dry-run and --diff to preview changes first (see Updating Components below).
Fix imports in third-party components — After adding components from community registries (e.g. @bundui, @magicui), check the added non-UI files for hardcoded import paths like @/components/ui/.... These won't match the project's actual aliases. Use npx shadcn@latest info to get the correct ui alias (e.g. @workspace/ui/components) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
Review added components — After adding a component or block from any registry, always read the added files and verify they are correct. Check for missing sub-components (e.g. SelectItem without SelectGroup), missing imports, incorrect composition, or violations of the Critical Rules. Also replace any icon imports with the project's iconLibrary from the project context (e.g. if the registry item uses lucide-react but the project uses hugeicons, swap the imports and icon names accordingly). Fix all issues before moving on.

Imported Workflow Notes

Imported: Workflow

Get project context — already injected above. Run
```
npx shadcn@latest info
```
again if you need to refresh.
Check installed components first — before running
```
add
```
, always check the
```
components
```
list from project context or list the
```
resolvedPaths.ui
```
directory. Don't import components that haven't been added, and don't re-add ones already installed.
Find components —
```
npx shadcn@latest search
```
.
Get docs and examples — run
```
npx shadcn@latest docs <component>
```
to get URLs, then fetch them. Use
```
npx shadcn@latest view
```
to browse registry items you haven't installed. To preview changes to installed components, use
```
npx shadcn@latest add --diff
```
.
Install or update —
```
npx shadcn@latest add
```
. When updating existing components, use
```
--dry-run
```
and
```
--diff
```
to preview changes first (see Updating Components below).
Fix imports in third-party components — After adding components from community registries (e.g.
```
@bundui
```
,
```
@magicui
```
), check the added non-UI files for hardcoded import paths like
```
@/components/ui/...
```
. These won't match the project's actual aliases. Use
```
npx shadcn@latest info
```
to get the correct
```
ui
```
alias (e.g.
```
@workspace/ui/components
```
) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
Review added components — After adding a component or block from any registry, always read the added files and verify they are correct. Check for missing sub-components (e.g.
```
SelectItem
```
without
```
SelectGroup
```
), missing imports, incorrect composition, or violations of the Critical Rules. Also replace any icon imports with the project's
```
iconLibrary
```
from the project context (e.g. if the registry item uses
```
lucide-react
```
but the project uses
```
hugeicons
```
, swap the imports and icon names accordingly). Fix all issues before moving on.
Registry must be explicit — When the user asks to add a block or component, do not guess the registry. If no registry is specified (e.g. user says "add a login block" without specifying
```
@shadcn
```
,
```
@tailark
```
, etc.), ask which registry to use. Never default to a registry on behalf of the user.
Switching presets — Ask the user first: reinstall, merge, or skip?
- Reinstall:
```
npx shadcn@latest init --preset <code> --force --reinstall
```
  . Overwrites all components.
- Merge:
```
npx shadcn@latest init --preset <code> --force --no-reinstall
```
  , then run
```
npx shadcn@latest info
```
  to list installed components, then for each installed component use
```
--dry-run
```
  and
```
--diff
```
  to smart merge it individually.
- Skip:
```
npx shadcn@latest init --preset <code> --force --no-reinstall
```
  . Only updates config and CSS, leaves components as-is.

Imported: Current Project Context

!`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.

Examples

Example 1: Ask for the upstream workflow directly

Use @shadcn to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.

Explanation: This is the safest starting point when the operator needs the imported workflow, but not the entire repository.

Example 2: Ask for a provenance-grounded review

Review @shadcn against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.

Explanation: Use this before review or troubleshooting when you need a precise, auditable explanation of origin and file selection.

Example 3: Narrow the copied support files before execution

Use @shadcn for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.

Explanation: This keeps the skill aligned with progressive disclosure instead of loading the whole copied package by default.

Example 4: Build a reviewer packet

Review @shadcn using the copied upstream files plus provenance, then summarize any gaps before merge.

Explanation: This is useful when the PR is waiting for human review and you want a repeatable audit packet.

Imported Usage Notes

Imported: Component Docs, Examples, and Usage

Run

npx shadcn@latest docs <component>

to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.

npx shadcn@latest docs button dialog select

When creating, fixing, debugging, or using a component, always run

npx shadcn@latest docs

and fetch the URLs first. This ensures you're working with the correct API and usage patterns rather than guessing.

Best Practices

Treat the generated public skill as a reviewable packaging layer around the upstream repository. The goal is to keep provenance explicit and load only the copied source material that materially improves execution.

Use existing components first. Use npx shadcn@latest search to check registries before writing custom UI. Check community registries too.
Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
Use built-in variants before custom styles. variant="outline", size="sm", etc.
Use semantic colors. bg-primary, text-muted-foreground — never raw values like bg-blue-500.
className for layout, not styling. Never override component colors or typography.
No space-x- or space-y-. Use flex with gap-. For vertical stacks, flex flex-col gap-.
Use size- when width and height are equal.* size-10 not w-10 h-10.

Imported Operating Notes

Imported: Principles

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

Imported: Critical Rules

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

Styling & Tailwind → styling.md

className
for layout, not styling. Never override component colors or typography.

No
space-x-*
or
space-y-*
. Use

flex

with

gap-*

. For vertical stacks,

flex flex-col gap-*

Use
size-*
when width and height are equal.
```
size-10
```
not
```
w-10 h-10
```
.

Use
truncate
shorthand. Not

overflow-hidden text-ellipsis whitespace-nowrap

No manual
dark:
color overrides. Use semantic tokens (
```
bg-background
```
,
```
text-muted-foreground
```
).
Use
cn()
for conditional classes. Don't write manual template literal ternaries.
No manual
z-index
on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.

Forms & Inputs → forms.md

Forms use
FieldGroup
+
Field
. Never use raw
```
div
```
with
```
space-y-*
```
or
```
grid gap-*
```
for form layout.

InputGroup
uses
InputGroupInput
/
InputGroupTextarea
. Never raw

Input

Textarea

inside

InputGroup

Buttons inside inputs use
InputGroup
+
InputGroupAddon
.
Option sets (2–7 choices) use
ToggleGroup
. Don't loop
```
Button
```
with manual active state.
FieldSet
+
FieldLegend
for grouping related checkboxes/radios. Don't use a
```
div
```
with a heading.

Field validation uses
data-invalid
+
aria-invalid
.

data-invalid

Field

aria-invalid

on the control. For disabled:

data-disabled

Field

disabled

on the control.

Component Structure → composition.md

Items always inside their Group.

SelectItem

→

SelectGroup

DropdownMenuItem

→

DropdownMenuGroup

CommandItem

→

CommandGroup

Use
asChild
(radix) or
render
(base) for custom triggers. Check
```
base
```
field from
```
npx shadcn@latest info
```
. → base-vs-radix.md
Dialog, Sheet, and Drawer always need a Title.
```
DialogTitle
```
,
```
SheetTitle
```
,
```
DrawerTitle
```
required for accessibility. Use
```
className="sr-only"
```
if visually hidden.

Use full Card composition.

CardHeader

CardTitle

CardDescription

CardContent

CardFooter

. Don't dump everything in

CardContent

Button has no
isPending
/
isLoading
. Compose with

Spinner

data-icon

disabled

TabsTrigger
must be inside
TabsList
. Never render triggers directly in
```
Tabs
```
.
Avatar
always needs
AvatarFallback
. For when the image fails to load.

Use Components, Not Custom Markup → composition.md

Use existing components before custom markup. Check if a component exists before writing a styled
```
div
```
.
Callouts use
Alert
. Don't build custom styled divs.
Empty states use
Empty
. Don't build custom empty state markup.
Toast via
sonner
. Use
```
toast()
```
from
```
sonner
```
.
Use
Separator
instead of
```
<hr>
```
or
```
<div className="border-t">
```
.
Use
Skeleton
for loading placeholders. No custom
```
animate-pulse
```
divs.
Use
Badge
instead of custom styled spans.

Icons → icons.md

Icons in
Button
use
data-icon
.

data-icon="inline-start"

data-icon="inline-end"

on the icon.

No sizing classes on icons inside components. Components handle icon sizing via CSS. No
```
size-4
```
or
```
w-4 h-4
```
.
Pass icons as objects, not string keys.
```
icon={CheckIcon}
```
, not a string lookup.

CLI

Never decode or fetch preset codes manually. Pass them directly to
```
npx shadcn@latest init --preset <code>
```
.

Troubleshooting

Problem: The operator skipped the imported context and answered too generically

Symptoms: The result ignores the upstream workflow in

plugins/antigravity-awesome-skills-claude/skills/shadcn

, fails to mention provenance, or does not use any copied source files at all. Solution: Re-open

metadata.json

ORIGIN.md

, and the most relevant copied upstream files. Load only the files that materially change the answer, then restate the provenance before continuing.

Problem: The imported workflow feels incomplete during review

Symptoms: Reviewers can see the generated

SKILL.md

, but they cannot quickly tell which references, examples, or scripts matter for the current task. Solution: Point at the exact copied references, examples, scripts, or assets that justify the path you took. If the gap is still real, record it in the PR instead of hiding it.

Problem: The task drifted into a different specialization

Symptoms: The imported skill starts in the right place, but the work turns into debugging, architecture, design, security, or release orchestration that a native skill handles better. Solution: Use the related skills section to hand off deliberately. Keep the imported provenance visible so the next skill inherits the right context instead of starting blind.

Related Skills

```
@server-management
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@service-mesh-expert
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@service-mesh-observability
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@sexual-health-analyzer
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.

Additional Resources

Use this support matrix and the linked files below as the operator packet for this imported skill. They should reflect real copied source material, not generic scaffolding.

Resource family	What it gives the reviewer	Example path
`references`	copied reference notes, guides, or background material from upstream	`references/n/a`
`examples`	worked examples or reusable prompts copied from upstream	`examples/n/a`
`scripts`	upstream helper scripts that change execution or validation	`scripts/n/a`
`agents`	routing or delegation notes that are genuinely part of the imported package	`agents/openai.yml`
`assets`	supporting assets or schemas copied from the source package	`assets/shadcn-small.png`

Imported Reference Notes

Imported: Quick Reference

# Create a new project.
npx shadcn@latest init --name my-app --preset base-nova
npx shadcn@latest init --name my-app --preset a2r6bw --template vite

# Create a monorepo project.
npx shadcn@latest init --name my-app --preset base-nova --monorepo
npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo

# Initialize existing project.
npx shadcn@latest init --preset base-nova
npx shadcn@latest init --defaults  # shortcut: --template=next --preset=base-nova

# Add components.
npx shadcn@latest add button card dialog
npx shadcn@latest add @magicui/shimmer-button
npx shadcn@latest add --all

# Preview changes before adding/updating.
npx shadcn@latest add button --dry-run
npx shadcn@latest add button --diff button.tsx
npx shadcn@latest add @acme/form --view button.tsx

# Search registries.
npx shadcn@latest search @shadcn -q "sidebar"
npx shadcn@latest search @tailark -q "stats"

# Get component docs and example URLs.
npx shadcn@latest docs button dialog select

# View registry item details (for items not yet installed).
npx shadcn@latest view @shadcn/button

Named presets:

base-nova

radix-nova

Templates:

next

vite

start

react-router

astro

(all support

--monorepo

) and

laravel

(not supported for monorepo) Preset codes: Base62 strings starting with

(e.g.

a2r6bw

), from ui.shadcn.com.

Imported: Detailed References

rules/forms.md — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
rules/composition.md — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
rules/icons.md — data-icon, icon sizing, passing icons as objects
rules/styling.md — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
rules/base-vs-radix.md — asChild vs render, Select, ToggleGroup, Slider, Accordion
cli.md — Commands, flags, presets, templates
customization.md — Theming, CSS variables, extending components

Imported: Key Patterns

These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.

// Form layout: FieldGroup + Field, not div + Label.
<FieldGroup>
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" />
  </Field>
</FieldGroup>

// Validation: data-invalid on Field, aria-invalid on the control.
<Field data-invalid>
  <FieldLabel>Email</FieldLabel>
  <Input aria-invalid />
  <FieldDescription>Invalid email.</FieldDescription>
</Field>

// Icons in buttons: data-icon, no sizing classes.
<Button>
  <SearchIcon data-icon="inline-start" />
  Search
</Button>

// Spacing: gap-*, not space-y-*.
<div className="flex flex-col gap-4">  // correct
<div className="space-y-4">           // wrong

// Equal dimensions: size-*, not w-* h-*.
<Avatar className="size-10">   // correct
<Avatar className="w-10 h-10"> // wrong

// Status colors: Badge variants or semantic tokens, not raw colors.
<Badge variant="secondary">+20.1%</Badge>    // correct
<span className="text-emerald-600">+20.1%</span> // wrong

Imported: Component Selection

Need	Use
Button/action	`Button` with appropriate variant
Form inputs	`Input` , `Select` , `Combobox` , `Switch` , `Checkbox` , `RadioGroup` , `Textarea` , `InputOTP` , `Slider`
Toggle between 2–5 options	`ToggleGroup` + `ToggleGroupItem`
Data display	`Table` , `Card` , `Badge` , `Avatar`
Navigation	`Sidebar` , `NavigationMenu` , `Breadcrumb` , `Tabs` , `Pagination`
Overlays	`Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)
Feedback	`sonner` (toast), `Alert` , `Progress` , `Skeleton` , `Spinner`
Command palette	`Command` inside `Dialog`
Charts	`Chart` (wraps Recharts)
Layout	`Card` , `Separator` , `Resizable` , `ScrollArea` , `Accordion` , `Collapsible`
Empty states	`Empty`
Menus	`DropdownMenu` , `ContextMenu` , `Menubar`
Tooltips/info	`Tooltip` , `HoverCard` , `Popover`

Imported: Key Fields

The injected project context contains these key fields:

aliases
→ use the actual alias prefix for imports (e.g.
```
@/
```
,
```
~/
```
), never hardcode.
isRSC
→ when
```
true
```
, components using
```
useState
```
,
```
useEffect
```
, event handlers, or browser APIs need
```
"use client"
```
at the top of the file. Always reference this field when advising on the directive.

tailwindVersion
→

"v4"

uses

@theme inline

blocks;

"v3"

uses

tailwind.config.js

tailwindCssFile
→ the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
style
→ component visual treatment (e.g.
```
nova
```
,
```
vega
```
).
base
→ primitive library (
```
radix
```
or
```
base
```
). Affects component APIs and available props.

iconLibrary
→ determines icon imports. Use

lucide-react

for

lucide

@tabler/icons-react

for

tabler

, etc. Never assume

lucide-react

resolvedPaths
→ exact file-system destinations for components, utils, hooks, etc.
framework
→ routing and file conventions (e.g. Next.js App Router vs Vite SPA).
packageManager
→ use this for any non-shadcn dependency installs (e.g.
```
pnpm add date-fns
```
vs
```
npm install date-fns
```
).

See cli.md —

info

command for the full field reference.

Imported: Updating Components

When the user asks to update a component from upstream while keeping their local changes, use

--dry-run

and

--diff

to intelligently merge. NEVER fetch raw files from GitHub manually — always use the CLI.

Run

npx shadcn@latest add <component> --dry-run

to see all files that would be affected.

For each file, run
```
npx shadcn@latest add <component> --diff <file>
```
to see what changed upstream vs local.
Decide per file based on the diff:
- No local changes → safe to overwrite.
- Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
- User says "just update everything" → use
```
--overwrite
```
  , but confirm first.
Never use
--overwrite
without the user's explicit approval.

Imported: Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.