preview-import

Render imported HTML files in a local AEM Edge Delivery Services server for visual verification.

Updated Mar 27, 2025

Search Tags:#verification #preview #aem #development server #import #html rendering

Ready to run

npx skills add https://github.com/jfoxx/residentportal --skill preview-import-jfoxx

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill allows you to preview and verify imported content within a local AEM Edge Delivery Services development server, ensuring accurate rendering and structure before deployment.

Core Features & Use Cases

Local Preview: Renders imported HTML files in a local development environment.
Content Verification: Compares the rendered output against original page structure and screenshots.
Troubleshooting: Identifies and helps resolve common issues like incorrect block rendering or missing metadata.
Use Case: After importing a webpage, use this skill to launch the local AEM dev server and visually confirm that all content blocks, images, and metadata are displayed correctly at http://localhost:3000/your/page/path.

Quick Start

Start the AEM development server with the --html-folder flag pointing to the directory containing your imported HTML files.

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 HTML content in an AEM development server?▼

To preview imported HTML content in an AEM development server, start the local AEM Edge Delivery Services environment using the `--html-folder` flag to render and visually verify the imported pages.

Why are blocks not rendering correctly after importing web content into AEM?▼

Incorrect block rendering after importing web content into AEM often stems from incorrect block names or broken paths. Troubleshooting involves comparing the rendered output against original structures to identify and fix these mismatches.

How do I verify image loading and metadata in AEM Edge Delivery Services?▼

Verify image loading and metadata in AEM Edge Delivery Services by launching the local development server and visually confirming that all content blocks, images, and metadata display correctly at your local host path.

What causes 404 errors when previewing imported content locally?▼

404 errors when previewing imported content locally are typically caused by broken image paths or incorrect file routing. The skill guides users through troubleshooting steps to resolve these common rendering issues.

Can I check imported webpage layout accuracy before deployment?▼

Yes, you can check imported webpage layout accuracy before deployment by rendering HTML files in a local AEM development server and comparing the visual output against original page screenshots and structures.

Do I need a local environment to verify imported AEM content?▼

Yes, a local environment is required to verify imported AEM content. The skill facilitates visual verification by rendering HTML files in a local AEM Edge Delivery Services development server at `http://localhost:3000`.