Does it support form validation?

Yes, it integrates React Hook Form v7 with Zod validation schemas and React 19 Server Actions for robust, type-safe form handling.

Can I use this with existing shadcn/ui projects?

Absolutely. It provides specific patterns for extending and customizing shadcn components without modifying the core generated source files.

Does this skill work with Tailwind v4?

Yes, it includes specific rules and patterns for Tailwind v4, including CSS-first @theme configurations and native container queries.

How does it handle accessibility?

The skill leverages Radix Primitives for unstyled accessible logic and provides WCAG 2.1 AA compliance checklists for all UI components.

UI Component Library Patterns

Name: UI Component Library Patterns
Author: yonatangross

byyonatangross

•

116

•

设计工具

Builds accessible, production-ready UI component libraries using shadcn/ui, Radix Primitives, and modern CSS patterns.

The UI Component Library Patterns skill empowers Claude Code to architect and implement professional-grade design systems with a focus on accessibility and maintainability. It provides comprehensive guidance for customizing shadcn/ui components, composing unstyled Radix Primitives, and implementing type-safe variants using Class Variance Authority (CVA). By leveraging modern standards like OKLCH theming and Tailwind v4, this skill ensures that generated frontend code adheres to high visual hierarchy standards and robust UX principles, making it ideal for developers building production-ready React applications.

主要功能

01Modern CSS workflows featuring OKLCH theming and Tailwind v4

02Accessible, unstyled component logic with Radix Primitives composition

03Robust form handling with React Hook Form and Zod validation

04Type-safe component variants using Class Variance Authority (CVA)

05Standardized UX foundations including typography and spacing scales

06116 GitHub stars

使用场景

01Building a bespoke design system starting from shadcn/ui foundations

02Creating complex, accessible UI elements like nested dialogs and dynamic data tables

03Modernizing legacy frontend styling with CSS cascade layers and @theme patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit ui-components

For use in Claude.ai and ChatGPT

Download Skill