preview-import

Preview imported HTML in a local AEM Edge Delivery Services environment using documentPath URLs.

3|Updated Apr 17, 2025
One-click install
npx skills add https://github.com/arbory-digital-inc/sas-demo --skill preview-import-arbory-digital-inc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: preview-import
Source: https://github.com/arbory-digital-inc/sas-demo/tree/main/.claude/skills/preview-import
Command: npx skills add https://github.com/arbory-digital-inc/sas-demo --skill preview-import-arbory-digital-inc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Preview and verify imported content in the local AEM Edge Delivery Services development server. It validates rendering, compares with the original page, and helps troubleshoot common issues encountered during content import.

Core Features & Use Cases

  • Start the local AEM proxy with aem up and preview the imported HTML in a browser.
  • Compare the rendered output with the original page structure and assets using the provided screenshot for verification.
  • Troubleshoot rendering discrepancies using the documented workflow and URL construction based on documentPath.

Quick Start

Use the preview-import skill after you have generated the import HTML. Start the development server with aem up, then open the URL formed from documentPath in metadata.json, for example http://localhost:3000${documentPath}. For index files, use /index in the URL (e.g., http://localhost:3000/us/en/index).

Frequently Asked Questions about preview-import

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview and verify imported HTML content in AEM Edge Delivery Services?

To preview imported HTML in AEM Edge Delivery Services, start the local proxy with aem up, then open the URL formed from documentPath in metadata.json, such as http://localhost:3000${documentPath}, to verify rendering against the original page.

What do I need to validate content rendering locally in AEM Edge Delivery Services?

Local content rendering validation requires the aem up development server, an images folder in the same directory, a screenshot.png for comparison, and documentPath from metadata.json to construct the local preview URL.

Why does my imported content look different from the original page during local AEM preview?

Imported content rendering discrepancies occur when HTML structure or assets do not match the original page. Use the provided screenshot.png to compare the rendered output and troubleshoot structural issues against the original page during the import validation workflow.

How do I construct the correct local URL for index files when previewing an AEM import?

For index files, construct the local preview URL by appending /index to the base path, for example http://localhost:3000/us/en/index, using the documentPath from metadata.json to ensure proper rendering in the AEM development server.

Can I use screenshot comparison to troubleshoot AEM Edge Delivery Services import issues?

Yes, screenshot comparison verifies imported content rendering. Place a screenshot.png in the same directory as the imported HTML, then compare the browser-based rendered output against it to identify and troubleshoot structural discrepancies from the original page.

When should I run the preview-import workflow during content migration?

Run the preview-import workflow after generating the import HTML file and before final publishing. It validates local rendering in the AEM Edge Delivery Services environment to ensure the imported content matches the original page structure.