shadcn-ui

shadcn/ui 技能为开发者提供了一套自动化工作流程，用于将 shadcn/ui 组件库集成到现代 Web 应用程序中。此技能专为快速、AI 辅助开发而设计，处理组件分发、配置及样式的复杂性，简化了基于 Tailwind CSS 和 Radix UI 之可访问且精美组件的采用过程。无论您是在创建新项目还是扩展现有项目，此技能都能确保您的环境已正确配置以进行本地组件管理。

• 使用 npx shadcn@latest 进行自动化 CLI 集成，管理包含 init、add 及 diff 命令的组件生命周期。

• 深入支持 Vite、TanStack Router 及 TanStack Start 环境，提供关于路径别名 (path aliases) 与 TypeScript 配置的分步骤指引。

• 标准化 components.json 管理，确保设计令牌 (design tokens)、CSS 变量及目录结构设置正确。

• 无缝的 Tailwind CSS 配置与集成，包含对 Tailwind v4 的支持与自定义样式修改。

• 提供非标准环境的手动安装替代方案，涵盖如 class-variance-authority、clsx 及 lucide-react 等依赖项。

• 在触发组件添加之前，请确保项目已正确配置 tailwindcss，以避免样式冲突。

• 使用提供的 CLI 命令来维护代码库的整洁；请注意 shadcn/ui 推崇将组件代码直接复制到您的项目中，而非采用传统的 npm 包安装方式。

• 与 TanStack Router 协作时，建议使用推荐的项目模板，以确保组件与 hooks 的路径别名已预先配置完成。

• 定期执行 diff 命令，将本地组件版本与最新的注册表更新进行对照，在不覆盖自定义逻辑的前提下保持一致性。

• 此技能假设采用 TypeScript 为优先的工作流程，并要求具备 React 组件组合与 Tailwind 工具类别的功能性知识。