---
name: "radix-ui-accessible-primitives"
description: "Build accessible, customizable design systems using WAI-ARIA compliant Radix UI primitives."
metadata:
  author: "Radix UI"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create accessible dialog radix"
  - "radix dropdown menu keyboard navigation"
  - "focus trap radix ui"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Radix UI Unstyled Accessible Headless UI Primitives

Implements Radix UI: Dialog, DropdownMenu, Popover, Tooltip, Accordion, managing focus traps, keyboard navigation (Arrow keys, Escape), screen reader announcements, and portal rendering.

## When to Invoke
Invoke this skill whenever you need to:
- create accessible dialog radix
- radix dropdown menu keyboard navigation
- focus trap radix ui

## Execution SOP & Rules
1. Install specific primitive package: pnpm add @radix-ui/react-dialog.
2. Assemble structure: Dialog.Root, Dialog.Trigger, Dialog.Portal, Dialog.Overlay, Dialog.Content.
3. Ensure Dialog.Title and Dialog.Description are present inside content for screen reader compliance.
4. Style open/closed transition states via Tailwind: data-[state=open]:animate-in data-[state=closed]:animate-out.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.