RadixUI技能Skill radix-ui

Radix UI 技能是一个专注于使用 Radix UI 库构建现代化、高度可访问且可定制的前端组件的专家级助手。它擅长运用 Radix 提供的基础组件（Primitives），通过组合模式创建复杂的交互式UI，并确保严格遵循 WAI-ARIA 无障碍标准。无论是使用 CSS 还是 Tailwind CSS 进行样式设计，还是处理模态框、下拉菜单、标签页等复杂交互逻辑，该技能都能提供专业指导。 **关键词：** Radix UI, 前端组件库, 无障碍访问, WAI-ARIA, React 组件, 设计系统, Tailwind CSS, 组合模式, 交互设计, 前端开发

前端开发 0 次安装 5 次浏览更新于 2/26/2026

name: radix-ui description: Radix UI 基础组件、组合模式、无障碍访问和自定义功能。 allowed-tools: Read, Write, Edit, Bash, Glob, Grep

Radix UI 技能

使用 Radix UI 构建无障碍组件的专家级协助。

能力

使用 Radix 基础组件
组合无障碍组件
使用 CSS/Tailwind 进行样式设计
处理复杂的交互
实现 WAI-ARIA 模式

使用模式

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

<Dialog.Root>
  <Dialog.Trigger asChild>
    <button>打开</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>标题</Dialog.Title>
      <Dialog.Description>描述</Dialog.Description>
      <Dialog.Close asChild>
        <button>关闭</button>
      </Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

目标流程

组件库开发
无障碍功能实现
设计系统构建