When should I use the Radix UI skill instead of shadcn?

Use this skill when shadcn/ui doesn't offer the specific component you need (like Toolbars or Toggle Groups) or when you require lower-level control over accessibility behaviors.

Does this skill support Tailwind CSS styling?

Yes, it provides specific patterns for styling Radix components using Tailwind CSS via data-attribute selectors like data-[state=open].

What is the asChild prop mentioned in the skill?

The asChild prop is a Radix feature that allows you to merge Radix functionality onto your own custom elements, preventing unnecessary wrapper divs and maintaining clean DOM structures.

Can Claude help me install specific Radix primitives?

Absolutely. This skill provides the correct npm installation commands and usage patterns for a wide range of primitives including Toggle, Toolbar, and Visually Hidden.

Radix UI Primitives

Name: Radix UI Primitives
Author: alizain

byalizain

0•

Design Tools

Implements accessible, unstyled React primitives for high-quality design systems and custom UI components.

This skill empowers Claude to integrate Radix UI primitives directly into React projects, providing a robust solution for when shadcn/ui lacks specific components or when fine-grained accessibility control is required. It guides the AI in selecting the right primitives—such as Toggles, Toolbars, and Portals—while ensuring best practices in styling with data attributes and complex component composition. By leveraging this skill, developers can maintain WCAG compliance and professional-grade UX without building low-level logic from scratch.

Key Features

01State-based styling patterns using Radix data-attribute selectors

02Automated installation of specific Radix UI primitives

03Advanced UI orchestration using Portals, Slots, and Direction Providers

040 GitHub stars

05Implementation of accessible design patterns like asChild composition

06Expert guidance on using primitives not available in shadcn/ui

Use Cases

01Building complex, accessible toolbars and editor interfaces

02Creating custom compound components with full screen-reader support

03Extending existing shadcn/ui libraries with missing low-level primitives

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alizain/wizard-wheezes radix-ui

For use in Claude.ai and ChatGPT

Download Skill