Agent skill · design visual · yonatangross
ui-components
UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.
Why this skill is useful
Provides specific patterns and rules for building accessible UI component libraries that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
UI Components Patterns for building accessible UI component libraries with shadcn/ui and Radix Primitives, as a thin wrap over the first-party docs: quick-start recipes, key decisions, anti-patterns, and the house delta. Vendor mechanics (CVA variants, cn() utility, component extension, asChild composition, dialog/menu patterns, data-attribute styling) are upstream's job; see Upstream coverage (do not restate). Each remaining category has individual rule files in rules/ loaded on-demand. Quick Reference Category Rules Impact When to Use ---------- ------- -------- ------------- shadcn/ui 1 HIGH v4 styles, preset codes, style detection Design System 4 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: 15 rules across 6 categories. Radix primitive mechanics and shadcn customization tutorials are first-party documented; see Upstream coverage (do not restate) and references/ork-delta.md for what stays ours. Quick Start shadcn/ui Beautifully designed, accessible components built on CVA variants, cn() utility, and OKLCH theming. Rule File Key Pattern ------ ------ ------------- v4 Styles rules/shadcn-v4-styles.md 6 styles (Vega→Luma), preset codes, style detection, class mapping Customization, form, and data-table walkthroughs are upstream's job now; see Upstream coverage (do not restate). Our conventions on top of them live in references/ork-delta.md. v4 Style System shadcn CLI v4 ships 6 visual styles. Each rewrites component class names — not just CSS variables. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/ui-components