How does this skill handle React component composition?

It focuses on the asChild pattern, which allows Radix components to merge their behavior into a child element, preventing unnecessary wrapper divs.

Does it support accessibility out of the box?

Yes, the skill ensures Claude follows best practices for keyboard navigation, focus trapping, and ARIA attributes inherent in Radix Primitives.

Is this useful for developers using shadcn/ui?

Absolutely. Since shadcn/ui is built on Radix, this skill helps Claude understand and modify the underlying logic of those components.

What is the Radix Primitives skill for Claude Code?

It is a specialized skill that provides Claude with the context and patterns needed to build accessible UI components using Radix's unstyled primitives.

Can I use this skill with Tailwind CSS?

Yes, it provides specific guidance on styling Radix components using Tailwind's data-attribute variants (e.g., data-[state=open]).

Radix Accessible Primitives

Name: Radix Accessible Primitives
Author: yonatangross

byyonatangross

•

Design Tools

Streamlines the creation of high-quality, accessible design systems using Radix UI unstyled primitives.

The Radix Primitives skill equips Claude with the technical knowledge to implement accessible, unstyled React components like dialogs, popovers, and menus. It specializes in the asChild composition pattern for polymorphic rendering and leverages data attributes for styling, making it an essential tool for developers building custom design systems from scratch or working with the underlying architecture of libraries like shadcn/ui. By focusing on accessibility (A11Y) and keyboard navigation, it ensures that every UI component is production-ready and inclusive.

Key Features

01Advanced focus management and keyboard navigation logic

02State-based styling guidance via data attributes

03Polymorphic rendering using the asChild composition pattern

0469 GitHub stars

05Accessible component patterns with full ARIA support

06Comprehensive implementation of complex overlays and menus

Use Cases

01Building a custom accessible design system for a web application

02Customizing and extending the internals of shadcn/ui components

03Implementing complex UI interactions like nested dropdowns and modal dialogs

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