OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add pedronauck/skills --skill shadcn
Best practices for building UI components with shadcn/ui. Use when creating, customizing, or styling components with shadcn, working with Radix UI primitives, implementing design tokens, or following compound component patterns.
npx skills add pedronauck/skills --skill shadcn
This skill provides guidelines, patterns, and best practices for working with shadcn/ui components in this project.
references/patterns.md for comprehensive styling, theming, and component patterns.tailwindcss skill.Always use design system tokens for theme switching compatibility:
Required tokens:
bg-background, bg-card, bg-muted, bg-popovertext-foreground, text-muted-foreground, text-card-foregroundborder-border, border-input, border-ringbg-primary text-primary-foreground, bg-secondary text-secondary-foregroundbg-destructive text-destructive-foreground, bg-accent text-accent-foregroundNever use explicit colors like bg-white, text-black, border-gray-200 - they break theme switching.
Use the CLI to add components, then customize as needed:
Add custom props and variants while preserving accessibility:
Always use separate exports, NOT namespaced properties:
Never remove Radix UI's accessibility attributes:
Use CSS variables for all color values in globals.css:
Before finishing a task involving shadcn/ui:
pnpm run typecheck) and tests (pnpm run test).For comprehensive patterns, component examples, and detailed guidelines, read references/patterns.md.
// CORRECT
export const CardTech = CardTechRoot;
export const CardTechHeader = CardHeader;
export const CardTechTitle = CardTitle;
export const CardTechContent = CardContent;
// WRONG - Do not use
export const CardTech = Object.assign(CardTechRoot, {
Header: CardHeader,
Content: CardContent,
});<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Accessible Title</DialogTitle>
<DialogDescription>
This description helps screen readers understand the dialog's purpose
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>@layer base {
:root {
--success: 142 76% 36%;
--success-foreground: 355 100% 100%;
}
.dark {
--success: 142 76% 46%;
--success-foreground: 142 76% 10%;
}
}