使用帶有 Radix UI 或 Base UI、Tailwind CSS 4 和 React 19 的 shadcn/ui 建立可存取、可自訂的元件庫。涵蓋元件所有權、oklch CSS 主題、帶有 Field 和 Zod 的類型安全表單、CLI 工作流程和登錄模式。在新增 shadcn/ui 元件、配置主題、使用 Zod 建立表單、建立自訂登錄檔或編寫可存取的元件變體時使用。用於 shadcn CLI、暗模式、組件變體、表單驗證。
透過命令列快速安裝 shadcn-ui AI 技能到你的開發環境
來源：oakoss/agent-skills。
Guides building accessible, customizable UI with shadcn/ui as a code generation platform (not an npm dependency). Components are copied into your project via the CLI and fully owned. Supports Radix UI or Base UI primitives, Tailwind CSS 4 with oklch color tokens, React 19 direct ref patterns, and type-safe form validation with the Field component and Zod.
When to use: Adding shadcn/ui components, theming with CSS variables and oklch colors, building forms with React Hook Form or TanStack Form, creating custom registries, composing accessible component variants, setting up dark mode.
When NOT to use: Non-React frameworks (use shadcn-vue or shadcn-svelte instead), projects using a different component library (MUI, Chakra), projects not using Tailwind CSS.
使用帶有 Radix UI 或 Base UI、Tailwind CSS 4 和 React 19 的 shadcn/ui 建立可存取、可自訂的元件庫。涵蓋元件所有權、oklch CSS 主題、帶有 Field 和 Zod 的類型安全表單、CLI 工作流程和登錄模式。在新增 shadcn/ui 元件、配置主題、使用 Zod 建立表單、建立自訂登錄檔或編寫可存取的元件變體時使用。用於 shadcn CLI、暗模式、組件變體、表單驗證。 來源：oakoss/agent-skills。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/oakoss/agent-skills --skill shadcn-ui使用帶有 Radix UI 或 Base UI、Tailwind CSS 4 和 React 19 的 shadcn/ui 建立可存取、可自訂的元件庫。涵蓋元件所有權、oklch CSS 主題、帶有 Field 和 Zod 的類型安全表單、CLI 工作流程和登錄模式。在新增 shadcn/ui 元件、配置主題、使用 Zod 建立表單、建立自訂登錄檔或編寫可存取的元件變體時使用。用於 shadcn CLI、暗模式、組件變體、表單驗證。 來源：oakoss/agent-skills。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/oakoss/agent-skills --skill shadcn-ui 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/oakoss/agent-skills