excat-navigation-orchestrator

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)".