Babysitter radix-ui

Radix UI primitives, composition patterns, accessibility, and customization.

install

source · Clone the upstream repo

git clone https://github.com/a5c-ai/babysitter

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/a5c-ai/babysitter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/library/specializations/web-development/skills/radix-ui" ~/.claude/skills/a5c-ai-babysitter-radix-ui && rm -rf "$T"

manifest: library/specializations/web-development/skills/radix-ui/SKILL.md

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