ui-components
Installation
SKILL.md
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 |
|---|---|---|---|
| shadcn/ui | 4 | HIGH | CVA variants, component customization, form patterns, data tables, v4 styles |
| Radix Primitives | 3 | HIGH | Dialogs, polymorphic composition, data-attribute styling |
| Design System | 5 | HIGH | W3C tokens, OKLCH theming, spacing scales, typography, component states, animation |
| Design System Components | 1 | HIGH | Atomic design, CVA variants, accessibility, Storybook |
| Forms | 2 | HIGH | React Hook Form v7, Zod validation, Server Actions |
| Modern CSS & Tooling | 3 | HIGH | CSS cascade layers, Tailwind v4, Storybook CSF3 |
| UX Foundations | 4 | HIGH | Visual hierarchy, typography thresholds, color system, empty states |
Total: 22 rules across 7 categories