shadcn-ui

shadcn-ui 技能概覽

shadcn-ui 是用來做什麼的

shadcn-ui 技能可幫你在真實應用程式中規劃、安裝並調整 shadcn/ui 元件，而不是把它們當成可直接套用的函式庫來看待。它特別適合需要實作導向 shadcn-ui 指南的開發者，用於 Design Implementation：選對元件、串接依賴，並把複製進來的程式碼調整到符合既有產品。

這個 shadcn-ui 技能有什麼不同

shadcn/ui 會被複製到你的程式碼庫中，所以核心決策不是「我要 import 哪個套件？」而是「我要怎麼安裝正確的元件，並在之後自己負責這段實作？」當你重視可自訂性、基於 Tailwind 的樣式、Radix 或 Base UI primitives，以及不想要黑盒式 UI 行為時，這個 shadcn-ui 技能特別有用。

最適合的使用情境

當你需要 shadcn-ui 安裝協助、元件探索、模式選擇，或想為表單、表格、驗證流程、版面配置與可重用 UI 區塊找一個安全起點時，就很適合使用它。如果你只是想做純視覺 mockup、沒有程式碼庫脈絡，或你的技術棧本來就不支援 React、Tailwind 以及元件複製工作流程，那它就沒那麼適合。

如何使用 shadcn-ui 技能

正確安裝並觸發 shadcn-ui

用以下指令安裝 shadcn-ui 技能：
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global

接著用一段清楚描述應用情境、目標元件與預期行為的任務來呼叫它。好的提示詞會明確寫出 framework、routing 模式、樣式限制，以及你要的是安裝、自訂，還是兩者都要。

提供 shadcn-ui 技能正確的輸入

弱的提示詞只會說「加一個 button」。更好的提示詞會這樣寫：「在我的 Next.js app 中，為註冊畫面安裝 shadcn-ui 的 button、card 和 form 元件，讓 Tailwind classes 與我們的 neutral theme 保持一致，並列出需要變更的檔案。」這種細節能幫技能選對元件，也能避免輸出過於泛化。

先閱讀這些檔案

先從 SKILL.md 了解工作流程，再查看 README.md、resources/component-catalog.md、resources/setup-guide.md、resources/customization-guide.md 與 resources/migration-guide.md。也請檢視 examples/form-pattern.tsx、examples/data-table.tsx 和 examples/auth-layout.tsx，看看 shadcn-ui 在真實應用模式中是怎麼使用的。

採用以元件為先的工作流程

使用 shadcn-ui 時，先確認元件類別，再確認依賴，接著檢視範例模式，最後才把程式碼改成適合你的應用。若你是在做 Design Implementation，請先清楚描述版面目標、狀態與限制，因為這個技能最擅長把產品意圖轉成元件組合。

shadcn-ui 技能 FAQ

如果我已經會 shadcn/ui，還需要 shadcn-ui 技能嗎？

需要，尤其當你想更快做出安裝決策並減少實作錯誤時。shadcn-ui 技能不只是把文件再提醒一遍；它能幫你從「有哪些元件？」推進到「我應該在程式碼庫裡複製、設定、修改哪些內容？」

shadcn-ui 只適用於 Next.js 嗎？

不是。這套流程以 React 為核心，但這個技能關注的是元件擁有權與整合，而不是單一 framework。它在已經使用 Tailwind CSS、而且能接受本機元件檔案的專案中最強。

shadcn-ui 最大的界線是什麼？

它不是託管式元件庫。如果你的團隊期待像套件一樣升級、只保留極少本機程式碼，或不想使用 Tailwind 的視覺系統，那 shadcn-ui 可能就不是好選擇。當程式碼擁有權與客製化 Design Implementation 比集中式函式庫管理更重要時，這個技能最適合。

shadcn-ui 對新手友善嗎？

算是中等友善。新手可以拿它來處理常見 UI 模式，但仍需要理解檔案放置位置、樣式 token 與元件組合。最穩的做法是先從一個簡單元件開始，確認安裝沒問題，再擴展到較大的表單或表格。

如何改進 shadcn-ui 技能

描述設計目標，不要只說元件名稱

輸入越精準，shadcn-ui 的輸出通常越好。與其說「做一個 modal」，不如說「做一個用來刪除 team 的 destructive-confirmation dialog，要有警告狀態、取消按鈕，以及 loading submit state。」這能讓技能知道實作時該優先優化什麼。

盡早提供你的技術棧與限制

如果你有說明 framework、TypeScript 使用方式、Tailwind 設定、app router 或 pages router，以及是否使用 Radix UI 或 Base UI primitives，這個技能會表現得更好。這些細節會影響 shadcn-ui 的安裝步驟、依賴選擇，以及輸出需要調整多少。

明確要求你要的實作路徑

如果你想快速採用，就要求最小安裝加上第一個畫面。如果你想走 design system 路線，就要求可重用 variants、token 對齊，以及任何共用版面 primitives。這樣可以避免技能給你太少程式碼，或是抽象層級過高。

以可運作的基礎版本再迭代

先用第一個結果確認元件結構，再逐步調整間距、variants、無障礙標籤，以及 empty/error/loading states。最常見的失敗原因是 UI 意圖描述不夠明確，所以最有效的改進通常是第二輪提示詞更精準，而不是更長。