菜单
shadcn/ui 组件库的安装、配置、组件实现、主题定制与排障指南。在 React/Next.js/Vite/Remix 等项目中需要：(1) 初始化或升级 shadcn/ui，(2) 查阅组件 API 与示例，(3) 定制 themes/tokens/暗色模式，(4) 解决 Radix/Tailwind 集成问题，(5) 确保交互与可访问性一致时自动触发。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/chaitin/MonkeyCodeOfficialPlugins --skill shadcnui-helper命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when the user explicitly requests PUA mode or signals frustration, repeated failures (2+), passive behavior, quality complaints, unverified completion, giving up, or asks to try harder/change approach. Common triggers: 'try harder', 'figure it out', 'stop giving up', 'you keep failing', '加油', '别偷懒', '你再试试', '为什么还不行', '你怎么又失败了', '又错了', '质量太差', '换个方法', 'stop spinning', 'you broke it', '/pua', 'PUA模式'. Do not trigger for normal first-attempt coding or information requests.
面向从零启动的公司/产品官网和品牌站项目，覆盖需求澄清、信息架构、UI 方向、Vite+Bootstrap 技术栈与交付。仅在用户需要 0→1 建设全新官网并期望结构化调研、设计与实现指引时使用。
Tailwind CSS 工具类参考和文档助手。提供 Tailwind CSS 文档的快速访问，用于查找工具类、理解 CSS 属性和查找代码示例。当 Claude 需要使用 Tailwind CSS 时使用此技能：（1）查找特定的工具类及其效果（2）理解如何在 Tailwind 中实现特定的 CSS 属性（3）查找布局、排版、颜色、间距等方面的代码示例和最佳实践（4）学习响应式设计模式、深色模式、悬停状态和其他变体
基于 SOC 职业分类
正在显示 SKILL.md
| name | shadcnui-helper |
| description | shadcn/ui 组件库的安装、配置、组件实现、主题定制与排障指南。在 React/Next.js/Vite/Remix 等项目中需要：(1) 初始化或升级 shadcn/ui，(2) 查阅组件 API 与示例，(3) 定制 themes/tokens/暗色模式，(4) 解决 Radix/Tailwind 集成问题，(5) 确保交互与可访问性一致时自动触发。 |
https://ui.shadcn.com/llms.txt（官方索引）。webfetch <URL> 拉取内容，完整阅读依赖、props、slot、可访问性提示，再开始实现。llms.txt，找到 Button 条目并获取 URL。webfetch 阅读 Button 文档，确认依赖（如 lucide-react）与 variant/size props。npx shadcn-ui@latest add button，检查 components/ 和 lib/ 新文件。llms.txt 搜索 Dark mode/Theming 两个条目，分别 webfetch 阅读。components.json（如 style: "default"）、tailwind.config.ts、globals.css 中的 CSS 变量。class="dark" 的切换逻辑，验证浅色/深色模式与 token 映射。