From dx-aem
Capture editorial guide for a component dialog in AEM — open editor, screenshot dialog, and write editor-friendly authoring guide. Use after /aem-verify or deploying changes to create editorial documentation.
npx claudepluginhub easingthemes/dx-aem-flow --plugin dx-aemThis skill is limited to using the following tools:
**Platform note:** This skill uses `context: fork` + `agent: aem-editorial-guide-capture` for isolated execution. If subagent dispatch is unavailable (e.g., VS Code Chat), you may run inline but AEM MCP tools (`AEM/*`, `chrome-devtools-mcp/*`) must be available. If they are not, inform the user: "AEM demo capture requires AEM and Chrome DevTools MCP servers. Please use Claude Code or Copilot CLI."
Generates authoring guide for AEM Edge Delivery Services projects by analyzing structure for blocks, templates, configurations, and publishing workflows. For content author onboarding and handovers.
Orchestrates content-first development workflow for AEM Edge Delivery Services. Ensures test content exists before implementing JS/CSS/block changes, bug fixes, or core functionality.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
Platform note: This skill uses context: fork + agent: aem-editorial-guide-capture for isolated execution. If subagent dispatch is unavailable (e.g., VS Code Chat), you may run inline but AEM MCP tools (AEM/*, chrome-devtools-mcp/*) must be available. If they are not, inform the user: "AEM demo capture requires AEM and Chrome DevTools MCP servers. Please use Claude Code or Copilot CLI."
Capture a demo of the AEM component $ARGUMENTS — open its dialog in the AEM editor, take a screenshot, and write an editor-friendly authoring guide.
If no component name was provided, check .ai/specs/*-*/aem-after.md or .ai/specs/*-*/aem-before.md to infer it. If unclear, state what you need and stop.
Read .ai/config.yaml for aem.author-url (defaults to http://localhost:4502) and aem.resource-type-pattern.
Read the most recent .ai/specs/*-*/aem-after.md (or aem-before.md) to find:
If no aem-after.md exists, use AEM MCP tools:
mcp__plugin_dx-aem_AEM__searchContent with fulltext $ARGUMENTS under /content, limit 5Also identify the spec directory path for saving output.
Create <spec-dir>/demo/ if it doesn't exist.
Navigate Chrome to <author-url>/editor.html<page-path>.html.
Check for login redirect: After navigation, check if the URL contains /libs/granite/core/content/login.html. If so, log in:
evaluate_script to fill #username and #password with AEM credentials (default: admin/admin)input events after setting values so Coral UI registers themevaluate_script to click #submit-buttonwait_for with the page title or "Edit", timeout 15 seconds)Wait for the editor to be ready — use evaluate_script to check:
() => {
return document.querySelector('.editor-GlobalBar') !== null
&& document.querySelector('iframe#ContentFrame') !== null;
}
Retry up to 15 seconds (poll every 1 second).
Read the resource type pattern from .ai/config.yaml aem.resource-type-pattern.
Use evaluate_script to find the component and trigger its EDIT action:
() => {
const editables = Granite.author.editables;
const target = editables.find(e =>
e.type && e.type.toLowerCase().includes('$ARGUMENTS')
);
if (target) {
Granite.author.editableHelper.doSelectEditable(target);
Granite.author.editableHelper.doAction(target, 'EDIT');
return { found: true, path: target.path };
}
return { found: false, available: editables.map(e => e.type).filter(Boolean) };
}
If found: false, log the available editable types and try matching with the configured resource type pattern.
Poll for coral-dialog as a direct child of <body>:
() => {
const dialog = document.querySelector('body > coral-dialog[open]');
if (!dialog) return { open: false };
const title = dialog.querySelector('coral-dialog-header');
return { open: true, title: title ? title.textContent.trim() : 'unknown' };
}
Retry every 500ms, up to 10 attempts (5 seconds total).
If the dialog doesn't open after retries, take a screenshot of the current state and note the issue.
Only screenshot the part relevant to the implementation. This could be:
If it's not possible to isolate the relevant part, take one screenshot only.
Check if the screenshot file already exists before saving. Use Glob to check for <spec-dir>/demo/*$ARGUMENTS*.png:
dialog-$ARGUMENTS.png or page-$ARGUMENTS.png (depending on what was captured)dialog-$ARGUMENTS-2.png, etc.)Use take_screenshot with:
filePath: <spec-dir>/demo/<chosen-filename>.pngIf a dialog is open, close it:
() => {
const dialog = document.querySelector('body > coral-dialog[open]');
if (dialog) {
const cancel = dialog.querySelector('[coral-close]');
if (cancel) cancel.click();
}
return true;
}
Read <spec-dir>/implement.md and <spec-dir>/aem-after.md (if they exist) to understand what was added.
Write <spec-dir>/demo/authoring-guide.md:
# <Component Title> — Authoring Guide
## What Changed
<1-3 sentences explaining what's new in plain English, no code references>
## How to Use
### <Field or Feature Name>
<Plain English description of what this field does and when to use it>
### <Next Field or Feature>
<Description>
## Tips
- <Any conditional visibility: "Enable X to reveal additional fields">
- <Any gotchas: "Leave blank to use the default value">
- <Any recommendations: "Use short titles (under 50 characters) for best display">
## Dialog Screenshot
Keep it non-technical:
Return ONLY:
/aem-editorial-guide hero — Opens the hero component dialog in AEM author, captures a screenshot of the dialog, navigates to QA publisher to screenshot the rendered component, and writes demo/authoring-guide.md with field descriptions, dialog screenshot, and publisher URL.
/aem-editorial-guide card 2416553 — Captures demo for the card component tied to story #2416553. Finds existing demo page, screenshots the dialog with 3 tabs, takes a rendered screenshot on QA, and saves all artifacts to .ai/specs/2416553-<slug>/demo/.
/aem-editorial-guide productlisting (dialog won't open) — Attempts to open the dialog but the component isn't on the page. Falls back to writing a text-only authoring guide from spec files and dialog XML analysis. Notes "Dialog screenshot unavailable — component not found on demo page" in the guide.
"Component not found on demo page"
Cause: The component hasn't been placed on any editable page, or the page path is wrong.
Fix: Manually add the component to a test page in AEM author, then re-run /aem-editorial-guide. The skill will detect the page and capture screenshots.
Screenshots are blank or show loading state Cause: The page hasn't fully rendered when the screenshot is taken, or the component loads content asynchronously. Fix: Re-run the skill — it uses a wait-for-render strategy. If the issue persists, the component may require user interaction to display content. The authoring guide will still be generated from dialog analysis.
QA publisher URL returns 404
Cause: The page hasn't been published to QA, or the publisher URL in config is wrong.
Fix: Publish the page in AEM author first, then re-run. Check aem.publisher-url in .ai/config.yaml. The skill retries for up to 60 seconds waiting for the publisher.