shadcn
This skill provides a prioritized collection of 58 best practices for shadcn/ui development, organized across 10 categories from critical setup and component architecture to performance and state management. Use it when configuring projects, building components with Radix primitives and Tailwind, implementing forms with React Hook Form, or ensuring accessibility compliance.
shadcn provides 58 community-maintained best practices for building accessible, performant shadcn/ui components.
AI-generated summary based on this skill's SKILL.md
Install
pproenca/dot-skills/shadcn · repository language: Shell
git clone https://github.com/pproenca/dot-skills
cp -r dot-skills/skills/.curated/shadcn ~/.claude/skills/shadcnnpx skillfed install pproenca/dot-skills/shadcnFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are shadcn best practices for building components?
shadcn provides 58 prioritized best practices organized across 10 categories. Key practices include leveraging Radix primitives for accessibility foundations, using Tailwind for styling, implementing proper component architecture with compound components, managing focus and keyboard navigation, and following code review checklists. The skill emphasizes critical setup and configuration first, then progresses through component patterns, forms with React Hook Form, theming with CSS variables, and performance optimization strategies.
How do you ensure accessibility compliance in shadcn/ui projects?
shadcn accessibility compliance relies on Radix primitives as the foundation, which provide semantic HTML and ARIA attributes. Best practices include proper focus management and keyboard navigation implementation, testing with accessibility tools, following WCAG guidelines, and using semantic components. The skill covers accessibility guidelines as a dedicated practice area, ensuring components meet compliance standards while maintaining usability for all users.
How should shadcn/ui form validation with React Hook Form be implemented?
shadcn form validation patterns integrate React Hook Form with Zod for schema validation. Best practices include defining schemas upfront, leveraging shadcn form components for consistent UI, handling validation errors gracefully, and managing form state efficiently. The skill provides form patterns and validation strategies as part of its 58 practices, helping you build robust, user-friendly forms with proper error handling and accessibility.
What does shadcn theming and dark mode support involve?
shadcn theming uses CSS variables for flexible, maintainable color management. Dark mode support is configured through Tailwind's dark mode utilities and CSS variable overrides. Best practices include centralizing theme definitions, using semantic color naming, testing both light and dark modes, and ensuring sufficient contrast. The skill covers theming configuration as a dedicated category, enabling consistent brand application across projects.
How can shadcn component architecture be optimized for performance?
shadcn performance optimization includes lazy loading components, efficient data display patterns with TanStack data tables, proper state management to avoid unnecessary re-renders, and code-splitting strategies. Best practices cover compound component patterns that reduce prop drilling, memoization where appropriate, and monitoring bundle size. The skill addresses performance as a category, helping you build scalable applications that maintain responsiveness.
What is shadcn's approach to component styling with Tailwind?
shadcn styling leverages Tailwind CSS for utility-first design, combining it with CSS variables for theming flexibility. Best practices include maintaining consistent spacing and sizing scales, using Tailwind's responsive utilities for mobile-first design, and organizing styles through component composition. The skill covers styling patterns and responsive design strategies, ensuring components work seamlessly across all device sizes while remaining maintainable.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn/ui Community Best Practices
Comprehensive best practices guide for shadcn/ui applications, maintained by the shadcn/ui community. Contains 58 rules across 10 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when: - Installing and configuring shadcn/ui in a project - Writing new shadcn/ui components or composing primitives - Implementing forms with React Hook Form and Zod validation - Building data tables or handling large dataset displays - Customizing themes or adding dark mode support - Reviewing code for accessibility compliance
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | CLI & Project Setup |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/.curated/shadcn/AGENTS.md
skills/.curated/shadcn/README.md
skills/.curated/shadcn/SKILL.md
skills/.curated/shadcn/metadata.json
skills/.curated/shadcn/references/_sections.md
skills/.curated/shadcn/references/ally-aria-invalid-errors.md
skills/.curated/shadcn/references/ally-checkbox-label-association.md
skills/.curated/shadcn/references/ally-dialog-title-required.md
skills/.curated/shadcn/references/ally-ensure-color-contrast.md
skills/.curated/shadcn/references/ally-focus-visible-styles.md
skills/.curated/shadcn/references/ally-form-field-labels.md
skills/.curated/shadcn/references/ally-maintain-focus-management.md
skills/.curated/shadcn/references/ally-preserve-aria-attributes.md
skills/.curated/shadcn/references/ally-preserve-keyboard-navigation.md
skills/.curated/shadcn/references/ally-provide-sr-only-labels.md