What are Radix Primitives?

Radix Primitives are a set of unstyled, accessible React components designed for building high-quality design systems and web applications with full control over styling.

What is the asChild pattern?

The asChild prop allows Radix components to merge their functionality into a child element, preventing the creation of unnecessary wrapper divs and maintaining clean DOM structures.

Is keyboard navigation supported?

Yes, every component implemented through this skill includes industry-standard keyboard navigation, focus management, and screen reader support out of the box.

How does this skill help with shadcn/ui?

Since shadcn/ui is built on top of Radix, this skill helps Claude understand and modify the underlying primitives, enabling deeper customization of shadcn components.

Does this skill provide pre-styled components?

No, Radix Primitives are unstyled by design. This skill focuses on the functional logic and accessibility, allowing you to apply your own CSS or Tailwind styles.

Radix Primitives UI

Name: Radix Primitives UI
Author: yonatangross

byyonatangross

•

デザインツール

Implements unstyled, fully accessible React UI components for building robust design systems and high-quality custom interfaces.

The Radix Primitives skill equips Claude with the expertise to build sophisticated React interfaces using low-level, accessible components. It focuses on the core building blocks of modern web design—such as dialogs, popovers, and menus—without enforcing a specific visual style. This skill is ideal for developers creating custom-branded design systems or those needing to understand the underlying architecture of libraries like shadcn/ui. By leveraging the 'asChild' polymorphic pattern and data-attribute-driven styling, this skill ensures that every UI element Claude generates is keyboard-navigable, ARIA-compliant, and highly performant.

主な機能

01State-based styling via data attributes and Tailwind CSS

02Implementation of unstyled, accessible React primitives

03Polymorphic rendering using the asChild pattern to avoid wrapper divs

04Built-in keyboard navigation and ARIA attribute management

0569 GitHub stars

06Support for complex overlay, menu, and form component patterns

ユースケース

01Implementing complex UI patterns like modals, tooltips, and nested menus

02Customizing and extending shadcn/ui component internals

03Building a bespoke, accessible design system from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit radix-primitives

For use in Claude.ai and ChatGPT

Download Skill