radix-ui-design-system
使用 Radix 构建可访问的 UI
使用 Radix UI 原语创建生产级可访问设计系统。本技能提供无头组件自定义、主题策略和 React 应用程序复合组件架构的模式。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“radix-ui-design-system”。 Create a dialog component with form fields using Radix UI
预期结果:
- 完整的 Dialog 组件，包含 Root、Trigger、Portal、Overlay、Content、Title、Description 和 Close 元素
- 遮罩层的 CSS 类（固定定位、背景模糊），内容区的 CSS 类（居中、阴影、圆角）
- 使用正确的 fieldset 和 label 元素的姓名和邮箱表单
- 可访问性：模态框内的焦点捕获、Escape 键关闭、aria-labelledby 和 aria-describedby
正在使用“radix-ui-design-system”。 Build a dropdown menu with checkboxes and radio groups
预期结果:
- DropdownMenu.Root 包含嵌套的 Menu 项、Separator 和 CheckboxItem
- 用于单选选项的 RadioGroup 带视觉指示器
- 键盘导航：方向键导航、Enter 键选择、Escape 键关闭
- 用于嵌套下拉菜单的 SubMenu 组件，带正确的定位
安全审计
安全All static findings are false positives. The scanner incorrectly detected: (1) backticks in markdown as shell commands, (2) words like 'description' and 'destructive' as cryptographic algorithms, (3) relative markdown links as path traversal, (4) documentation URLs as hardcoded URLs, and (5) React import() syntax as dynamic code execution. This is a legitimate Radix UI documentation skill with no actual security concerns.
质量评分
你能构建什么
构建自定义设计系统
创建公司特定的设计系统，完全控制样式同时保持可访问性合规。
从样式库迁移
使用轻量级 Radix 原语替换繁重的样式组件库，同时保留组件 API。
为现有组件添加可访问性
为自定义组件增强键盘导航、焦点管理和屏幕阅读器支持。
试试这些提示
使用 Radix UI Dialog 原语创建模态对话框组件。包含触发按钮、遮罩层、内容区（带标题和描述）以及关闭按钮。使用 CSS 变量进行主题设置。
使用 Radix DropdownMenu 构建完整的下拉菜单。包含常规项、分隔符、用于多选的复选框项、用于单选的无线电组，以及嵌套的子菜单。
使用 CSS 自定义属性设置主题系统。包含亮色和暗色模式支持、语义化颜色令牌和间距刻度。展示如何与 Radix 组件集成。
使用 Radix 原语创建一组表单组件（输入框、复选框、单选框、下拉选择）。包含正确的标签、使用 aria-invalid 的错误状态和使用 aria-describedby 的辅助文本。
最佳实践
- 始终包含 Dialog.Title 和 Dialog.Description 以确保可访问性合规
- 使用 asChild 属性将 Radix 行为附加到自定义样式组件
- 实现正确的焦点管理：在模态框中捕获焦点，关闭时恢复焦点
- 使用 Portal 组件在 DOM 层次结构外渲染对话框，以避免 z-index 问题
避免
- 覆盖 ARIA 属性 - Radix 自动管理这些属性，更改会破坏可访问性
- 跳过 Portal 渲染 - 导致 z-index 和父样式层叠上下文问题
- 不处理禁用状态 - 始终提供视觉反馈和正确的 aria-disabled
- 使用默认样式 - Radix 是无头的，始终应用你自己的样式