shadcn-code-review

What This Skill Does

The shadcn-code-review skill is a specialized agent for auditing React components that utilize the shadcn/ui library, Radix UI primitives, and Tailwind CSS. It acts as an expert code reviewer, focusing on architectural patterns that ensure consistency, accessibility, and maintainability. The skill automatically checks your codebase against established patterns such as CVA (Class Variance Authority) configurations, the implementation of asChild composition, correct data-slot usage for styling, and comprehensive accessibility states (like focus-visible and aria-invalid). By automating these checks, developers can maintain a high-quality UI design system without manually policing every stylistic nuance.

Installation

To integrate this tool into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/anderskev/shadcn-code-review

Use Cases

This skill is intended for use in the following scenarios:

• Performing pull request reviews for new component additions within a shadcn-based project.
• Auditing existing UI components to ensure they follow the latest shadcn/ui and Tailwind v4 conventions.
• Troubleshooting accessibility issues in custom-built form elements or interactive buttons.
• Refactoring complex component props to utilize VariantProps for better TypeScript type safety.
• Ensuring that component parts are correctly scoped using data-slot for improved CSS targeting and themeability.

Example Prompts

1. "Review my new CustomButton component for any CVA anti-patterns or missing accessibility states."
2. "Check if this card component uses data-slot correctly for the header, content, and footer parts."
3. "Does this custom dialog wrapper correctly implement the asChild pattern with @radix-ui/react-slot?"

Tips & Limitations

The shadcn-code-review skill is context-aware: it will not flag code that follows standard shadcn internal patterns, such as the use of cn() for merging classes or the use of specific Tailwind arbitrary value syntax. It is designed to ignore library-internal code, allowing you to focus on your specific project modifications. However, please note that the skill relies on the provided documentation references (cva-patterns, composition, accessibility, data-slot); ensure your local environment is configured to allow the agent to read these files if necessary for deep analysis. Always review its suggestions, as it is a helper tool intended to augment, not replace, human architectural judgment.