skills.rest
pohlai88
pohlai88COMMUNITY
Explore all skills by this author →
GitHub

radix-ui-design-system

Builds accessible React components with Tailwind CVA or Stitches theming.

Updated Apr 5, 2026
Search Tags:#theming#react#patterns#design-system#radix-ui#accessible
One-click install
npx skills add https://github.com/pohlai88/afenda-vite-react --skill radix-ui-design-system-pohlai88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radix-ui-design-system
Source: https://github.com/pohlai88/afenda-vite-react/tree/main/.agents/skills/radix-ui-design-system
Command: npx skills add https://github.com/pohlai88/afenda-vite-react --skill radix-ui-design-system-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds consistent, accessible UI systems by turning unstyled Radix primitives into a cohesive library, reducing duplication and UX debt across teams.

Core Features & Use Cases

  • Headless primitives with full ARIA semantics enabling complete visual control while preserving accessibility.
  • Theming strategies and design-system patterns (CSS variables, Tailwind CVA, and Stitches) to support multiple brands and apps.
  • Component patterns and recipes (compound components, asChild polymorphism, and pattern-based scaffolds) to accelerate library creation and adoption.

Quick Start

Set up a minimal Radix-based design system by choosing a theming approach (CSS variables, Tailwind CVA, or Stitches) and implementing a small component library around common primitives.

Frequently Asked Questions about radix-ui-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an accessible design system with React and Radix UI primitives?▼

Build an accessible design system with Radix UI primitives by wrapping unstyled headless components into a cohesive React library, using compound components and asChild polymorphism to preserve ARIA semantics while maintaining full visual control.

What theming strategies work best for a scalable React design system?▼

Scalable React design system theming strategies include CSS variables, Tailwind CVA, and Stitches. These approaches support multiple brands and apps by enabling consistent design tokens and pattern-based component recipes across teams.

Can I use Radix UI headless primitives with Tailwind CSS for accessible components?▼

You can use Radix UI headless primitives with Tailwind CSS by applying Tailwind CVA theming strategies to unstyled components. This combination preserves full ARIA semantics and accessibility while granting complete visual control over your React components.

What is the asChild pattern in Radix UI and when should I use it for component composition?▼

The asChild pattern in Radix UI is a polymorphic composition strategy that passes accessibility attributes and event handlers directly to a child element. Use it to build custom accessible components without wrapping DOM nodes that break ARIA semantics.

How do I reduce UX duplication across teams when building a React component library?▼

Reduce UX duplication across teams by building a shared React component library using Radix UI primitives. Implement documented component patterns and recipes to ensure consistent accessibility and theming, eliminating UX debt across different features.

Does a headless UI approach limit my visual control when creating accessible React components?▼

A headless UI approach does not limit visual control. Radix UI primitives provide full ARIA semantics and accessibility logic while remaining completely unstyled, enabling you to apply any theming strategy like CSS variables or Stitches for custom designs.

Related Skills

Explore More Design & Creative Skills→
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
OpenDCAIOpenDCAI
114

react

Standardize React component development with design tokens and TypeScript.

Official
Advanced
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate