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
Decision gist · record as of 2026-07-21
shadcn-code-review audits React components built with shadcn/ui for proper CVA patterns, accessibility, and composition practices. 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.
Use it when
- shadcn-code-review validates data-slot usage and CSS targeting in multi-part components by examining how slots are defined and applied.
- shadcn-code-review audits focus-visible, aria-invalid, and disabled states in interactive elements.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
existential-birds/beagle/shadcn-code-review · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Review shadcn/ui React components for CVA patterns, accessibility, and composition”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master shadcn-ui's approach to building reusable components with CVA for variant management, Radix for accessible primitives, and Tailwind for styling. Covers CLI setup, the cn() utility, polymorphic rendering via asChild, compound component structure, and modern CSS selectors like has() for conditional layouts.
This skill systematically reviews custom components and layouts to ensure they align with shadcn design patterns, visual style conventions, and modern composition practices. It catches common drift issues like hardcoded colors, inconsistent spacing, missing data-slot attributes, and anti-patterns that generation-time linting misses. Use it after writing or modifying components, or when you need to verify a layout follows shadcn idioms.
This skill systematically audits Python code across five key dimensions: PEP8 compliance, type annotation completeness, async/await correctness, exception handling rigor, and frequent pitfalls like mutable defaults. It provides a checklist-driven review workflow with reference guides for each category and context-sensitive rules to avoid false positives.
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.
UI Components provides 22 rules across 7 categories for constructing accessible component libraries with shadcn/ui and Radix Primitives. It covers CVA variants, OKLCH theming, form integration with React Hook Form and Zod, Radix composition patterns, and design system foundations including spacing scales and typography.
Master modern frontend architecture for production SaaS applications using Tailwind CSS v4, shadcn/ui components, and either Next.js 15+ or Vite SPAs. This skill covers server-first design patterns, WCAG 2.1 AA accessibility, responsive layouts, and performance optimization for dashboards, data tables, and complex enterprise interfaces.
More skills shadcn (MIT) · Tailwind Design System (unlicensed) · tailwindcss-advanced-components (MIT) · shadcn-ui (MIT) · Shadcn (unlicensed)