Migrate website headers into AEM Edge Delivery Services nav.plain.html with scoped CSS.
npx skills add https://github.com/aemcoder/skills --skill migrate-header
Please help me install this Agent Skill. Skill: migrate-header Source: https://github.com/aemcoder/skills/tree/main/skills/migration/migrate-header Command: npx skills add https://github.com/aemcoder/skills --skill migrate-header
Migrates a source website header/navigation into an AEM Edge Delivery Services (EDS) header block so you can preserve layout and dropdown behavior without manually rebuilding the navigation structure.
drafts/nav.plain.html with the correct header block expectations.blocks/header/header.css using .header.block-scoped rules to avoid global overrides and iterates against visual verification.hlx/framework loading and the header fragment rendering.Prompt the system with the source URL and your EDS project path to run the header migration and generate nav.plain.html plus blocks/header/header.css in your target repo.
High-intent search queries and answers about installing and using this skill.
To migrate a website header to AEM Edge Delivery Services, extract the header HTML from a live page and transform it into `nav.plain.html` with scoped `.header.block` CSS. This process preserves dropdowns and mega-menu structures without manual rebuilding.
Yes, you can convert mega-menu and multi-section navigation into EDS format. The migration detects multi-tier headers including brand, top bar, utility links, and main nav, transforming dropdown content into an EDS-compatible structure.
To scope CSS for AEM EDS header blocks, generate rules using the `.header.block` selector prefix. This confines styles to the header component, preventing global stylesheet conflicts while matching the existing `blocks/header/header.js` contract.
Yes, Playwright is required to extract and verify header navigation for EDS. It automates live page header extraction and screenshotting, and performs preview-based checks to confirm `hlx` framework loading and header fragment rendering.
The best way to verify an AEM EDS header migration is through a preview-based workflow. This uses an EDS project preview page and Playwright checks to ensure the framework loads properly and the generated header fragment renders correctly.
Yes, EDS header migration supports single-row headers with utility links. It extracts the correct header region from the source page and transforms both simple single-row and complex multi-tier structures into valid EDS markup.
thehivegroup-aiCapture screenshots and HTML at multiple viewports with Playwright.
aemdemosOrchestrate header and navigation migration with Playwright validation and screenshot evidence.
Focus-GTSAudit EDS block JavaScript and CSS to generate a severity-graded test plan.
Focus-GTSGenerate EDS block scaffolds with JavaScript decoration, scoped CSS, and authoring markup.