preview-import

Preview and validate imported HTML content in a local AEM Edge Delivery Services environment.

Updated Jan 16, 2026

Search Tags:#validation #rendering #preview #metadata #AEM #screenshot #import

Ready to run

npx skills add https://github.com/treeves/ak-test --skill preview-import-treeves

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: preview-import
Source: https://github.com/treeves/ak-test/tree/main/.skills/preview-import
Command: npx skills add https://github.com/treeves/ak-test --skill preview-import-treeves

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers quickly preview and verify content that has been imported into a local AEM Edge Delivery Services environment, ensuring rendering fidelity and catching issues before deployment.

Core Features & Use Cases

Local preview: Start the local dev proxy and load a preview URL for the imported content.
Rendering validation: Compare the preview with the original page to detect layout or asset discrepancies.
Metadata & troubleshooting: Validate metadata is present in the page source and provide guided steps to resolve common issues.

Quick Start

Use the preview-import skill to verify an HTML import by starting the local dev server, opening the URL built from the documentPath in metadata.json, and comparing the rendered page against the original using screenshot.png.

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 a local AEM Edge Delivery Services environment?▼

Start your local AEM dev server with aem up, then use the preview-import skill to load a preview URL constructed from the documentPath in metadata.json. The skill automates this process and displays the rendered content for verification against the original page.

How do I validate that imported HTML and images render correctly before deployment?▼

Compare the local preview with the original page using the screenshot.png reference file. The skill checks rendering fidelity and detects layout or asset discrepancies, helping you catch issues before they reach production.

What do I need to have ready before previewing an import?▼

You need a valid HTML file with matching images folder, a metadata.json document containing the documentPath, and a running local AEM dev server. The skill uses these inputs to construct the preview URL and validate metadata in the page source.

How do I troubleshoot metadata issues in imported content?▼

The skill validates that metadata is present in the page source and provides guided steps to resolve common issues. Check the metadata.json structure and verify it matches the HTML file before re-previewing.

Can I use preview-import to check multiple imports in sequence?▼

Yes. The skill automates preview and validation for each import. Prepare separate HTML files with corresponding images and metadata.json documents, then run the preview workflow for each to verify rendering and catch discrepancies systematically.