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
Decision gist · record as of 2026-07-28
UI Components helps you build accessible component libraries using shadcn/ui and Radix Primitives with CVA variants and design system patterns. 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.
Use it when
- ui-components guides you through building accessible UI component libraries by combining shadcn/ui and Radix Primitives.
- ui-components supports customization through CVA (Class Variance Authority) variants and OKLCH theming.
Verify before relying
Read SKILL.md below before installing (44 files). Open directory: indexed for reading, not audited.
Install
yonatangross/orchestkit/ui-components · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build accessible UI component libraries with shadcn/ui and Radix”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill systematically reviews custom components and layouts to ensure they align with shadcn design patterns, visual style conventions, and modern composition practices. It catches common drift issues like hardcoded colors, inconsistent spacing, missing data-slot attributes, and anti-patterns that generation-time linting misses. Use it after writing or modifying components, or when you need to verify a layout follows shadcn idioms.
Shadcn Ui is a code generation platform that lets you copy component source directly into your project, giving you full ownership and customization. It combines Radix UI or Base UI primitives with Tailwind CSS 4, oklch theming, and React 19 patterns for building accessible interfaces. Use it to add components via CLI, configure dark mode, validate forms with Zod, or create custom component registries.
Tailwind Design System is a framework for constructing scalable design systems using Tailwind CSS v4's CSS-first configuration, semantic tokens, and component architecture. It covers design token hierarchies, dark mode setup with native CSS features, and patterns for building reusable components with variants and accessibility built in.
This skill guides you through building and maintaining modern UI design systems using TailwindCSS for styling, Radix UI for accessible primitives, and shadcn/ui for pre-built components. It covers component architecture, design tokens, responsive layouts, dark mode, and accessibility compliance to create consistent, reusable interfaces.
Master modern frontend architecture for production SaaS applications using Tailwind CSS v4, shadcn/ui components, and either Next.js 15+ or Vite SPAs. This skill covers server-first design patterns, WCAG 2.1 AA accessibility, responsive layouts, and performance optimization for dashboards, data tables, and complex enterprise interfaces.
Master shadcn-ui's approach to building reusable components with CVA for variant management, Radix for accessible primitives, and Tailwind for styling. Covers CLI setup, the cn() utility, polymorphic rendering via asChild, compound component structure, and modern CSS selectors like has() for conditional layouts.
More skills shadcn (MIT) · Tailwind Design System (AGPL-3.0) · tailwindcss-advanced-components (MIT) · Shadcn (NOASSERTION) · component-library (MIT) · shadcn (MIT) · shadcn-code-review (Apache-2.0) · figma-design-handoff (MIT)