shadcn skill 是什麼、怎麼安裝使用：shadcn/ui 官方 Skill，讓 Claude Code / Cursor 按你項目的配置寫對組件

本文根據 shadcn-ui/ui 倉庫裏該技能的 SKILL.md 與官方文檔的 Skills 頁面整理，資料核對於 2026-10-11。截至當日，GitHub 顯示 shadcn-ui/ui 約 12.5 萬 Star；skills.sh 榜單上該技能在 shadcn/ui 來源下累計安裝約 27.1 萬次。內容隨倉庫更新，以官方文檔為準。

是什麼

shadcn/ui 不是一個裝進 node_modules 的組件庫，而是一套「把組件源碼複製進你項目」的分發方式，由 CLI 負責添加和更新。正因為代碼在你自己的倉庫裏，每個項目的情況都不一樣：用的是哪個框架、路徑別名怎麼配、底層用 Radix 還是別的基礎庫、圖標庫是哪個、已經裝了哪些組件。大模型不知道這些，就容易寫出導入路徑不對、組件沒裝、接口對不上的代碼。

官方的 shadcn skill 就是來補這塊資訊的。文檔頁的說法是：它給 AI 助手提供「了解你項目」的 shadcn/ui 上下文，裝好之後，助手知道怎麼用符合你項目的接口和模式去查找、安裝、組合和定製組件。

包含哪些內容

它是單個技能，文檔列出了五塊知識：

• 項目上下文：每次交互時運行 shadcn info --json，取得項目配置——框架、Tailwind 版本、別名、基礎庫（base、radix 或 aria）、圖標庫、已安裝的組件和解析後的文件路徑。
• CLI 命令：init、add、search、view、docs、diff、info、build 的完整參考，包括各參數、試運行模式、智能合併流程、預設和模板。
• 主題與定製：CSS 變量、OKLCH 顏色、暗色模式、自定義顏色、圓角和組件變體，同時覆蓋 Tailwind v3 和 v4。
• 編寫註冊表：怎麼構建和發佈自己的組件註冊表，包括 registry.json 的格式、條目類型、依賴、構建和託管。
• MCP 服務：shadcn MCP 服務的配置和工具，用來搜尋、瀏覽和安裝各註冊表裏的組件。

工作方式分四步：在項目裏發現 components.json 時激活；運行 shadcn info --json 把配置注入上下文；按 shadcn/ui 的組合規則寫代碼（例如表單用 FieldGroup、選項組用 ToggleGroup、使用語義化顏色）；生成代碼前先用 shadcn docs、shadcn search 或 MCP 工具查到組件及其文檔。

怎麼安裝

官方文檔給的命令：

bash
npx skills add shadcn/ui

它把技能裝進當前項目，之後助手在處理 shadcn/ui 組件時會自動加載。項目裏需要先有 components.json（也就是已經執行過 shadcn init）。

怎麼用

文檔裏的示例提示：

• 「加一個帶電郵和密碼字段的登入表單」；
• 「做一個儀表盤，有側邊欄、統計卡片和數據表格」；
• 「從 @tailark 加一個首屏區塊」——從第三方註冊表取組件；
• 「切換到某個預設」。

適合誰 / 不適合誰

適合：

• 已經在用 shadcn/ui、並用 Claude Code、Cursor 等寫前端的開發者；
• 維護自家組件註冊表的團隊。

不適合：

• 沒有使用 shadcn/ui 的項目——它不是通用的介面設計技能；
• 想讓 AI 負責審美方向的場景，它只保證組件用得對，好不好看要配合設計類技能。

注意事項

• 許可：shadcn-ui/ui 倉庫為 MIT。
• 會執行命令：技能會運行 shadcn info，添加組件時會往項目裏寫入文件並安裝依賴，改動前可以用 CLI 的試運行或 diff 先看。SKILL.md 的 allowed-tools 只放行 shadcn CLI 的命令；user-invocable: false 表示它由模型按需自動加載，不作為斜槓命令出現。
• 第三方註冊表：從非官方註冊表安裝的組件等同於引入第三方代碼，來源要自己把關。
• 與 MCP 的關係：技能提供知識和規則，MCP 服務提供查詢和安裝的工具，兩者可以同時用。
• skills.sh 上 shadcn/ui 與 shadcn-ui/ui 兩個來源名都有記錄，指向的是同一個官方倉庫；另有不少第三方的同名技能，安裝時認準官方命令。