name	preview-migration
description	Preview and verify migrated content in local dev server. Validates rendering, compares with original page, and troubleshoots common issues.

Preview Migration

Open and verify migrated content in local development server.

When to Use This Skill

Use this skill when:

You have generated HTML file (from generate-migration-html)
Ready to preview in browser and verify rendering
Need to compare with original page structure

Invoked by: page-migration skill (Step 5)

Prerequisites

From previous skills, you need:

✅ HTML file at correct path (from generate-migration-html)
✅ Images folder in same directory
✅ screenshot.png from scrape-webpage (for comparison)
✅ documentPath from metadata.json (for URL construction)

Related Skills

page-migration - Orchestrator that invokes this skill
generate-migration-html - Provides HTML file to preview
scrape-webpage - Provides screenshot for comparison

Preview Workflow

Step 1: Start Development Server

Command:

aem up

This starts the local AEM proxy server at http://localhost:3000

Step 2: Navigate in Browser

For most files, use the document path directly:

http://localhost:3000${documentPath}

Example:

HTML file: us/en/about.plain.html
URL: http://localhost:3000/us/en/about

IMPORTANT: For index files, use /index instead of /:

If file is: index.plain.html
Preview at: http://localhost:3000/index
NOT: http://localhost:3000/

Note: If you used --html-folder flag (e.g., aem up --html-folder drafts), prepend that folder to the URL:

File: drafts/test.plain.html
URL: http://localhost:3000/drafts/test

Use paths.documentPath from metadata.json, but for index files ensure the path is /index not /

Step 3: Verify Rendering

Check the following:

✅ Blocks render with correct styling
✅ Layout matches original page structure (compare to screenshot.png)
✅ Images load (or show appropriate placeholders)
✅ No raw HTML visible
✅ Metadata appears in page source (view source, check <meta> tags)
✅ Section styling applied correctly

Step 4: Compare with Original

Side-by-side comparison:

Open ./migration-work/screenshot.png alongside browser preview
Check that content structure matches
Verify blocks decorated correctly
Confirm section boundaries align
Validate styling consistency

Troubleshooting

Blocks don't render correctly:

Check HTML structure matches EDS format
Verify block names match exactly (case-sensitive)
Review ../page-migration/resources/html-structure.md for format guidance

Images not loading:

Verify images folder is in same directory as HTML file
Check image paths are ./images/... format
Ensure images were copied correctly from ./migration-work/images/

Raw HTML visible:

Block name might not match existing block in project
Check browser console for JavaScript errors
Verify block exists in blocks/ directory

Metadata not in page source:

Check metadata block is at end of HTML file
View page source and search for <meta> tags in <head>
Verify metadata properties match EDS format

Dev server not running:

Start server with aem up
Check for port conflicts (default 3000)
Verify you're in correct project directory

Page not found (404):

Verify HTML file exists at expected path
Check documentPath from metadata.json matches URL
For index files, use /index not /
If using --html-folder, include folder in URL

Output

This skill provides:

✅ Verified preview that matches original page structure
✅ Visual confirmation of correct rendering
✅ Validated block decoration
✅ Confirmed metadata presence

Migration complete when all verification points pass.

preview-migration

Install Skill

SKILL.md