UI Components

概要

Streamlines the development of consistent, accessible user interfaces by enforcing standardized design system conventions for React projects. It automates the implementation of Radix UI primitives, TanStack Form hooks, and Class Variance Authority (CVA) while ensuring components include mandatory test IDs, data-slot attributes, and semantic prop naming. This skill acts as an intelligent coding assistant that automatically detects and fixes architectural violations, ensuring high-quality component composition, type-safe link handling, and robust conditional rendering patterns.

主な機能

• Standardizes form implementation using TanStack Form hooks and context
• Validates naming conventions and conditional rendering patterns
• Enforces Radix UI primitives for accessible component architecture
• 1 GitHub stars
• Automates test ID generation and data-slot attribute injection
• Manages component variants and styling using CVA and Tailwind utilities

ユースケース

• Integrating complex interactive elements like dialogs and forms with consistent state patterns
• Scaffolding new React components that adhere to strict design system guidelines
• Refactoring UI elements to ensure compliance with accessibility and testing standards