migrate-header

Migrate Header to EDS

Migrate a website's header/navigation into the EDS header block pattern. Produces nav.plain.html + customized header.css. The header JS is typically pre-built in the EDS repo — you customize CSS only.

HARD CONSTRAINTS

1. Output is nav.plain.html — NOT a regular block .plain.html.
2. Block name is header — CSS/JS at blocks/header/header.css|.js.
3. If blocks/header/ exists in the repo, keep the existing JS. Only generate nav.plain.html and customize header.css.
4. CSS specificity: ALL rules must be .header.block scoped. NOT .header — must be .header.block to prevent global overrides.
5. NEVER inline CSS or JS in the preview. Use the EDS framework.
6. NEVER pre-decorate HTML. No .section, .block, data-block-name.

---

Parameters (from cone's feed_scoop prompt)

• sourceUrl — URL of the source page
• projectPath — EDS project path (e.g., /shared/vibemigrated)
• bounds — bounding box of the header region
• notes — decomposition notes (e.g., "two-tier purple header")

---

Step 1: Capture Source Header

Navigate to the source page and extract the header's content:

Browser access: driving playwright requires write: /.playwright/**. The orchestrator should pre-authorize this before dispatching you; if you hit a sudo prompt for /.playwright on the first playwright-cli call, that is expected — it should be granted with an always rule so it does not recur.

playwright-cli tab-new {sourceUrl}

Capture the targetId from the output (e.g., ABC123). All subsequent playwright-cli commands for this tab MUST include --tab={sourceTabId}.

MANDATORY — resize to a desktop viewport before ANY screenshot or extraction:

playwright-cli resize --tab={sourceTabId} 1440 900

New tabs open at a default viewport of ~780px (a mobile breakpoint). Capturing or measuring the component at that width yields a mobile-layout screenshot and can drive wrong fidelity decisions (e.g. baking a mobile breakpoint into the block CSS). Never skip this. Optionally hard-fail if the resize did not take: