shadcn-baseui
指导AI正确使用shadcn/ui与Base UI的编码技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：shadcn-baseui。 它的用途是：指导AI正确使用shadcn/ui与Base UI的编码技能 完整的 Skill 内容见：https://321skill.com/skills/shadcn-baseui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请帮我用shadcn/ui的AlertDialog组件创建一个确认对话框，并自定义触发按钮。”，它会生成使用Base UI正确模式（如`render`属性）的代码，而不是错误地使用Radix UI的`asChild`属性。或者当您说：“这段使用Dialog的代码报错了，帮我看看”，AI会基于Base UI的API来分析和提供修正建议。
介绍
该技能旨在解决AI编码助手在使用shadcn/ui组件库时的一个常见问题。较新的shadcn/ui项目推荐使用Base UI作为底层库，而非早期的Radix UI。但由于大语言模型的训练数据可能滞后，它们常常会错误地建议使用Radix UI的特定模式（如asChild属性），而不是Base UI对应的正确模式（如render属性），导致开发者需要频繁手动修正，影响开发效率。
安装此技能后，AI编码助手（如Claude、Cursor等）在相关上下文中会自动采纳正确的编码模式。当用户请求编写或修改使用了shadcn/ui组件的代码时，AI将优先使用Base UI的API和最佳实践，例如正确使用render属性来组合组件，从而生成更准确、更符合项目当前技术栈的代码。
此技能主要面向使用shadcn/ui与Base UI技术栈的前端开发者和全栈开发者。特别是那些在项目中已经配置了Base UI，但发现AI助手经常给出过时或错误代码建议的开发者，能够显著提升与AI协作编码的流畅度和准确性。
建议在项目初期或明确技术选型为shadcn/ui + Base UI后尽早安装此技能。它主要作用于AI的代码生成逻辑，对项目本身的构建和运行没有影响。请注意，该技能专注于解决shadcn/ui与Base UI配合时的特定模式问题，对于其他UI库或框架的代码生成可能没有优化效果。
核心特点
该技能精准解决了AI因训练数据滞后而混淆shadcn/ui中Base UI与Radix UI API的特定问题，能确保AI生成的代码直接使用正确的`render`等Base UI属性，而非错误的Radix UI的`asChild`属性，避免了开发者每次都需要手动纠正的麻烦。
注意事项
该技能仅针对使用shadcn/ui并搭配Base UI的技术栈，对于使用Radix UI或其他UI库的shadcn/ui项目，或者非shadcn/ui的组件开发场景没有优化作用。
常见问题
这个技能会影响我项目中已有的代码吗？
不会，它只影响AI助手（如Claude、Cursor）生成新代码或修改代码时的建议，不会直接修改您项目中的已有文件。
如果我的shadcn/ui项目用的是Radix UI，还需要这个技能吗？
不需要，这个技能是专门为使用Base UI的项目设计的，用于避免AI错误地使用Radix UI模式。如果您仍在使用Radix UI，则无需安装。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/shadcn-baseui/raw/index.md 读取 shadcn-baseui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/shadcn-baseui/raw/index.md（查看排版版本）