使用带有 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