ui
一个可自由定制和扩展的现代化UI组件库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui。 它的用途是：一个可自由定制和扩展的现代化UI组件库。 完整的 Skill 内容见：https://321skill.com/skills/ui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Next.js和Tailwind CSS开发一个管理后台，需要一个美观且功能完整的表格组件，支持排序和分页。” AI可以引导你查阅 shadcn/ui 的文档，找到对应的 Data Table 组件，并告诉你如何使用其 CLI 工具或手动复制的方式，将该组件的所有相关代码文件集成到你的项目中，然后你可以根据业务逻辑自由调整。
介绍
shadcn/ui 是一个开源的、基于代码的现代化UI组件库，旨在解决开发者构建美观、一致且可维护的用户界面时，对灵活性和控制权的需求。它不是一个传统的、通过 npm 安装的封装库，而是提供了一套高质量的、可直接复制粘贴到项目中的 React 组件代码。
使用方式非常直接：开发者访问其官方网站，浏览组件文档，然后通过一行命令或手动复制的方式，将选定组件的源代码（包括样式和逻辑）直接集成到自己的项目中。这种方式赋予了开发者对组件代码的完全所有权和控制权，可以像修改项目中的任何其他代码一样对其进行修改和扩展。
它非常适合那些希望使用高质量、设计精美的预制组件作为起点，但又不想被传统UI库的依赖、版本锁定和有限的自定义能力所束缚的前端开发者或团队。无论是构建内部工具、初创公司产品还是大型应用，都能从中受益。
与 Material-UI、Ant Design 等传统UI库相比，shadcn/ui 的核心区别在于其“无依赖”和“代码即资产”的理念。它不是作为一个外部包被安装，而是成为你项目源代码的一部分。这意味着你可以随意修改、重构、删除或扩展任何组件，无需担心破坏性更新或与项目其他部分的兼容性问题，真正实现了“开箱即用，用后即改”。
核心特点
核心区别在于它不是通过 npm 安装的“黑盒”依赖包，而是提供可直接复制到项目中的源代码，让开发者拥有组件的完全所有权和修改自由，避免了传统UI库的版本锁定和定制限制。
注意事项
不适合那些希望零配置、开箱即用，且不想维护组件底层代码的快速原型项目或对UI定制需求极低的场景。
常见问题
shadcn/ui 和 Tailwind CSS 是什么关系？
它深度集成了 Tailwind CSS 进行样式设计，但本身是一个独立的组件代码集合，你可以将其复制到任何支持 Tailwind 的 React 项目中使用。
如何更新从 shadcn/ui 复制来的组件？
由于组件代码已融入你的项目，更新需要手动比对和合并官方的新代码，这带来了完全控制权，但也意味着需要自行管理更新。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui/raw/index.md 读取 ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui/raw/index.md（查看排版版本）