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 工具來管理這些元件的版本與生命週期。