appbuilder-ui-scaffolder

App Builder UI 脚手架

为 Adobe Experience Cloud Shell SPA 生成 React Spectrum UI。这是一项基于参考资料的技能——Agent 会读取模式，并生成适合上下文的代码，而不是复制静态模板。

正在构建 Workfront 扩展 UI？Workfront 扩展点（主菜单、每个对象的左侧面板、自定义表单小组件）和 Workfront 共享上下文位于 workfront-ui-extension 中。对于它所调用的通用 Spectrum 组件模式（页面、表单、表格、对话框、导航），请使用此技能。

模式快速参考

确定用户的意图，然后阅读所引用的章节，生成量身定制的代码。

用户需求	参考资料	关键组件
带 Shell 上下文的新页面	references/ui-patterns.md § Page + references/shell-integration.md	View、Heading、Content
带验证的表单	references/ui-patterns.md § Form	Form、TextField、NumberField、Picker、Button
数据表格（可排序、分页）	references/ui-patterns.md § Table	TableView、TableHeader、Column、TableBody、Row、Cell
确认对话框／模态框	references/ui-patterns.md § Dialog	DialogTrigger、AlertDialog、Dialog
导航布局	references/ui-patterns.md § Navigation	Tabs、Breadcrumbs、Flex
ExC Shell 设置	references/shell-integration.md	@adobe/exc-app、Provider、defaultTheme
将 UI 连接到后端操作	references/action-integration.md	携带 IMS 令牌的 fetch()
AEM UI 扩展（CF Console、CF Editor、Universal Editor、Assets View）	references/aem-extensions.md	@adobe/uix-guest、register()、sharedContext
Content Hub 扩展（面板、卡片操作、批量操作）	references/aem-extensions.md § Content Hub	@adobe/uix-guest、register()、attach()、assetDetails／card／selectionBar 命名空间、host.modal.openDialog
调试 UI 问题	references/debugging.md	Shell 加载指示器、CORS、空白屏幕、身份验证

快速路径（适用于明确的请求）

如果用户的请求明确对应上面某一种模式——用户点名了特定组件类型、引用了某种 UI 模式，或描述了明显符合某一条目的用例——请直接执行：

1. 查看用户现有的项目结构（web-src/src/），了解其惯例（文件命名、导入风格、现有组件）
2. 阅读匹配的 references/ 文件，了解组件指导和带注释的示例
3. 生成符合用户现有惯例的代码
4. 如果存在 React Router，则接入现有路由
5. 对照 references/checklist.md 进行验证

快速路径触发示例：

• “添加一个数据表格页面” → 阅读 references/ui-patterns.md § Table，直接生成

• “创建一个用于提交数据的表单” → 阅读 references/ui-patterns.md § Form，直接生成

• “添加一个确认对话框” → 阅读 references/ui-patterns.md § Dialog，直接生成

• “设置 Shell 集成” → 阅读 references/shell-integration.md，直接生成

• “构建一个 Content Fragment Console 扩展” → 阅读 references/aem-extensions.md § CF Console，直接生成

• “为 Universal Editor 添加一个标题栏菜单按钮” → 阅读 references/aem-extensions.md § Universal Editor，直接生成

• “使用 uix-guest 创建 AEM 扩展” → 阅读 references/aem-extensions.md § Core Registration，直接生成

• “添加 Content Hub 面板／卡片操作／批量操作” → 阅读 references/aem-extensions.md § Content Hub，直接生成

• “从头创建／搭建一个新扩展” → 转到 appbuilder-project-init 技能（Console 设置、模板选择、文件生成、开发服务器）

如果存在任何歧义——可能适用多种模式、约束不明确，或用户提供的信息不足——则转入下面的完整工作流。

快速参考

• UI 入口： 将组件放在 web-src/src/components/ 中。这是标准的 App Builder SPA 布局。
• Shell 集成： 始终使用 @adobe/exc-app 初始化，并调用 runtime.done() 关闭加载微调器。请参阅 references/shell-integration.md。
• Spectrum 导入： 所有组件均来自 @adobe/react-spectrum。完整目录请参阅 references/spectrum-components.md。
• 路由： 使用 react-router-dom 在 Shell 中进行 SPA 导航。请参阅 references/routing-patterns.md。
• 后端调用： 调用 App Builder 操作时，传递 Shell 的 IMS 令牌。请参阅 references/action-integration.md。
• 主题： 使用 <Provider theme={defaultTheme}> 包裹应用，以应用 Spectrum 样式。
• 无障碍： 所有 Spectrum 组件都内置 ARIA 支持。请为交互元素添加标签。请参阅 references/checklist.md。
• 调试： 有关常见问题（空白屏幕、CORS 错误、身份验证失败、加载缓慢），请参阅 references/debugging.md。

完整工作流（适用于模糊或复杂请求）

1. 查看用户的项目 — 检查 web-src/ 结构、React 版本、现有导入、路由设置，以及 app.config.yaml 中的扩展类型
2. 与用户确认目标、约束和验收标准
3. 从上方的快速参考表中确定所需的 UI 模式
4. 阅读相应的 references/ 文件，了解组件指南和带注释的示例
5. 按照用户现有的约定生成代码（而非通用模板）
6. 如果存在 React Router，则接入现有路由（references/routing-patterns.md）
7. 如果需要获取数据，则连接后端操作（references/action-integration.md）
8. 完成前根据 references/checklist.md 进行验证
9. 如果用户报告问题，请参阅 references/debugging.md，了解常见的 SPA 调试场景
10. 总结决策、组件选择和后续操作

用户提示词示例

• “为我的 App Builder SPA 添加一个用于显示数据表的页面。”
• “在我的 App Builder 应用中创建一个用于提交客户数据的表单。”
• “为我的 App Builder 应用设置 Experience Cloud Shell 集成。”
• “删除记录前添加一个确认对话框。”
• “为我的 App Builder SPA 构建一个导航侧边栏。”
• “我的 App Builder 应用需要一个包含表单字段的设置页面。”
• “构建一个带有操作栏按钮的 Content Fragment Console 扩展。”
• “在 Content Fragment Editor 中添加一个自定义 RTE 工具栏按钮。”
• “创建一个带有标题菜单按钮的 Universal Editor 扩展。”
• “向 Content Hub Asset Details Dialog 添加一个自定义面板。”
• “构建一个 Content Hub 扩展。”
• “为 Content Hub 资源卡片添加一个操作按钮。”
• “向 Content Hub 选择栏添加一个批量操作。”
• “自定义 Content Hub 扩展 UI。”

需要收集的输入

• 当前仓库路径和 web-src/ 结构
• 目标 UI 模式和具体数据要求
• 现有路由设置（如有）
• 用于获取数据的后端操作 URL（如适用）
• 非功能性约束：无障碍要求、响应式断点

交付内容

• 符合用户项目约定的 React Spectrum 组件文件
• 更新后的路由配置（如适用）
• 与后端操作的集成（如适用）
• 根据质量检查清单进行验证

质量标准

• 所有生成的组件均使用 React Spectrum — 标准模式不使用自定义 CSS
• Shell 集成包含 runtime.done() 调用
• 交互元素具有无障碍标签
• 正确处理加载和错误状态
• 将 IMS 令牌正确传递给后端操作调用

参考资料

• 使用 references/ui-patterns.md 查看带注释的 UI 模式示例（页面、表单、表格、对话框、导航）。
• 使用 references/spectrum-components.md 查看 React Spectrum v3 组件目录，包含导入语句、属性和无障碍信息。
• 使用 references/shell-integration.md 查看 ExC Shell 集成（@adobe/exc-app、runtime.done()、IMS 令牌）。
• 使用 references/routing-patterns.md 查看 ExC Shell 中使用 React Router 进行 SPA 路由的模式。
• 使用 references/action-integration.md 查看如何从 SPA 调用后端操作。
• 使用 references/checklist.md 进行交接前 UI 质量验证。
• 使用 references/aem-extensions.md 查看 AEM UI Extension 模式（@adobe/uix-guest）——Content Fragment Console/Editor、Universal Editor、Assets View 和 Content Hub。
• 使用 references/debugging.md 查看常见的 SPA 调试场景（Shell 加载动画、CORS、身份验证、空白屏幕、性能）。

链接关系

• 源自 appbuilder-project-init——扩展程序完成脚手架搭建并在本地运行后，此技能负责 UI 自定义和 React Spectrum 模式。
• 与 appbuilder-action-scaffolder 配合实现全栈功能（UI 调用后端操作）。
• 链接至 appbuilder-testing（测试生成的 UI 组件）。
• 链接至 appbuilder-cicd-pipeline（部署前端更改）。