skills.rest
initialyze
initialyzeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

preview-import

Preview imported HTML on the local AEM dev server and compare rendering.

1|Updated Oct 3, 2025
Search Tags:#rendering#verification#debug#preview#AEM#screenshot#import
One-click install
npx skills add https://github.com/initialyze/acme-services --skill preview-import-initialyze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preview-import
Source: https://github.com/initialyze/acme-services/tree/main/.claude/.skills/preview-import
Command: npx skills add https://github.com/initialyze/acme-services --skill preview-import-initialyze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill previews and verifies imported content in the local AEM Edge Delivery Services development server, validating rendering and comparing with the original page.

Core Features & Use Cases

  • Preview imported HTML against the original page to ensure structure and styling are preserved
  • Verify assets such as images render correctly and the overall layout matches expectations
  • Troubleshoot discrepancies between generated HTML and source content to ensure fidelity

Quick Start

Start the local AEM proxy with the aem up command, then open the preview URL http://localhost:3000${documentPath} (use /index for index files) and compare rendering with the source page.

Frequently Asked Questions about preview-import

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

FAQPage Schema
How do I preview imported content in the local AEM dev server?▼

To preview imported content in the local AEM dev server, start the proxy using the `aem up` command, then navigate to `http://localhost:3000${documentPath}` to view and verify your generated HTML rendering.

What files do I need to verify imported HTML rendering against the original page?▼

Verifying imported HTML rendering requires an HTML file generated by generate-import-html, an images folder, a screenshot for visual comparison, and a documentPath from metadata.json to construct the correct local URL.

How do I troubleshoot rendering discrepancies between generated HTML and source content?▼

Troubleshoot rendering discrepancies by accessing the local AEM preview URL and performing rendering checks to ensure blocks, images, and metadata render correctly and match the provided source screenshot.

Does the AEM preview validation require a specific URL format for index files?▼

AEM preview validation requires using `/index` for index files when constructing the preview URL. You access the local development server at `http://localhost:3000${documentPath}` to validate the imported content.

Can I validate imported content rendering without starting the local AEM proxy?▼

You cannot validate imported content rendering without starting the local AEM proxy. The verification process requires running `aem up` to serve the local dev server and perform visual rendering checks against the original page.

What rendering checks should I perform when previewing imported AEM content?▼

When previewing imported AEM content, perform rendering checks to verify that blocks, images, and metadata render correctly. Compare the local preview output with the original page screenshot to ensure structural and visual fidelity.

Related Skills

Explore More Content & Communication Skills→
trielofftrieloff

preview-import

Validate imported HTML rendering against a reference screenshot in AEM Edge Delivery Services.

Community
Intermediate
paul-hosking-cdw-compaul-hosking-cdw-com

preview-import

Validate imported HTML rendering against the original page during local preview.

Community
Intermediate
RoyincogRoyincog

preview-import

Verify imported HTML rendering against the original in AEM Edge Delivery Services.

Community
Intermediate
adobeadobe
162

preview-import

Preview imported HTML in a local AEM Edge Delivery Services server.

Official
Advanced