用途：该技能用于在项目中添加、定制和美化 shadcn/ui 组件，并配合 Tailwind CSS 主题系统。适用于新增 UI 组件、修改组件样式与变体、设置或调整主题、排查样式问题、创建自定义变体以及将 Tailwind CSS 与 shadcn/ui 集成。
主要能力：说明 shadcn/ui 并非 npm 包，而是将组件源码复制进项目，因此可直接修改。提供通过 CLI 添加组件的方法：npx shadcn@latest add button，也支持一次添加多个组件或使用 --all。介绍组件被放入 components/ui/ 目录，并说明常用的导入路径约定，例如 import { Button } from "@/components/ui/button"。讲解基于 CSS 变量的主题体系，颜色值以不带 hsl() 包裹的 HSL 形式定义在 app/globals.css，通过 :root 与 .dark 切换明暗主题。还说明组件通常使用 cva() 管理变体、cn() 合并类名。
使用方式：先安装所需组件，再在页面中导入使用；定制主题时修改 globals.css 中对应 CSS 变量；新增变体时编辑组件文件内的 variants 配置。暗色模式可通过 next-themes 等方式配合 .dark 类实现。
适用场景与限制：适合基于 Tailwind CSS 的前端项目进行组件化 UI 开发与设计系统定制。需要项目已正确配置 Tailwind、路径别名与 CSS 变量，否则可能出现找不到模块、样式未生效或暗色模式失效等问题。资料未提供收费、价格或平台相关信息。