以 skill 自身的术语
该 skill 通过组合 shadcn/ui 组件（基于 Radix UI 原语和 Tailwind CSS）、以 utility-first 方式使用 Tailwind CSS 进行样式设计，以及基于 canvas 的视觉设计系统，来构建具备无障碍能力的 React 用户界面。它面向 Next.js、Vite、Remix 和 Astro 项目。组件通过 CLI 复制到你的代码库中，让你拥有完全的控制权和 TypeScript 类型安全。
该 skill 涵盖响应式布局、深色模式、design tokens、表单验证、数据表格，以及具有博物馆级品质的视觉排版。它包含关于组件模式、主题、无障碍（ARIA、键盘导航）、响应式断点和 Tailwind 自定义的参考文档。Python 脚本可自动完成组件安装和配置生成。
它产出什么
- 生成的 tailwind.config.js 包含自定义主题 token、颜色、字体、间距和断点扩展。
工作方式
- 01使用 Tailwind 初始化 Shadcn/ui
运行 npx shadcn@latest init 来配置 shadcn/ui 和 Tailwind CSS，并提示选择框架、TypeScript、路径和主题偏好。
- 02将组件添加到你的代码库
使用 npx shadcn@latest add button card dialog form 安装组件，该命令会将其复制到你的项目中，以便完全控制和自定义。
- 03使用工具类进行组合
将 shadcn/ui 组件与 Tailwind 工具类相结合，直接在 JSX 的 className 属性中实现响应式布局、间距、颜色和悬停状态。
- 04应用深色模式变体
使用 next-themes 进行主题切换，并为所有需要主题化的元素添加带 dark: 前缀的工具类，以获得一致的深色模式支持。
- 05利用 Radix 的无障碍能力
Radix UI 原语内置了 ARIA 模式、键盘导航和焦点管理，无需额外配置。