skills.rest
aemcoder
aemcoderOFFICIAL
Explore all skills by this author →
GitHub

migrate-block

Migrate a visual component into an AEM EDS block with authored HTML, scoped CSS, and preview verification.

2|Updated Mar 12, 2026
Search Tags:#playwright#aem#web migration#visual verification#eds blocks#css scoping#dom decoration
One-click install
npx skills add https://github.com/aemcoder/skills --skill migrate-block
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-block
Source: https://github.com/aemcoder/skills/tree/main/skills/migration/migrate-block
Command: npx skills add https://github.com/aemcoder/skills --skill migrate-block

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrating a single visual component into AEM Edge Delivery Services (EDS) without breaking the real rendering pipeline or manual verification workflow.

Core Features & Use Cases

  • Content extraction + draft-first authoring: Quickly drafts a .plain.html structure and iteratively refines CSS using a reusable source screenshot for visual comparison.
  • EDS-correct preview verification: Serves a preview page that loads the real EDS framework and validates that the block decorates and loads (via hlx/framework checks).
  • Block-scoped CSS/JS pipeline: Writes scoped CSS and optional DOM decoration JS for the block, while enforcing constraints like loading CSS/JS through the EDS framework and avoiding preview pre-decoration.

Quick Start

Instruct the cone to migrate one block by feeding it the blockName, sourceUrl, id, bounds, and projectPath so it can extract, write drafts, generate block assets, and validate the EDS preview.

Frequently Asked Questions about migrate-block

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

FAQPage Schema
How do I migrate a visual component into an AEM EDS block?▼

To migrate a visual component into an AEM EDS block, you extract the source HTML, draft a `.plain.html` structure, write scoped CSS, add optional decorate() JavaScript, and verify visual rendering against a source screenshot.

What is the draft-first workflow for AEM Edge Delivery Services page migrations?▼

The draft-first workflow for AEM EDS migrations involves scooping a single component, authoring `.plain.html`, and iteratively refining scoped CSS using a reusable source screenshot for visual comparison before final block generation.

How do I avoid preview pipeline violations when authoring AEM EDS blocks?▼

To avoid preview pipeline violations in AEM EDS blocks, you must load CSS and JavaScript through the real EDS framework, avoid preview pre-decoration, and follow exact `.plain.html` formatting rules during component extraction.

Does AEM Edge Delivery Services block migration support visual verification against source screenshots?▼

Yes, AEM EDS block migration supports visual verification by serving a preview page that loads the real EDS framework, validating block decoration, and comparing rendered output against the original source screenshot.

What do I need to start migrating a block to AEM Edge Delivery Services?▼

To start migrating a block to AEM EDS, you need the block name, source URL, component ID, bounds, and project path so the workflow can extract content, download component images, write drafts, and generate block assets.

Why does my AEM EDS block decoration fail to load in the preview pipeline?▼

AEM EDS block decoration may fail in the preview pipeline if CSS or JavaScript is not loaded through the EDS framework, or if the `.plain.html` structure violates exact preview rules and pre-decorates the DOM incorrectly.

Related Skills

Explore More Software Engineering Skills→
aemdemosaemdemos

nav-component-critique

Compare header navigation screenshots and generate prioritized CSS fixes.

Official
Advanced
Focus-GTSFocus-GTS

block-scaffolder

Generate EDS block scaffolds with JavaScript decoration, scoped CSS, and authoring markup.

Official
Advanced
cffrankcffrank

visual-qa

Capture Playwright-based screenshots across devices and create UI evidence reports.

Community
Intermediate
pragyaP17pragyaP17

generate-import-html

Generate section-structured HTML with blocks and metadata for AEM Edge Delivery Services.

Community
Basic