skills.rest
zaid-khan-code
zaid-khan-codeCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-code-review

Review shadcn/ui React components for CVA, composition, and accessibility issues.

3|2|Updated Mar 25, 2026
Search Tags:#accessibility#react#composition#shadcn#cva#data-slot#radix
One-click install
npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill shadcn-code-review-zaid-khan-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-code-review
Source: https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms/tree/main/.agents/skills/shadcn-code-review
Command: npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill shadcn-code-review-zaid-khan-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you catch quality, accessibility, and composition issues in shadcn/ui-based React components before they reach production. It is designed for teams that want consistent patterns around CVA variants, Radix composition, and stable styling hooks without manual, error-prone reviews.

Core Features & Use Cases

  • CVA Pattern Review: Checks that variant logic, default variants, and className handling follow shadcn-friendly conventions.
  • Component Composition Review: Verifies asChild usage, Slot integration, ref forwarding, and prop merging for composed components.
  • Accessibility Review: Flags missing focus-visible states, aria-invalid, aria-disabled, loading announcements, and screen-reader text.
  • Data-Slot Review: Confirms component parts are targetable with data-slot and that state-based styling uses robust selectors.
  • Use Case: Review a custom Button, Card, Select, or Input component and identify where styling, behavior, or accessibility deviates from recommended shadcn/ui patterns.

Quick Start

Review the provided shadcn/ui component against the checklist and references, then summarize any issues with clear recommendations.

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 components for CVA pattern violations?▼

To review shadcn/ui components for CVA pattern violations, validate variant logic, default variants, and className handling against recommended conventions to ensure consistent styling logic. This catches structural deviations before production.

What are common accessibility gaps in Radix-based UI components?▼

Common accessibility gaps in Radix-based UI components include missing focus-visible states, aria-invalid, aria-disabled attributes, loading announcements, and screen-reader text. Identifying these ensuresscreen-reader accessibility. Reviewing these ensures components remain accessible to all users.

How does data-slot usage work in shadcn/ui component composition?▼

Data-slot usage in shadcn/ui provides stable styling hooks for targetable component parts. Reviewing data-slot integration ensures state-based styling uses robust selectors rather than relying on fragile class name targeting.

Can I audit asChild wrappers and Slot composition in custom React components?▼

Yes, you can audit asChild wrappers and Slot composition in custom React components. This verifies proper ref forwarding, prop merging, and correct integration for composed components without manual error-prone reviews.

Does this review process check VariantProps exposure in Tailwind variant systems?▼

Yes, this review process checks VariantProps exposure in Tailwind variant systems. It validates that custom component extensions properly expose variant props, ensuring predictable styling behavior across shadcn/ui component audits.

Related Skills

Explore More Software Engineering Skills→
QoreDBQoreDB
137

ui-component-architect

Generate animated React UI components with Tailwind, Shadcn, and Framer Motion.

Official
Intermediate
bluebricks-nlbluebricks-nl

shadcn-code-review

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

Official
Intermediate
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
zapabobzapabob
2

ts-reviewer

Review TypeScript and JavaScript code for type safety and best practices.

Community
Advanced