appbuilder-ui-scaffolder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

App Builder UI Scaffolder

App Builder UI 脚手架生成工具

Generate React Spectrum UI for Adobe Experience Cloud Shell SPAs. This is a reference-based skill — the agent reads patterns and generates context-appropriate code rather than copying static templates.

为Adobe Experience Cloud Shell单页应用（SPAs）生成React Spectrum UI。这是一项基于参考的技能——智能体读取模式并生成符合上下文的代码，而非复制静态模板。

Pattern Quick-Reference

模式速查

Identify the user's intent, then read the referenced sections to generate tailored code.

User wants	Reference	Key components
New page with shell context	`references/ui-patterns.md` § Page + `references/shell-integration.md`	`View` , `Heading` , `Content`
Form with validation	`references/ui-patterns.md` § Form	`Form` , `TextField` , `NumberField` , `Picker` , `Button`
Data table (sortable, paginated)	`references/ui-patterns.md` § Table	`TableView` , `TableHeader` , `Column` , `TableBody` , `Row` , `Cell`
Confirmation dialog / modal	`references/ui-patterns.md` § Dialog	`DialogTrigger` , `AlertDialog` , `Dialog`
Navigation layout	`references/ui-patterns.md` § Navigation	`Tabs` , `Breadcrumbs` , `Flex`
ExC Shell setup	`references/shell-integration.md`	`@adobe/exc-app` , `Provider` , `defaultTheme`
Connect UI to backend actions	`references/action-integration.md`	`fetch()` with IMS token
AEM UI Extension (CF Console, CF Editor, Universal Editor)	`references/aem-extensions.md`	`@adobe/uix-guest` , `register()` , `sharedContext`
Debug UI issues	`references/debugging.md`	Shell spinner, CORS, blank screen, auth

识别用户意图，然后阅读参考章节生成定制化代码。

用户需求	参考文档	核心组件
带Shell上下文的新页面	`references/ui-patterns.md` § 页面 + `references/shell-integration.md`	`View` , `Heading` , `Content`
带验证的表单	`references/ui-patterns.md` § 表单	`Form` , `TextField` , `NumberField` , `Picker` , `Button`
可排序、分页的数据表格	`references/ui-patterns.md` § 表格	`TableView` , `TableHeader` , `Column` , `TableBody` , `Row` , `Cell`
确认对话框/模态框	`references/ui-patterns.md` § 对话框	`DialogTrigger` , `AlertDialog` , `Dialog`
导航布局	`references/ui-patterns.md` § 导航	`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）	`references/aem-extensions.md`	`@adobe/uix-guest` , `register()` , `sharedContext`
调试UI问题	`references/debugging.md`	Shell加载 spinner、CORS、空白页面、权限验证

Fast Path (for clear requests)

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

When the user's request maps unambiguously to a single pattern above — they name a specific component type, reference a UI pattern, or describe a use case that clearly matches one entry — proceed directly:

Read the user's existing project structure (
```
web-src/src/
```
) for conventions (file naming, import style, existing components)
Read the matched
```
references/
```
file for component guidance and annotated examples
Generate code that fits the user's existing conventions
Wire into existing routing if React Router is present
Validate against
```
references/checklist.md
```

Examples of fast-path triggers:

"Add a data table page" → Read
```
references/ui-patterns.md
```
§ Table, generate directly
"Create a form for submitting data" → Read
```
references/ui-patterns.md
```
§ Form, generate directly
"Add a confirmation dialog" → Read
```
references/ui-patterns.md
```
§ Dialog, generate directly
"Set up the shell integration" → Read
```
references/shell-integration.md
```
, generate directly
"Build a Content Fragment Console extension" → Read
```
references/aem-extensions.md
```
§ CF Console, generate directly
"Add a header menu button to the Universal Editor" → Read
```
references/aem-extensions.md
```
§ Universal Editor, generate directly
"Create an AEM extension with uix-guest" → Read
```
references/aem-extensions.md
```
§ Core Registration, generate directly

If there is any ambiguity — multiple patterns could fit, constraints are unclear, or the user hasn't specified enough — fall through to the full workflow below.

当用户请求明确匹配上述单一模式时——他们指定了特定组件类型、参考了UI模式，或描述的用例清晰匹配某一项——直接按以下步骤操作：

读取用户现有项目结构（
```
web-src/src/
```
）以遵循约定（文件命名、导入风格、现有组件）
读取匹配的
```
references/
```
文件获取组件指南和带注释的示例
生成符合用户现有约定的代码
如果项目使用React Router，将代码接入现有路由
根据
```
references/checklist.md
```
进行验证

快速路径触发示例：

"为我的App Builder SPA添加一个显示数据表格的页面。" → 读取
```
references/ui-patterns.md
```
§ 表格，直接生成代码
"创建一个用于提交客户数据的表单。" → 读取
```
references/ui-patterns.md
```
§ 表单，直接生成代码
"添加一个确认对话框。" → 读取
```
references/ui-patterns.md
```
§ 对话框，直接生成代码
"设置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
```
§ 核心注册，直接生成代码

如果存在任何歧义——多个模式可能适用、约束条件不明确，或用户未提供足够信息——则使用下方完整工作流程。

Quick Reference

速查要点

UI entry point: Place components in
```
web-src/src/components/
```
. This is the standard App Builder SPA layout.
Shell integration: Always initialize with
```
@adobe/exc-app
```
and call
```
runtime.done()
```
to dismiss the loading spinner. See
```
references/shell-integration.md
```
.
Spectrum imports: All components from
```
@adobe/react-spectrum
```
. See
```
references/spectrum-components.md
```
for the full catalog.
Routing: Use
```
react-router-dom
```
for SPA navigation within the shell. See
```
references/routing-patterns.md
```
.
Backend calls: Pass the shell's IMS token when calling App Builder actions. See
```
references/action-integration.md
```
.
Theming: Wrap the app in
```
<Provider theme={defaultTheme}>
```
for Spectrum styling.
Accessibility: All Spectrum components have built-in ARIA support. Add labels to interactive elements. See
```
references/checklist.md
```
.
Debugging: For common issues (blank screen, CORS errors, auth failures, slow loads), see
```
references/debugging.md
```
.

UI入口点： 将组件放置在
```
web-src/src/components/
```
中。这是App Builder SPA的标准布局。
Shell集成： 始终使用
```
@adobe/exc-app
```
初始化，并调用
```
runtime.done()
```
以关闭加载spinner。详见
```
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
```
。

Full Workflow (for ambiguous or complex requests)

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

Read the user's project — check
```
web-src/
```
structure, React version, existing imports, routing setup,
```
app.config.yaml
```
for extension type
Confirm target outcome, constraints, and acceptance criteria with the user
Identify the UI pattern(s) needed from the quick-reference table above
Read the corresponding
```
references/
```
files for component guidance and annotated examples
Generate code that fits the user's existing conventions (not a generic template)
Wire into existing routing if React Router is present (
```
references/routing-patterns.md
```
)
Connect to backend actions if data fetching is needed (
```
references/action-integration.md
```
)
Validate against
```
references/checklist.md
```
before marking done
If the user reports issues, consult
```
references/debugging.md
```
for common SPA debugging scenarios
Summarize decisions, component choices, and any follow-up actions

读取用户项目——检查
```
web-src/
```
结构、React版本、现有导入、路由设置、
```
app.config.yaml
```
中的扩展类型
与用户确认目标结果、约束条件和验收标准
从上方速查表中确定所需的UI模式
读取对应的
```
references/
```
文件获取组件指南和带注释的示例
生成符合用户现有约定的代码（而非通用模板）
如果项目使用React Router，将代码接入现有路由（
```
references/routing-patterns.md
```
）
如果需要数据获取，连接到后端动作（
```
references/action-integration.md
```
）
完成前根据
```
references/checklist.md
```
进行验证
如果用户反馈问题，参考
```
references/debugging.md
```
处理常见SPA调试场景
总结决策、组件选择及后续操作

Example User Prompts

用户请求示例

"Add a page to my App Builder SPA that shows a data table."
"Create a form for submitting customer data in my App Builder app."
"Set up the Experience Cloud Shell integration for my App Builder app."
"Add a confirmation dialog before deleting a record."
"Build a navigation sidebar for my App Builder SPA."
"My App Builder app needs a settings page with form fields."
"Build a Content Fragment Console extension with an action bar button."
"Add a custom RTE toolbar button in the Content Fragment Editor."
"Create a Universal Editor extension with a header menu button."

"为我的App Builder SPA添加一个显示数据表格的页面。"
"为我的App Builder应用创建一个提交客户数据的表单。"
"为我的App Builder应用设置Experience Cloud Shell集成。"
"删除记录前添加确认对话框。"
"为我的App Builder SPA构建导航侧边栏。"
"我的App Builder应用需要一个带表单字段的设置页面。"
"构建一个带操作栏按钮的Content Fragment Console扩展。"
"在Content Fragment Editor中添加自定义RTE工具栏按钮。"
"创建一个带头部菜单按钮的Universal Editor扩展。"

Inputs To Request

需要请求的输入信息

Current repository path and
```
web-src/
```
structure
Target UI pattern and specific data requirements
Existing routing setup (if any)
Backend action URLs for data fetching (if applicable)
Non-functional constraints: accessibility requirements, responsive breakpoints

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

Deliverables

交付成果

React Spectrum component files matching the user's project conventions
Updated routing configuration (if applicable)
Integration with backend actions (if applicable)
Validation against quality checklist

符合用户项目约定的React Spectrum组件文件
更新后的路由配置（如适用）
与后端动作的集成（如适用）
基于质量检查表的验证结果

Quality Bar

质量标准

All generated components use React Spectrum — no custom CSS for standard patterns
Shell integration includes
```
runtime.done()
```
call
Interactive elements have accessible labels
Loading and error states are handled
IMS token passed correctly to backend action calls

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

References

参考文档

Use
```
references/ui-patterns.md
```
for annotated UI pattern examples (page, form, table, dialog, navigation).
Use
```
references/spectrum-components.md
```
for React Spectrum v3 component catalog with imports, props, and accessibility.

Use

references/shell-integration.md

for ExC Shell integration (

@adobe/exc-app

runtime.done()

, IMS tokens).

Use
```
references/routing-patterns.md
```
for SPA routing with React Router in ExC Shell.
Use
```
references/action-integration.md
```
for calling backend actions from the SPA.
Use
```
references/checklist.md
```
for pre-handoff UI quality validation.
Use
```
references/aem-extensions.md
```
for AEM UI Extension patterns (
```
@adobe/uix-guest
```
, Content Fragment Console/Editor, Universal Editor, Assets View).
Use
```
references/debugging.md
```
for common SPA debugging scenarios (shell spinner, CORS, auth, blank screen, performance).

使用
```
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扩展模式（
```
@adobe/uix-guest
```
、Content Fragment Console/Editor、Universal Editor、Assets View）。
使用
```
references/debugging.md
```
获取常见SPA调试场景（Shell加载spinner、CORS、权限验证、空白页面、性能）。

Chaining

链式关联

Chains FROM
```
appbuilder-project-init
```
(after SPA project is scaffolded with
```
dx/excshell/1
```
extension)
Works alongside
```
appbuilder-action-scaffolder
```
for full-stack features (UI calls backend actions)
Chains TO
```
appbuilder-testing
```
(test generated UI components)
Chains TO
```
appbuilder-cicd-pipeline
```
(deploy frontend changes)

承接自
```
appbuilder-project-init
```
（使用
```
dx/excshell/1
```
扩展搭建SPA项目后）
可与
```
appbuilder-action-scaffolder
```
配合实现全栈功能（UI调用后端动作）
衔接至
```
appbuilder-testing
```
（测试生成的UI组件）
衔接至
```
appbuilder-cicd-pipeline
```
（部署前端变更）