плагин

dx-aem — плагин для Claude Code: AEM-компоненты, QA и скриншоты

Q: Как установить dx-aem в Claude Code?

Сначала подключите маркетплейс: `/plugin marketplace add anthropics/claude-plugins-community`, затем поставьте плагин: `/plugin install dx-aem@claude-community`.

Q: Что нужно для работы dx-aem?

Сначала ставится плагин `dx-core` — на нём держатся `/dx-init` и шаги сборки. Для QA-контуров с Basic Auth понадобятся логин и пароль в `aem.qa-basic-auth` в `.ai/config.yaml`.

Плагин для проектов Adobe Experience Manager: проверяет компоненты, снимает диалоги, собирает демо и гоняет QA через Playwright.

Установить в Claude Code · Через маркетплейс плагинов Все способы и платформы ↓

/plugin marketplace add anthropics/claude-plugins-community
/plugin install dx-aem@claude-community

Открыть на GitHub

Что делает dx-aem

dx-aem добавляет в Claude десять скиллов под AEM. /aem-snapshot снимает состояние компонента до разработки, /aem-verify сверяет его с базой после деплоя и создаёт тестовую страницу, /aem-qa ходит по страницам, проверяет рендеринг и диалоги, делает скриншоты и заводит баги. Есть ещё /aem-component для поиска исходников и полей диалога, /aem-page-search для страниц с конкретным компонентом и /aem-doctor для проверки инфраструктуры проекта.

Внутри пять субагентов на моделях Sonnet и Haiku: инспектор диалогов, захват скриншотов через Playwright, поиск файлов компонента, поиск страниц и исполнитель багов. Плагин тянет два MCP-сервера — aem-mcp-server для JCR-контента и управления страницами и Playwright MCP для браузера. Оба прописаны в .mcp.json, отдельно ставить не нужно.

Перед установкой нужен плагин dx-core: без него шаги /dx-init и /dx-step-build не отработают. Для QA-контуров с HTTP Basic Auth логин и пароль кладутся в aem.qa-basic-auth в .ai/config.yaml, туда же идут URL автора и публикации, префикс компонента и список брендов. Префикс нужен агентам, чтобы строить CSS-селекторы на отрендеренных страницах.

Какие задачи решает

снять базовое состояние компонента до правок
сверить диалог после деплоя с эталоном
собрать скриншоты диалога и страницы для авторского гайда
найти все страницы, где используется компонент
проверить здоровье AEM-инфраструктуры проекта

Примеры запросов агенту

Сделай снимок компонента hero перед началом работы
Проверь компонент starterkit после деплоя и сравни с базой
Прогони QA по страницам и заведи баги на найденные проблемы

Как установить dx-aem

Через маркетплейс плагинов

/plugin marketplace add anthropics/claude-plugins-community

/plugin install dx-aem@claude-community

По шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой

Вопросы о dx-aem

Как установить dx-aem в Claude Code?

Сначала подключите маркетплейс: /plugin marketplace add anthropics/claude-plugins-community, затем поставьте плагин: /plugin install dx-aem@claude-community.

Что делает dx-aem?

Даёт Claude набор скиллов и субагентов для работы с Adobe Experience Manager: снимки компонентов, проверку после деплоя, инспекцию диалогов, скриншоты через Playwright и QA-прогоны с созданием багов.

Что нужно для работы dx-aem?

Сначала ставится плагин dx-core — на нём держатся /dx-init и шаги сборки. Для QA-контуров с Basic Auth понадобятся логин и пароль в aem.qa-basic-auth в .ai/config.yaml.

Исходный текст

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