Tailwind (shadcn/ui Integration)
在 Claude 中快速生成符合 shadcn/ui 规范的 Tailwind CSS 组件代码。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind (shadcn/ui Integration)。 它的用途是：在 Claude 中快速生成符合 shadcn/ui 规范的 Tailwind CSS 组件代码。 详细介绍见：https://321skill.com/skills/tailwind-shadcn-ui-integration/ 请根据该页面的说明完成安装。
使用示例
“我需要一个用户资料卡片组件，包含头像、姓名、职位描述和一个‘关注’按钮，使用 shadcn/ui 的风格。”，它会生成一个结构完整的 React 函数组件，使用 Avatar、Button 等 shadcn/ui 组件，并应用恰当的 Tailwind CSS 工具类来布局和样式化。
介绍
这个 Skill 解决了前端开发者在构建现代 UI 时，需要快速、准确地生成符合特定设计系统（shadcn/ui）规范的 Tailwind CSS 代码的问题。它能够理解 shadcn/ui 的组件结构和样式约定，将你的自然语言描述转化为可直接使用的、高质量的组件代码。
使用时，你只需在 Claude 对话中描述你想要创建的 UI 组件（例如“一个带图标和悬停效果的按钮”或“一个可折叠的侧边栏导航”），该 Skill 便会调用其能力，生成结构清晰、样式符合 shadcn/ui 设计语言的 React 组件代码，通常包含必要的导入语句、JSX 结构和 Tailwind CSS 类名。
它非常适合使用 React 和 Tailwind CSS 技术栈，并希望遵循 shadcn/ui 设计规范来提升开发效率和 UI 一致性的前端开发者、全栈开发者以及 UI 设计师。
建议在明确组件功能和基本样式需求后使用，生成的代码可以作为起点，仍需根据具体项目上下文进行调整和集成。注意，它生成的是代码片段，不处理项目级别的配置（如安装依赖、设置 tailwind.config.js 等）。
核心特点
与通用的 Tailwind CSS 代码生成器不同，它深度集成了 shadcn/ui 的设计哲学和组件 API，生成的代码直接符合其可组合、可访问性强的组件模式，而非普通的样式堆砌。
注意事项
不适合生成与 shadcn/ui 设计范式无关的、高度定制化或复杂交互逻辑的组件代码。
常见问题
这个 Skill 能帮我安装 shadcn/ui 吗？
不能，它只负责生成组件代码，项目初始化和依赖安装需要你手动完成。
生成的代码可以直接复制使用吗？
通常可以，但需要确保你的项目已正确配置 Tailwind CSS 和安装了必要的 shadcn/ui 组件依赖。