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.

主な機能

Validates CVA patterns and VariantProps exports for design consistency
Audits interactive elements for focus-visible and ARIA accessibility states
14 GitHub stars
Supports Tailwind CSS v4 syntax including modern CSS variable patterns
Ensures proper asChild composition using Radix UI Slot primitives
Verifies data-slot attributes for complex multi-part component targeting

ユースケース

Standardizing custom modifications to copied shadcn/ui components
Automated PR reviews for frontend design system repositories
Ensuring WCAG accessibility compliance in Radix-based UI libraries

概要

主な機能

Validates CVA patterns and VariantProps exports for design consistency
Audits interactive elements for focus-visible and ARIA accessibility states
14 GitHub stars
Supports Tailwind CSS v4 syntax including modern CSS variable patterns
Ensures proper asChild composition using Radix UI Slot primitives
Verifies data-slot attributes for complex multi-part component targeting

ユースケース

Standardizing custom modifications to copied shadcn/ui components
Automated PR reviews for frontend design system repositories
Ensuring WCAG accessibility compliance in Radix-based UI libraries