preview-import

Name: preview-import
Availability: InStock
Author: pragyap17

Start the local AEM dev server and preview imported HTML for verification.

Updated Sep 18, 2025

Search Tags:#development #troubleshooting #verification #preview #AEM #Edge Delivery #import

Ready to run

npx skills add https://github.com/pragyaP17/universal-editor --skill preview-import-pragyap17

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: preview-import
Source: https://github.com/pragyaP17/universal-editor/tree/main/.claude/skills/preview-import
Command: npx skills add https://github.com/pragyaP17/universal-editor --skill preview-import-pragyap17

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually verifying imported content in a local development environment is time-consuming and prone to errors. This skill automates the process of starting a server, navigating to the correct URL, and providing a clear checklist for validation.

Core Features & Use Cases

Automated Server Start: Initiates the local AEM Edge Delivery Services development server.
Guided Navigation: Provides the correct URLs for previewing imported HTML, handling index files and custom folders.
Comprehensive Verification: Offers a checklist to validate rendering, layout, images, metadata, and styling against the original page.
Troubleshooting: Guides users through common issues like incorrect block rendering, image loading, and 404 errors.

Quick Start

Use the preview-import skill to start the local AEM dev server and open the imported page at '/us/en/about' for verification, comparing it against '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 verify imported HTML content in a local AEM Edge Delivery dev server?▼

Start the local development server and navigate to the imported page URL to visually compare rendering, layout, images, and styling against the original. The preview-import skill automates server startup and provides guided URLs for verification.

What do I need to preview imported content after running generate-import-html?▼

You need the generated HTML file at the correct path, an images folder in the same directory, a screenshot.png from scrape-webpage for comparison, and the documentPath from metadata.json to construct the preview URL.

How do I check if imported images and styling render correctly in Edge Delivery?▼

Use the preview-import skill to open the imported page in the local dev server, then systematically validate image loading, layout structure, metadata, and CSS styling against the original screenshot using the provided verification checklist.

What common issues should I watch for when previewing imported content?▼

Watch for incorrect block rendering, images failing to load, 404 errors on resources, and layout mismatches. The preview-import skill includes troubleshooting guidance for diagnosing and resolving these problems.

Can I preview imported content without manually starting the AEM dev server?▼

Yes. The preview-import skill automatically initiates the local AEM Edge Delivery Services development server and handles navigation to the correct URL, eliminating manual server startup.

Do I need specific folder structure for preview-import to work?▼

Yes. The skill requires the HTML file at the correct path from generate-import-html, an images folder alongside it, and screenshot.png for comparison validation.