SuperAPI AI 工具集

shadcnui-helper

前端与建站

查看项目

更新于 10-15 17:33

技能介绍

用途:在 React/Next.js/Vite/Remix/Astro 等框架中接入或升级 shadcn/ui,安装组件、查阅 props 与依赖、调试交互与主题,并处理 Tailwind、Radix、暗色模式等集成冲突及 SSR/CSR、Hydration、TS 配置问题。

必要用法:先访问唯一入口 https://ui.shadcn.com/llms.txt 作为官方索引,在索引中搜索所需主题或组件,复制对应 Markdown URL,再用 webfetch <URL> 拉取内容,完整阅读依赖、props、slot 与可访问性提示后再实现;遇到新问题回到索引查找,不要凭记忆编写。

示例流程一(安装 Button):在 llms.txt 找到 Button 条目获取 URL,webfetch 阅读文档确认依赖(如 lucide-react)与 variant/size props,运行 npx shadcn-ui@latest add button,检查 components/ 和 lib/ 新文件,再在页面引用并按文档测试 hover/focus/disabled 状态。

示例流程二(开启暗色主题):在 llms.txt 搜索 Dark mode 与 Theming 条目并分别 webfetch 阅读,按文档更新 components.json(如 style: "default")、tailwind.config.ts、globals.css 中的 CSS 变量,为根节点添加 class="dark" 的切换逻辑,验证浅色/深色模式与 token 映射;若有自定义 tokens,再回到索引查找 Theming 延伸章节确认写法。

限制:官方资料未提供收费、价格、支持平台范围等更多信息,暂未提供。