What are the requirements for using this skill?

This skill requires React 16.8+ as Radix UI primitives are built specifically for the React ecosystem using hooks.

Radix UI is a collection of unstyled, accessible React primitives used for building high-quality design systems and web applications with full styling control.

Is this skill compatible with shadcn/ui?

While shadcn/ui is built on Radix, this skill focuses on building your own custom system directly from the primitives rather than using pre-made component defaults.

Does this skill help with styling?

Yes, it provides specific strategies for styling Radix primitives using CSS Variables, Tailwind CSS with CVA, and CSS-in-JS libraries like Stitches.

How does it handle web accessibility?

It follows WAI-ARIA patterns, providing built-in focus management, keyboard navigation, and proper ARIA attributes for all interactive components.

Radix UI Design System

Name: Radix UI Design System
Author: sickn33

bysickn33

•

31,721

•

디자인 도구

Builds accessible, production-grade design systems using unstyled Radix UI primitives for React.

Architect high-quality, accessible component libraries using Radix UI's headless primitives. This skill provides specialized guidance on maintaining WAI-ARIA compliance, implementing keyboard navigation, and managing complex interactive states for components like Dialogs, Popovers, and Tabs. By focusing on behavior over styling, it empowers developers to create unique interfaces without the constraints of pre-styled libraries, offering flexible implementation strategies for Tailwind CSS, CSS Variables, and polymorphic component patterns.

주요 기능

01Integration strategies for Tailwind CSS, CSS Variables, and Stitches

02Polymorphic asChild prop patterns for clean DOM hierarchies

03Accessible headless component implementation for full styling control

04WAI-ARIA compliant keyboard navigation and screen reader support

05Compound component architecture for managing complex UI states

0631,721 GitHub stars

사용 사례

01Migrating legacy UI components to modern, accessible unstyled primitives

02Ensuring WCAG 2.1 AA/AAA compliance in interactive React applications

03Building a custom branded enterprise design system from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills radix-ui-design-system

For use in Claude.ai and ChatGPT

주요 기능

01Integration strategies for Tailwind CSS, CSS Variables, and Stitches

02Polymorphic asChild prop patterns for clean DOM hierarchies

03Accessible headless component implementation for full styling control

04WAI-ARIA compliant keyboard navigation and screen reader support

05Compound component architecture for managing complex UI states

0631,721 GitHub stars

사용 사례

01Migrating legacy UI components to modern, accessible unstyled primitives

02Ensuring WCAG 2.1 AA/AAA compliance in interactive React applications

03Building a custom branded enterprise design system from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills radix-ui-design-system

For use in Claude.ai and ChatGPT