launchframe 0.4.4 → 0.4.6

package/.claude/skills/launchframe/SKILL.md

@@ -12,7 +12,7 @@ user-invocable: true
 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
 
@@ -26,26 +26,24 @@ Before reconnaissance, write or update:
 
 After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or motion from extracted specs. **Brand identity** (below) must be **original** for anything you ship as the user’s product — never pass off the reference company’s trademarks or distinctive marks.
 
-**Precedence:** For those surfaces (hero, main headings, primary CTAs), **final ship copy comes from the SaaS idea**, not the reference — still capture reference strings in research/specs if useful for QA diffs. Everywhere else, keep **verbatim** reference text unless the user overrides.
-
 ---
 
 ## Scope Defaults
 
 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 **layout, spacing, typography scale, and motion** (durations, easings, keyframes, triggers) matched to the reference. **Colors** match where you are emulating neutral/UI chrome from the reference; where **Brand identity** applies, use the **new palette** and assets while keeping the same CSS structure (fills land on different tokens). **Animations** stay reference-faithful unless the user opts out.
+- **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.
-- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. Hero or lifestyle images that center the reference brand should be replaced with **original** imagery or neutral compositions that keep the **same layout rhythm**. **Keep** reference-faithful neutrals where they are clearly **non-brand** UI (borders, subtle grays, default body text color roles) unless they are unmistakably part of their distinctive palette. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
+- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. Hero or lifestyle images that center the reference brand should be replaced with **original** imagery or neutral compositions that keep the **same layout rhythm**. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
 
 If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
 
 ## 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. **Motion parity:** every pass (reconnaissance, per-section extract, QA) 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.
@@ -58,12 +56,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.
@@ -80,8 +96,6 @@ Look at each section and judge its complexity. A simple banner with a heading an
 
 Extract the actual text, images, videos, and SVGs from the live site. This is a clone, not a mockup. Use `element.textContent`, download every `<img>` and `<video>`, extract inline `<svg>` elements as React components. The only time you generate content is when something is clearly server-generated and unique per session.
 
-**Marketing surfaces** (hero, primary headings, main CTAs) follow the **SaaS copy overlay** and **Brand identity** rules — capture reference copy for audit, but **ship** the user’s idea there.
-
 **Prioritize** (see §0): downloadable imagery and backgrounds first, then SVG/icon layers, then motion. If you must **fabricate** an asset, prefer screenshot-based exports or traced vectors tied to measured box sizes — avoid unrelated stock art.
 
 **Layered assets matter.** A section that looks like one image is often multiple layers — a background watercolor/gradient, a foreground UI mockup PNG, an overlay icon. Inspect each container's full DOM tree and enumerate ALL `<img>` elements and background images within it, including absolutely-positioned overlays. Missing an overlay image makes the clone look empty even if the background is correct.
@@ -175,7 +189,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.
@@ -191,119 +205,86 @@ 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
 - At each width, note which sections change layout (column → stack, sidebar disappears, etc.) and at approximately which breakpoint the change occurs.
 
-Re-check **all three widths** again in **Phase 5: Visual QA Diff** so tablet regressions are not skipped.
-
 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 Tailwind utilities **only** when the **resolved computed** animation/transition longhands match — class names alone are not proof).
-- **`@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). **`getComputedStyle` support varies** for scroll-animation longhands; also read **`cs.getPropertyValue('view-timeline-name')`**, **`scroll-timeline-name`**, **`animation-timeline`**, etc., when camelCase mirrors are missing in the engine you’re using.
-- **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 **script `src` URLs** (path often includes version), `//# sourceMappingURL` / comment banners in the bundle if visible, global identifiers on `window` when safe to read, **npm lockfile** only if this repo vendors that script, and **class/DOM hooks** (e.g. `.lenis`). Sample **computed style** at rest vs. mid-animation after interactions.
-- **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 = [];
-  // Include `root` — querySelectorAll('*') misses animations on the section container itself
-  const scope = [root, ...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' && d !== '0ms');
-    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,
-      viewTimelineNameRaw: cs.getPropertyValue('view-timeline-name'),
-      scrollTimelineNameRaw: cs.getPropertyValue('scroll-timeline-name')
+    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
@@ -375,7 +356,7 @@ For each section, use browser MCP to extract everything:
 
 1. **Screenshot** the section in isolation (scroll to it, screenshot the viewport). Save to `docs/design-references/`.
 
-2. **Extract CSS** for every element in the section. Use the extraction script below — don't hand-measure individual properties. Run it **once per spec scope**: usually the **section wrapper** selector (one subtree). For very large sections, run again on **inner selectors** (e.g. each card type) — the `depth` / `children.slice(0, 20)` limits are **deliberately capped** for MCP payload size; raise them or narrow `SELECTOR` when the spec is incomplete.
+2. **Extract CSS** for every element in the section. Use the extraction script below — don't hand-measure individual properties. Run it once per component container and capture the full output:
 
 ```javascript
 // Per-component extraction — run via browser MCP
@@ -394,15 +375,13 @@ 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'
   ];
   function extractStyles(element) {
     const cs = getComputedStyle(element);
     const styles = {};
-    // Heuristic filter — for layout-audits, re-add any dropped `auto` / `normal` / transparent values the spec calls out as significant
     props.forEach(p => { const v = cs[p]; if (v && v !== 'none' && v !== 'normal' && v !== 'auto' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)') styles[p] = v; });
     return styles;
   }
@@ -475,15 +454,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">
@@ -566,34 +536,49 @@ 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. Open the original site and your clone side-by-side (or take screenshots at the same viewport 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 again at tablet (768px) — same widths as **Responsive sweep**
-4. Compare again at mobile (390px)
-5. For each discrepancy found:
+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
-6. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
-7. **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 — **resolved** durations/easings must match where the cascade specifies them (Tailwind classes are fine when they compile to the same longhands; verify in **Computed**, not by class name alone). Re-record any `@keyframes` the reference still exposes so the clone can be patched until timings align.
-8. Verify smooth scroll feels right, header transitions work, tab switching works, stagger and scroll-driven reveals match the reference
+5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
+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.
 
+- [ ] **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
 - [ ] 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 desktop, tablet, and mobile (1440 / 768 / 390)
-- [ ] Text: **verbatim** from the reference **except** hero, main headings, and primary CTAs — those match the **SaaS idea** (reference copy still captured for audit if useful)
+- [ ] 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
 
 ## What NOT to Do
@@ -612,6 +597,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **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 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
@@ -623,4 +610,5 @@ When done, report:
 - 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