migrate-page

Extract web page structure and assemble preview-ready HTML for AEM Edge Delivery Services.

2|Updated Mar 12, 2026
One-click install
npx skills add https://github.com/aemcoder/skills --skill migrate-page-aemcoder
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: migrate-page
Source: https://github.com/aemcoder/skills/tree/main/skills/migration/migrate-page
Command: npx skills add https://github.com/aemcoder/skills --skill migrate-page-aemcoder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Migrating a web page into AEM Edge Delivery Services (EDS) is slow and error-prone because you must extract layout, break content into reusable blocks, generate EDS-compatible markup, and validate the result visually.

Core Features & Use Cases

  • End-to-end page migration orchestration: extracts a page, decomposes it into navigation/main/footer fragments, generates one scoop per block (via the cone), assembles final plain HTML deliverables, and verifies via screenshots.
  • Visual-tree-driven decomposition: uses a page screenshot and visual tree artifacts to classify regions into block candidates and default-content.
  • Brand/style preparation for correct previews: resolves fonts and updates head.html plus styles so previews render consistently before block generation.

Quick Start

Start the migration by asking the AI to run: upskill aemcoder/skills --path skills/migration --skill migrate-page and provide a source page URL plus the target GitHub repo (owner/repo).

Frequently Asked Questions about migrate-page

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

FAQPage Schema
How do I automate web page migration into AEM Edge Delivery Services blocks?

You can automate web page migration into AEM Edge Delivery Services by extracting the page structure, decomposing it into nav, main, and footer fragments, generating block scoops, and assembling preview-ready plain HTML for visual verification.

How does visual decomposition work for EDS block generation?

Visual decomposition for EDS block generation works by using a Playwright-based page screenshot and visual tree artifacts to classify page regions into block candidates and default content before assembling the final HTML.

What is the best way to extract web page structure for AEM EDS migration?

The best way to extract web page structure for AEM EDS migration is using Playwright to capture screenshots and visual tree outputs, which are then orchestrated to decompose the page into fragments and generate individual block scoops deterministically.

Can I use Playwright to generate EDS-compatible plain HTML from an existing web page?

Yes, you can use Playwright to extract the visual tree and screenshot artifacts from an existing web page, which are then used to generate EDS-compatible plain HTML drafts and a preview page for visual verification.

Do I need to prepare fonts and styles before generating EDS blocks from a migrated page?

Yes, you need to resolve fonts and update head.html plus styles before block generation to ensure that the assembled EDS plain HTML drafts render consistently during preview verification.

Why does my EDS page migration require a scoop orchestration phase?

EDS page migration requires a scoop orchestration phase to control the extraction workflow and create per-block scoops deterministically, ensuring that individual page components are correctly isolated before final HTML assembly.