W Shadcn

blockmatic/basilic-skills/skills/workflow/w-shadcn

作者 blockmatic7e05e2abd052dc6b526e8a28e36d102d42bfd635無授權條款1 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫6 天前更新

Install shadcn/w-ui primitives in the shared UI package using monorepo import paths.

僅含說明Software Development
AI 產生的概覽

在 monorepo 的共用 UI 套件中安裝或擴充 shadcn/w-ui 基礎元件，並使用正確的匯入路徑。

功能
此技能會指引在 monorepo 的共用 UI 套件中安裝或擴充 shadcn/w-ui 基礎元件，元件位置由 components.json 指定。它說明了正確的匯入路徑、所需的 style 設定，以及使用 render 搭配 data-slot 或 data-open 的組合慣例。它也要求後續動作：用 /w-ui 調整畫面、對變更的檔案執行 lint，並在行為或指令變更時更新文件。
適用情境
適用於在共用 UI 套件中新增 shadcn 基礎元件或擴充現有元件時。也適用於需要讓匯入路徑、元件樣式或組合慣例與 monorepo 設定保持一致的情況。
執行需求
不含指令碼，僅為說明性指示。它假定存在具有共用 UI 套件的 monorepo、components.json 檔案，並在變體不明確或安裝發生錯誤時可使用 shadcn MCP。它也引用了配套技能 /w-ui、/w-docs 和 shadcn-v3。

Install or extend a shadcn primitive. Reshaping a screen stays on /w-ui. Follow shadcn-v3.

  1. Use shadcn MCP only when unsure about variants or when hitting an install error.
  2. Install in the shared UI package from components.json (Basilic example: packages/w-ui/src/components/).
  3. Import @repo/w-ui/components/* and that package’s cn. Rare primitives: @repo/w-ui/base (not @base-ui/react, not @radix-ui/*, not deleted @repo/w-ui/radix). Keep components.json "style": "base-vega". Compose with render + data-slot / data-open (not asChild / data-state).
  4. After the primitive exists, reshape screens with /w-ui if the job is a surface, not only a component. Run lint on the changed files.
  5. Docs: /w-docs if behavior or commands changed.

來源與署名

來源：blockmatic/basilic-skills位於skills/workflow/w-shadcn提交7e05e2a

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 blockmatic/basilic-skills 的技能

W V0

blockmatic

依目前檔案草擬 Next.js 與 shadcn 的 v0.dev 提示詞，並在使用者確認後才開啟。

AI & Agents16 天前更新

W Unit

blockmatic

指導為目前變更加入單元測試，測試檔案與實作放在一起，並遵循儲存庫測試慣例。

Software Development16 天前更新

W Ui

blockmatic

使用現有設計權杖、無障礙互動與有界線的渲染驗證來建構或改造面向使用者的介面。

Design & Creative16 天前更新

W Test

blockmatic

執行儲存庫中記載的測試指令碼，修正造成失敗的根本原因，並反覆執行直到測試套件通過。

Software Development16 天前更新

W Tdd

blockmatic

以紅-綠-重構的 TDD 循環指導實作所要求的程式碼增量，並執行聚焦測試與相關測試套件。

Software Development16 天前更新

W Security

blockmatic

依據儲存庫安全文件與現有檢查，審查程式碼變更或程式碼樹中的安全缺陷。

Security16 天前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新