在构建 Adobe App Builder…

适用于为 Adobe Experience Cloud Shell SPA 或 AEM UI Extension 生成符合项目约定的 React Spectrum UI 组件和集成代码。

适用场景

解决思路

1. 这是基于参考的技能：先读取模式，再生成适合上下文的代码，不要复制静态模板。
2. 识别用户意图，然后读取对应 references 章节生成定制代码。
3. 根据 Pattern Quick-Reference 匹配需求与引用文件、关键组件。
4. 新页面并带 shell context：读 references/ui-patterns.md § Page 和 references/shell-integration.md；使用 View、Heading、Content。
5. 带校验的表单：读 references/ui-patterns.md § Form；使用 Form、TextField、NumberField、Picker、Button。
6. 可排序、分页的数据表格：读 references/ui-patterns.md § Table；使用 TableView、TableHeader、Column、TableBody、Row、Cell。
7. 确认对话框/模态框：读 references/ui-patterns.md § Dialog；使用 DialogTrigger、AlertDialog、Dialog。
8. 导航布局：读 references/ui-patterns.md § Navigation；使用 Tabs、Breadcrumbs、Flex。
9. ExC Shell 设置：读 references/shell-integration.md；使用 @adobe/exc-app、Provider、defaultTheme。
10. 将 UI 连接到后端 actions：读 references/action-integration.md；使用 fetch() 并带 IMS token。
11. AEM UI Extension（CF Console、CF Editor、Universal Editor）：读 references/aem-extensions.md；使用 @adobe/uix-guest、register()、sharedContext。
12. 调试 UI 问题：读 references/debugging.md；关注 shell spinner、CORS、blank screen、auth。
13. 当请求明确映射到单一模式时走 Fast Path。
14. Fast Path：读取现有项目结构 web-src/src/，了解命名、import 风格、已有组件约定。
15. Fast Path：读取匹配的 references/ 文件，获取组件指南和带注释示例。
16. Fast Path：生成符合用户现有约定的代码。
17. Fast Path：如果存在 React Router，接入现有路由。
18. Fast Path：对照 references/checklist.md 验证。
19. Fast Path 触发示例：Add a data table page、Create a form for submitting data、Add a confirmation dialog、Set up the shell integration。
20. Fast Path 触发示例：Build a Content Fragment Console extension、Add a header menu button to the Universal Editor、Create an AEM extension with uix-guest。
21. 如有任何歧义（多个模式可能、约束不清、用户说明不足），进入下方完整工作流。
22. 完整工作流：读取用户项目，检查 web-src/ 结构、React 版本、现有 imports、路由设置、app.config.yaml 中的扩展类型。
23. 完整工作流：与用户确认目标结果、约束和验收标准。
24. 完整工作流：从 quick-reference 表识别所需 UI pattern。
25. 完整工作流：读取对应 references/ 文件，获取组件指南和带注释示例。
26. 完整工作流：生成符合用户现有约定的代码，而不是通用模板。
27. 完整工作流：如果存在 React Router，接入现有路由（references/routing-patterns.md）。
28. 完整工作流：如果需要数据获取，连接后端 actions（references/action-integration.md）。
29. 完整工作流：在标记完成前对照 references/checklist.md 验证。
30. 完整工作流：如果用户报告问题，查阅 references/debugging.md 获取常见 SPA 调试场景。
31. 完整工作流：总结决策、组件选择和后续行动。
32. UI 入口点：将组件放在 web-src/src/components/，这是标准 App Builder SPA 布局。
33. Shell 集成：始终用 @adobe/exc-app 初始化，并调用 runtime.done() 关闭加载 spinner。
34. Spectrum imports：所有组件从 @adobe/react-spectrum 导入；完整目录见 references/spectrum-components.md。
35. 路由：使用 react-router-dom 进行 Shell 内 SPA 导航；见 references/routing-patterns.md。
36. 后端调用：调用 App Builder actions 时传递 Shell 的 IMS token；见 references/action-integration.md。
37. 主题：用 <Provider theme={defaultTheme}> 包裹应用以应用 Spectrum 样式。
38. 可访问性：所有 Spectrum 组件有内置 ARIA 支持；为交互元素添加 labels；见 references/checklist.md。
39. 调试：常见问题（blank screen、CORS errors、auth failures、slow loads）见 references/debugging.md。
40. 需要向用户索取：当前仓库路径和 web-src/ 结构。
41. 需要向用户索取：目标 UI pattern 和具体数据需求。
42. 需要向用户索取：现有路由设置（如有）。
43. 需要向用户索取：后端 action URL（如适用）。
44. 需要向用户索取：非功能约束，如可访问性要求、响应式断点。
45. 交付物：符合用户项目约定的 React Spectrum 组件文件。
46. 交付物：更新的路由配置（如适用）。
47. 交付物：与后端 actions 的集成（如适用）。
48. 交付物：对照质量 checklist 的验证。
49. 质量门槛：所有生成组件使用 React Spectrum，标准模式不用自定义 CSS。
50. 质量门槛：Shell 集成包含 runtime.done() 调用。
51. 质量门槛：交互元素有可访问 labels。
52. 质量门槛：处理 loading 和 error 状态。
53. 质量门槛：正确传递 IMS token 到后端 action 调用。
54. 参考：references/ui-patterns.md 用于 page、form、table、dialog、navigation 的带注释示例。
55. 参考：references/spectrum-components.md 用于 React Spectrum v3 组件目录、imports、props、可访问性。
56. 参考：references/shell-integration.md 用于 ExC Shell 集成（@adobe/exc-app、runtime.done()、IMS tokens）。
57. 参考：references/routing-patterns.md 用于 ExC Shell 中的 React Router SPA 路由。
58. 参考：references/action-integration.md 用于从 SPA 调用后端 actions。
59. 参考：references/checklist.md 用于交付前 UI 质量验证。
60. 参考：references/aem-extensions.md 用于 AEM UI Extension 模式（@adobe/uix-guest、CF Console/Editor、Universal Editor、Assets View）。
61. 参考：references/debugging.md 用于常见 SPA 调试场景（shell spinner、CORS、auth、blank screen、performance）。
62. 链式关系：从 appbuilder-project-init 链接而来（SPA 项目已用 dx/excshell/1 扩展脚手架后）。
63. 链式关系：与 appbuilder-action-scaffolder 配合用于全栈功能（UI 调用后端 actions）。
64. 链式关系：链接到 appbuilder-testing（测试生成的 UI 组件）。
65. 链式关系：链接到 appbuilder-cicd-pipeline（部署前端变更）。

适用边界 · 注意事项

• Workfront 扩展 UI（Main Menu、per-object left panel、custom-form widgets、Workfront shared context）应使用 workfront-ui-extension；本技能只提供其可调用的通用 Spectrum 组件模式。
• 请求存在歧义（多个模式匹配、约束不清、用户说明不足）时不要走 Fast Path，应走完整工作流。
• 不适用于非 Adobe App Builder／Experience Cloud Shell／AEM UI Extension 的普通前端项目；若只需通用 React Spectrum 模式可另作参考，但 Shell/AEM 集成部分不适用。