SuperAPI AI 工具集

setup-leafygreen

编程与开发

查看项目

更新于 10-16 06:49

技能介绍

用途:在 Vite + React + TypeScript 项目中搭建 MongoDB LeafyGreen UI 设计系统,按既定步骤依次执行。

主要能力与用法:先检查 package.json、src/main.tsx、src/App.tsx、vite.config.ts 是否存在,缺失时用 npm create vite@latest . -- --template react-ts 脚手架。随后安装 @leafygreen-ui/leafygreen-provider、button、typography、tokens、icon、icon-button、logo,以及开发依赖 vite-plugin-node-polyfills,用于提供浏览器缺失的 Node 内置模块(如 Buffer),否则页面可能空白且无报错。

接着修改 vite.config.ts,加入 nodePolyfills 插件,并对 react、react-dom 做 dedupe 与 alias,避免 LeafyGreen 自带 React 副本导致 Invalid hook call。在 src/main.tsx 用 LeafyGreenProvider(默认导出)包裹 App,Provider 只放在 main.tsx。替换 src/index.css,移除 Vite 默认样式,写入 Euclid Circular A 与 MongoDB Value Serif 的 @font-face 及 body 样式,不要在 index.html 加字体。

用 src/App.tsx 做冒烟测试,命名导入 { H1 } 与 { Button },并清空 src/App.css;创建 src/components/ 目录。运行 npm run dev 确认样式渲染,npm run build 验证零错误,LeafyGreen 包体积产生的 chunk 大小警告属预期。

限制:调试问题前参阅 references/gotchas.md,涉及 React 19 类型错误、多 React 崩溃、darkMode 等问题;编辑 .tsx/.ts 时另可加载 leafygreen-authoring 技能。未提供的收费、价格等信息暂未提供。