Shadcn
Write, review, and refactor shadcn/ui components with community rules for setup, a11y, forms, tables, and theming.
Overview
Shadcn is an agent skill for the Build phase that applies 58 shadcn/ui community rules when writing, reviewing, or refactoring accessible React components.
Install
npx skills add https://github.com/pproenca/dot-skills --skill shadcnWhat is this skill?
- 58 community rules across 10 prioritized categories
- CRITICAL coverage for CLI setup, component architecture, and accessibility preservation
- HIGH-priority styling, theming, dark mode, and React Hook Form + Zod form patterns
- Data tables and large-dataset display guidance
- Triggers on Radix primitives, Tailwind styling, and composition refactors
- 58 rules across 10 categories
- 10 rule categories by priority impact
Adoption & trust: 603 installs on skills.sh; 157 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your shadcn/ui components drift from Radix accessibility, theming, and form patterns every time the agent generates UI in a hurry.
Who is it for?
Indie devs standardizing a Tailwind + shadcn/ui codebase with agent-assisted component work.
Skip if: Projects on unrelated UI stacks (MUI-only, vanilla CSS systems) with no shadcn/ui adoption.
When should I use this skill?
Writing, reviewing, or refactoring shadcn/ui components involving Radix, Tailwind, forms, tables, or theming.
What do I get? / Deliverables
Generated or reviewed components align with prioritized setup, arch, a11y, style, and form rules ready to merge.
- Component implementations aligned to rule prefixes (setup-, arch-, ally-)
- Review notes keyed to category priority
Recommended Skills
Journey fit
Build frontend is where shadcn/ui components, Radix primitives, and Tailwind theming are implemented and composed. Frontend subphase is the natural shelf for component architecture, React Hook Form patterns, and accessible UI refactors.
How it compares
Skill-packaged review rules for shadcn/ui—not an MCP server and not a component installer by itself.
Common Questions / FAQ
Who is shadcn for?
Frontend-focused solo builders using shadcn/ui, Radix, Tailwind, and React Hook Form who want consistent agent output.
When should I use shadcn?
Use during build frontend tasks: new components, theme changes, tables, forms, and accessibility-focused refactors.
Is shadcn safe to install?
It is documentation-style rules only; review the Security Audits panel on this page before adding the skill.
SKILL.md
READMESKILL.md - Shadcn
# 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 | CRITICAL | `setup-` | | 2 | Component Architecture | CRITICAL | `arch-` | | 3 | Accessibility Preservation | CRITICAL | `ally-` | | 4 | Styling & Theming | HIGH | `style-` | | 5 | Form Patterns | HIGH | `form-` | | 6 | Data Display | MEDIUM-HIGH | `data-` | | 7 | Layout & Navigation | MEDIUM | `layout-` | | 8 | Component Composition | MEDIUM | `comp-` | | 9 | Performance Optimization | MEDIUM | `perf-` | | 10 | State Management | LOW-MEDIUM | `state-` | ## Quick Reference ### 1. CLI & Project Setup (CRITICAL) - [`setup-components-json`](references/setup-components-json.md) - Configure components.json before adding components - [`setup-path-aliases`](references/setup-path-aliases.md) - Configure TypeScript path aliases to match components.json - [`setup-cn-utility`](references/setup-cn-utility.md) - Create the cn utility before using components - [`setup-use-cli-not-copy`](references/setup-use-cli-not-copy.md) - Use CLI to add components instead of copy-paste - [`setup-css-variables-theme`](references/setup-css-variables-theme.md) - Enable CSS variables for consistent theming - [`setup-rsc-configuration`](references/setup-rsc-configuration.md) - Set RSC flag based on framework support ### 2. Component Architecture (CRITICAL) - [`arch-use-asChild-for-custom-triggers`](references/arch-use-asChild-for-custom-triggers.md) - Use asChild prop for custom trigger elements - [`arch-preserve-radix-primitive-structure`](references/arch-preserve-radix-primitive-structure.md) - Maintain Radix compound component hierarchy - [`arch-extend-variants-with-cva`](references/arch-extend-variants-with-cva.md) - Use Class Variance Authority for type-safe variants - [`arch-use-cn-for-class-merging`](references/arch-use-cn-for-class-merging.md) - Use cn() utility for safe Tailwind class merging - [`arch-forward-refs-for-composable-components`](references/arch-forward-refs-for-composable-components.md) - Forward refs for form and focus integration - [`arch-isolate-component-variants`](references/arch-isolate-component-variants.md) - Separate base styles from variant-specific styles ### 3. Accessibility Preservation (CRITICAL) - [`ally-preserve-aria-attributes`](references/ally-preserve-aria-attributes.md) - Keep Radix ARIA attributes intact - [`ally-provide-sr-only-labels`](references/ally-provide-sr-only-labels.md) - Add screen reader labels for icon buttons - [`ally-maintain-focus-management`](references/ally-maintain-focus-management.md) - Preserve focus trapping in modals - [`ally-preserve-keyboard-navigation`](references/ally-preserve-keyboard-navigation.md) - Keep WAI-ARIA keyboard patterns - [`ally-ensure-color-contrast`](references/ally-ensure-color-contrast.md) - Maintain WCAG color contrast ratios - [`ally-dialog-title-required`](references/ally-dialog-title-req