Content Hub extensibility Skill

plugins/app-builder/skills/appbuilder-cicd-pipeline/SKILL.md

@@ -8,8 +8,9 @@ description: >-
   user mentions CI/CD for App Builder, GitHub Actions for aio deploy, automated deployment
   pipelines, continuous integration, continuous delivery, deploy automation, multi-environment
   promotion, aio app add ci, or wants to automate their App Builder build and release process.
-  Also trigger when users mention deploy workflows, release pipelines, or GitHub secrets for
-  App Builder.
+  Also trigger when users mention deploy workflows, release pipelines, GitHub secrets for
+  App Builder, aio app deploy for AEM extensions, Extension
+  Manager approval, or automate deployment of an AEM UI extension.
 metadata:
   category: deployment-automation
 license: Apache-2.0
@@ -31,6 +32,7 @@ Set up CI/CD pipelines for Adobe App Builder projects — GitHub Actions (primar
 | Azure DevOps / GitLab CI / Jenkins | references/generic-pipeline-guide.md |
 | Secrets setup guide | references/secrets-management.md |
 | Debugging deploy failures | references/debugging.md |
+| Content Hub extension deploy | references/contenthub-deploy.md |
 
 ## Fast Path (for clear requests)
 
@@ -93,6 +95,7 @@ If user specifies Azure DevOps, GitLab CI, or Jenkins → use `references/generi
 - Use `references/secrets-management.md` for OAuth S2S credential extraction and GitHub secrets setup.
 - Use `references/debugging.md` for troubleshooting deploy failures, CI errors, and workspace promotion issues.
 - Use `references/checklist.md` for pre-merge CI readiness validation.
+- Use `references/contenthub-deploy.md` for Content Hub extension deployment.
 - Use `assets/deploy-stage.yml`, `assets/deploy-prod.yml`, `assets/pr-test.yml` as workflow templates.
 - Use `assets/fetch-secrets.sh` to extract secret values from workspace configuration.
 - Official Adobe docs: [https://developer.adobe.com/app-builder/docs/guides/app_builder_guides/deployment/cicd-using-github-actions](https://developer.adobe.com/app-builder/docs/guides/app_builder_guides/deployment/cicd-using-github-actions)

plugins/app-builder/skills/appbuilder-cicd-pipeline/references/contenthub-deploy.md

@@ -0,0 +1,142 @@
+# Adobe App Builder Extension Deployment
+
+Complete deployment workflow for a Content Hub extension (`aem/assets/contenthub/1`) from Stage through Production approval.
+
+---
+
+## Prerequisites
+
+Before deploying:
+1. `aio app run` has succeeded locally (extension visible with `ext=` URL param)
+2. `allowedRepos` in `ExtensionRegistration.js` is populated with delivery repo IDs
+3. The correct org and project are selected (`aio where` shows the right state)
+
+---
+
+## Stage Deployment
+
+Stage is used for QA and stakeholder review before Production.
+
+```bash
+# Switch workspace — unset CI/AIO_CLI_NO_TTY in subshell so credentials are downloaded
+bash -c 'unset CI AIO_CLI_NO_TTY TERM; printf "y\ny\ny\ny\n" | aio app use -w Stage --overwrite' 2>/dev/null
+
+# Deploy — capture output
+aio app deploy 2>&1 | tee /tmp/aio-deploy.log
+```
+
+After deploy completes, **always** parse the CDN URL from the log — even if actions failed:
+
+```bash
+CDN_URL=$(grep -Eo 'https://[^ ]+adobeio-static\.net[^ ]*' /tmp/aio-deploy.log | grep 'index\.html' | tail -1)
+# If no index.html variant found, take any adobeio-static.net URL:
+CDN_URL=${CDN_URL:-$(grep -Eo 'https://[^ ]+adobeio-static\.net[^ ]*' /tmp/aio-deploy.log | tail -1)}
+```
+
+Open Content Hub automatically with the deployed URL — **do not just print it**. Replace the local `ext=https://localhost:9080` with `ext=<CDN_URL>/index.html` and keep the Content Hub deep-link hash:
+
+```bash
+open "https://experience.adobe.com/?devMode=true&ext=${CDN_URL}/index.html#/assets/contenthub/"
+```
+
+**Partial failure rule:** If web assets deployed but actions failed (Runtime not provisioned in the org, or 401 on action deploy), still open the CDN URL. The extension UI loads correctly. Actions will fail only when called. Do not block on action deployment errors.
+
+---
+
+## Production Deployment
+
+```bash
+# Switch to Production workspace — unset CI/AIO_CLI_NO_TTY in subshell
+bash -c 'unset CI AIO_CLI_NO_TTY TERM; printf "y\ny\ny\ny\n" | aio app use -w Production --overwrite' 2>/dev/null
+
+# Deploy to Production
+aio app deploy
+```
+
+Production deployment must be followed by an approval step before the extension is visible to all users in the org.
+
+---
+
+## Extension Manager Approval
+
+1. Open `https://experience.adobe.com/aem/extension-manager`
+2. Find your extension by name
+3. Click **Approve**
+4. The extension becomes visible to all users in your org — no `ext=` URL parameter needed
+
+---
+
+## Workspace Selection (`aio app use`)
+
+`aio app use` rewrites `.aio` and `.env` to point at the specified workspace. Always run it before `aio app deploy` when switching targets.
+
+```bash
+# Check current workspace
+CI=true AIO_CLI_NO_TTY=true NO_COLOR=1 aio where
+
+# Switch workspace — unset CI/AIO_CLI_NO_TTY in subshell so credentials are downloaded
+bash -c 'unset CI AIO_CLI_NO_TTY TERM; printf "y\ny\ny\ny\n" | aio app use -w Stage --overwrite' 2>/dev/null
+bash -c 'unset CI AIO_CLI_NO_TTY TERM; printf "y\ny\ny\ny\n" | aio app use -w Production --overwrite' 2>/dev/null
+```
+
+If `aio app use -w <name>` does not find the workspace by name, use explicit flags (also in clean subshell):
+```bash
+bash -c 'unset CI AIO_CLI_NO_TTY TERM; aio app use --org <orgId> --project <projectName> --workspace Stage --no-input'
+```
+
+---
+
+## Re-deploy After Code Changes
+
+```bash
+# Rebuild and redeploy (from the project directory)
+aio app deploy
+```
+
+For UI-only changes (no action changes), `aio app deploy` is still the right command — it rebuilds the web-src bundle and pushes to CDN.
+
+---
+
+## Troubleshooting Deployments
+
+### Extension visible with `ext=` but not after approval
+
+The extension was approved in the wrong workspace. The `ext=` URL param bypasses workspace checks.
+
+```bash
+aio where             # confirm you're on Production
+aio app use -w Production
+aio app deploy
+# Then re-approve in Extension Manager
+```
+
+### Extension invisible to some users
+
+The App Builder project includes extra Adobe services (AEM Assets Author API, Cloud Manager, etc.). Only users entitled to those services see the extension.
+
+**Fix:** Remove all non-required services from the App Builder project in Adobe Developer Console. Keep only Runtime. Redeploy and reapprove.
+
+### `aio app deploy` fails with auth error
+
+`.env` is missing or stale. Re-wire the workspace (unset CI in a subshell so credentials are downloaded):
+```bash
+bash -c 'unset CI AIO_CLI_NO_TTY TERM; printf "y\ny\ny\ny\n" | aio app use -w Stage --overwrite' 2>/dev/null
+aio app deploy
+```
+
+### CDN propagation delay
+
+After `aio app deploy` succeeds, CDN propagation can take 1-2 minutes. If the extension shows the old version immediately after deploy, wait a moment and hard-refresh.
+
+---
+
+## Full Deployment Checklist
+
+- [ ] `aio where` shows the correct org, project, and workspace
+- [ ] `aio app use -w <workspace>` run in a clean subshell (`unset CI AIO_CLI_NO_TTY TERM`) before deploying
+- [ ] `aio app deploy` completed without errors (partial web-only success is still usable)
+- [ ] Tested with the deployed CDN URL (not localhost)
+- [ ] **Content Hub / AEM surfaces** — deployed URL opened with `?devMode=true&ext=<CDN>/index.html`
+- [ ] **Content Hub only** — `allowedRepos` populated with target delivery repo IDs before Production deploy
+- [ ] For Production: approved in Extension Manager
+- [ ] For Production: verified without `ext=` URL parameter

plugins/app-builder/skills/appbuilder-project-init/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: appbuilder-project-init
-description: Initialize an Adobe App Builder project end-to-end without Developer Console UI clicks. Creates the Console project and workspace, subscribes APIs (including those needing a product profile), maps user intent to the right template, runs non-interactive `aio app init`, and guides post-init customization. Use whenever the user mentions creating an App Builder app, scaffolding a project, `aio app init`, setting up an Experience Cloud extension, adding actions or web assets, creating a Console project or workspace, adding APIs, or bootstrapping App Builder — even if they don't say "App Builder". Also for SPA templates, AEM extensions, API Mesh, Asset Compute workers, and MCP server projects. Also handles debugging init failures — template not found, `aio app init` hangs or times out, Node version mismatches, npm install failures, post-init build errors, `aio login` issues, `aio app run` showing nothing, or `aio console project create` / `workspace create` / `workspace api add` errors.
+description: Initialize or scaffold an Adobe App Builder project end-to-end without Developer Console UI clicks. Creates the Console project and workspace, subscribes APIs, maps user intent to the right template, and runs non-interactive `aio app init`. Use whenever the user mentions creating an App Builder app, scaffolding a project, `aio app init`, setting up an Experience Cloud extension, adding actions or APIs, or bootstrapping App Builder — even if they don't say "App Builder". Also for SPA templates, AEM extensions, API Mesh, Asset Compute workers, and MCP projects. Also scaffolds a Content Hub extension (`aem/assets/contenthub/1`) from scratch — Console setup, file generation, build, dev server, deploy — when the user says "scaffold a Content Hub extension" or names a Content Hub surface (asset details panel, card action, bulk action). Also handles debugging init failures — `aio app init` hangs, Node mismatches, npm failures, `aio login` issues, or `aio console` project/workspace/API errors.
 metadata:
   category: project-initialization
 license: Apache-2.0
 compatibility: Requires aio CLI (Adobe I/O CLI) — install or refresh with `npm install -g @adobe/aio-cli` so the bundled plugins (`aio-cli-plugin-console`, `aio-cli-plugin-app`, etc.) are current. Node.js 18+ (Node 24 supported on Stage runtimes). Bash shell.
-allowed-tools: Bash(aio:*) Bash(npm:*) Bash(node:*) Read Write
+allowed-tools: Bash(aio:*) Bash(npm:*) Bash(node:*) Bash(mkdir:*) Bash(lsof:*) Bash(kill:*) Bash(open:*) Read Write
 ---
 # App Builder Project Initialization
 
@@ -143,6 +143,7 @@ Pick the template that matches the user's intent. When unclear, default to `@ado
 | User wants | Template |
 | --- | --- |
 | SPA with actions + React UI | @adobe/generator-app-excshell |
+| Content Hub extension (asset details panel, card action, bulk action) | Content Hub Scaffolding — see section below |
 | AEM Content Fragment Console extension | @adobe/aem-cf-admin-ui-ext-tpl |
 | AEM React SPA (WKND-based) | @adobe/generator-app-aem-react |
 | Adobe API Mesh (GraphQL) | @adobe/generator-app-api-mesh |
@@ -152,6 +153,14 @@ Pick the template that matches the user's intent. When unclear, default to `@ado
 
 For a headless/backend-only request, prefer `init-bare` when possible. If the user still needs a template that generates UI files, plan a post-init cleanup so the final project has no `web-src` frontend directory or web manifest wiring.
 
+## Content Hub Extension Scaffolding
+
+For a Content Hub extension (`aem/assets/contenthub/1` — asset details panels, card actions, bulk actions) this skill runs a dedicated end-to-end workflow instead of a generator template: name → namespace selection → Console setup → file generation → npm install → `aio app use` → build → dev server → cert acceptance → open in Content Hub → deploy.
+
+Read [`references/contenthub-scaffolding.md`](references/contenthub-scaffolding.md) for the full step-by-step workflow and [`references/contenthub-templates.md`](references/contenthub-templates.md) for the scaffold file templates. The workflow's final step does a manual first `aio app deploy`; for the full deployment story (Stage → Production, Extension Manager approval, CI/CD) chain to the `appbuilder-cicd-pipeline` skill.
+
+**When it triggers:** the user says "create/scaffold a Content Hub extension", or names a Content Hub surface ("asset details panel", "card action button", "bulk action"). Once the extension is scaffolded and running, chain to `appbuilder-ui-scaffolder` for UI customization (React Spectrum patterns for each namespace).
+
 ## Initialize via Script
 
 The `aio app *` wrappers go through a single script: `scripts/init.sh`. (Console bootstrap commands are called directly — see the **Bootstrap** section above for the rationale.)
@@ -303,4 +312,8 @@ After initialization, hand off to:
 
 - [references/bootstrap.md](references/bootstrap.md) — Agentic Developer Console bootstrap (project, workspace, API subscriptions) via raw `aio console …` commands from the latest `@adobe/aio-cli`
 - [references/templates.md](references/templates.md) — Template catalog with intent mapping and per-template post-init guidance
-- [references/debugging.md](references/debugging.md) — Troubleshooting guide for init failures, Node/npm issues, login problems, and first-run errors
+- [references/debugging.md](references/debugging.md) — Troubleshooting guide for init failures, Node/npm issues, login problems, and first-run errors
+- [references/contenthub-scaffolding.md](references/contenthub-scaffolding.md) — Full Content Hub extension scaffolding workflow (Steps 1–17: Console setup, namespace selection, file generation, build, dev server, cert acceptance, deploy)
+- [references/contenthub-templates.md](references/contenthub-templates.md) — All Content Hub scaffold file templates (`app.config.yaml`, `ext.config.yaml`, `ExtensionRegistration.js`, `App.js`, per-namespace components (`PanelAssetDetailsExtensionTab.js`, `CardActionModal.js`, `SelectionBarModal.js`), `actions/generic/index.js`)
+
+For deploying a Content Hub extension (Stage → Production, CDN URL, Extension Manager approval, CI/CD), use the `appbuilder-cicd-pipeline` skill — see its `references/contenthub-deploy.md`.