Agent skill · design visual · sickn33
radix-ui-design-system
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
Why this skill is useful
Provides specific patterns and strategies for building accessible design systems with Radix UI that the AI wouldn't reliably generate on its own.
What it needs
Requires @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, class-variance-authority, clsx, tailwind-merge installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Radix UI Design System Build production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions. Detailed Guide Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely. When to Use This Skill Creating a custom design system from scratch Building accessible UI component libraries Implementing complex interactive components (Dialog, Dropdown, Tabs, etc.) Migrating from styled component libraries to unstyled primitives Setting up theming systems with CSS variables or Tailwind Need full control over component behavior and styling Building applications requiring WCAG 2.1 AA/AAA compliance Do not use this skill when You need pre-styled components out of the box (use shadcn/ui, Mantine, etc.) Building simple static pages without interactivity The project doesn't use React 16.8+ (Radix requires hooks) You need components for frameworks other than React --- Real-World Examples Example 1: Command Palette (Combo Dialog) Example 2: Dropdown Menu with Icons Example 3: Form with Radix Select + React Hook Form --- Limitations Use this skill only when the task clearly matches the scope described above. Do not treat the output as a substitute for environment-specific validation, testing, or expert review. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/radix-ui-design-system--cc2c32