/appbuilder-ui-scaffolder

name: appbuilder-ui-scaffolder
description: >-
  Generate React Spectrum UI components for Adobe Experience Cloud Shell SPAs and AEM UI Extensions.
  Provides patterns for pages, forms, data tables, dialogs, and navigation using @adobe/react-spectrum.
  Guides ExC Shell integration with @adobe/exc-app including runtime.done(), IMS token passthrough,
  and shell theming. Guides AEM UI Extension development with @adobe/uix-guest for Content Fragment
  Console, CF Editor, Universal Editor, and Assets View surfaces. Trigger on: building App Builder UI,
  React Spectrum components, ExC Shell pages, forms, data tables, dialogs, modals, navigation, theming,
  web-src, Spectrum design system, @adobe/exc-app, AEM extension, AEM UI extension, Content Fragment
  Console, Universal Editor extension, uix-guest, @adobe/uix-guest, extension points for AEM,
  customizing AEM surfaces.
metadata:
  category: frontend
license: Apache-2.0
compatibility: Requires Node.js 18+, npm, and @adobe/react-spectrum
allowed-tools: Bash(npm:*) Bash(node:*) Bash(npx:*) Read Write Edit

App Builder UI Scaffolder

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.

> Building a **Workfront** extension UI? The Workfront extension points (Main Menu, per-object left panel, custom-form widgets) and the Workfront shared context live in `workfront-ui-extension`. Use this skill for the generic Spectrum component patterns (pages, forms, tables, dialogs, navigation) it calls into.

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 |

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:

1. Read the user's existing project structure (`web-src/src/`) for conventions (file naming, import style, existing components) 2. Read the matched `references/` file for component guidance and annotated examples 3. Generate code that fits the user's existing conventions 4. Wire into existing routing if React Router is present 5. 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.

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`.

Full Workflow (for ambiguous or complex requests)

1. Read the user's project — check `web-src/` structure, React version, existing imports, routing setup, `app.config.yaml` for extension type 2. Confirm target outcome, constraints, and acceptance criteria with the user 3. Identify the UI pattern(s) needed from the quick-reference table above 4. Read the corresponding `references/` files for component guidance and annotated examples 5. Generate code that fits the user's existing conventions (not a generic template) 6. Wire into existing routing if React Router is present (