ui
用于构建自定义组件库的 React UI 组件集
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui。 它的用途是：用于构建自定义组件库的 React UI 组件集 完整的 Skill 内容见：https://321skill.com/skills/ui-shadcn/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要一个美观且可访问的日期选择器组件。”，它会引导你使用 shadcn/ui 的 CLI 工具，将日期选择器组件的代码复制到你的项目中，你可以立即看到一个功能完整的组件，并可以根据你的设计规范直接修改其 Tailwind CSS 类名或结构。或者，当你说：“我想统一我们项目的按钮样式，并建立一个基础组件库。”，它可以协助你从 shadcn/ui 中挑选并集成基础的 Button、Input 等组件，作为你自定义组件库的起点。
介绍
shadcn/ui 是一个开源的 React 组件集合，旨在解决开发者需要高质量、可定制且易于集成的 UI 组件，但又不想被特定组件库的依赖和设计风格所束缚的问题。它提供了一系列基于 Radix UI 和 Tailwind CSS 构建的、设计精美的组件，如按钮、表单、对话框等，开发者可以直接复制这些组件的代码到自己的项目中，从而获得完全的控制权。
使用方式非常直接：通过其提供的 CLI 工具，你可以将选中的组件代码直接复制到你的项目文件中，然后像使用自己编写的组件一样进行修改和扩展。这种方式避免了传统 UI 库通过 npm 包引入所带来的版本锁定和依赖臃肿问题。
它非常适合那些追求代码所有权、希望 UI 设计与品牌高度一致，或正在从零开始搭建自己组件库的前端开发者和全栈开发者。无论是初创项目还是成熟产品，都可以利用它作为高质量的基础组件起点。
建议在开始前先熟悉 Tailwind CSS，因为这是其样式基础。同时，由于组件代码直接复制到项目中，后续的更新需要手动同步，这既是灵活性也是维护成本，适合对 UI 有较高定制化要求的团队。
核心特点
与传统 UI 库（如 MUI、Ant Design）不同，它不是通过 npm 安装的包，而是通过复制代码到项目中来使用，因此你拥有组件的全部代码和完全的控制权，可以轻松进行任何深度的定制和修改，而无需担心破坏性更新或样式覆盖的难题。
注意事项
不适合希望开箱即用、通过简单安装和导入就能获得完整且自动更新 UI 库的快速原型项目或新手开发者。
常见问题
shadcn/ui 和普通的 UI 组件库有什么区别？
主要区别在于使用方式：它不是通过 npm 安装的包，而是提供可复制的源代码，让你完全拥有并控制组件，便于深度定制和集成。
使用 shadcn/ui 需要安装 Tailwind CSS 吗？
是的，它是基于 Tailwind CSS 构建的，因此你的项目需要配置好 Tailwind CSS 才能正常使用其样式。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-shadcn/raw/index.md 读取 ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-shadcn/raw/index.md（查看排版版本）