shadcn-code-review
Reviews shadcn/ui components for CVA patterns, composition with asChild, accessibility states, and data-slot usage. Use when reviewing React components using shadcn/ui, Radix primitives, or Tailwind styling.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/anderskev/shadcn-code-reviewWhat 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
VariantPropsfor better TypeScript type safety. - Ensuring that component parts are correctly scoped using
data-slotfor improved CSS targeting and themeability.
Example Prompts
- "Review my new
CustomButtoncomponent for any CVA anti-patterns or missing accessibility states." - "Check if this card component uses
data-slotcorrectly for the header, content, and footer parts." - "Does this custom dialog wrapper correctly implement the
asChildpattern 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.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-anderskev-shadcn-code-review": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read
Related Skills
explanation-docs
Explanation documentation patterns for understanding-oriented content - conceptual guides that explain why things work the way they do
tutorial-docs
Tutorial patterns for documentation - learning-oriented guides that teach through guided doing
pytest-code-review
Reviews pytest test code for async patterns, fixtures, parametrize, and mocking. Use when reviewing test_*.py files, checking async test functions, fixture usage, or mock patterns.
reference-docs
Reference documentation patterns for API and symbol documentation. Use when writing reference docs, API docs, parameter tables, or technical specifications. Triggers on reference docs, API reference, function reference, parameters table, symbol documentation.
serde-code-review
Reviews serde serialization code for derive patterns, enum representations, custom implementations, and common serialization bugs. Use when reviewing Rust code that uses serde, serde_json, toml, or any serde-based serialization format. Covers attribute macros, field renaming, and format-specific pitfalls.