skills.rest
valithedge
valithedgeCOMMUNITY
Explore all skills by this author →
GitHub

appbuilder-ui-scaffolder

Scaffold App Builder UI SPAs with React Spectrum components.

1|Updated Oct 7, 2024
Search Tags:#shell-integration#ui-patterns#extension-development#ui-scaffolding#app-builder#react-spectrum#aem-extensions
One-click install
npx skills add https://github.com/valithedge/etisalatedge --skill appbuilder-ui-scaffolder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: appbuilder-ui-scaffolder
Source: https://github.com/valithedge/etisalatedge/tree/main/.agents/skills/appbuilder-ui-scaffolder
Command: npx skills add https://github.com/valithedge/etisalatedge --skill appbuilder-ui-scaffolder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach to scaffold App Builder UI SPAs by presenting patterns and reference guidance that help developers generate React Spectrum-based interfaces for Experience Cloud Shell and AEM UI Extensions.

Core Features & Use Cases

  • Pattern-driven scaffolding for common app surfaces: pages, forms, data tables, dialogs, and navigation using React Spectrum.
  • ExC Shell integration guidance covering runtime.done(), IMS token passthrough, and shell theming to ensure seamless embedding.
  • AEM UI Extension scaffolding patterns for Content Fragment Console and Editor, Universal Editor, and Assets View, enabling extension point registration via @adobe/uix-guest.

Quick Start

Generate a fully scaffolded App Builder UI SPA with React Spectrum components following the ExC Shell and AEM extension patterns.

Frequently Asked Questions about appbuilder-ui-scaffolder

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

FAQPage Schema
How do I scaffold a React Spectrum UI for an Experience Cloud Shell SPA?▼

Scaffolding a React Spectrum UI for an Experience Cloud Shell SPA involves generating structured patterns for pages, forms, and data tables. This approach provides reference guidance to ensure proper shell lifecycle integration and source organization within your web-src directory.

What is the best way to integrate an App Builder SPA with the ExC Shell lifecycle?▼

Integrating an App Builder SPA with the ExC Shell lifecycle requires calling runtime.done() and handling IMS token passthrough. This ensures seamless embedding within the Experience Cloud Shell and applies theming via a provider wrapper for consistent user experience.

Can I use this scaffolding approach to build AEM UI Extensions?▼

Yes, this scaffolding approach supports AEM UI Extensions for the Content Fragment Console, Universal Editor, and Assets View. It enables extension point registration using @adobe/uix-guest to generate React Spectrum interfaces within Adobe Experience Manager.

What UI patterns are available when generating App Builder SPAs with React Spectrum?▼

Generating App Builder SPAs with React Spectrum provides pattern-driven scaffolding for common application surfaces. These include structured layouts for pages, data tables, dialogs, forms, and navigation to accelerate interface development.

Do I need specific dependencies to scaffold AEM UI Extensions with React Spectrum?▼

Scaffolding AEM UI Extensions with React Spectrum requires the @adobe/uix-guest package for extension point registration. It also uses @adobe/exc-app to satisfy Experience Cloud Shell integration requirements for runtime lifecycle and theming.

Related Skills

Explore More Software Engineering Skills→
adobeadobe

ffcpe-custom-node-sdk

Wire FFCPE custom actions with async submit and status endpoints.

Official
Advanced
valithedgevalithedge

appbuilder-e2e-testing

Generate Playwright E2E tests for App Builder SPAs and AEM extensions.

Community
Advanced
valithedgevalithedge

appbuilder-testing

Generate Jest test scaffolds and mock helpers for Adobe App Builder actions and UI components.

Community
Advanced
annurdienannurdien

guide-macos-spm-packaging

Scaffold, build, and package SwiftPM-based macOS apps without Xcode.

Community
Advanced