skills.rest
pragyaP17
pragyaP17COMMUNITY
Explore all skills by this author →
GitHub

preview-import

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
One-click install
npx skills add https://github.com/pragyaP17/universal-editor --skill preview-import-pragyap17
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
trielofftrieloff

preview-import

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

Community
Intermediate
aemsitesaemsites
1

preview-import

Validate imported AEM Edge Delivery Services content against the original page rendering.

Official
Intermediate
adobeadobe
162

preview-import

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

Official
Advanced
Sir-chawakornSir-chawakorn
33

preview-mode

Preview code changes locally with browser automation and visual diff comparisons.

Community
Intermediate