skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

radix-ui-design-system

Design accessible React component systems with Radix UI primitives.

41|5|Updated Sep 30, 2025
Search Tags:#theming#accessibility#react#design-system#compound-components#radix-ui#ui-primitives
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill radix-ui-design-system-efekrbas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: radix-ui-design-system
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/radix-ui-design-system
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill radix-ui-design-system-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build modern, accessible UI component systems without getting locked into opinionated styles or losing control over behavior. It is designed for teams that need reusable primitives, consistent theming, and production-ready interaction patterns.

Core Features & Use Cases

  • Accessible primitives: Create dialogs, dropdowns, tabs, tooltips, popovers, and selects with keyboard and screen-reader support built in.
  • Design system architecture: Compose scalable component APIs using headless behavior, compound components, and polymorphic composition patterns.
  • Theming and styling: Apply CSS variables, Tailwind, CVA, or CSS-in-JS to match any brand system while preserving accessibility.
  • Use cases: Ideal for building a custom component library, migrating from pre-styled UI kits, or standardizing interactive elements across a React product.

Quick Start

Ask the skill to design a Radix UI component for a specific interaction, such as an accessible modal or dropdown, and include your desired styling approach.

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 accessible React components with keyboard navigation and ARIA support?▼

Build accessible React components using Radix UI primitives to implement headless interaction patterns. This approach satisfies requirements for keyboard navigation, focus management, ARIA support, and controlled state without locking you into opinionated styles.

Can I apply custom theming to Radix UI components using Tailwind or CSS variables?▼

Custom theming applies to Radix UI components using CSS variables, Tailwind, CVA, or CSS-in-JS. You can match any brand system while preserving accessibility and headless behavior across dialogs, dropdowns, tabs, tooltips, popovers, and selects.

What is the best way to design a scalable React component library using headless primitives?▼

Design a scalable React component library using headless Radix UI primitives and compound components. This method provides polymorphic composition patterns and customizable styling, ensuring consistent interaction behaviors across your product.

Does Radix UI support polymorphic composition for reusable design system workflows?▼

Radix UI supports polymorphic composition for reusable design system workflows. You can compose scalable component APIs using headless behavior, controlled state, and compound components to standardize interactive elements across a React product.

When should I use headless UI primitives over pre-styled React component kits?▼

Use headless UI primitives over pre-styled React component kits when migrating from opinionated styles or building a custom component library. Headless behavior provides production-ready interaction patterns while maintaining full control over styling and theming.

How do I manage focus and controlled state in accessible React dialogs and dropdowns?▼

Manage focus and controlled state in accessible React dialogs and dropdowns using Radix UI primitives. The headless interaction patterns handle screen-reader support, keyboard navigation, and focus management automatically within your design system architecture.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

Official
Intermediate
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
OpenCovenOpenCoven
20

shadcn-ui-and-radix

Develops React UI components with Radix accessibility and Tailwind themes.

Official
Advanced
mgd34msumgd34msu
4

chakra-ui

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

Community
Intermediate