dx-aem — Claude Code plugin for AEM: components, QA, screenshots
An Adobe Experience Manager plugin for Claude: component checks, dialog inspection, demo capture and Playwright-driven QA.
/plugin marketplace add anthropics/claude-plugins-community
/plugin install dx-aem@claude-communityWhat dx-aem does
dx-aem ships ten skills aimed at AEM work. /aem-snapshot records a component's state before you touch it, /aem-verify compares the deployed result against that baseline and builds a test page. /aem-qa walks pages, checks rendering and dialogs, grabs screenshots and files bug tickets. Recon skills cover the rest: /aem-component locates source files and dialog fields, /aem-page-search finds pages built on a given component, /aem-doctor inspects project infrastructure.
Five subagents back this up, split across Sonnet and Haiku — dialog inspection, Playwright capture, file resolution, page finding, bug verification. Two MCP servers come bundled and are wired through .mcp.json: aem-mcp-server for JCR content and page management, plus Playwright MCP for browser automation. Neither needs a separate install.
The dx-core plugin has to be in place first, otherwise /dx-init and the build steps have nothing to run on. QA and stage environments behind HTTP Basic Auth take credentials under aem.qa-basic-auth in .ai/config.yaml, alongside author and publish URLs, the component prefix and brand list. Agents use that prefix to build CSS selectors against rendered pages.
What it helps with
- capture a component baseline before editing
- diff a deployed dialog against the baseline
- screenshot dialogs and pages for an authoring guide
- list every page that uses a component
- audit AEM project infrastructure health
Example prompts for the agent
- Snapshot the hero component before I start changing it
- Verify starterkit after deploy and compare it to the baseline
- Run QA across the pages and open bug tickets for what breaks
How to install dx-aem
Plugin marketplace
/plugin marketplace add anthropics/claude-plugins-community/plugin install dx-aem@claude-communityStep by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own
Questions about dx-aem
How do I install dx-aem in Claude Code?
Add the marketplace first: /plugin marketplace add anthropics/claude-plugins-community, then install the plugin: /plugin install dx-aem@claude-community.
What does dx-aem do?
It gives Claude AEM-specific skills and subagents: component snapshots, post-deploy verification, dialog inspection, Playwright screenshots and QA runs that produce bug tickets.
What do I need before using dx-aem?
The dx-core plugin comes first — /dx-init and the build steps depend on it. For QA environments behind Basic Auth, set the credentials under aem.qa-basic-auth in .ai/config.yaml.
Source text
dx-aem · MIT
# dx-aem — AEM Plugin for Claude Code
AEM-specific tools for Adobe Experience Manager projects: component verification, dialog inspection, demo capture, and QA automation. Built on top of the [dx-core](https://github.com/yourorg/claude-dx) development workflow plugin.
## Prerequisites
Install the `dx-core` plugin first:
```bash
/plugin marketplace add easingthemes/dx-aem-flow
/plugin install dx-core@dx-aem-flow
```
## Installation
```bash
/plugin install dx-aem@dx-aem-flow
```
## Quick Start
```bash
/dx-init # One-time project setup (dx plugin)
/aem-init # Add AEM config to .ai/config.yaml
/aem-snapshot starterkit # Baseline before development
# ... develop your changes ...
/dx-step-build # Build & deploy to AEM
/aem-verify starterkit # Verify component after deployment
/aem-editorial-guide starterkit # Screenshot dialog, write authoring guide
```
## Skills (10)
### Verification
| Skill | Description |
|-------|-------------|
| `/aem-snapshot` | Baseline component state before development — dialog fields, properties, pages |
| `/aem-verify` | Check component after deployment, compare against baseline, create test page |
| `/aem-editorial-guide` | Open AEM editor, screenshot dialog, write authoring guide |
### QA
| Skill | Description |
|-------|-------------|
| `/aem-qa` | Full QA agent — navigate pages, check rendering/dialogs, capture screenshots, create Bug tickets |
### Documentation
| Skill | Description |
|-------|-------------|
| `/aem-doc-gen` | Generate AEM demo docs — find existing pages, create docs page, capture dialog + website screenshots on QA, write authoring guide |
### Recon
| Skill | Description |
|-------|-------------|
| `/aem-init` | Detect AEM structure, add `aem:` section to .ai/config.yaml |
| `/aem-component` | Find all source files, AEM pages, and dialog fields for a component |
| `/aem-page-search` | Find all AEM pages using a specific component |
| `/aem-refresh` | Update `.ai/project/` seed data from plugin, external docs repo, or manual sources |
| `/aem-doctor` | Check AEM project infrastructure health — component definitions, OSGi, dispatcher |
## Agents
| Agent | Model | Purpose |
|-------|-------|---------|
| `aem-inspector` | Sonnet | Dialog/component inspection, docs page creation, publishing via AEM MCP |
| `aem-editorial-guide-capture` | Sonnet | Playwright screenshots, QA Basic Auth, dialog + publisher view capture |
| `aem-file-resolver` | Haiku | Resolve all source files for an AEM component across repos |
| `aem-page-finder` | Haiku | Find AEM pages using a specific component |
| `aem-bug-executor` | Sonnet | AEM-specific bug verification via Playwright and AEM MCP |
## Configuration
`/aem-init` appends to `.ai/config.yaml`:
```yaml
aem:
url: http://localhost:4502
component-prefix: myproject
brands: [brand-a, brand-b, brand-c]
author-url-qa: "https://qa-author.example.com"
publish-url-qa: "https://qa-publish.example.com"
qa-basic-auth:
username: "myuser"
password: "mypassword"
```
### QA Basic Auth
QA/Stage environments often require HTTP Basic Auth. Configure credentials in `aem.qa-basic-auth` above. `/aem-init` also installs `.claude/rules/qa-basic-auth.md` — a convention rule that agents (`aem-editorial-guide-capture`, `aem-doc-gen`, `aem-bug-executor`) read at runtime for auth handling patterns (URL embedding, fetch fallback, QA URL detection).
The `aem.component-prefix` config is used by agents to construct CSS selectors when locating components on rendered pages.
## MCP Servers
This plugin bundles two MCP servers (configured automatically via `.mcp.json`):
- **[AEM MCP](https://www.npmjs.com/package/aem-mcp-server)** (`aem-mcp-server`) — JCR content, component dialogs, page management, node queries. Supports multi-instance configurations (local + QA). Included with the plugin — no separate install needed.
- **Playwright MCP** — browser automation for screenshots, navigation, and dialog interaction
## Full Workflow
```
/aem-snapshot hero → /dx-step-all → /dx-step-build → /aem-verify hero → /aem-editorial-guide hero
```
## License
MIT
© easingthemes · MIT · easingthemes/dx-aem-flow
