radix-ui

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

509 stars

bya5c-ai

View on GitHub Installation ↓

Best use case

radix-ui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using radix-ui should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/radix-ui/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/web-development/skills/radix-ui/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/radix-ui/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How radix-ui Compares

Feature / Agent	radix-ui	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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

```tsx
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

Related Skills

process-builder

509

from a5c-ai/babysitter

Scaffold new babysitter process definitions following SDK patterns, proper structure, and best practices. Guides the 3-phase workflow from research to implementation.

Workflow & Productivity

babysitter

509

from a5c-ai/babysitter

Orchestrate via @babysitter. Use this skill when asked to babysit a run, orchestrate a process or whenever it is called explicitly. (babysit, babysitter, orchestrate, orchestrate a run, workflow, etc.)