shadcn-ui

shadcn/ui 技能為開發者提供了一套自動化工作流程，用於將 shadcn/ui 元件庫整合至現代網頁應用程式中。此技能專為快速、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 工具類別的功能性知識。