appbuilder-ui-scaffolder
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.
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 |
More from adobe/skills
scrape-webpage
Scrape webpage content, extract metadata, download images, and prepare for import/migration to AEM Edge Delivery Services. Returns analysis JSON with paths, metadata, cleaned HTML, and local images.
314code-review
Review code for AEM Edge Delivery Services projects. Use at the end of development (before PR) for self-review, or to review pull requests. Validates code quality, performance, accessibility, and adherence to EDS best practices.
271building-blocks
Guide for implementing code changes in AEM Edge Delivery Services. Handles block development (new or modified), core functionality changes (scripts.js, styles, delayed.js, etc.), or both. Use this skill for all implementation work guided by the content-driven-development workflow.
268content-driven-development
Apply a Content Driven Development process to AEM Edge Delivery Services development. Use for ALL code changes - new blocks, block modifications, CSS styling, bug fixes, core functionality (scripts.js, styles, etc.), or any JavaScript/CSS work that needs validation.
267block-inventory
Survey available blocks from local AEM Edge Delivery Services project and Block Collection to understand the block palette available for authoring. Returns block inventory with purposes to inform content modeling decisions.
266content-modeling
Create effective content models for your blocks that are easy for authors to work with. Use this skill anytime you are building new blocks, making changes to existing blocks that modify the initial structure authors work with.
265