skills.rest
aemgdc
aemgdcOFFICIAL
Explore all skills by this author →
WebsiteGitHub

appbuilder-ui-scaffolder

Generate React Spectrum UI components for Adobe Experience Cloud Shell SPAs and AEM UI Extensions.

1|Updated Jun 22, 2026
Search Tags:#adobe#app builder#react spectrum#ui scaffolding#aem extension#exc shell#uix-guest
One-click install
npx skills add https://github.com/aemgdc/aemdev --skill appbuilder-ui-scaffolder-aemgdc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: appbuilder-ui-scaffolder
Source: https://github.com/aemgdc/aemdev/tree/main/.agents/skills/appbuilder-ui-scaffolder
Command: npx skills add https://github.com/aemgdc/aemdev --skill appbuilder-ui-scaffolder-aemgdc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @adobe/react-spectrum, @adobe/exc-app, @adobe/uix-guest, react-router-dom, and includes references (resource) components.

What problem does it solve? Building UI for Adobe App Builder apps requires deep knowledge of React Spectrum components, Experience Cloud Shell integration, and AEM extension APIs. This Skill generates context-appropriate UI code that follows your project's existing conventions instead of generic templates. ## Core Features & Use Cases - React Spectrum UI Generation: Create pages, forms, data tables, dialogs, and navigation using @adobe/react-spectrum with proper accessibility, loading states, and error handling. - ExC Shell Integration: Set up @adobe/exc-app initialization with runtime.done(), IMS token passthrough, and Spectrum theming for Experience Cloud Shell SPAs. - AEM UI Extensions: Build extensions with @adobe/uix-guest for Content Fragment Console, CF Editor, Universal Editor, and Assets View surfaces. - Use Case: Ask for a sortable, paginated product table in your App Builder SPA and receive a TableView component wired to your backend actions with IMS authentication, loading spinners, and empty states. ## Quick Start Ask the agent to add a data table page to your App Builder SPA and it will read your web-src structure and generate the matching React Spectrum component.

Frequently Asked Questions about appbuilder-ui-scaffolder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a data table to my App Builder SPA?▼

Use React Spectrum's TableView with TableHeader, Column, TableBody, Row, and Cell components. Add allowsSorting on columns for sorting, fetch data from your backend action with the IMS token, and show a ProgressCircle during loading plus an IllustratedMessage for empty states.

How do I build a Content Fragment Console extension?▼

Register your extension with @adobe/uix-guest's register() function using a unique reverse-domain ID, then declare extension points like actionBar, headerMenu, or contentFragmentGrid. Configure the aem/cf-console-admin/1 extension point in ext.config.yaml and use sharedContext for authentication.

What is the difference between @adobe/exc-app and @adobe/uix-guest?▼

@adobe/exc-app is for Experience Cloud Shell SPAs and uses runtime.ready() and runtime.done() for shell integration. @adobe/uix-guest is for AEM UI Extensions and uses register() with a methods object declaring extension points, getting auth via sharedContext instead.

Why does the Experience Cloud Shell show an infinite loading spinner?▼

The spinner persists when runtime.done() is not called or is called too late, such as after data fetching. Call runtime.done() immediately inside the register callback at the register level, not inside onReady or after API calls.

Why do I get CORS errors calling App Builder actions from my SPA?▼

CORS errors occur when the action's web property in app.config.yaml is not set to 'yes', which auto-adds CORS headers. If using web: 'raw', you must manually return Access-Control-Allow-Origin headers including for OPTIONS preflight requests.

Should I use BrowserRouter or HashRouter in an ExC Shell app?▼

Always use HashRouter from react-router-dom inside the Experience Cloud Shell. The shell owns the browser URL path, so BrowserRouter conflicts with shell routing, while HashRouter uses hash-based paths that stay within the iframe.

Related Skills

Explore More Software Engineering Skills→
valithedgevalithedge

appbuilder-ui-scaffolder

Scaffold App Builder UI SPAs with React Spectrum components.

Community
Intermediate
kasiopeiyakasiopeiya
1

unit-test

Execute backend and frontend unit tests with Vitest and generate detailed reports.

Community
Intermediate
ComposioHQComposioHQ
74.2k

adobe-automation

Automate Adobe software operations through the Rube MCP gateway and Composio toolkits.

Official
Intermediate
dhntdhnt

update-deps

Updates project dependencies by classifying semantic version changes and verifying with tests.

Official
Intermediate