shadcn-ui

此技能为使用 shadcn/ui 库构建使用者界面提供专业支援，这是一个包含高质量、可访问 React 组件的开放代码集合。它专为在现代技术堆栈中工作的前端开发人员与工程师设计，特别是使用 Vite、TanStack Router、Next.js 或 Remix 的使用者。通过利用 shadcn/ui 注册系统，此技能可自动化组件安装、配置与整合，确保 UI 组件无缝加入您的代码库，同时维持与设计系统的一致性。

• 简化 CLI 操作，包括初始化项目、新增特定组件，以及管理 Tailwind CSS、Radix UI 原生组件与 lucide-react 图示等依赖项。

• 提供深入的 components.json 配置支持，自动更新路径别名、路径映射 (例如 @/*) 及 tailwind.config.js 样式。

• 协助快速建立 TanStack Router 与 Vite 环境，包括自动设定目录结构、tsconfig 路径别名与全局 CSS 导入。

• 支持构建复杂 UI 的进阶组合模式，允许开发人员将基础组件扩充为完整功能的应用程序模块。

• 提供关于样式、主题设计与维持项目中开放代码库结构的最佳实践指导。

• 当您启动 shadcn/ui 新项目、新增如对话框 (Dialog)、卡片 (Card) 或按钮 (Button) 等复杂组件，或调试路径别名与样式冲突时，请使用此技能。

• 在触发安装前，请确保您的环境符合 Tailwind CSS 整合与 TypeScript 模块解析的需求。

• 输入通常涉及组件名称或配置变更，输出则会产生 CLI 指令、代码片段与实作步骤。

• 最适合重视无障碍性以及干净、易于维护与修改的组件代码库，而非依赖繁重套件管理的 UI 团队。

• 请注意，由于 shadcn/ui 组件会被复制到您的源码中，您需要负责使用提供的 CLI 工具来管理这些组件的版本与生命周期。