skills.rest
ComwrapUkReply
ComwrapUkReplyCOMMUNITY
Explore all skills by this author →
GitHub

preview-migration

Preview migrated HTML against original pages using a local dev server.

Updated Sep 12, 2025
Search Tags:#html#qa#rendering#migration#preview#dev-server#visual-comparison
One-click install
npx skills add https://github.com/ComwrapUkReply/ue-multitenant-root --skill preview-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preview-migration
Source: https://github.com/ComwrapUkReply/ue-multitenant-root/tree/main/.claude/skills/preview-migration
Command: npx skills add https://github.com/ComwrapUkReply/ue-multitenant-root --skill preview-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Preview migrated content locally to validate rendering against original pages and catch visual discrepancies before deployment.

Core Features & Use Cases

  • Validate rendering parity between migrated HTML and the original page
  • Start a local dev server (aem up) and load the migrated content for side-by-side comparison
  • Troubleshoot migration issues using provided guidance and reference materials

Quick Start

Run aem up to start the local dev server and then open http://localhost:3000${documentPath} to preview the migrated page and compare it to the original.

Frequently Asked Questions about preview-migration

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

FAQPage Schema
How do I preview migrated HTML content locally and compare it to the original page?▼

To preview migrated HTML locally, start the dev server using aem up and open http://localhost:3000${documentPath} to view the migrated HTML. Load the page side-by-side with the original screenshot to verify rendering parity and identify visual discrepancies before deployment.

Why does my migrated HTML render differently from the original page?▼

Migrated HTML may render differently from the original page due to missing images, incorrect documentPath URL construction, or HTML generation discrepancies. Use side-by-side visual comparison with the original screenshot to troubleshoot and pinpoint the exact rendering issues.

What files do I need to verify rendering parity during a content migration?▼

To verify rendering parity during a content migration, you need the generated HTML file, an accompanying images folder, a screenshot of the original page for visual comparison, and a documentPath to construct the correct local URLs for the dev server.

Can I use a local dev server to troubleshoot visual discrepancies in migrated content?▼

Yes, you can use a local dev server to troubleshoot visual discrepancies in migrated content by running aem up and navigating to the documentPath. This loads the migrated HTML locally so you can perform side-by-side checks against the original page screenshot and resolve rendering issues.

What is the best way to validate visual parity when migrating web pages?▼

The best way to validate visual parity when migrating web pages is to run a local dev server, load the generated HTML at the correct documentPath, and perform a side-by-side visual comparison against a screenshot of the original page to catch any rendering discrepancies.

Related Skills

Explore More Content & Communication Skills→
initialyzeinitialyze

preview-import

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

Official
Basic
aemysitesaemysites

generate-import-html

Generate structured HTML sections from authoring analysis for AEM Edge Delivery Services.

Official
Intermediate
RoyincogRoyincog

preview-import

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

Community
Intermediate
JuanMS20JuanMS20

sketch

Generate 2-3 self-contained HTML design variants with inline CSS for comparison.

Community
Intermediate