SuperAPI AI 工具集

sgds-migration

前端与建站

查看项目

更新于 10-15 21:55

技能介绍

用途:帮助用户把已有前端应用从其他组件库迁移到 SGDS Web Components,按阶段推进。

主要能力:分四阶段工作流。阶段一扫描前端技术栈(框架、当前 UI 库、测试运行器、构建工具、包管理器),React 项目可用 python scripts/analyze_react_stack.py <project_path> 分析并输出 JSON 迁移计划,Vue/Angular/原生 JS 建议人工讨论。阶段二按 sgds-getting-started 技能完成 SGDS 安装:在 head 引入 Inter 字体、按顺序导入主题与 CSS(禁用 Tailwind preflight,使用 tailwindcss/theme.css 与 tailwindcss/utilities.css)、在入口 import '@govtechsg/sgds-web-component'。阶段三迁移测试,可选 Path A(Vitest + Playwright,完整 Shadow DOM 支持)或 Path B(为现有 Jest/RTL 打补丁)。阶段四用 SGDS v3 的 sgds: 前缀工具类替换旧样式系统,保持元素位置不变。阶段五为迁移后检查清单。

使用方式:按阶段顺序执行;React 中统一使用 PascalCase 包装组件(如 import SgdsButton from "@govtechsg/sgds-web-component/react/button"),不要混用小写标签;优先使用 SGDS 组件而非原生 HTML;表单操作按钮右对齐(sgds:justify-end)。按来源库加载对应映射文件(from-mui.md、from-chakra.md、from-shadcn.md、from-sgds-react.md),并参考 events.md、css-utilities-migration.md。

适用场景:从 MUI、Chakra、shadcn/ui、Bootstrap、Ant Design、Vuetify、Angular Material 或 SGDS v1/v2 迁移到 SGDS Web Components 的前端项目。

限制:Vue、Angular、原生 JS 的自动分析工具尚在开发中;JSDOM 无法完整测试 Shadow DOM 内部;技能只负责 UI 组件与测试基础设施迁移,业务逻辑测试需用户自行编写;具体耗时与价格资料未提供。