skills.rest
aemdemos
aemdemosOFFICIAL
Explore all skills by this author →
GitHub

excat-navigation-orchestrator

Orchestrate header and navigation migration with Playwright validation and screenshot evidence.

Updated Mar 16, 2026
Search Tags:#validation#migration#navigation#playwright#aem#visual-critique#megamenu
One-click install
npx skills add https://github.com/aemdemos/summit-dsg --skill excat-navigation-orchestrator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excat-navigation-orchestrator
Source: https://github.com/aemdemos/summit-dsg/tree/main/.agents/skills/excat-navigation-orchestrator
Command: npx skills add https://github.com/aemdemos/summit-dsg --skill excat-navigation-orchestrator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Ensures safe, deterministic migration and instrumentation of complex website headers and navigation (desktop + mobile) by enforcing a validation-first workflow that prevents visual regressions, missing content, and interaction mismatches. It eliminates guesswork by requiring programmatic detection, screenshot evidence, and stepwise validation gates so migrations match the source exactly. The orchestrator coordinates row detection, row mapping, megamenu deep mapping, content-first nav generation, implementation, and targeted visual critique.

Core Features & Use Cases

  • Programmatic header row detection and row mapping using Playwright to avoid visual assumptions and hidden rows.
  • Deep megamenu extraction (programmatic when available or per-item drill-down) with measured panel layout details and image audit.
  • Content-first implementation: writes content/nav.plain.html, validates images on disk, then sequentially implements header.js and header.css.
  • Structured validation flow (desktop first, customer confirmation, then mobile) with automated compare scripts and a per-component critique loop until ≥95% visual parity.
  • Use cases: migrate AEM/Electron Design System headers, instrument complex megamenus, validate header structure during site migrations, and enforce exact overlay/animation parity.

Quick Start

Provide a sourceUrl (or screenshots) and migratedPath and ask the skill to "Orchestrate navigation migration and validation for the header from <sourceUrl> to <migratedPath> (desktop-first, require screenshots)".

Frequently Asked Questions about excat-navigation-orchestrator

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

FAQPage Schema
How do I validate header and navigation migration for visual parity in AEM?▼

Header and navigation migration validation in AEM uses a validation-first orchestrator to enforce programmatic row detection, screenshot evidence, and Playwright interaction tests across desktop and mobile viewports. It prevents visual regressions by requiring structured validation gates until ≥95% visual parity is achieved.

How does megamenu extraction work during a website header migration?▼

Megamenu extraction works by using Playwright to programmatically detect header rows and drill down into menu items, measuring panel layout details and auditing images. It generates content/nav.plain.html and structured JSON artifacts to ensure exact structural and visual parity during migration.

Do I need Playwright installed to run automated navigation validation?▼

Yes, Playwright is a required dependency to run automated navigation validation. It drives the programmatic header row detection, interaction tests, and screenshot evidence collection across desktop and mobile viewports needed to verify exact visual parity.

What's the best way to ensure visual parity when migrating complex navigation structures?▼

The best way to ensure visual parity during navigation migration is a validation-first workflow using automated compare scripts and a per-component critique loop. This approach sequentially implements header.js and header.css, requiring customer confirmation between desktop and mobile phases.

Can I use this validation workflow for both desktop and mobile navigation migrations?▼

Yes, the validation workflow explicitly supports both desktop and mobile navigation migrations. It follows a structured flow starting with desktop validation and customer confirmation, then proceeding to mobile viewports using automated compare scripts and screenshot evidence.

Why are my migrated header images missing or misaligned after extraction?▼

Migrated header images may be missing or misaligned if the validation workflow skips the content-first implementation phase. The orchestrator validates images on disk after writing content/nav.plain.html and before implementing header.js and header.css, ensuring image integrity through structured audits.

Related Skills

Explore More Software Engineering Skills→
aemdemosaemdemos

mobile-navigation-agent

Analyze mobile header and navigation behavior for AEM site migrations.

Official
Advanced
HouseofmvpsHouseofmvps
115

visual-diff

Detect visual regressions in web UIs via Playwright screenshot comparisons.

Community
Intermediate
aemcoderaemcoder
2

migrate-header

Migrate website headers into AEM Edge Delivery Services nav.plain.html with scoped CSS.

Official
Advanced
LambdaTestLambdaTest
350

smartui-skill

Generate SmartUI visual regression test configurations for Playwright, Selenium, Cypress, and Puppeteer.

Official
Advanced