Does this skill install shadcn/ui for me?

This skill provides the architectural patterns and best practices for implementing and customizing shadcn/ui; it guides Claude in writing the code correctly rather than acting as a CLI installer.

Does it support form validation?

Yes, it includes comprehensive patterns for integrating UI components with React Hook Form and Zod for robust client and server-side validation using React 19 Server Actions.

Can I use this with Tailwind CSS v4?

Yes, the skill includes specific rules for Tailwind v4 patterns, including CSS-first @theme configurations, native container queries, and @max-* variants.

How does it handle web accessibility (a11y)?

It leverages Radix Primitives' unstyled accessible foundations and enforces patterns like proper ARIA attributes, focus trapping, and keyboard navigation to meet WCAG 2.1 AA standards.

UI Component Design Patterns

Name: UI Component Design Patterns
Author: yonatangross

byyonatangross

•

116

•

Design Tools

Provides production-grade patterns for building accessible UI component libraries using shadcn/ui, Radix Primitives, and modern CSS frameworks.

This skill equips Claude with specialized knowledge for architecting and implementing professional-grade UI component libraries. It focuses on the shadcn/ui philosophy of component ownership, utilizing Radix Primitives for accessibility, Class Variance Authority (CVA) for type-safe variants, and OKLCH for modern, perceptually uniform color theming. Whether you are building a custom design system from scratch or extending existing shadcn components, this skill ensures best practices for composition, focus management, and responsive styling are strictly followed to ensure WCAG compliance and high-performance UX.

Key Features

01Integrated form patterns using React Hook Form and Zod validation

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

03Polymorphic component composition using the 'asChild' pattern

04Modern styling patterns with OKLCH colors and Tailwind CSS v4

05116 GitHub stars

06Radix Primitives implementation for accessible interactive elements

Use Cases

01Implementing complex UI patterns like accessible dialogs, data tables, and multi-step forms

02Extending and customizing shadcn/ui components without modifying auto-generated source files

03Developing a custom, accessible design system for enterprise React applications

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