Shadcn Code Review

The shadcn-code-review skill enables AI agents to analyze frontend codebases specifically for shadcn/ui component implementations, ensuring consistency with design tokens and best practices. It provides targeted feedback on component structure, accessibility compliance, and styling alignment within the shadcn ecosystem.

When to use it

• Audit existing React components to verify they follow shadcn/ui conventions before merging into a repository.
• Generate specific recommendations for refactoring custom UI code to match the shadcn design system.
• Validate that new component additions correctly utilize Radix primitives and Tailwind CSS classes.
• Review pull requests to catch accessibility regressions or inconsistent theming in shadcn-based interfaces.

Key capabilities

• Analyzes code for adherence to shadcn/ui architectural patterns.
• Identifies deviations from standard design token usage.
• Checks for proper integration of Radix UI primitives.
• Evaluates Tailwind CSS class application for consistency.
• Assesses accessibility compliance within reviewed components.

Example prompts

• "Review this PR and check if the new Button component follows shadcn/ui standards."
• "Analyze my dashboard layout to identify any inconsistencies with the shadcn design system."
• "Audit these input fields for proper Radix UI integration and accessibility attributes."

Tips & gotchas

Ensure your project is already initialized with shadcn/ui, as the skill relies on specific file structures and configuration files like components.json. The review focuses strictly on frontend implementation details and may not cover backend logic or non-shadcn libraries.