---

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, Assets View and Content Hub 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, Assets View)	references/aem-extensions.md	@adobe/uix-guest, register(), sharedContext
Content Hub extension (panels, card actions, bulk actions)	references/aem-extensions.md § Content Hub	@adobe/uix-guest, register(), attach(), assetDetails/card/selectionBar namespaces, host.modal.openDialog
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

• "Add a Content Hub panel / card action / bulk action" → Read references/aem-extensions.md § Content Hub, generate directly

• "Create / scaffold a new extension from scratch" → Redirect to the appbuilder-project-init skill (Console setup, template selection, file generation, dev server)

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 (references/routing-patterns.md)
7. Connect to backend actions if data fetching is needed (references/action-integration.md)
8. Validate against references/checklist.md before marking done
9. If the user reports issues, consult references/debugging.md for common SPA debugging scenarios
10. Summarize decisions, component choices, and any follow-up actions

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."
• "Add a custom panel to the Content Hub Asset Details Dialog."
• "Build a Content Hub extension."
• "Add an action button to Content Hub asset cards."
• "Add a bulk action to the Content Hub selection bar."
• "Customize the Content Hub extension UI."

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

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

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

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, and Content Hub.
• Use references/debugging.md for common SPA debugging scenarios (shell spinner, CORS, auth, blank screen, performance).

Chaining

• Chains FROM appbuilder-project-init — once the extension is scaffolded and running locally, this skill handles UI customization and React Spectrum patterns
• 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)