skills.rest
javierhbr
javierhbrCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-code-review

Review React components using shadcn/ui, Radix primitives, and Tailwind CSS for best practices.

Updated Feb 17, 2026
Search Tags:#code review#accessibility#react#shadcn-ui#component composition#cva
One-click install
npx skills add https://github.com/javierhbr/random-poc --skill shadcn-code-review-javierhbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-code-review
Source: https://github.com/javierhbr/random-poc/tree/main/custom-skills/beagle-main/plugins/beagle-react/skills/shadcn-code-review
Command: npx skills add https://github.com/javierhbr/random-poc --skill shadcn-code-review-javierhbr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers ensure their React components built with shadcn/ui follow best practices for CVA patterns, composition, accessibility, and data-slot usage, leading to more robust and maintainable code.

Core Features & Use Cases

  • CVA Pattern Enforcement: Reviews the correct usage of class-variance-authority for defining component variants and styles.
  • Composition Best Practices: Checks for proper implementation of patterns like asChild with @radix-ui/react-slot and context-based composition.
  • Accessibility Audits: Verifies that interactive elements and form components adhere to accessibility standards (focus states, ARIA attributes, etc.).
  • Data-Slot Usage: Ensures data-slot attributes are used for targetable component parts, enabling easier styling and DOM manipulation.
  • Use Case: When reviewing a new custom button component that uses shadcn/ui, this skill will flag if className is incorrectly passed to CVA, if asChild is used without Slot, or if focus states are missing.

Quick Start

Use the shadcn-code-review skill to review the attached React component file 'src/components/ui/button.tsx'.

Frequently Asked Questions about shadcn-code-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review shadcn/ui React components for best practices?▼

To review shadcn/ui React components, analyze them for correct CVA patterns, Slot composition, and data-slot attributes. This ensures maintainable UI code by verifying that interactive elements adhere to accessibility standards like focus-visible and ARIA attributes.

What is the correct way to use CVA patterns in shadcn/ui components?▼

The correct way to use CVA patterns in shadcn/ui components involves defining component variants and styles accurately. You must ensure className is passed correctly to CVA to maintain styling consistency and prevent rendering issues within your React UI workflow.

How does asChild composition work with Radix primitives in React?▼

The asChild composition pattern works with Radix primitives by using @radix-ui/react-slot to merge props onto child elements. This pattern prevents nested DOM nodes and requires Slot to function correctly when passing className and event handlers.

Why are focus-visible states missing from my custom shadcn/ui button?▼

Focus-visible states are missing from custom shadcn/ui buttons when accessibility attributes are not properly implemented. You must verify that interactive elements include focus-visible states and ARIA attributes to ensure keyboard navigation and screen reader support.

When do I need data-slot attributes in Tailwind CSS components?▼

You need data-slot attributes in Tailwind CSS components when styling targetable component parts. Applying data-slot correctly enables easier DOM manipulation and targeted styling within shadcn/ui structures, ensuring styling hooks are consistently available.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
bluebricks-nlbluebricks-nl

shadcn-code-review

Review React components using shadcn/ui, Radix primitives, and Tailwind CSS for best practices.

Official
Intermediate
beemanbeeman
12

heroui-react

Implement HeroUI v3 components in React with Tailwind CSS v4 theming.

Community
Intermediate
ever-worksever-works
21

shadcn

Manage shadcn UI components and generate source code from project configurations.

Official
Intermediate