AIKraft/AI/Войти
AIKraft/Skills/Предпросмотр импорта

Предпросмотр импорта

Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s.

adobe official Дизайн

Что делает навык

Настройка локального dev-сервера AEM Edge Delivery Services (EDS) с флагом --html-folder для рендеринга импортированного HTML-контента и проверка его отображения в браузере. Позволяет сравнить структуру и стили локальной версии с оригинальной страницей, а также устранить ошибки 404 и битые ссылки.

Когда применять

  • Необходимо предпросмотреть и проверить рендеринг блоков импортированного HTML-файла на localhost.
  • Требуется сравнить структуру локальной страницы с оригиналом, используя скриншот (screenshot.png).
  • Нужно устранить неполадки с отсутствующими изображениями, сырым HTML или отсутствующей метаданной в исходном коде.
  • Необходимо убедиться, что блоки декорируются корректно и стили секций применяются правильно.

Как работает

  1. Определить корневую папку из paths.dirPath в metadata.json и запустить сервер командой aem up --html-folder {dirPath}.
  2. Сформировать URL для браузера, используя paths.documentPath из metadata.json, заменяя путь к index-файлам на /.
  3. Открыть страницу в браузере и проверить корректность рендеринга блоков, загрузку изображений и наличие метаданных в исходном коде.
  4. Выполнить сравнение локального превью с оригинальной страницей (screenshot.png) на соответствие структуры, блоков и стилей.
  5. При возникновении ошибок (404, отсутствие стилей) проверить наличие флага --html-folder, пути к изображениям и соответствие имен блоков.

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

Запусти предпросмотр импортированного контента для файла us/en.plain.html и проверь, как отрисовываются блоки.
Проверь рендеринг страницы products/widget.plain.html на localhost и сравни его со скриншотом оригинала.
Устрани проблему с 404 при просмотре локальной версии blog/2024/post.plain.html.

Что понадобится

  • Установленный AEM CLI и запущенный проект EDS (Franklin/Helix).
  • HTML-файл, папка с изображениями и файл screenshot.png, полученные из предыдущих шагов.
  • Файл metadata.json с полями paths.dirPath и paths.documentPath.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «preview-import» из репозитория: # https://github.com/adobe/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r preview-import/ ~/.claude/skills/preview-import/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.