shadcn-code-review
This skill audits shadcn/ui and Radix-based React components against best practices for variant-driven styling, accessible state handling, and composable component architecture. It checks CVA pattern separation, asChild slot integration, focus and ARIA attributes, and data-slot targeting across multi-part components.
shadcn-code-review audits React components built with shadcn/ui for proper CVA patterns, accessibility, and composition practices.
AI-generated summary based on this skill's SKILL.md
Install
existential-birds/beagle/shadcn-code-review · repository language: TypeScript
git clone https://github.com/existential-birds/beagle
cp -r beagle/plugins/beagle-react/skills/shadcn-code-review ~/.claude/skills/shadcn-code-reviewnpx skillfed install existential-birds/beagle/shadcn-code-reviewFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What does shadcn-code-review audit in React components?
shadcn-code-review audits shadcn/ui and Radix-based React components against best practices for variant-driven styling, accessible state handling, and composable component architecture. It checks CVA pattern separation, asChild slot integration, focus and ARIA attributes, and data-slot targeting across multi-part components.
How does shadcn-code-review validate data-slot usage and CSS targeting?
shadcn-code-review validates data-slot usage and CSS targeting in multi-part components by examining how slots are defined and applied across component parts. It ensures consistent naming conventions and verifies that CSS selectors correctly target each slot without unintended side effects or specificity conflicts.
What accessibility states does shadcn-code-review check?
shadcn-code-review audits focus-visible, aria-invalid, and disabled states in interactive elements. It verifies that focus indicators are visible and properly styled, that invalid states are communicated via ARIA attributes, and that disabled elements are semantically marked and visually distinct.
How does shadcn-code-review review the asChild pattern?
shadcn-code-review checks asChild pattern implementation with Radix primitives and Slot, ensuring that components correctly forward refs and props to child elements. It validates that the Slot component is properly integrated and that polymorphic rendering doesn't break accessibility or styling.
What CVA patterns does shadcn-code-review examine?
shadcn-code-review reviews shadcn components for CVA patterns, checking that class-variance-authority is used to separate concerns between base styles, variants, and compound variants. It verifies VariantProps exports and ensures variant definitions are well-organized and avoid proliferation.
Does shadcn-code-review evaluate component composition?
Yes, shadcn-code-review checks component composition by examining how multi-part components are structured and composed together. It validates that compound components follow established patterns, that props are properly distributed, and that the overall architecture supports reusability and maintainability.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn/ui Code Review
Quick Reference
| Issue Type | Reference |
|---|---|
| className in CVA, missing VariantProps, compound variants | references/cva-patterns.md |
| asChild without Slot, missing Context, component composition | references/composition.md |
| Missing focus-visible, aria-invalid, disabled states | references/accessibility.md |
| Missing data-slot, incorrect CSS targeting | references/data-slot.md |
Review Checklist
- [ ]
cn()receives className, not CVA variants - [ ]
VariantProps<typeof variants>exported for consumers - [ ] Compound variants used for complex state combinations
- [ ]
asChildpattern uses@radix-ui/react-slot - [ ] Context used for component composition (Card, Accordion, etc.)
- [ ]
focus-visible:states, not just:focus - [ ]
aria-invalid,
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
plugins/beagle-react/skills/shadcn-code-review/SKILL.md
plugins/beagle-react/skills/shadcn-code-review/references/accessibility.md
plugins/beagle-react/skills/shadcn-code-review/references/composition.md
plugins/beagle-react/skills/shadcn-code-review/references/cva-patterns.md
plugins/beagle-react/skills/shadcn-code-review/references/data-slot.md