Does it support the latest Tailwind CSS v4 syntax?

Yes, it is designed to understand Tailwind v4 patterns, such as CSS variable usage in classes, and will not flag them as errors.

What is the benefit of the data-slot check?

It ensures that multi-part components (like Cards or Selects) use data-slot attributes, which allows for cleaner CSS targeting and more robust component composition.

How does it improve component accessibility?

It checks for missing focus-visible states, aria-invalid attributes, and screen-reader-only labels, specifically in contexts where the underlying Radix primitive hasn't already handled them.

Does this skill flag standard shadcn code as an error?

No, the skill is specifically configured to recognize and ignore standard shadcn component internals, focusing its review on your custom modifications and application-specific integrations.

Shadcn/UI Code Reviewer

Name: Shadcn/UI Code Reviewer
Author: existential-birds

byexistential-birds

•

デザインツール

Reviews React components built with shadcn/ui and Radix primitives to ensure proper composition, accessibility, and styling patterns.

This skill automates the review process for shadcn/ui components, focusing on industry best practices like Class Variance Authority (CVA) patterns, Radix UI composition using the asChild prop, and comprehensive accessibility standards. It helps developers maintain consistent design systems by identifying missing ARIA states, ensuring correct data-slot usage, and verifying that Tailwind CSS v4 variables are implemented properly. By distinguishing between standard library internals and custom modifications, it provides high-signal feedback for frontend developers building production-grade interfaces.

主な機能

01Validates CVA patterns and VariantProps exports for design consistency

02Audits interactive elements for focus-visible and ARIA accessibility states

0314 GitHub stars

04Supports Tailwind CSS v4 syntax including modern CSS variable patterns

05Ensures proper asChild composition using Radix UI Slot primitives

06Verifies data-slot attributes for complex multi-part component targeting

ユースケース

01Standardizing custom modifications to copied shadcn/ui components

02Automated PR reviews for frontend design system repositories

03Ensuring WCAG accessibility compliance in Radix-based UI libraries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add existential-birds/beagle shadcn-code-review

For use in Claude.ai and ChatGPT

Download Skill