用途:这是 forcedotcom/sf-skills 中的前端生成技能,针对已有、已脚手架化的 Salesforce UI Bundle 应用做视觉或 UI 变更(页面、组件、页头页脚、布局导航、品牌改名等)。修改 uiBundles/*/src/ 下任何文件或 bundle 的 index.html 前必须先激活。
主要流程与能力:
- 解析目录:必须运行 node scripts/resolve-ui-bundle.mjs [project-root],它读取 sfdx-project.json 的 packageDirectories[0].path,在 <sourceDir>/main/default/uiBundles/ 下查找。退出码 0 表示唯一 bundle;退出码 2 表示多个候选,须先问用户是哪个,不得猜测;退出码 1 表示项目配置缺失或无 bundle。所有 npm/lint/build/dev 命令都要在解析出的 bundle 目录内运行。
- 前置检查:运行 node scripts/check-preconditions.mjs <bundle-dir>,确认存在 src/appLayout.tsx、src/routes.tsx、src/components/ui/。缺失则停止,不得用通用 React 知识或手写脚手架补齐,应引导用户先用 experience-ui-bundle-app-coordinate 或 experience-ui-bundle-metadata-generate 完成脚手架。
- 任务分类:页面(references/page.md)、页头/页脚(references/header-footer.md)、组件(references/component.md)。应用改名属于页头/页脚任务,需同时改 src/appLayout.tsx 与 index.html 的 <title>。
- 预置功能:动手实现非平凡能力前,先调用 experience-ui-bundle-features-generate 查看目录;已安装的功能要按其 README 接入并配置,未安装的由该技能安装,只有目录中无匹配功能才自行实现。
- 规范:路由统一用 react-router(配合 createBrowserRouter/RouterProvider 时不要用 react-router-dom);basename 必须从 <base href> 运行时推导,不得硬编码;组件用 shadcn/ui,样式用 Tailwind;TypeScript 禁用 any 与不安全断言;不得导入 lightning/* 或 @wire,写数据访问代码前必须先调用 experience-ui-bundle-salesforce-data-access。
- 设计:需先确定明确美学方向;禁止默认使用 Inter/Roboto/Arial/Space Grotesk/系统字体;移动端响应式(Tailwind 断点、44px 触控目标)为强制要求。
- 验证:在 bundle 目录运行 npm run lint(0 错误)、npm run build(成功)、npm run dev(能正常启动),并运行 node scripts/verify-rules.mjs <改动文件或目录>,退出码 1 时须逐条修复。
限制:仅适用于已脚手架化的现有 UI Bundle;不得编造或回退到磁盘上不存在的 bundle 名;不得用通用 React 方案替代缺失脚手架;资料未提供具体功能目录清单、脚本实现细节与支持平台范围之外的信息。