{"enrichment":{"faq":[{"a":"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.","q":"What are shadcn best practices for building components?"},{"a":"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.","q":"How do you ensure accessibility compliance in shadcn/ui projects?"},{"a":"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.","q":"How should shadcn/ui form validation with React Hook Form be implemented?"},{"a":"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.","q":"What does shadcn theming and dark mode support involve?"},{"a":"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.","q":"How can shadcn component architecture be optimized for performance?"},{"a":"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.","q":"What is shadcn's approach to component styling with Tailwind?"}],"shadow_tags":["component-library","ui-patterns","accessibility-wcag","form-validation","tailwind-css","react-patterns","design-system","code-quality","responsive-design","theme-customization"],"summary_rewrite":"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."},"files":[{"bytes":10003,"path":"skills/.curated/shadcn/SKILL.md","sha256":"9c93969803bda58e6eb753c85ead1433d639e08a8f905b52dda0eb1af0fff8fd","url":"https://skillfed.io/files/pproenca/dot-skills/shadcn/07be2549/SKILL.md"}],"id":"pproenca/dot-skills/shadcn","links":{"html":"https://skillfed.io/pproenca/dot-skills/shadcn","md":"https://skillfed.io/pproenca/dot-skills/shadcn.md","repo":"https://github.com/pproenca/dot-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":14,"language":"Shell","last_updated":"2026-07-24","license":"MIT","name":"shadcn","publisher":"pproenca","stars":182},"relations":{"similar":[{"id":"shipshitdev/skills/shadcn"},{"id":"pproenca/dot-skills/tailwind"},{"id":"shipshitdev/skills/tailwind"},{"id":"pproenca/dot-skills/uniwind"},{"id":"pproenca/dot-skills/opinionated-nextjs-patterns"},{"id":"pproenca/dot-skills/chrome-extension"},{"id":"pproenca/dot-skills/expo-react-native-performance"},{"id":"pproenca/dot-skills/react-native-elements"},{"id":"pproenca/dot-skills/tailwind-responsive-ui"},{"id":"pproenca/dot-skills/tailwind-refactor"}]},"slug":{"owner":"pproenca","repo":"dot-skills","skill":"shadcn"},"version":"07be2549"}