Agent skill · design visual · pedronauck
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.
Why this skill is useful
Provides specific guidelines and patterns for using shadcn/ui components that enhance the AI's understanding of component design and accessibility best practices.
What it needs
About 2k tokens when loaded. Last updated 2026-08-01. 564 stars on the source repository.
What this skill does
Shadcn UI Developer Guide This skill provides guidelines, patterns, and best practices for working with shadcn/ui components in this project. Quick Start 1. Core Patterns: Read references/patterns.md for comprehensive styling, theming, and component patterns. 2. Tailwind Integration: For Tailwind CSS patterns, use the tailwindcss skill. Core Philosophy Ownership: Shadcn is copy-paste, not a dependency - you own the code. Customization: Components are meant to be modified for your needs. Accessibility: Built on Radix UI primitives for proper accessibility. Flexibility: Styled with Tailwind CSS for easy customization. Critical: Design Token Usage Always use design system tokens for theme switching compatibility: Required tokens: Backgrounds: bg-background, bg-card, bg-muted, bg-popover Text: text-foreground, text-muted-foreground, text-card-foreground Borders: border-border, border-input, border-ring Actions: bg-primary text-primary-foreground, bg-secondary text-secondary-foreground States: bg-destructive text-destructive-foreground, bg-accent text-accent-foreground Never use explicit colors like bg-white, text-black, border-gray-200 - they break theme switching. Common Tasks Adding Components Use the CLI to add components, then customize as needed: Extending Components Add custom props and variants while preserving accessibility: Compound Components Always use separate exports, NOT namespaced properties: Preserving Accessibility Never remove Radix UI's accessibility attributes: Theming Use CSS variables for all color values in globals.css: Validation Checklist Before finishing a task involving shadcn/ui: [ ] Verify all colors use design tokens, not explicit values. [ ] Ensure accessibility attributes from Radix UI are preserved. [ ] Test keyboard navigation works correctly. [ ] Use separate exports for compound components (not namespaced). [ ] Run type checks (pnpm run typecheck) and tests (pnpm run test). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills pedronauck/shadcn