launchframe 0.4.5 → 0.4.7

package/.augment/commands/launchframe.md

@@ -13,7 +13,7 @@ argument-hint: "<url> \"<saas-idea>\""
 1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
 2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
 
-You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, merge, QA. Not a shallow inspect-then-guess flow.
+You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit images / DOM / CSS / motion, merge their findings, then QA. Not a shallow inspect-then-guess flow.
 
 ## Step 0 — Persist Launchframe inputs
 
@@ -33,7 +33,7 @@ After structure and styles match the reference, apply the **SaaS idea** to hero,
 
 The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's visible at each URL. Unless the user specifies otherwise, use these defaults:
 
-- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations
+- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations, **image presentation**, **DOM structure**, and **authored CSS intent** (computed values must match after extraction)
 - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
 - **Customization:** Structure and visuals — pure emulation of the reference. **Marketing copy** — apply the parsed **SaaS idea** where hero/headlines/CTAs are interchangeable (see “SaaS copy overlay” above); do not invent a different product than the user’s idea.
@@ -43,8 +43,8 @@ If the user provides additional instructions (specific fidelity level, customiza
 
 ## Pre-Flight
 
-1. **Browser automation is required.** Check for available browser MCP tools (Chrome MCP, Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). Use whichever is available — if multiple exist, **prefer Chrome DevTools MCP** for inspection: it maps to the same engine the user sees and preserves **computed `animation` / `transition` / scroll-driven** values accurately. If none are detected, ask the user which browser tool they have and how to connect it. This skill cannot work without browser automation. **Pixel-perfect MCP:** every extract and QA pass must follow **Browser MCP: pixel-perfect capture** (Phase 1) — locked viewports, **verbatim** `getComputedStyle` strings (including fractional `px`, `rem`, `oklch`/`rgba`), and **geometry** from `getBoundingClientRect()` where layout matters. **Motion parity:** every pass must treat **motion as first-class** — same **durations, delays, easings (`cubic-bezier` / steps), iteration counts, fill modes, directions, keyframe percentages, and scroll/view-timeline bindings** as the live site, not “similar” motion.
-2. **Parse arguments** — extract every `http://` / `https://` URL token (there may be several). **SaaS idea** = the remaining non-URL text (trim outer quotes). Normalize and validate each URL; if any are invalid, or the SaaS idea is missing, ask the user once. For each valid URL, verify it is accessible via your browser MCP tool.
+1. **Real browser automation is required.** Check for browser MCP tools (Chrome DevTools MCP first, then Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). **Prefer Chrome DevTools MCP** when it is connected: run **`evaluate_script` / in-page `evaluate`** on the live tab so motion is measured from the same rendering pipeline users see (`getComputedStyle`, Web Animations API, stylesheet keyframes where readable). If multiple tools are available, still use **Chrome MCP for reconnaissance and motion extraction**; other tools are fine for screenshots or navigation if needed. If no browser MCP is detected, ask the user once how to connect Chrome DevTools MCP (or another tool) — this skill cannot run blind. **Motion is first-class:** durations, delays, easings, keyframe curves, scroll/view timelines, and interaction triggers must be **copied from live measurements**, not invented from adjectives like “smooth” or “snappy.”
+2. **Parse arguments** — extract every `http://` / `https://` URL token (there may be several). **SaaS idea** = the remaining non-URL text (trim outer quotes). Normalize and validate each URL; if any are invalid, or the SaaS idea is missing, ask the user once. For each valid URL, verify it is accessible via **Chrome MCP** (preferred) or your connected browser tool.
 3. Verify the base project builds: `npm run build`. The Next.js + shadcn/ui + Tailwind v4 scaffold should already be in place. If not, tell the user to set it up first.
 4. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
 5. When working with multiple sites in one command, optionally confirm whether to run them in parallel (recommended, if resources allow) or sequentially to avoid overload.
@@ -57,12 +57,30 @@ These are the truths that separate a successful clone from a "close enough" mess
 
 When you traverse the DOM and the Network panel, do **not** treat all nodes equally. Work in this **priority order** so the clone feels like the original, not a wireframe:
 
-1. **Images (raster + video stills)** — Enumerate `<img>`, `<picture>`, responsive `srcset`, `data-*` lazy URLs, **computed `background-image`** on the element and parents (including pseudo-elements), mask images, `<video poster>`, hero media. **Scrape:** download binary assets to `public/images/` (or `public/videos/`) with stable paths referenced in specs. **Create** a replacement PNG/WebP/SVG only when the asset is blocked (CORS, auth cookie, 403), ephemeral, or impossible to URL-fetch — use a high-DPI screenshot crop, traced artwork, or CSS gradient approximation, and mark `ASSET_SOURCE: generated` in the component spec with a short reason.
+1. **Images (raster + video stills) — HTML, files, and CSS together** — Enumeration is not enough: the clone must match **how** each asset is mounted and styled.
+   - **Markup parity:** Preserve `<picture>` / `<source>` **order**, **`media` / `type`** attributes, and **`sizes`** where the reference uses them; preserve **`srcset`** descriptor patterns (w/x qualifiers) on `<img>` or **equivalent** `next/image` `sizes` + `srcSet` (document the mapping in the spec). Copy **`loading`**, **`decoding`**, **`fetchpriority`**, **`alt`**, **`role`/`aria-*`** when they affect layout or LCP. **`width` / `height`** (or intrinsic aspect + CSS `aspect-ratio`) must stop layout shift the same way as the reference; note **`width`/`height` attributes vs CSS** if both exist.
+   - **Box + painting:** Extract and reproduce **`object-fit`**, **`object-position`**, **parent `overflow`**, **clipping `border-radius`**, **masks**, **`filter`**, and **`mix-blend-mode`** on the same stacking context as the live node. **`background-image`** on the element or **`::before` / `::after`** must use the **same** cover/contain behavior, **position**, **size**, **repeat**, and **attachment** (record pseudo-elements explicitly in the spec).
+   - **Files:** Download real bytes to `public/images/` (or videos/posters). **Provenance** in spec: URL hash or byte size so verifiers can confirm the correct asset. No “similar” stock swaps unless marked **substitute** per Scope Defaults.
 2. **SVGs & iconography** — Inline `<svg>`, sprite `symbol` defs, **SVG used as masks/filters**, icon fonts (prefer path extraction). Convert to `@/components/icons.tsx` (or section-local components) with meaningful names. Prioritize crisp edges and correct `viewBox` over shrinking bundle size during emulation.
-3. **Motion & animation** — CSS `@keyframes`, `animation`, `animation-timeline` / `view-timeline` / `animation-range`, `transition`, `transform`, `transform-origin`, will-change; JS-driven motion (carousel timing, IntersectionObserver reveals); libraries (GSAP, Framer, Lottie JSON, Lenis). Capture **numbers** (ms, `cubic-bezier()`, `steps()`, stagger, scroll thresholds, **named keyframe blocks**), not adjectives — paste **verbatim** `cssText` for relevant `@keyframes` into specs when obtainable. Include **reduced-motion** (`matchMedia('(prefers-reduced-motion: reduce)'))` behavior if present.
+3. **Motion & animation (Chrome MCP)** — Treat this like color and spacing: **numeric fidelity**. In Chrome MCP, evaluate scripts against the live page to capture:
+   - Full **`animation`** shorthand plus **`animation-*` longhands** (`animation-name`, `-duration`, `-delay`, `-timing-function`, `-iteration-count`, `-direction`, `-fill-mode`, `-play-state`, **`animation-timeline`** / scroll timelines)
+   - Full **`transition`** shorthand plus **`transition-*` longhands**, and **`transform`** / **`will-change`** as applied during and after motion
+   - **Author `@keyframes`** — walk `document.styleSheets` / `cssRules` and copy `CSSKeyframesRule` bodies **where the browser exposes them** (same-origin stylesheets). For cross-origin CSS that throws on access, use DevTools **Sources** or fetch the CSS URL and paste the `@keyframes` into the spec — do not guess intermediate keyframe percentages
+   - **Web Animations API** — for each moving node, `element.getAnimations({ subtree: false })` and record each effect’s timing (`duration`, `delay`, `easing`, `iterations`, `direction`, `fill`)
+   - **Scroll-driven behavior** — exact scroll thresholds (px or intersection ratios), `scroll-snap-*`, and libraries (**Lenis**, **Locomotive Scroll**, etc.) with the same init/wrapper classes the reference uses
+   - **`prefers-reduced-motion`** — note whether the site alters or disables motion (evaluate `matchMedia('(prefers-reduced-motion: reduce)')` and compare to a forced reduced-motion emulation if DevTools allows)
+   Run the **Phase 1 motion audit script** and merge findings into `docs/research/BEHAVIORS.md`. Capture **numbers** (`ms`, `cubic-bezier(...)`, stagger offsets), not adjectives.
 
 Only after the above are accounted for should you spend cycle time on minor text or non-visual refactors. A perfect grid with missing hero art and dead animation still fails the clone.
 
+### 0b. HTML / DOM structure (layout tree, not “vibes”)
+
+**Exact** means the **visible layout tree** matches: **section order**, **sibling order**, **wrapper depth** (decorative `div`s, flex rows, grid shells), and **key hooks** (sticky wrappers, scroll containers). React may rename tags **only** if roles/landmarks still reflect the same outline and **computed layout** is unchanged — do not collapse three nested wrappers into one unless the spec proves they are redundant in the reference. Specs must include a short **DOM outline** (indentation sketch or bullet tree) for complex sections so builders and **Phase 6 verifiers** can diff structure.
+
+### 0c. CSS fidelity (authored + computed)
+
+Tailwind utilities are fine **only** as a transport for **measured** values. Every critical rule must trace back to **`getComputedStyle()`** (or authored sheet text) from Chrome MCP: **no “close” token swaps** (`rounded-lg` when the radius is `10px`, `gap-4` when gap is `18px`) unless values compile to the same pixel output. Prefer arbitrary values (`max-w-[872px]`, `rounded-[10px]`) when shadcn defaults don’t land on the measured number. **Pseudo-elements** and **custom properties** used by the reference must appear in the clone with the same cascade intent.
+
 ### 1. Completeness Beats Speed
 
 Every builder agent must receive **everything** it needs to do its job perfectly: screenshot, exact CSS values, downloaded assets with local paths, real text content, component structure. If a builder has to guess anything — a color, a font size, a padding value — you have failed at extraction. Take the extra minute to extract one more property rather than shipping an incomplete brief.
@@ -152,48 +170,11 @@ Navigate to the target URL with browser MCP.
 
 Follow **§0 (Visual crawl priority)** during the entire reconnaissance pass: images and backgrounds → SVGs/icons → motion/animations — before spending time on secondary copy tweaks.
 
-### Multi-pass DOM reconnaissance (mandatory)
-
-**A single scroll is not enough.** You must run the live page **multiple full cycles** in browser MCP — each time walking the **DOM**, the **asset graph**, and the **motion flow** — until what you write in specs is **exactly** what the reference does, not a remembered approximation.
-
-**Minimum passes** (run **Pass 1–4 at 1440px first**; **repeat Pass 1–3 at 768px and 390px** wherever layout or node order differs; reconciliation can be width-specific):
-
-1. **Structure pass (DOM, top → bottom):** Traverse from **`document.body`** in **depth-first order** (or section-by-section using regions you will later name in `PAGE_TOPOLOGY.md`). For every node that affects layout or visible content, record **tag**, **selector hint** (stable `id` / first meaningful classes), **`childNodes` order** (siblings matter — flex/grid gaps and wrappers are not optional), landmarks, and **which element is the scroll container** (`overflow` / `overscroll-behavior`). Produce a **literal hierarchy** in `docs/research/DOM_SKETCH.md` (whole page or per-section files under `docs/research/`) so builders cannot silently reorder or collapse wrapper divs. **Include “invisible” structure** (spacers, gradient overlays, absolutely positioned siblings).
-2. **Asset pass (images & layered media):** **Second full traversal** focused on §0 priority 1–2: every `<img>`, `<picture>` / `srcset`, `<video>` / `poster`, computed **`background-image`** on the element **and** ancestors, CSS masks, inline SVG / sprites. Cross-check with the Network panel. Every URL must end up **downloaded to `public/`** with a documented path, or marked **blocked / generated** with a substitute and reason.
-3. **Motion & flow pass:** **Third full journey** — slow scroll **top to bottom**, then **scroll again** (different speed) to catch lazy-mounted nodes, staggered `IntersectionObserver` reveals, and scroll-snapped stops. Run **`motionAudit`** (below) **per major section root** after scrolling that section into view. **Re-do click/hover sweeps** here while sampling `getComputedStyle` so **transitions and keyframe-driven flow** match the reference’s **order and timing**, not a generic fade-in.
-4. **Reconciliation pass:** **Fourth pass** — read `DOM_SKETCH.md`, `BEHAVIORS.md`, asset inventory, and `MOTION.md` together; list **gaps** (missing wrapper, second image layer, unnamed animation, wrong child order). For every gap, return to the site and **repeat Pass 1–3** for that subtree until the spec is closed.
-
-**Hard rule:** Every fact in a component spec must trace to **which pass** produced it. If you “kind of remember” a structure from an earlier visit, **run the page again** — do not guess.
-
 ### Screenshots
 - Take **full-page screenshots** at desktop (1440px) and mobile (390px) viewports
 - Save to `docs/design-references/` with descriptive names
 - These are your master reference — builders will receive section-specific crops/screenshots later
 
-### Browser MCP: pixel-perfect capture
-
-MCP-driven inspection must be **pixel-perfect**, not “close.” Apply this on **every** reconnaissance width and again in Phase 5.
-
-- **Viewport lock:** Resize the MCP-controlled window to exact **CSS widths** used for this project: **1440**, **768**, and **390** px (height large enough to avoid accidental mobile chrome quirks). After each resize, record **`window.innerWidth`**, **`document.documentElement.clientWidth`**, and **`devicePixelRatio`** (run the snippet below). Extraction and QA **use the same widths** so diffs are valid.
-- **Zoom:** Ensure **browser zoom is 100%** (not 90%/110%). Zoom breaks `px` parity and screenshots.
-- **Computed styles are verbatim:** When copying from `getComputedStyle()`, paste **exact returned strings** — including **fractional** lengths (`12.8px`), **negative** values, **`oklch()`/`lch()`/`rgba()`**, `letter-spacing`, `line-height`, `border`/`outline`, and **`calc()`**/`min()` that the cascade resolves to. **Do not round** for “clean” tokens (no `~16px`; no swapping `0.875rem` for `14px` unless the computed value truly equals that).
-- **Geometry:** When alignment, gutters, or sticky offsets matter, record **`getBoundingClientRect()`** (`x`, `y`, `width`, `height`) at the relevant scroll position and width — not only padding/margin strings. Fixed/sticky layers need **viewport-relative** positions.
-- **Pseudos & layers:** Extract **`::before` / `::after`** (and other pseudos the reference uses) with `getComputedStyle(el, '::before')` etc.; they often hold gradients, borders, or icons that define the pixel look.
-- **Anti-aliasing & text:** Prefer **real Chrome** via MCP so **font rasterization** matches; load the **same font files/weights** in Next.js as on the reference. Note `font-feature-settings` / `font-variation-settings` / `-webkit-font-smoothing` if non-default.
-- **Screenshots vs. DOM:** Screenshots are for **diffing**; the **spec values** still come from **computed style + rect**, not from eyeballing pixels.
-
-**Viewport diagnostic** (run via browser MCP after each resize):
-
-```javascript
-JSON.stringify({
-  innerWidth: window.innerWidth,
-  clientWidth: document.documentElement.clientWidth,
-  clientHeight: document.documentElement.clientHeight,
-  devicePixelRatio: window.devicePixelRatio,
-  scrollY: window.scrollY
-});
-```
-
 ### Global Extraction
 Extract these from the page before doing anything else:
 
@@ -209,7 +190,7 @@ Extract these from the page before doing anything else:
 
 This is a dedicated pass AFTER screenshots and BEFORE anything else. Its purpose is to discover every behavior on the page — many of which are invisible in a static screenshot.
 
-**Scroll sweep:** Scroll the page slowly from top to bottom via browser MCP. At each section, pause and observe:
+**Scroll sweep:** Scroll the page slowly from top to bottom via **Chrome MCP** (real wheel / scroll in the live tab). At each section, pause and observe:
 - Does the header change appearance? Record the scroll position where it triggers.
 - Do elements animate into view? Record which ones and the animation type.
 - Does a sidebar or tab indicator auto-switch as you scroll? Record the mechanism.
@@ -225,7 +206,7 @@ This is a dedicated pass AFTER screenshots and BEFORE anything else. Its purpose
 - Buttons, cards, links, images, nav items
 - Record what changes: color, scale, shadow, underline, opacity
 
-**Responsive sweep:** Test at 3 viewport widths via browser MCP:
+**Responsive sweep:** Test at 3 viewport widths via **Chrome MCP**:
 - Desktop: 1440px
 - Tablet: 768px
 - Mobile: 390px
@@ -233,106 +214,78 @@ This is a dedicated pass AFTER screenshots and BEFORE anything else. Its purpose
 
 Save all findings to `docs/research/BEHAVIORS.md`. This is your behavior bible — reference it when writing every component spec.
 
-### Chrome MCP: precise motion & animation extraction
-
-Use **evaluate script** (or equivalent) in Chrome MCP **during** the scroll/click/hover sweeps so you capture **live computed values**, not guesses from DevTools screenshots alone.
-
-**Rules:**
+### Motion & animation — Chrome MCP numeric audit (mandatory)
 
-- **No hand-waving** — if the reference uses `0.45s cubic-bezier(0.4, 0, 0.2, 1)`, the spec and implementation use that exact string (or equivalent in Tailwind only when it truly matches).
-- **`@keyframes` source of truth** — for each animated element, record `getComputedStyle(el).animationName` and resolve the **full `@keyframes` rule** from stylesheets when allowed. Many sites inline CSS or use same-origin sheets: iterate `document.styleSheets` / `cssRules` inside `try/catch`; for **cross-origin** sheets that throw on `cssRules`, copy the rule from the **Network** response or **Sources** panel in Chrome and paste into `docs/research/MOTION.md` / the component spec. Never substitute a different easing or keyframe shape “because it looks close.”
-- **Scroll-driven animations** — for `animation-timeline: view()` / named timelines, capture **`view-timeline` / `scroll-timeline` on ancestors**, `animation-range`, `scroll-padding` / snap containers, and **which scroll container** is the timeline root (often `html`, sometimes a nested `overflow-y: auto` div).
-- **Before/after pairs** — for scroll- or hover-driven motion, capture computed `transform`, `opacity`, and longhand `animation-*` / `transition-*` **in both states** (see §7) and the **exact trigger** (px, ratio, or event).
-- **Libraries** — if Lenis/GSAP/Framer is present, document **version/hooks** from `package` on the page or script URLs, class hooks (e.g. `.lenis`), and any **inline style** the library sets at rest vs. mid-animation (sample via computed style after the interaction).
-- **Deliverable** — maintain `docs/research/MOTION.md`: page-level keyframes inventory, global scroll/smooth-scroll setup, and per-section pointers into component specs. Large pages may scope the audit script to a **section root selector** to avoid noise.
-
-**Motion audit script** (run via Chrome MCP; optional `rootSelector` limits to a subtree):
+After the interaction sweeps, run this **once per URL** inside **Chrome DevTools MCP** (page evaluation / `evaluate_script`) and append the JSON under `## Motion audit (Chrome MCP)` in `docs/research/BEHAVIORS.md`. Re-run targeted evaluations on a section container selector if the capped sample misses hero, nav, or carousel motion.
 
 ```javascript
-(function motionAudit(rootSelector) {
-  const root = rootSelector ? document.querySelector(rootSelector) : document.body;
-  if (!root) return JSON.stringify({ error: 'root not found: ' + rootSelector });
-
-  function safeRules(sheet) {
-    try {
-      return [...sheet.cssRules];
-    } catch {
-      return [];
-    }
-  }
-
-  const walkKeyframes = (rules, out) => {
-    for (const rule of rules) {
-      if (rule.type === CSSRule.KEYFRAMES_RULE) {
-        out.push({ name: rule.name, cssText: rule.cssText });
-      } else if (rule.type === CSSRule.MEDIA_RULE && rule.cssRules) {
-        walkKeyframes(rule.cssRules, out);
-      }
-    }
+// Motion audit — run via Chrome MCP evaluate_script on the target URL
+(function motionAudit() {
+  const props = [
+    'animation', 'animationName', 'animationDuration', 'animationDelay',
+    'animationTimingFunction', 'animationIterationCount', 'animationDirection',
+    'animationFillMode', 'animationPlayState', 'animationTimeline',
+    'transition', 'transitionProperty', 'transitionDuration',
+    'transitionTimingFunction', 'transitionDelay',
+    'transform', 'willChange'
+  ];
+  const animated = [...document.querySelectorAll('*')].filter((el) => {
+    const cs = getComputedStyle(el);
+    return (
+      (cs.animationName && cs.animationName !== 'none') ||
+      (cs.transitionProperty && cs.transitionProperty !== 'none' && cs.transitionProperty !== 'all')
+    );
+  });
+  const label = (el) => {
+    const tag = el.tagName.toLowerCase();
+    const id = el.id ? '#' + el.id : '';
+    const cls = el.className && typeof el.className === 'string'
+      ? '.' + el.className.trim().split(/\s+/).filter(Boolean).slice(0, 4).join('.')
+      : '';
+    return tag + id + cls;
   };
-
-  const keyframes = [];
-  for (const sheet of document.styleSheets) {
-    walkKeyframes(safeRules(sheet), keyframes);
-  }
-
-  const animated = [];
-  const scope = root.querySelectorAll('*');
-  for (const el of scope) {
+  const samples = animated.slice(0, 100).map((el) => {
     const cs = getComputedStyle(el);
-    const animName = cs.animationName;
-    const hasAnim = animName && animName !== 'none';
-    const transDurs = (cs.transitionDuration || '')
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean);
-    const hasTrans =
-      cs.transitionProperty &&
-      cs.transitionProperty !== 'none' &&
-      transDurs.some((d) => d !== '0s');
-    if (!hasAnim && !hasTrans) continue;
-
-    animated.push({
-      hint: el.tagName.toLowerCase() + (el.className
-        ? '.' + String(el.className).trim().split(/\s+/).slice(0, 4).join('.')
-        : ''),
-      animation: cs.animation,
-      animationName: cs.animationName,
-      animationDuration: cs.animationDuration,
-      animationTimingFunction: cs.animationTimingFunction,
-      animationDelay: cs.animationDelay,
-      animationIterationCount: cs.animationIterationCount,
-      animationDirection: cs.animationDirection,
-      animationFillMode: cs.animationFillMode,
-      animationPlayState: cs.animationPlayState,
-      animationTimeline: cs.animationTimeline,
-      animationRange: cs.animationRange,
-      transition: cs.transition,
-      transitionProperty: cs.transitionProperty,
-      transitionDuration: cs.transitionDuration,
-      transitionTimingFunction: cs.transitionTimingFunction,
-      transitionDelay: cs.transitionDelay,
-      transform: cs.transform,
-      transformOrigin: cs.transformOrigin,
-      opacity: cs.opacity,
-      willChange: cs.willChange,
-      viewTimelineName: cs.viewTimelineName,
-      scrollTimelineName: cs.scrollTimelineName
+    const row = { path: label(el) };
+    props.forEach((p) => { row[p] = cs[p]; });
+    try {
+      row.webAnimations = el.getAnimations({ subtree: false }).map((a) => {
+        const t = a.effect && typeof a.effect.getTiming === 'function' ? a.effect.getTiming() : null;
+        return { playState: a.playState, currentTime: a.currentTime, timing: t };
+      });
+    } catch (e) {
+      row.webAnimationsError = String(e);
+    }
+    return row;
+  });
+  let keyframes = [];
+  try {
+    [...document.styleSheets].forEach((sheet, i) => {
+      let rules;
+      try { rules = sheet.cssRules; } catch { return; }
+      if (!rules) return;
+      [...rules].forEach((rule) => {
+        if (rule.type === CSSRule.KEYFRAMES_RULE) {
+          keyframes.push({ sheetIndex: i, name: rule.name, cssText: rule.cssText });
+        }
+      });
     });
+  } catch (e) {
+    keyframes = [{ error: String(e), hint: 'Cross-origin stylesheets block cssRules — copy @keyframes from DevTools or fetched CSS.' }];
   }
-
-  return JSON.stringify(
-    {
-      prefersReducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
-      keyframes,
-      animatedElements: animated
-    },
-    null,
-    2
-  );
-})(''); // Pass section selector string, e.g. 'section.hero', instead of ''
+  return JSON.stringify({
+    url: location.href,
+    prefersReducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
+    animatedElementCount: animated.length,
+    sampledElements: samples.length,
+    samples,
+    keyframesRules: keyframes
+  }, null, 2);
+})();
 ```
 
+**Implementation rule:** Component specs and React/CSS must match these **measured** values. If the audit omits an element (cap 100), run a second pass scoped to that section’s root selector.
+
 ### Page Topology
 Map out every distinct section of the page from top to bottom. Give each a working name. Document:
 - Their visual order
@@ -423,8 +376,7 @@ For each section, use browser MCP to extract everything:
     'borderRadius','border','borderTop','borderBottom','borderLeft','borderRight',
     'boxShadow','overflow','overflowX','overflowY',
     'position','top','right','bottom','left','zIndex',
-    'opacity','transform','transformOrigin','transition','transitionProperty','transitionDuration','transitionTimingFunction','transitionDelay',
-    'animation','animationName','animationDuration','animationTimingFunction','animationDelay','animationIterationCount','animationDirection','animationFillMode','animationPlayState','animationTimeline','animationRange','viewTimelineName','scrollTimelineName','cursor',
+    'opacity','transform','transition','cursor',
     'objectFit','objectPosition','mixBlendMode','filter','backdropFilter',
     'whiteSpace','textOverflow','WebkitLineClamp'
   ];
@@ -503,15 +455,6 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 ### <Child element N>
 ...
 
-## Motion & animation (exact — from Chrome MCP `getComputedStyle` + stylesheet rules)
-
-- **Keyframe names in use:** ...
-- **Full `@keyframes` blocks** (paste `cssText` or equivalent); note **cross-origin** gaps and how you filled them
-- **Per-element:** shorthand/longhand `animation` and `transition` values **verbatim** for resting state
-- **Scroll/view timelines:** timeline name, range, scroll container, snap/observer thresholds
-- **Libraries:** Lenis / GSAP / Framer / Lottie — hooks, init pattern, timing copied from reference
-- **`prefers-reduced-motion`:** matched behavior on the reference
-
 ## States & Behaviors
 
 ### <Behavior name, e.g., "Scroll-triggered floating mode">
@@ -594,34 +537,48 @@ After all sections are built and merged, wire everything together in `src/app/pa
 
 After assembly, do NOT declare the clone complete. Take side-by-side comparison screenshots:
 
-1. **Pixel-perfect comparison setup:** Match **Browser MCP: pixel-perfect capture** — same **CSS widths** (**1440**, **768**, **390**), **100% zoom**, and record `innerWidth`/`clientWidth`/`devicePixelRatio` on both reference and clone. Then open original and clone side-by-side or take paired screenshots at those widths.
+1. Open the original site and your clone side-by-side (or take screenshots at the same viewport widths) using **Chrome MCP** on both if possible
 2. Compare section by section, top to bottom, at desktop (1440px)
-3. Compare at tablet (768px) and again at mobile (390px)
+3. Compare again at mobile (390px)
 4. For each discrepancy found:
    - Check the component spec file — was the value extracted correctly?
    - If the spec was wrong: re-extract from browser MCP, update the spec, fix the component
    - If the spec was right but the builder got it wrong: fix the component to match the spec
 5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
-6. **Motion QA (Chrome MCP again if needed):** For every animated or transitioned element, re-run `getComputedStyle` on the reference vs. the clone at the **same scroll position / interaction state** and compare **`animation-*`, `transition-*`, `transform`, `opacity`** longhands — durations and easings must match character-for-character where the cascade specifies them. Re-record any `@keyframes` the reference still exposes so the clone can be patched until timings align.
-7. Verify smooth scroll feels right, header transitions work, tab switching works, stagger and scroll-driven reveals match the reference
+6. **Motion QA:** Re-run the **motion audit script** (or per-element `getAnimations`) on the reference and spot-check the clone in devtools — **durations, delays, and easing curves must match** (e.g. 320ms vs 300ms is a failure). Re-scroll hero and sticky headers; carousels and scroll-driven sections must trigger at the same thresholds documented in `BEHAVIORS.md`
+
+Only after this visual QA pass is the clone ready for **subagent verification**.
+
+## Phase 6: Subagent verification pass (mandatory)
+
+Foreman self-review is insufficient — **dispatch independent checker agents** (subagents) after Phase 5 to audit the whole surface. Prefer **parallel** runs with **narrow rubrics**. When using multi-agent setups, follow **`AGENTS.md`**: give each subagent its **own git worktree/branch**, then merge after all reports are triaged.
+
+**Minimum four verification passes** (one subagent each, or one agent run sequentially if the host limits parallelism):
+
+1. **Images & media** — List every image/video poster referenced from `src/` (components, `app/`). Confirm **files exist** under `public/` with **correct paths**; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+2. **HTML / DOM structure** — Diff **PAGE_TOPOLOGY.md** + component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll must be **FAIL** until fixed.
+3. **CSS parity** — Spot-check **hero, nav, first fold, footer** (and any section flagged risky) against spec CSS: tokens in **`globals.css`**, arbitrary Tailwind vs measured px, **keyframes** presence. Run **`npm run lint`** and **`npm run typecheck`** inside the verification worktree; failures = **FAIL** until green.
+4. **Motion & interaction** — Re-walk **`docs/research/BEHAVIORS.md`** and motion audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Phase 5 motion QA must be **confirmed**, not assumed.
 
-Only after this visual + motion QA pass is the clone complete.
+Each subagent returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`file:line`** pointers, and **suggested fixes**. The foreman **resolves or explicitly documents** every `FAIL` (deferred items listed in the completion report under **Known gaps**). **Do not** declare Launchframe complete until all subagents **`PASS`** or gaps are accepted by the user context.
 
 ## Pre-Dispatch Checklist
 
 Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
 
-- [ ] **Multi-pass DOM reconnaissance:** structure (`DOM_SKETCH.md`) + asset sweep + motion/flow sweeps + reconciliation; repeated at **768 / 390** when layout or DOM order differs from 1440
+- [ ] **Image markup + styling** captured in spec: `picture`/`source`/`sizes`/`srcset` (or documented `next/image` mapping), `object-fit`/`object-position`, clipping parents, pseudo-element backgrounds if any
+- [ ] **DOM outline** included for non-trivial sections (wrappers, order)
 - [ ] Spec file written to `docs/research/components/<name>.spec.md` with ALL sections filled
-- [ ] Every CSS value in the spec is from `getComputedStyle()`, not estimated — **verbatim**, including fractional px and color functions
-- [ ] **MCP pixel-perfect pass:** viewports **1440 / 768 / 390**, **100% zoom**, viewport diagnostic recorded; **`getBoundingClientRect()`** and **`::before`/`::after`** captured where they affect layout or visuals
+- [ ] Every CSS value in the spec is from `getComputedStyle()`, not estimated
 - [ ] Interaction model is identified and documented (static / click / scroll / time)
 - [ ] For stateful components: every state's content and styles are captured
 - [ ] For scroll-driven components: trigger threshold, before/after styles, and transition are recorded
 - [ ] For hover states: before/after values and transition timing are recorded
-- [ ] Motion: relevant `@keyframes` captured (or cross-origin gap documented with manual paste), `docs/research/MOTION.md` updated, component specs include **exact** `animation*` / `transition*` / timeline fields from Chrome MCP
+- [ ] **Motion audit JSON** from Chrome MCP is in `docs/research/BEHAVIORS.md` (`## Motion audit (Chrome MCP)`); follow-up passes exist for any capped/missed selectors
+- [ ] Relevant **`@keyframes`** from the reference appear in `globals.css` or module CSS **verbatim** (or equivalent WAAPI) — not hand-waved
+- [ ] Elements that move via **Web Animations API** have timing cross-checked with `getAnimations` output from Chrome MCP
 - [ ] All images in the section are identified (including overlays and layered compositions)
-- [ ] Responsive behavior is documented for **1440 / 768 / 390**
+- [ ] Responsive behavior is documented for at least desktop and mobile
 - [ ] Text content is verbatim from the site, not paraphrased
 - [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split
 
@@ -639,20 +596,20 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't skip asset extraction.** Without real images, videos, and fonts, the clone will always look fake regardless of how perfect the CSS is.
 - **Don't give a builder agent too much scope.** If you're writing a builder prompt and it's getting long because the section is complex, that's a signal to break it into smaller tasks.
 - **Don't bundle unrelated sections into one agent.** A CTA section and a footer are different components with different designs — don't hand them both to one agent and hope for the best.
-- **Don't round or “clean up” extracted values** for Tailwind guesses: `12.8px` stays `12.8px` in the spec unless the clone uses an exactly equivalent value.
-- **Don't mix zoom levels or viewport widths** between reference extraction and QA — you will false-fail or false-pass pixel diffs.
 - **Don't skip responsive extraction.** If you only inspect at desktop width, the clone will break at tablet and mobile. Test at 1440, 768, and 390 during extraction.
 - **Don't forget smooth scroll libraries.** Check for Lenis (`.lenis` class), Locomotive Scroll, or similar. Default browser scrolling feels noticeably different and the user will spot it immediately.
+- **Don't collapse responsive image markup.** Dropping `<picture>` / `<source media="…">` or `sizes` so “one JPEG is enough” changes which URL loads and breaks fidelity — mirror the reference’s responsive strategy.
+- **Don't guess motion.** If `transition-duration` is 280ms with `cubic-bezier(0.4, 0, 0.2, 1)`, the clone must use those exact values from Chrome MCP — not "about 0.3s ease."
 - **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
 
 ## Completion
 
 When done, report:
-- Multi-pass reconnaissance status (`docs/research/DOM_SKETCH.md` present; passes at **1440 / 768 / 390** as needed)
 - Total sections built
 - Total components created
 - Total spec files written (should match components)
 - Total assets downloaded (images, videos, SVGs, fonts)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
+- **Subagent verification:** which audit passes ran (images / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
 - Any known gaps or limitations