Radix ui

Skill a5c-ai/babysitter/library/specializations/web-development/skills/radix-ui

Radix UI primitives, composition patterns, accessibility, and customization.From its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill radix-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.4 KB, 235 tokens by cl100k_base, as published. Nobody here has run it

Radix UI Skill

Expert assistance for building accessible components with Radix UI.

Capabilities

Use Radix primitives
Compose accessible components
Style with CSS/Tailwind
Handle complex interactions
Implement WAI-ARIA patterns

Usage Pattern

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger asChild>
    <button>Open</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg">
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
      <Dialog.Close asChild>
        <button>Close</button>
      </Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Target Processes

component-library
accessibility-implementation
design-system

What ships with it: 1 file

348 B alongside SKILL.md

README.md348 B