ui-components
UI Components provides 22 rules across 7 categories for constructing accessible component libraries with shadcn/ui and Radix Primitives. It covers CVA variants, OKLCH theming, form integration with React Hook Form and Zod, Radix composition patterns, and design system foundations including spacing scales and typography.
UI Components helps you build accessible component libraries using shadcn/ui and Radix Primitives with CVA variants and design system patterns.
AI-generated summary based on this skill's SKILL.md
Install
yonatangross/orchestkit/ui-components · repository language: TypeScript
git clone https://github.com/yonatangross/orchestkit
cp -r orchestkit/src/skills/ui-components ~/.claude/skills/ui-componentsnpx skillfed install yonatangross/orchestkit/ui-componentsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is ui-components and what does it help build?
ui-components is an MIT-licensed skill for constructing accessible component libraries with shadcn/ui and Radix Primitives. It provides 22 rules across 7 categories covering CVA variants, OKLCH theming, form integration with React Hook Form and Zod, Radix composition patterns, and design system foundations including spacing scales and typography.
How do you build accessible component libraries with ui-components?
ui-components guides you through building accessible UI component libraries by combining shadcn/ui and Radix Primitives. The skill emphasizes unstyled Radix primitives as the foundation, then layers styling with CVA variants and Tailwind v4, ensuring accessibility standards are met throughout the component hierarchy and composition patterns.
What customization and theming options does ui-components support?
ui-components supports customization through CVA (Class Variance Authority) variants and OKLCH theming. You can create flexible component variants that adapt to different contexts, and implement design system tokens using OKLCH color spaces for perceptually uniform theming across your entire component library.
How does ui-components integrate form validation and server actions?
ui-components teaches form creation using React Hook Form for client-side state management, Zod for schema validation, and Server Actions for backend processing. This combination enables robust, accessible forms with proper error handling and server-side validation within your component system.
What design system foundations are covered in ui-components?
ui-components covers design system foundations including tokens architecture, spacing scales, typography scales with line height considerations, and W3C design token standards. These foundations ensure consistency across components and enable systematic, scalable design system implementation.
Does ui-components address modern CSS patterns and Tailwind v4?
Yes, ui-components applies modern CSS patterns including cascade layers and specificity management, paired with Tailwind v4 for component styling. This approach ensures predictable styling behavior and maintainable component code across your library.
SKILL.md
rendered from the published skill — quoted content, verbatim
UI Components
Comprehensive patterns for building accessible UI component libraries with shadcn/ui and Radix Primitives. Covers CVA variants, OKLCH theming, cn() utility, component extension, asChild composition, dialog/menu patterns, and data-attribute styling. Each category has individual rule files in rules/ loaded on-demand.
Quick Reference
| Category | Rules | Impact | When to Use
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
src/skills/ui-components/SKILL.md
src/skills/ui-components/checklists/accessibility-audit.md
src/skills/ui-components/checklists/shadcn-setup.md
src/skills/ui-components/metadata.json
src/skills/ui-components/references/aschild-composition.md
src/skills/ui-components/references/cn-utility-patterns.md
src/skills/ui-components/references/component-extension.md
src/skills/ui-components/references/cva-variant-system.md
src/skills/ui-components/references/dark-mode-toggle.md
src/skills/ui-components/references/dialog-modal-patterns.md
src/skills/ui-components/references/dropdown-menu-patterns.md
src/skills/ui-components/references/focus-management.md
src/skills/ui-components/references/oklch-theming.md
src/skills/ui-components/references/popover-tooltip-patterns.md
src/skills/ui-components/rules/_sections.md