launchframe 0.4.13 → 0.4.14

package/.amazonq/cli-agents/launchframe.json

@@ -1,7 +1,7 @@
 {
   "name": "launchframe",
-  "description": "Pixel-perfect reverse-engineer of a reference URL into this repo, plus SaaS landing copy — the only clone slash command for this template. Invoked as /launchframe.",
-  "prompt": "\n# Launchframe\n\n**`/launchframe`** is the **only** slash command for reverse-engineering a live site into this codebase. Parse **the reference URL(s) and SaaS idea the user passed with /launchframe**:\n\n1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).\n2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.\n\nYou are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible. After Phase 5, **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** defines the **verbatim prompts** you must use to run verification (either four parallel **`Task`/subagents** fed one prompt each — **paste from that file only**, not from memory — or execute those four prompts **yourself sequentially**). Aggregate results only in **`docs/research/LAUNCHFRAME_VERIFICATION.md`**. **Never skip Phase 6** because subagents didn't auto-start — you initiate them explicitly from the Markdown prompt blocks. Narrative/marketing raster slots use **imagery your session generates itself** with the host’s **image-generation** tool (saved into `public/images/`), not missing assets — see **Brand identity**. Verification still covers raster slots, extracted **SVG/icons**, DOM, CSS, and **motion choreography**.\n\n## Step 0 — Persist Launchframe inputs\n\nBefore reconnaissance, write or update:\n\n- `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`\n- `launchframe.context.json`\n- `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea\n- **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** — **before Phase 6**, ensure this runbook holds all four verifier prompts (**copy-ready**). When the bundled template differs from the latest SKILL rubrics (after skill edits), re-sync Section **Phase 6** rubrics **into this file**. Subagents receive prompts **only** from here.\n\n### Step 0a — Automated page inspection dump (mandatory)\n\nRight after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).\n\n1. **One-time per machine:** `npx playwright install chromium`\n2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):\n\n```bash\nnpm run inspect:page -- \"https://www.example.com/\" --scroll-full --wait-until networkidle --timeout 120000 --out-parent \"docs/research/www.example.com/page-inspection\"\n```\n\nThat creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with all artifacts. Omit `--out-parent` to use the default `docs/research/page-captures/<host>-<stamp>/`.\n3. Append an **`Automated captures`** subsection to `docs/research/LAUNCHFRAME.md` listing every URL and its output directory path. Use those files in Phase 1 when structuring specs (DOM outline, stylesheet text, `@keyframes` from `motion-summary.json`) while still measuring behavior in the live tab.\n\nIf the dump fails (missing browsers, navigation timeout, TLS, bot wall), increase `--timeout`, retry with `domcontentloaded` only when necessary, or document the failure in `LAUNCHFRAME.md` and unblock before treating Phase 1 as complete.\n\n## SaaS copy overlay (Phase 4 assembly and final polish)\n\nAfter 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 numbers** from extracted specs. **Icon shapes** and **animations** (`@keyframes`, transitions, staggers, scroll triggers) remain **parity goals** sourced from extraction — swapping narrative photos does **not** relax them. **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.\n\n---\n\n## Scope Defaults\n\nThe 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:\n\n- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, **SVG icon presentation** (dimensions, strokes, fills, `viewBox`), **animations** (`@keyframes`, `animation*` / `transition*`, WA API timings, scroll timelines), raster **presentation** (responsive markup + CSS painting), **DOM structure**, and **authored CSS intent** (computed values must match after extraction)\n- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes\n- **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit\n- **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.\n- **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. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. **Mandatory delivery:** those slots **must** have real raster files checked into `public/images/` (or another committed static path your build serves) — **no** omitted `<img>`/`<Image>`, **no** indefinite placeholder divs/colors standing in for a photo where the reference showed one, **no** broken `href/src`. **You generate these files yourself:** use your host's **built-in image generation** capability (explicit image prompts aligned to the SaaS idea + composition brief from each reference slot), write outputs into `public/images/`, wire them into JSX, and note each file in `docs/research/LAUNCHFRAME.md`. You may **supplement** with composites or screenshots of **your** product UI mocks you build in code, but you **do not** wait for the user to supply artwork. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction, and **list paths** for every authored narrative image.\n- **Functional icons & motion choreography:** Anything the reference treats as **UI iconography that is not a forbidden trademark** (chevrons, menu marks, inline pictograms, sprite symbols, repeating UI glyphs) — **lift path data / sprite refs / mask SVGs from the DOM** and reproduce **`viewBox`, stroke widths, joins, fills, `currentColor` behavior.** Do **not** swap in unrelated Lucide (or arbitrary stock SVG) guesses \"that look close.\" **`@keyframes`**, **`transition` / `animation` longhands**, scroll-driven timelines, carousel timings, stagger delays, easing curves — **lift from live measurement + stylesheet text** per §0.3 — **omit or substitute timing only** when respecting `prefers-reduced-motion` or when the measured reference does the same. Product-themed raster replacements do **not** waive SVG or animation parity.\n\nIf the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.\n\n## Pre-Flight\n\n1. **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.”\n2. **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.\n3. 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.\n4. 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>/`.\n5. 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.\n\n## Guiding Principles\n\nThese are the truths that separate a successful clone from a \"close enough\" mess. Internalize them — they should inform every decision you make.\n\n### 0. Visual crawl priority (images, SVGs, motion — first)\n\nWhen 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:\n\n1. **Images (raster + video stills) — HTML, files, and CSS together** — Enumeration is not enough: the clone must match **how** each asset is mounted and styled.\n   - **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.\n   - **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).\n   - **Files:** For **structural/decorative or permission-neutral** imagery (textures, gradients, generic UI chrome where no competitor brand reads), download real bytes to `public/images/` (or videos/posters). **Provenance** in spec: URL hash or byte size so verifiers can confirm the correct asset. For **brand- or product-story** photos and illustrations per Scope Defaults, **do not** pass off the reference files as yours — replace with originals saved under `public/images/` with spec lines **substitute — product-themed** (describe intent vs reference role). No unrelated stock swaps unless similarly marked.\n2. **SVGs & iconography — copy glyphs, don't improvise.** Inline `<svg>`, sprite `symbol` defs, **SVG used as masks/filters**, icon fonts (**prefer extracting vector paths**, not swapping fonts blindly). Convert to `@/components/icons.tsx` (or section-local components) with meaningful names. **Ship the reference geometry**: matching `viewBox`, path coordinates, strokes/caps/joins — verify at 1× and 2× DPR beside a screenshot overlay. Replacing forbidden trademark marks is done under Brand identity with **equivalent silhouette area + optical weight**, not a random different icon shape.\n3. **Motion & animation (Chrome MCP) — copy choreography, omit nothing casually.** Treat this like color and spacing: **numeric fidelity**. If the reference animates **on load, hover, scroll, intersection, drag, carousel tick, or tab change**, capture and port it unless `prefers-reduced-motion` or an explicit exemption says otherwise — a static clone while the reference moves is wrong. In Chrome MCP, evaluate scripts against the live page to capture:\n   - Full **`animation`** shorthand plus **`animation-*` longhands** (`animation-name`, `-duration`, `-delay`, `-timing-function`, `-iteration-count`, `-direction`, `-fill-mode`, `-play-state`, **`animation-timeline`** / scroll timelines)\n   - Full **`transition`** shorthand plus **`transition-*` longhands**, and **`transform`** / **`will-change`** as applied during and after motion\n   - **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\n   - **Web Animations API** — for each moving node, `element.getAnimations({ subtree: false })` and record each effect’s timing (`duration`, `delay`, `easing`, `iterations`, `direction`, `fill`)\n   - **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\n   - **`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)\n   Run the **Phase 1 motion audit script** and merge findings into `docs/research/BEHAVIORS.md`. Capture **numbers** (`ms`, `cubic-bezier(...)`, stagger offsets), not adjectives.\n\nOnly 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.\n\n### 0b. HTML / DOM structure (layout tree, not “vibes”)\n\n**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.\n\n### 0c. CSS fidelity (authored + computed)\n\nTailwind 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.\n\n### 1. Completeness Beats Speed\n\nEvery 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.\n\n### 2. Small Tasks, Perfect Results\n\nWhen an agent gets \"build the entire features section,\" it glosses over details — it approximates spacing, guesses font sizes, and produces something \"close enough\" but clearly wrong. When it gets a single focused component with exact CSS values, it nails it every time.\n\nLook at each section and judge its complexity. A simple banner with a heading and a button? One agent. A complex section with 3 different card variants, each with unique hover states and internal layouts? One agent per card variant plus one for the section wrapper. When in doubt, make it smaller.\n\n**Complexity budget rule:** If a builder prompt exceeds ~150 lines of spec content, the section is too complex for one agent. Break it into smaller pieces. This is a mechanical check — don't override it with \"but it's all related.\"\n\n### 3. Real Content, Real Assets\n\nExtract the **verbatim marketing copy only where it is layout boilerplate**; otherwise apply the SaaS idea. For **pixels**: extract **dimensions, layering, masks, responsive markup, and filenames/paths needed for parity**, but treat **marketing photos and illustrative brand art** per Scope Defaults — **authored originals** tied to the product (including cohesive **sub-images** where the reference uses a small secondary crop or inset), not a gallery of their stock photography. Structural assets (patterns, screenshots of generic UI motifs you rebuild) follow §0 extraction. **Functional icons (`<svg>`/sprites) and all motion choreography are copied from extraction** alongside that — originals-for-product applies to narrative **raster** slots, **not** to carte-blanche SVG or timing drift. Download every reference `<video>` poster and neutral asset you keep; extract inline `<svg>` elements as React components unless they encode trademark marks forbidden under Brand identity (replace with equivalent optical weight there). Fabricate raster/vector only when extraction is blocked — label **substitute** in specs and research notes — and **avoid unrelated stock**; stay on-theme for the SaaS idea.\n\n**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.\n\n### 4. Foundation First\n\nNothing can be built until the foundation exists: global CSS with the target site's design tokens (colors, fonts, spacing), TypeScript types for the content structures, and global assets (fonts, favicons). This is sequential and non-negotiable. Everything after this can be parallel.\n\n### 5. Extract How It Looks AND How It Behaves\n\nA website is not a screenshot — it's a living thing. Elements move, change, appear, and disappear in response to scrolling, hovering, clicking, resizing, and time. If you only extract the static CSS of each element, your clone will look right in a screenshot but feel dead when someone actually uses it.\n\nFor every element, extract its **appearance** (exact computed CSS via `getComputedStyle()`) AND its **behavior** (what changes, what triggers the change, and how the transition happens). Not \"it looks like 16px\" — extract the actual computed value. Not \"the nav changes on scroll\" — document the exact trigger (scroll position, IntersectionObserver threshold, viewport intersection), the before and after states (both sets of CSS values), and the transition (duration, easing, CSS transition vs. JS-driven vs. CSS `animation-timeline`).\n\nExamples of behaviors to watch for — these are illustrative, not exhaustive. The page may do things not on this list, and you must catch those too:\n- A navbar that shrinks, changes background, or gains a shadow after scrolling past a threshold\n- Elements that animate into view when they enter the viewport (fade-up, slide-in, stagger delays)\n- Sections that snap into place on scroll (`scroll-snap-type`)\n- Parallax layers that move at different rates than the scroll\n- Hover states that animate (not just change — the transition duration and easing matter)\n- Dropdowns, modals, accordions with enter/exit animations\n- Scroll-driven progress indicators or opacity transitions\n- Auto-playing carousels or cycling content\n- Dark-to-light (or any theme) transitions between page sections\n- **Tabbed/pill content that cycles** — buttons that switch visible card sets with transitions\n- **Scroll-driven tab/accordion switching** — sidebars where the active item auto-changes as content scrolls past (IntersectionObserver, NOT click handlers)\n- **Smooth scroll libraries** (Lenis, Locomotive Scroll) — check for `.lenis` class or scroll container wrappers\n\n### 6. Identify the Interaction Model Before Building\n\nThis is the single most expensive mistake in cloning: building a click-based UI when the original is scroll-driven, or vice versa. Before writing any builder prompt for an interactive section, you must definitively answer: **Is this section driven by clicks, scrolls, hovers, time, or some combination?**\n\nHow to determine this:\n1. **Don't click first.** Scroll through the section slowly and observe if things change on their own as you scroll.\n2. If they do, it's scroll-driven. Extract the mechanism: `IntersectionObserver`, `scroll-snap`, `position: sticky`, `animation-timeline`, or JS scroll listeners.\n3. If nothing changes on scroll, THEN click/hover to test for click/hover-driven interactivity.\n4. Document the interaction model explicitly in the component spec: \"INTERACTION MODEL: scroll-driven with IntersectionObserver\" or \"INTERACTION MODEL: click-to-switch with opacity transition.\"\n\nA section with a sticky sidebar and scrolling content panels is fundamentally different from a tabbed interface where clicking switches content. Getting this wrong means a complete rewrite, not a CSS tweak.\n\n### 7. Extract Every State, Not Just the Default\n\nMany components have multiple visual states — a tab bar shows different cards per tab, a header looks different at scroll position 0 vs 100, a card has hover effects. You must extract ALL states, not just whatever is visible on page load.\n\nFor tabbed/stateful content:\n- Click each tab/button via browser MCP\n- Extract the content, images, and card data for EACH state\n- Record which content belongs to which state\n- Note the transition animation between states (opacity, slide, fade, etc.)\n\nFor scroll-dependent elements:\n- Capture computed styles at scroll position 0 (initial state)\n- Scroll past the trigger threshold and capture computed styles again (scrolled state)\n- Diff the two to identify exactly which CSS properties change\n- Record the transition CSS (duration, easing, properties)\n- Record the exact trigger threshold (scroll position in px, or viewport intersection ratio)\n\n### 8. Spec Files Are the Source of Truth\n\nEvery component gets a specification file in `docs/research/components/` BEFORE any builder is dispatched. This file is the contract between your extraction work and the builder agent. The builder receives the spec file contents inline in its prompt — the file also persists as an auditable artifact that the user (or you) can review if something looks wrong.\n\nThe spec file is not optional. It is not a nice-to-have. If you dispatch a builder without first writing a spec file, you are shipping incomplete instructions based on whatever you can remember from a browser MCP session, and the builder will guess to fill gaps.\n\n### 9. Build Must Always Compile\n\nEvery builder agent must verify `npx tsc --noEmit` passes before finishing. After merging worktrees, you verify `npm run build` passes. A broken build is never acceptable, even temporarily.\n\n## Phase 1: Reconnaissance\n\nNavigate to the target URL with browser MCP.\n\nFollow **§0 (Visual crawl priority)** during the entire reconnaissance pass: images and backgrounds → SVGs/icons → motion/animations — before spending time on secondary copy tweaks.\n\n### Screenshots\n- Take **full-page screenshots** at desktop (1440px) and mobile (390px) viewports\n- Save to `docs/design-references/` with descriptive names\n- These are your master reference — builders will receive section-specific crops/screenshots later\n\n### Global Extraction\nExtract these from the page before doing anything else:\n\n**Fonts** — Inspect `<link>` tags for Google Fonts or self-hosted fonts. Check computed `font-family` on key elements (headings, body, code, labels). Document every family, weight, and style actually used. Configure them in `src/app/layout.tsx` using `next/font/google` or `next/font/local`.\n\n**Colors** — Extract the site's color palette from computed styles across the page. Update `src/app/globals.css` with the target's actual colors in the `:root` and `.dark` CSS variable blocks. Map them to shadcn's token names (background, foreground, primary, muted, etc.) where they fit. Add custom properties for colors that don't map to shadcn tokens.\n\n**Favicons & Meta** — Download favicons, apple-touch-icons, OG images, webmanifest to `public/seo/`. Update `layout.tsx` metadata.\n\n**Global UI patterns** — Identify any site-wide CSS or JS: custom scrollbar hiding, scroll-snap on the page container, global keyframe animations, backdrop filters, gradients used as overlays, **smooth scroll libraries** (Lenis, Locomotive Scroll — check for `.lenis`, `.locomotive-scroll`, or custom scroll container classes). Add these to `globals.css` and note any libraries that need to be installed.\n\n### Mandatory Interaction Sweep\n\nThis 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.\n\n**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:\n- Does the header change appearance? Record the scroll position where it triggers.\n- Do elements animate into view? Record which ones and the animation type.\n- Does a sidebar or tab indicator auto-switch as you scroll? Record the mechanism.\n- Are there scroll-snap points? Record which containers.\n- Is there a smooth scroll library active? Check for non-native scroll behavior.\n\n**Click sweep:** Click every element that looks interactive:\n- Every button, tab, pill, link, card\n- Record what happens: does content change? Does a modal open? Does a dropdown appear?\n- For tabs/pills: click EACH ONE and record the content that appears for each state\n\n**Hover sweep:** Hover over every element that might have hover states:\n- Buttons, cards, links, images, nav items\n- Record what changes: color, scale, shadow, underline, opacity\n\n**Responsive sweep:** Test at 3 viewport widths via **Chrome MCP**:\n- Desktop: 1440px\n- Tablet: 768px\n- Mobile: 390px\n- At each width, note which sections change layout (column → stack, sidebar disappears, etc.) and at approximately which breakpoint the change occurs.\n\nSave all findings to `docs/research/BEHAVIORS.md`. This is your behavior bible — reference it when writing every component spec.\n\n### Motion & animation — Chrome MCP numeric audit (mandatory)\n\nAfter 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.\n\n```javascript\n// Motion audit — run via Chrome MCP evaluate_script on the target URL\n(function motionAudit() {\n  const props = [\n    'animation', 'animationName', 'animationDuration', 'animationDelay',\n    'animationTimingFunction', 'animationIterationCount', 'animationDirection',\n    'animationFillMode', 'animationPlayState', 'animationTimeline',\n    'transition', 'transitionProperty', 'transitionDuration',\n    'transitionTimingFunction', 'transitionDelay',\n    'transform', 'willChange'\n  ];\n  const animated = [...document.querySelectorAll('*')].filter((el) => {\n    const cs = getComputedStyle(el);\n    return (\n      (cs.animationName && cs.animationName !== 'none') ||\n      (cs.transitionProperty && cs.transitionProperty !== 'none' && cs.transitionProperty !== 'all')\n    );\n  });\n  const label = (el) => {\n    const tag = el.tagName.toLowerCase();\n    const id = el.id ? '#' + el.id : '';\n    const cls = el.className && typeof el.className === 'string'\n      ? '.' + el.className.trim().split(/\\s+/).filter(Boolean).slice(0, 4).join('.')\n      : '';\n    return tag + id + cls;\n  };\n  const samples = animated.slice(0, 100).map((el) => {\n    const cs = getComputedStyle(el);\n    const row = { path: label(el) };\n    props.forEach((p) => { row[p] = cs[p]; });\n    try {\n      row.webAnimations = el.getAnimations({ subtree: false }).map((a) => {\n        const t = a.effect && typeof a.effect.getTiming === 'function' ? a.effect.getTiming() : null;\n        return { playState: a.playState, currentTime: a.currentTime, timing: t };\n      });\n    } catch (e) {\n      row.webAnimationsError = String(e);\n    }\n    return row;\n  });\n  let keyframes = [];\n  try {\n    [...document.styleSheets].forEach((sheet, i) => {\n      let rules;\n      try { rules = sheet.cssRules; } catch { return; }\n      if (!rules) return;\n      [...rules].forEach((rule) => {\n        if (rule.type === CSSRule.KEYFRAMES_RULE) {\n          keyframes.push({ sheetIndex: i, name: rule.name, cssText: rule.cssText });\n        }\n      });\n    });\n  } catch (e) {\n    keyframes = [{ error: String(e), hint: 'Cross-origin stylesheets block cssRules — copy @keyframes from DevTools or fetched CSS.' }];\n  }\n  return JSON.stringify({\n    url: location.href,\n    prefersReducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,\n    animatedElementCount: animated.length,\n    sampledElements: samples.length,\n    samples,\n    keyframesRules: keyframes\n  }, null, 2);\n})();\n```\n\n**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.\n\n### Page Topology\nMap out every distinct section of the page from top to bottom. Give each a working name. Document:\n- Their visual order\n- Which are fixed/sticky overlays vs. flow content\n- The overall page layout (scroll container, column structure, z-index layers)\n- Dependencies between sections (e.g., a floating nav that overlays everything)\n- **The interaction model** of each section (static, click-driven, scroll-driven, time-driven)\n\nSave this as `docs/research/PAGE_TOPOLOGY.md` — it becomes your assembly blueprint.\n\n## Phase 2: Foundation Build\n\nThis is sequential. Do it yourself (not delegated to an agent) since it touches many files:\n\n1. **Update fonts** in `layout.tsx` to match the target site's actual fonts\n2. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)\n3. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed\n4. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).\n5. **Download global assets** — write and run a Node.js script (`scripts/download-assets.mjs`) that downloads all images, videos, and other binary assets from the page to `public/`. Preserve meaningful directory structure.\n6. Verify: `npm run build` passes\n\n### Asset Discovery Script Pattern\n\nUse browser MCP to enumerate all assets on the page:\n\n```javascript\n// Run this via browser MCP to discover all assets\nJSON.stringify({\n  images: [...document.querySelectorAll('img')].map(img => ({\n    src: img.src || img.currentSrc,\n    alt: img.alt,\n    width: img.naturalWidth,\n    height: img.naturalHeight,\n    // Include parent info to detect layered compositions\n    parentClasses: img.parentElement?.className,\n    siblings: img.parentElement ? [...img.parentElement.querySelectorAll('img')].length : 0,\n    position: getComputedStyle(img).position,\n    zIndex: getComputedStyle(img).zIndex\n  })),\n  videos: [...document.querySelectorAll('video')].map(v => ({\n    src: v.src || v.querySelector('source')?.src,\n    poster: v.poster,\n    autoplay: v.autoplay,\n    loop: v.loop,\n    muted: v.muted\n  })),\n  backgroundImages: [...document.querySelectorAll('*')].filter(el => {\n    const bg = getComputedStyle(el).backgroundImage;\n    return bg && bg !== 'none';\n  }).map(el => ({\n    url: getComputedStyle(el).backgroundImage,\n    element: el.tagName + '.' + el.className?.split(' ')[0]\n  })),\n  svgCount: document.querySelectorAll('svg').length,\n  fonts: [...new Set([...document.querySelectorAll('*')].slice(0, 200).map(el => getComputedStyle(el).fontFamily))],\n  favicons: [...document.querySelectorAll('link[rel*=\"icon\"]')].map(l => ({ href: l.href, sizes: l.sizes?.toString() }))\n});\n```\n\nThen write a download script that fetches everything to `public/`. Use batched parallel downloads (4 at a time) with proper error handling.\n\n## Phase 3: Component Specification & Dispatch\n\nThis is the core loop. For each section in your page topology (top to bottom), you do THREE things: **extract**, **write the spec file**, then **dispatch builders**.\n\n### Step 1: Extract\n\nFor each section, use browser MCP to extract everything:\n\n1. **Screenshot** the section in isolation (scroll to it, screenshot the viewport). Save to `docs/design-references/`.\n\n2. **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:\n\n```javascript\n// Per-component extraction — run via browser MCP\n// Replace SELECTOR with the actual CSS selector for the component\n(function(selector) {\n  const el = document.querySelector(selector);\n  if (!el) return JSON.stringify({ error: 'Element not found: ' + selector });\n  const props = [\n    'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color',\n    'textTransform','textDecoration','backgroundColor','background',\n    'padding','paddingTop','paddingRight','paddingBottom','paddingLeft',\n    'margin','marginTop','marginRight','marginBottom','marginLeft',\n    'width','height','maxWidth','minWidth','maxHeight','minHeight',\n    'display','flexDirection','justifyContent','alignItems','gap',\n    'gridTemplateColumns','gridTemplateRows',\n    'borderRadius','border','borderTop','borderBottom','borderLeft','borderRight',\n    'boxShadow','overflow','overflowX','overflowY',\n    'position','top','right','bottom','left','zIndex',\n    'opacity','transform','transition','cursor',\n    'objectFit','objectPosition','mixBlendMode','filter','backdropFilter',\n    'whiteSpace','textOverflow','WebkitLineClamp'\n  ];\n  function extractStyles(element) {\n    const cs = getComputedStyle(element);\n    const styles = {};\n    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; });\n    return styles;\n  }\n  function walk(element, depth) {\n    if (depth > 4) return null;\n    const children = [...element.children];\n    return {\n      tag: element.tagName.toLowerCase(),\n      classes: element.className?.toString().split(' ').slice(0, 5).join(' '),\n      text: element.childNodes.length === 1 && element.childNodes[0].nodeType === 3 ? element.textContent.trim().slice(0, 200) : null,\n      styles: extractStyles(element),\n      images: element.tagName === 'IMG' ? { src: element.src, alt: element.alt, naturalWidth: element.naturalWidth, naturalHeight: element.naturalHeight } : null,\n      childCount: children.length,\n      children: children.slice(0, 20).map(c => walk(c, depth + 1)).filter(Boolean)\n    };\n  }\n  return JSON.stringify(walk(el, 0), null, 2);\n})('SELECTOR');\n```\n\n3. **Extract multi-state styles** — for any element with multiple states (scroll-triggered, hover, active tab), capture BOTH states:\n\n```javascript\n// State A: capture styles at current state (e.g., scroll position 0)\n// Then trigger the state change (scroll, click, hover via browser MCP)\n// State B: re-run the extraction script on the same element\n// The diff between A and B IS the behavior specification\n```\n\nRecord the diff explicitly: \"Property X changes from VALUE_A to VALUE_B, triggered by TRIGGER, with transition: TRANSITION_CSS.\"\n\n4. **Extract real content** — all text, alt attributes, aria labels, placeholder text. Use `element.textContent` for each text node. For tabbed/stateful content, **click each tab and extract content per state**.\n\n5. **Identify assets** this section uses — which downloaded images/videos from `public/`, which icon components from `icons.tsx`. Check for **layered images** (multiple `<img>` or background-images stacked in the same container).\n\n6. **Assess complexity** — how many distinct sub-components does this section contain? A distinct sub-component is an element with its own unique styling, structure, and behavior (e.g., a card, a nav item, a search panel).\n\n### Step 2: Write the Component Spec File\n\nFor each section (or sub-component, if you're breaking it up), create a spec file in `docs/research/components/`. This is NOT optional — every builder must have a corresponding spec file.\n\n**File path:** `docs/research/components/<component-name>.spec.md`\n\n**Template:**\n\n```markdown\n# <ComponentName> Specification\n\n## Overview\n- **Target file:** `src/components/<ComponentName>.tsx`\n- **Screenshot:** `docs/design-references/<screenshot-name>.png`\n- **Interaction model:** <static | click-driven | scroll-driven | time-driven>\n\n## DOM Structure\n<Describe the element hierarchy — what contains what>\n\n## Computed Styles (exact values from getComputedStyle)\n\n### Container\n- display: ...\n- padding: ...\n- maxWidth: ...\n- (every relevant property with exact values)\n\n### <Child element 1>\n- fontSize: ...\n- color: ...\n- (every relevant property)\n\n### <Child element N>\n...\n\n## States & Behaviors\n\n### <Behavior name, e.g., \"Scroll-triggered floating mode\">\n- **Trigger:** <exact mechanism — scroll position 50px, IntersectionObserver rootMargin \"-30% 0px\", click on .tab-button, hover>\n- **State A (before):** maxWidth: 100vw, boxShadow: none, borderRadius: 0\n- **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1), borderRadius: 16px\n- **Transition:** transition: all 0.3s ease\n- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | etc.>\n\n### Hover states\n- **<Element>:** <property>: <before> → <after>, transition: <value>\n\n## Per-State Content (if applicable)\n\n### State: \"Featured\"\n- Title: \"...\"\n- Subtitle: \"...\"\n- Cards: [{ title, description, image, link }, ...]\n\n### State: \"Productivity\"\n- Title: \"...\"\n- Cards: [...]\n\n## Assets\n- Background image: `public/images/<file>.webp`\n- Overlay image: `public/images/<file>.png`\n- Icons used: <ArrowIcon>, <SearchIcon> from icons.tsx\n\n## Text Content (verbatim)\n<All text content, copy-pasted from the live site>\n\n## Responsive Behavior\n- **Desktop (1440px):** <layout description>\n- **Tablet (768px):** <what changes — e.g., \"maintains 2-column, gap reduces to 16px\">\n- **Mobile (390px):** <what changes — e.g., \"stacks to single column, images full-width\">\n- **Breakpoint:** layout switches at ~<N>px\n```\n\nFill every section. If a section doesn't apply (e.g., no states for a static footer), write \"N/A\" — but think twice before marking States & Behaviors as N/A. Even a footer might have hover states on links.\n\n### Step 3: Dispatch Builders\n\nBased on complexity, dispatch builder agent(s) in worktree(s):\n\n**Simple section** (1-2 sub-components): One builder agent gets the entire section.\n\n**Complex section** (3+ distinct sub-components): Break it up. One agent per sub-component, plus one agent for the section wrapper that imports them. Sub-component builders go first since the wrapper depends on them.\n\n**What every builder agent receives:**\n- The full contents of its component spec file (inline in the prompt — don't say \"go read the spec file\")\n- Path to the section screenshot in `docs/design-references/`\n- Which shared components to import (`icons.tsx`, `cn()`, shadcn primitives)\n- The target file path (e.g., `src/components/HeroSection.tsx`)\n- Instruction to verify with `npx tsc --noEmit` before finishing\n- For responsive behavior: the specific breakpoint values and what changes\n\n**Don't wait.** As soon as you've dispatched the builder(s) for one section, move to extracting the next section. Builders work in parallel in their worktrees while you continue extraction.\n\n### Step 4: Merge\n\nAs builder agents complete their work:\n- Merge their worktree branches into main\n- You have full context on what each agent built, so resolve any conflicts intelligently\n- After each merge, verify the build still passes: `npm run build`\n- If a merge introduces type errors, fix them immediately\n\nThe extract → spec → dispatch → merge cycle continues until all sections are built.\n\n## Phase 4: Page Assembly\n\nAfter all sections are built and merged, wire everything together in `src/app/page.tsx`:\n\n- Import all section components\n- Implement the page-level layout from your topology doc (scroll containers, column structures, sticky positioning, z-index layering)\n- Connect real content to component props\n- Implement page-level behaviors: scroll snap, scroll-driven animations, dark-to-light transitions, intersection observers, smooth scroll (Lenis etc.)\n- Verify: `npm run build` passes clean\n\n## Phase 5: Visual QA Diff\n\nAfter assembly, do NOT declare the clone complete. Take side-by-side comparison screenshots:\n\n1. 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\n2. Compare section by section, top to bottom, at desktop (1440px)\n3. Compare again at mobile (390px)\n4. For each discrepancy found:\n   - Check the component spec file — was the value extracted correctly?\n   - If the spec was wrong: re-extract from browser MCP, update the spec, fix the component\n   - If the spec was right but the builder got it wrong: fix the component to match the spec\n5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements\n6. **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`\n\nOnly after this visual QA pass is the clone ready for **Phase 6 verification**. Immediately **confirm `docs/research/LAUNCHFRAME_SUBAGENTS.md`** contains four self-contained **`## Prompt — Pass N`** sections matching the Phase 6 rubrics; update that file whenever you change rubric wording locally.\n\n## Phase 6: Verification passes (mandatory)\n\nForeman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.\n\n### How to run them (hosts differ)\n\n| Host capability | What you must do |\n|-----------------|------------------|\n| **Parallel agents / Task / subagents** | Open **`docs/research/LAUNCHFRAME_SUBAGENTS.md`**. Dispatch **four** separate runs — each agent receives **exactly one** complete `## Prompt — Pass …` section copied **verbatim from that Markdown file**. Prefer **`explore`/readonly**. Do **not** paraphrase the rubric from chat memory. Claude Code-style teams: follow **`AGENTS.md`** — isolated **worktrees/branches per checker**, then merge after triage. |\n| **Single agent / no spawning** | Open the same Markdown file and **execute prompts 1 → 4 yourself** in order, appending **`docs/research/LAUNCHFRAME_VERIFICATION.md`** after each (`### Pass N`, findings, **`VERDICT: PASS`** or **`FAIL`**) per that file's **Output contract**. |\n\n**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.\n\n**Minimum four verification passes** (four subagents **or** four self-executed steps — prompts sourced from **`LAUNCHFRAME_SUBAGENTS.md`;** the authoritative rubric text below must stay mirrored there):\n\n1. **Raster media & icons** — **Narrative slots:** inventory every reference marketing/lifestyle/card/hero image role from specs vs **committed files** (`public/images/...`) actually referenced in JSX; **`FAIL`** if the reference showed a photo/panel thumbnail and this clone relies on placeholders or bare gradients. Then list every raster/video poster and **every authored SVG/component used as an icon** from `src/`. Confirm **files exist** under `public/` with **correct paths** where expected; 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**. For SVGs/icons: **`viewBox`**, strokes/fills/`currentColor`, and sprite usage must match specs — reject opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.\n2. **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.\n3. **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.\n4. **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.\n\nEach pass (whether another agent or you) 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**). **First rubric checklist includes:** confirm **every narrative image slot** from specs has **on-disk raster files** wired in JSX — **`FAIL`** if any slot is placeholder-only while the reference showed imagery. **Do not** declare Launchframe complete until all four passes **`PASS`** or gaps are accepted by the user context.\n\n## Pre-Dispatch Checklist\n\nBefore dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.\n\n- [ ] **Authored narrative rasters planned:** list each marketing/lifestyle/card image slot vs **planned `public/images/...` path** (Brand identity originals). No section ships with “TODO image” once built\n- [ ] **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\n- [ ] **Icon/SVG snippets** inlined in spec where needed: dominant paths or sprite `id`s, **`viewBox`**, stroke/fill rules — enough that a builder does not guess Lucide substitutions\n- [ ] **DOM outline** included for non-trivial sections (wrappers, order)\n- [ ] Spec file written to `docs/research/components/<name>.spec.md` with ALL sections filled\n- [ ] Every CSS value in the spec is from `getComputedStyle()`, not estimated\n- [ ] Interaction model is identified and documented (static / click / scroll / time)\n- [ ] For stateful components: every state's content and styles are captured\n- [ ] For scroll-driven components: trigger threshold, before/after styles, and transition are recorded\n- [ ] For hover states: before/after values and transition timing are recorded\n- [ ] **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\n- [ ] Relevant **`@keyframes`** from the reference appear in `globals.css` or module CSS **verbatim** (or equivalent WAAPI) — not hand-waved\n- [ ] Elements that move via **Web Animations API** have timing cross-checked with `getAnimations` output from Chrome MCP\n- [ ] All images in the section are identified (including overlays and layered compositions)\n- [ ] Responsive behavior is documented for at least desktop and mobile\n- [ ] Text content is verbatim from the site, not paraphrased\n- [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split\n\n## What NOT to Do\n\nThese are lessons from previous failed clones — each one cost hours of rework:\n\n- **Don't build click-based tabs when the original is scroll-driven (or vice versa).** Determine the interaction model FIRST by scrolling before clicking. This is the #1 most expensive mistake — it requires a complete rewrite, not a CSS fix.\n- **Don't extract only the default state.** If there are tabs showing \"Featured\" on load, click Productivity, Creative, Lifestyle and extract each one's cards/content. If the header changes on scroll, capture styles at position 0 AND position 100+.\n- **Don't miss overlay/layered images.** A background watercolor + foreground UI mockup = 2 images. Check every container's DOM tree for multiple `<img>` elements and positioned overlays.\n- **Don't build mockup components for content that's actually videos/animations.** Check if a section uses `<video>`, Lottie, or canvas before building elaborate HTML mockups of what the video shows.\n- **Don't approximate CSS classes.** \"It looks like `text-lg`\" is wrong if the computed value is `18px` and `text-lg` is `18px/28px` but the actual line-height is `24px`. Extract exact values.\n- **Don't build everything in one monolithic commit.** The whole point of this pipeline is incremental progress with verified builds at each step.\n- **Don't reference docs from builder prompts.** Each builder gets the CSS spec inline in its prompt — never \"see DESIGN_TOKENS.md for colors.\" The builder should have zero need to read external docs.\n- **Don't skip asset extraction.** Without real images, videos, and fonts, the clone will always look fake regardless of how perfect the CSS is.\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\"\n- **Don't swap reference-specific SVG/UI icons for random Lucide** (or unrelated stock glyphs) unless the spec proves geometric equivalence — extract the DOM paths/sprites instead.\n- **Don't declare Launchframe finished without Phase 6.** Execute the four **`LAUNCHFRAME_SUBAGENTS.md`** prompts (via **Task**/subagents or yourself) and write **`LAUNCHFRAME_VERIFICATION.md`** with four **`PASS`**/**`FAIL`** verdicts — “subagents wouldn't start” is not an excuse to skip opening the Markdown runbook.\n- **Don't ship marketing image slots empty.** Narrative raster roles need real files under **`public/images/`** (or equivalent): no permanent gray boxes where the reference had photography.\n\n## Completion\n\nWhen done, report:\n- Total sections built\n- Total components created\n- Total spec files written (should match components)\n- Total assets downloaded (images, videos, SVGs, fonts)\n- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)\n- Build status (`npm run build` result)\n- Visual QA results (any remaining discrepancies)\n- **Phase 6 verification:** cite **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** (prompt source) **`docs/research/LAUNCHFRAME_VERIFICATION.md`** (results), summarize four passes with **PASS/FAIL** each; unresolved items under **Known gaps**\n- Any known gaps or limitations\n",
+  "description": "Decompile a reference URL into a clean, human-editable Next.js codebase (visually equivalent layout + motion within measured tolerances), with SaaS landing copy overlaid — the only clone slash command for this template. Invoked as /launchframe.",
+  "prompt": "\n# Launchframe\n\n**`/launchframe`** is the **only** slash command for reverse-engineering a live site into this codebase. Parse **the reference URL(s) and SaaS idea the user passed with /launchframe**:\n\n1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).\n2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.\n\nThe **primary deliverable** is a **normal Next.js + Tailwind v4 + shadcn/ui codebase** that future humans (and AI agents) can read and edit: clear file names (`SiteHeader.tsx`, `Hero.tsx`, `FeatureGrid.tsx`, …), readable JSX with semantic Tailwind utilities, tokens in `globals.css`, motion expressed as explicit keyframes / durations / easings. The reference site is the **source of truth for layout, motion, and content**, **not** for JSX. **Do not** paste the reference's compiled DOM, hashed CSS-module class names, or minified bundle output into source files as the implementation. The captures from `npm run inspect:page` (`document.html`, `ai-page-bundle.txt`, `motion-summary.json`, `capture-meta.json`) are **references** you read to remeasure into clean components — they are not artifacts you ship as code.\n\nYou are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible. After Phase 5, **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** defines the **verbatim prompts** you must use to run verification (either four parallel **`Task`/subagents** fed one prompt each — **paste from that file only**, not from memory — or execute those four prompts **yourself sequentially**). Aggregate results only in **`docs/research/LAUNCHFRAME_VERIFICATION.md`**. **Never skip Phase 6** because subagents didn't auto-start — you initiate them explicitly from the Markdown prompt blocks. Narrative/marketing raster slots use **imagery your session generates itself** with the host’s **image-generation** tool (saved into `public/images/`), not missing assets — see **Brand identity**. Verification covers raster slots, extracted **SVG/icons**, **semantic** DOM structure, CSS tokens + measured-tolerance parity, **motion choreography**, and a side-by-side **screenshot diff**.\n\n## Step 0 — Persist Launchframe inputs\n\nBefore reconnaissance, write or update:\n\n- `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`\n- `launchframe.context.json`\n- `docs/research/LAUNCHFRAME.md` — URLs, SaaS idea, **plus a `## Decompilation pipeline` section** (see template below)\n- **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** — **before Phase 6**, ensure this runbook holds all four verifier prompts (**copy-ready**). When the bundled template differs from the latest SKILL rubrics (after skill edits), re-sync Section **Phase 6** rubrics **into this file**. Subagents receive prompts **only** from here.\n\n### `docs/research/LAUNCHFRAME.md` — required sections\n\nWhen you create or update this file, include at minimum:\n\n```markdown\n# Launchframe — <project name>\n\n## Source\n- Reference URL(s): <list>\n- Captured: <ISO date>\n\n## SaaS idea\n<paste LAUNCHFRAME_SAAS_IDEA verbatim>\n\n## Decompilation pipeline\n1. **Inspect** — Run `npm run inspect:page` per URL (Step 0a) and skim with Chrome DevTools MCP. Treat outputs (`document.html`, `ai-page-bundle.txt`, `motion-summary.json`, `capture-meta.json`, network CSS) as **read-only references**.\n2. **Section map** — In `docs/research/PAGE_TOPOLOGY.md`, list every visible section top-to-bottom with a **semantic name** (`SiteHeader`, `Hero`, `FeatureGrid`, `PricingTable`, `CtaBanner`, `SiteFooter`, …) and its interaction model.\n3. **Components** — One spec per section in `docs/research/components/<Name>.spec.md`. Builders write **fresh** React in `src/components/<Name>.tsx` using semantic tags, Tailwind utilities (with arbitrary values where needed), and shadcn primitives. **No** pasted hashed class names from the reference bundle.\n4. **Motion port** — Numeric port from `motion-summary.json` + Chrome MCP `getAnimations` into `globals.css` `@keyframes` and Tailwind `transition-*` / `animate-*` utilities. Match durations/easings within ±20ms / curve equivalence.\n5. **Asset mirror (optional)** — If the reference uses root-relative `/_next/...` (or similar) paths and you need them for offline/iframe work, run `npm run mirror:snapshot-assets` to copy them under `public/`. Mirrored bundles are **runtime fixtures**, never the code humans edit.\n\n## Brand identity\n- Original wordmark/logo: <path>\n- Original favicon set: <path>\n\n## Authored narrative imagery (`public/images/`)\n- `<file>` — role: hero | feature mockup | avatar | … — intent: <line>\n\n## Automated captures\n| URL | Output dir |\n| --- | ---------- |\n| https://… | docs/research/<hostname>/page-inspection/<stamp>/ |\n```\n\n### Step 0a — Automated page inspection dump (mandatory)\n\nRight after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json`.\n\n**These artifacts are reference material, not code.** Use them to read structure, content, tokens, and motion numbers. **Do not** paste their HTML or class strings into JSX as the implementation. If you need a temporary html-to-jsx scaffolding pass (e.g. to lift content blocks of long-form copy), keep it in a scratch branch, then **rewrite into clean React** before merging — minified/compiled markup must not survive into `src/`. Attach **`ai-page-bundle.txt`** to a subagent when a single pasteable artifact is needed for context; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).\n\n1. **One-time per machine:** `npx playwright install chromium`\n2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):\n\n```bash\nnpm run inspect:page -- \"https://www.example.com/\" --scroll-full --wait-until networkidle --timeout 120000 --out-parent \"docs/research/www.example.com/page-inspection\"\n```\n\nThat creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with all artifacts. Omit `--out-parent` to use the default `docs/research/page-captures/<host>-<stamp>/`.\n3. Append an **`Automated captures`** subsection to `docs/research/LAUNCHFRAME.md` listing every URL and its output directory path. Use those files in Phase 1 when structuring specs (DOM outline, stylesheet text, `@keyframes` from `motion-summary.json`) while still measuring behavior in the live tab.\n\nIf the dump fails (missing browsers, navigation timeout, TLS, bot wall), increase `--timeout`, retry with `domcontentloaded` only when necessary, or document the failure in `LAUNCHFRAME.md` and unblock before treating Phase 1 as complete.\n\n## SaaS copy overlay (Phase 4 assembly and final polish)\n\nAfter 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 numbers** from extracted specs. **Icon shapes** and **animations** (`@keyframes`, transitions, staggers, scroll triggers) remain **parity goals** sourced from extraction — swapping narrative photos does **not** relax them. **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.\n\n---\n\n## Scope Defaults\n\nThe target page(s) are the URL(s) you parsed in Pre-Flight. Rebuild what is visible at each URL as a **clean, hand-authored Next.js codebase** that is visually equivalent to the reference within measured tolerances. Unless the user specifies otherwise, use these defaults:\n\n- **Fidelity level — “visually equivalent within measured tolerances,” *not* compiled-DOM identity.** Match the reference on:\n  - **Colors & typography** — exact tokens (extracted via Chrome MCP `getComputedStyle`) ported into `src/app/globals.css` CSS variables and Tailwind utilities.\n  - **Spacing & layout geometry** — within **±2px** at the documented breakpoints (1440 / 768 / 390). Use Tailwind utilities; reach for **arbitrary values** (`max-w-[872px]`, `pt-[34px]`, `gap-[18px]`) when the design system tokens don't land on the measured number.\n  - **SVG iconography** — lifted geometry: matching `viewBox`, paths, strokes, fills, `currentColor` behavior, exposed in `src/components/icons.tsx` (or section-local files) under **semantic component names**. No opportunistic Lucide swaps for reference glyphs unless the spec proves equivalence.\n  - **Motion** — explicit `@keyframes`, `transition-*` / `animation-*` utilities, and Web Animations API hooks ported from `motion-summary.json` and live `getAnimations()`. Durations within **±20ms**, easing curves equivalent (cubic-beziers preserved or mathematically equivalent), scroll/intersection thresholds preserved.\n  - **Responsive behavior** — breakpoints and what each one changes (column → stack, hidden sidebars, sticky → static). Mobile-first Tailwind; same layout reconfigurations as the reference.\n  - **Raster presentation** — `object-fit`, `object-position`, parent overflow/radius, masks, `<picture>`/`<source>` parity *or* a documented `next/image` `sizes`/`srcSet` mapping that yields the same painted result.\n- **Codebase clarity is a first-class deliverable.** A future human (or another agent) opening `src/components/Hero.tsx` should immediately read normal JSX with clear element nesting, semantic Tailwind utility classes, and self-explanatory component/prop names. **No** preserved hashed class names like `navigation-menu-module__a83f2`, no minified DOM trees pasted from the reference, no inline `className` strings of >120 chars built from copied bundle output. If the reference's structure has obvious wrapper redundancy, collapse it; layout invariants and scroll/sticky behavior must still match.\n- **Layout tree — semantic, not byte-equal.** The component file structure is yours to design (see Phase 1 §Page Topology). Where possible, prefer one component per visible section and one component per repeated card/list-item variant. The visible **section order**, **scroll/sticky containers**, **z-index stacking**, and **responsive reflow** must match the reference.\n- **In scope:** Visual layout, styling, motion, component structure and interactions, responsive design, mock data for demo purposes, **clean human-readable React source**.\n- **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit, byte-equal DOM cloning of the reference's compiled bundle.\n- **Customization:** Structure and visuals — visually equivalent 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.\n- **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. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. **Mandatory delivery:** those slots **must** have real raster files checked into `public/images/` (or another committed static path your build serves) — **no** omitted `<img>`/`<Image>`, **no** indefinite placeholder divs/colors standing in for a photo where the reference showed one, **no** broken `href/src`. **You generate these files yourself:** use your host's **built-in image generation** capability (explicit image prompts aligned to the SaaS idea + composition brief from each reference slot), write outputs into `public/images/`, wire them into JSX, and note each file in `docs/research/LAUNCHFRAME.md`. You may **supplement** with composites or screenshots of **your** product UI mocks you build in code, but you **do not** wait for the user to supply artwork. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction, and **list paths** for every authored narrative image.\n- **Functional icons & motion choreography:** Anything the reference treats as **UI iconography that is not a forbidden trademark** (chevrons, menu marks, inline pictograms, sprite symbols, repeating UI glyphs) — **lift path data / sprite refs / mask SVGs from the DOM** and reproduce **`viewBox`, stroke widths, joins, fills, `currentColor` behavior** under semantic component names (e.g. `ChevronDownIcon`, `SearchIcon`, `WordmarkLogo`). Do **not** swap in unrelated Lucide (or arbitrary stock SVG) guesses \"that look close.\" **`@keyframes`**, **`transition` / `animation` longhands**, scroll-driven timelines, carousel timings, stagger delays, easing curves — **lift from live measurement + stylesheet text** and reauthor as Tailwind utilities or CSS in `globals.css` — **omit or substitute timing only** when respecting `prefers-reduced-motion` or when the measured reference does the same. Product-themed raster replacements do **not** waive SVG or animation parity.\n\nIf the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.\n\n## Pre-Flight\n\n1. **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.”\n2. **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.\n3. 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.\n4. 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>/`.\n5. 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.\n\n## Guiding Principles\n\nThese are the truths that separate a successful clone from a \"close enough\" mess. Internalize them — they should inform every decision you make.\n\n### 0. Visual crawl priority (images, SVGs, motion — first)\n\nWhen 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:\n\n1. **Images (raster + video stills) — HTML, files, and CSS together** — Enumeration is not enough: the clone must match **how** each asset is mounted and styled.\n   - **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.\n   - **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).\n   - **Files:** For **structural/decorative or permission-neutral** imagery (textures, gradients, generic UI chrome where no competitor brand reads), download real bytes to `public/images/` (or videos/posters). **Provenance** in spec: URL hash or byte size so verifiers can confirm the correct asset. For **brand- or product-story** photos and illustrations per Scope Defaults, **do not** pass off the reference files as yours — replace with originals saved under `public/images/` with spec lines **substitute — product-themed** (describe intent vs reference role). No unrelated stock swaps unless similarly marked.\n2. **SVGs & iconography — copy glyphs, don't improvise.** Inline `<svg>`, sprite `symbol` defs, **SVG used as masks/filters**, icon fonts (**prefer extracting vector paths**, not swapping fonts blindly). Convert to `@/components/icons.tsx` (or section-local components) with meaningful names. **Ship the reference geometry**: matching `viewBox`, path coordinates, strokes/caps/joins — verify at 1× and 2× DPR beside a screenshot overlay. Replacing forbidden trademark marks is done under Brand identity with **equivalent silhouette area + optical weight**, not a random different icon shape.\n3. **Motion & animation (Chrome MCP) — copy choreography, omit nothing casually.** Treat this like color and spacing: **numeric fidelity**. If the reference animates **on load, hover, scroll, intersection, drag, carousel tick, or tab change**, capture and port it unless `prefers-reduced-motion` or an explicit exemption says otherwise — a static clone while the reference moves is wrong. In Chrome MCP, evaluate scripts against the live page to capture:\n   - Full **`animation`** shorthand plus **`animation-*` longhands** (`animation-name`, `-duration`, `-delay`, `-timing-function`, `-iteration-count`, `-direction`, `-fill-mode`, `-play-state`, **`animation-timeline`** / scroll timelines)\n   - Full **`transition`** shorthand plus **`transition-*` longhands**, and **`transform`** / **`will-change`** as applied during and after motion\n   - **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\n   - **Web Animations API** — for each moving node, `element.getAnimations({ subtree: false })` and record each effect’s timing (`duration`, `delay`, `easing`, `iterations`, `direction`, `fill`)\n   - **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\n   - **`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)\n   Run the **Phase 1 motion audit script** and merge findings into `docs/research/BEHAVIORS.md`. Capture **numbers** (`ms`, `cubic-bezier(...)`, stagger offsets), not adjectives.\n\nOnly 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.\n\n### 0b. HTML / DOM structure — semantic rebuild, not byte-equal copy\n\nThe clone's **visible layout tree** must match the reference: **section order**, **sibling order** of meaningful content, **scroll/sticky containers**, **z-index stacking**, and **responsive reflow**. The clone's **source code** must be **hand-authored React** that a human or another agent can read and edit:\n\n- **Rename to semantic.** Replace machine-named wrappers (`div.navigation-menu-module__a83f2`) with React components named for what they *do* (`<SiteHeader>`, `<NavLinks>`, `<HeroEyebrow>`). Use semantic HTML (`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>`, `<button>`, `<a>`) — landmarks must still reflect the page outline.\n- **Collapse redundant wrappers.** If the reference nests three `div`s for purely build-tool reasons and computed layout (flex axes, padding/margin/gap, scroll behavior, stacking) is unchanged when you flatten them, flatten them. The test is **computed layout equivalence at all documented breakpoints**, not “same number of `<div>`s.”\n- **Never paste compiled DOM as source.** `document.html` and `body-outer.html` are reference material for hierarchy and content — they are **not** the implementation. Hashed class names (`__a83f2`, `module__hash`), inlined runtime data attributes, and minified inline `style=\"...\"` strings copied from those files are **forbidden** in `src/`. If you need a one-time transform pass to lift long-form copy or list data out of `document.html`, do it in a scratch file and rewrite into clean JSX before merging.\n- **Spec includes a DOM outline.** For non-trivial sections, the spec gives a short indentation sketch of the **rebuilt** tree (semantic tag + role, not class names) so builders and **Phase 6 verifiers** know what the rebuild should look like.\n\n### 0c. CSS fidelity — measured tokens, hand-written utilities\n\nCSS in this codebase is **Tailwind v4 utilities + arbitrary values + tokens in `globals.css`**, all hand-authored. Every critical rule must trace back to `getComputedStyle()` (or authored sheet text) from Chrome MCP / `inspect:page`:\n\n- **Tokens first.** Colors, font families, font sizes, radii, shadows that recur across the page go in `:root` (and `.dark`) inside `src/app/globals.css` as CSS custom properties; reference them via Tailwind `bg-[var(--surface-1)]` or shadcn token names where the role matches.\n- **Tailwind utilities second.** Use semantic utility classes (`flex items-center gap-3 px-6 py-2 rounded-full`) for the bulk of layout. Reach for **arbitrary values** (`max-w-[872px]`, `rounded-[10px]`, `gap-[18px]`, `tracking-[-0.02em]`) when measured values don't land on a default token.\n- **Module CSS only as a documented escape hatch.** If a section needs a snippet of CSS that Tailwind cannot express cleanly (complex `mask-image` with multiple layers, scroll-timeline, container-query-driven backgrounds), write it in a small **hand-authored** `.module.css` (or `globals.css` block) with **meaningful** class names and reference it from JSX via `cn()`. Do **not** import or paste hashed class strings from the reference's compiled CSS modules into JSX.\n- **Pseudo-elements & custom properties** used by the reference must appear in the clone with the same cascade intent. Lift `@keyframes` verbatim into `globals.css`.\n\n### 0d. Decompilation pipeline (mental model)\n\nEvery section follows the same five-stage pipeline; never skip a stage:\n\n1. **Inspect** — read `document.html`, `ai-page-bundle.txt`, `motion-summary.json`, `capture-meta.json`, plus live Chrome DevTools MCP measurements.\n2. **Section map** — name the section (`Hero`, `FeatureGrid`, …) and decide its interaction model.\n3. **Components** — write a fresh React component in `src/components/<Name>.tsx` with semantic JSX and Tailwind utilities; import any extracted icons by their semantic name.\n4. **Motion port** — translate measured durations / easings / keyframes into explicit Tailwind utilities or `globals.css` rules; verify with Chrome MCP `getAnimations`.\n5. **Asset mirror (optional)** — if `/_next/...` or other root-relative paths matter for offline preview, run `npm run mirror:snapshot-assets` (Phase 2 step) to sideload them into `public/`. Mirrored output is a fixture, not a source file.\n\n### 1. Completeness Beats Speed\n\nEvery 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.\n\n### 2. Small Tasks, Perfect Results\n\nWhen an agent gets \"build the entire features section,\" it glosses over details — it approximates spacing, guesses font sizes, and produces something \"close enough\" but clearly wrong. When it gets a single focused component with exact CSS values, it nails it every time.\n\nLook at each section and judge its complexity. A simple banner with a heading and a button? One agent. A complex section with 3 different card variants, each with unique hover states and internal layouts? One agent per card variant plus one for the section wrapper. When in doubt, make it smaller.\n\n**Complexity budget rule:** If a builder prompt exceeds ~150 lines of spec content, the section is too complex for one agent. Break it into smaller pieces. This is a mechanical check — don't override it with \"but it's all related.\"\n\n### 3. Real Content, Real Assets\n\nExtract the **verbatim marketing copy only where it is layout boilerplate**; otherwise apply the SaaS idea. For **pixels**: extract **dimensions, layering, masks, responsive markup, and filenames/paths needed for parity**, but treat **marketing photos and illustrative brand art** per Scope Defaults — **authored originals** tied to the product (including cohesive **sub-images** where the reference uses a small secondary crop or inset), not a gallery of their stock photography. Structural assets (patterns, screenshots of generic UI motifs you rebuild) follow §0 extraction. **Functional icons (`<svg>`/sprites) and all motion choreography are copied from extraction** alongside that — originals-for-product applies to narrative **raster** slots, **not** to carte-blanche SVG or timing drift. Download every reference `<video>` poster and neutral asset you keep; extract inline `<svg>` elements as React components unless they encode trademark marks forbidden under Brand identity (replace with equivalent optical weight there). Fabricate raster/vector only when extraction is blocked — label **substitute** in specs and research notes — and **avoid unrelated stock**; stay on-theme for the SaaS idea.\n\n**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.\n\n### 4. Foundation First\n\nNothing can be built until the foundation exists: global CSS with the target site's design tokens (colors, fonts, spacing), TypeScript types for the content structures, and global assets (fonts, favicons). This is sequential and non-negotiable. Everything after this can be parallel.\n\n### 5. Extract How It Looks AND How It Behaves\n\nA website is not a screenshot — it's a living thing. Elements move, change, appear, and disappear in response to scrolling, hovering, clicking, resizing, and time. If you only extract the static CSS of each element, your clone will look right in a screenshot but feel dead when someone actually uses it.\n\nFor every element, extract its **appearance** (exact computed CSS via `getComputedStyle()`) AND its **behavior** (what changes, what triggers the change, and how the transition happens). Not \"it looks like 16px\" — extract the actual computed value. Not \"the nav changes on scroll\" — document the exact trigger (scroll position, IntersectionObserver threshold, viewport intersection), the before and after states (both sets of CSS values), and the transition (duration, easing, CSS transition vs. JS-driven vs. CSS `animation-timeline`).\n\nExamples of behaviors to watch for — these are illustrative, not exhaustive. The page may do things not on this list, and you must catch those too:\n- A navbar that shrinks, changes background, or gains a shadow after scrolling past a threshold\n- Elements that animate into view when they enter the viewport (fade-up, slide-in, stagger delays)\n- Sections that snap into place on scroll (`scroll-snap-type`)\n- Parallax layers that move at different rates than the scroll\n- Hover states that animate (not just change — the transition duration and easing matter)\n- Dropdowns, modals, accordions with enter/exit animations\n- Scroll-driven progress indicators or opacity transitions\n- Auto-playing carousels or cycling content\n- Dark-to-light (or any theme) transitions between page sections\n- **Tabbed/pill content that cycles** — buttons that switch visible card sets with transitions\n- **Scroll-driven tab/accordion switching** — sidebars where the active item auto-changes as content scrolls past (IntersectionObserver, NOT click handlers)\n- **Smooth scroll libraries** (Lenis, Locomotive Scroll) — check for `.lenis` class or scroll container wrappers\n\n### 6. Identify the Interaction Model Before Building\n\nThis is the single most expensive mistake in cloning: building a click-based UI when the original is scroll-driven, or vice versa. Before writing any builder prompt for an interactive section, you must definitively answer: **Is this section driven by clicks, scrolls, hovers, time, or some combination?**\n\nHow to determine this:\n1. **Don't click first.** Scroll through the section slowly and observe if things change on their own as you scroll.\n2. If they do, it's scroll-driven. Extract the mechanism: `IntersectionObserver`, `scroll-snap`, `position: sticky`, `animation-timeline`, or JS scroll listeners.\n3. If nothing changes on scroll, THEN click/hover to test for click/hover-driven interactivity.\n4. Document the interaction model explicitly in the component spec: \"INTERACTION MODEL: scroll-driven with IntersectionObserver\" or \"INTERACTION MODEL: click-to-switch with opacity transition.\"\n\nA section with a sticky sidebar and scrolling content panels is fundamentally different from a tabbed interface where clicking switches content. Getting this wrong means a complete rewrite, not a CSS tweak.\n\n### 7. Extract Every State, Not Just the Default\n\nMany components have multiple visual states — a tab bar shows different cards per tab, a header looks different at scroll position 0 vs 100, a card has hover effects. You must extract ALL states, not just whatever is visible on page load.\n\nFor tabbed/stateful content:\n- Click each tab/button via browser MCP\n- Extract the content, images, and card data for EACH state\n- Record which content belongs to which state\n- Note the transition animation between states (opacity, slide, fade, etc.)\n\nFor scroll-dependent elements:\n- Capture computed styles at scroll position 0 (initial state)\n- Scroll past the trigger threshold and capture computed styles again (scrolled state)\n- Diff the two to identify exactly which CSS properties change\n- Record the transition CSS (duration, easing, properties)\n- Record the exact trigger threshold (scroll position in px, or viewport intersection ratio)\n\n### 8. Spec Files Are the Source of Truth\n\nEvery component gets a specification file in `docs/research/components/` BEFORE any builder is dispatched. This file is the contract between your extraction work and the builder agent. The builder receives the spec file contents inline in its prompt — the file also persists as an auditable artifact that the user (or you) can review if something looks wrong.\n\nThe spec file is not optional. It is not a nice-to-have. If you dispatch a builder without first writing a spec file, you are shipping incomplete instructions based on whatever you can remember from a browser MCP session, and the builder will guess to fill gaps.\n\n### 9. Build Must Always Compile\n\nEvery builder agent must verify `npx tsc --noEmit` passes before finishing. After merging worktrees, you verify `npm run build` passes. A broken build is never acceptable, even temporarily.\n\n### 10. Codebase Clarity Is a First-Class Deliverable\n\nA future human (or another agent) opening any file under `src/` should be able to read and edit it without consulting the reference site or `document.html`:\n\n- **File names & component names are semantic.** `SiteHeader.tsx`, `Hero.tsx`, `FeatureGrid.tsx`, `PricingTable.tsx`, `TestimonialsCarousel.tsx`, `SiteFooter.tsx` — not `Section1.tsx` or `NavigationMenuModule.tsx`.\n- **JSX is hand-authored Tailwind.** Class strings should read like prose (`flex items-center justify-between px-6 py-3`), not like minified bundle output. Conditional classes go through `cn()` from `src/lib/utils.ts`.\n- **Long pages compose small components.** `src/app/page.tsx` is a thin assembly file: imports, ordered section tags, top-level layout. Each section is its own component.\n- **Props over magic.** Card lists, tab states, pricing tiers, feature lists are passed as typed props/data objects (often defined alongside the component or in `src/lib/data/<name>.ts`), not hard-coded inside one giant return tree.\n- **No dead reference debris.** Once `document.html` has informed the rebuild, do not leave its raw fragments commented out or pasted in `src/`. Reference notes belong in `docs/research/`.\n\n## Phase 1: Reconnaissance\n\nNavigate to the target URL with browser MCP.\n\nFollow **§0 (Visual crawl priority)** during the entire reconnaissance pass: images and backgrounds → SVGs/icons → motion/animations — before spending time on secondary copy tweaks.\n\n### Screenshots\n- Take **full-page screenshots** at desktop (1440px) and mobile (390px) viewports\n- Save to `docs/design-references/` with descriptive names\n- These are your master reference — builders will receive section-specific crops/screenshots later\n\n### Global Extraction\nExtract these from the page before doing anything else:\n\n**Fonts** — Inspect `<link>` tags for Google Fonts or self-hosted fonts. Check computed `font-family` on key elements (headings, body, code, labels). Document every family, weight, and style actually used. Configure them in `src/app/layout.tsx` using `next/font/google` or `next/font/local`.\n\n**Colors** — Extract the site's color palette from computed styles across the page. Update `src/app/globals.css` with the target's actual colors in the `:root` and `.dark` CSS variable blocks. Map them to shadcn's token names (background, foreground, primary, muted, etc.) where they fit. Add custom properties for colors that don't map to shadcn tokens.\n\n**Favicons & Meta** — Download favicons, apple-touch-icons, OG images, webmanifest to `public/seo/`. Update `layout.tsx` metadata.\n\n**Global UI patterns** — Identify any site-wide CSS or JS: custom scrollbar hiding, scroll-snap on the page container, global keyframe animations, backdrop filters, gradients used as overlays, **smooth scroll libraries** (Lenis, Locomotive Scroll — check for `.lenis`, `.locomotive-scroll`, or custom scroll container classes). Add these to `globals.css` and note any libraries that need to be installed.\n\n### Mandatory Interaction Sweep\n\nThis 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.\n\n**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:\n- Does the header change appearance? Record the scroll position where it triggers.\n- Do elements animate into view? Record which ones and the animation type.\n- Does a sidebar or tab indicator auto-switch as you scroll? Record the mechanism.\n- Are there scroll-snap points? Record which containers.\n- Is there a smooth scroll library active? Check for non-native scroll behavior.\n\n**Click sweep:** Click every element that looks interactive:\n- Every button, tab, pill, link, card\n- Record what happens: does content change? Does a modal open? Does a dropdown appear?\n- For tabs/pills: click EACH ONE and record the content that appears for each state\n\n**Hover sweep:** Hover over every element that might have hover states:\n- Buttons, cards, links, images, nav items\n- Record what changes: color, scale, shadow, underline, opacity\n\n**Responsive sweep:** Test at 3 viewport widths via **Chrome MCP**:\n- Desktop: 1440px\n- Tablet: 768px\n- Mobile: 390px\n- At each width, note which sections change layout (column → stack, sidebar disappears, etc.) and at approximately which breakpoint the change occurs.\n\nSave all findings to `docs/research/BEHAVIORS.md`. This is your behavior bible — reference it when writing every component spec.\n\n### Motion & animation — Chrome MCP numeric audit (mandatory)\n\nAfter 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.\n\n```javascript\n// Motion audit — run via Chrome MCP evaluate_script on the target URL\n(function motionAudit() {\n  const props = [\n    'animation', 'animationName', 'animationDuration', 'animationDelay',\n    'animationTimingFunction', 'animationIterationCount', 'animationDirection',\n    'animationFillMode', 'animationPlayState', 'animationTimeline',\n    'transition', 'transitionProperty', 'transitionDuration',\n    'transitionTimingFunction', 'transitionDelay',\n    'transform', 'willChange'\n  ];\n  const animated = [...document.querySelectorAll('*')].filter((el) => {\n    const cs = getComputedStyle(el);\n    return (\n      (cs.animationName && cs.animationName !== 'none') ||\n      (cs.transitionProperty && cs.transitionProperty !== 'none' && cs.transitionProperty !== 'all')\n    );\n  });\n  const label = (el) => {\n    const tag = el.tagName.toLowerCase();\n    const id = el.id ? '#' + el.id : '';\n    const cls = el.className && typeof el.className === 'string'\n      ? '.' + el.className.trim().split(/\\s+/).filter(Boolean).slice(0, 4).join('.')\n      : '';\n    return tag + id + cls;\n  };\n  const samples = animated.slice(0, 100).map((el) => {\n    const cs = getComputedStyle(el);\n    const row = { path: label(el) };\n    props.forEach((p) => { row[p] = cs[p]; });\n    try {\n      row.webAnimations = el.getAnimations({ subtree: false }).map((a) => {\n        const t = a.effect && typeof a.effect.getTiming === 'function' ? a.effect.getTiming() : null;\n        return { playState: a.playState, currentTime: a.currentTime, timing: t };\n      });\n    } catch (e) {\n      row.webAnimationsError = String(e);\n    }\n    return row;\n  });\n  let keyframes = [];\n  try {\n    [...document.styleSheets].forEach((sheet, i) => {\n      let rules;\n      try { rules = sheet.cssRules; } catch { return; }\n      if (!rules) return;\n      [...rules].forEach((rule) => {\n        if (rule.type === CSSRule.KEYFRAMES_RULE) {\n          keyframes.push({ sheetIndex: i, name: rule.name, cssText: rule.cssText });\n        }\n      });\n    });\n  } catch (e) {\n    keyframes = [{ error: String(e), hint: 'Cross-origin stylesheets block cssRules — copy @keyframes from DevTools or fetched CSS.' }];\n  }\n  return JSON.stringify({\n    url: location.href,\n    prefersReducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,\n    animatedElementCount: animated.length,\n    sampledElements: samples.length,\n    samples,\n    keyframesRules: keyframes\n  }, null, 2);\n})();\n```\n\n**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.\n\n### Page Topology\nMap out every distinct section of the page from top to bottom. Give each a working name. Document:\n- Their visual order\n- Which are fixed/sticky overlays vs. flow content\n- The overall page layout (scroll container, column structure, z-index layers)\n- Dependencies between sections (e.g., a floating nav that overlays everything)\n- **The interaction model** of each section (static, click-driven, scroll-driven, time-driven)\n\nSave this as `docs/research/PAGE_TOPOLOGY.md` — it becomes your assembly blueprint.\n\n## Phase 2: Foundation Build\n\nThis is sequential. Do it yourself (not delegated to an agent) since it touches many files:\n\n1. **Update fonts** in `layout.tsx` to match the target site's actual fonts\n2. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body). Lift `@keyframes` blocks **verbatim** from `motion-summary.json` (or the network CSS files in the inspection dump) into `globals.css` — keep their names so utility classes can reference them, or rename them under semantic names and update references.\n3. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed\n4. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as **semantically named** React components in `src/components/icons.tsx` (`SearchIcon`, `ChevronRightIcon`, `WordmarkLogo`, `MenuIcon`, …). Lift `viewBox` and path data verbatim; do not substitute Lucide unless documented.\n5. **Download structural / permission-neutral assets** — write and run a Node.js script (`scripts/download-assets.mjs`) that downloads textures, gradients, video posters, and other neutral binaries to `public/`. **Do not** download brand-photography or competitor mascot art for narrative slots — those are authored originals per Brand identity.\n6. **(Optional) Mirror snapshot assets** — if the reference uses root-relative `/_next/...` (or similar) paths and you want offline preview to match (e.g. for `/snapshot` or for diff screenshots without the live site), run:\n\n   ```bash\n   npm run mirror:snapshot-assets\n   ```\n\n   This copies `_next/`, `assets/`, fonts, etc. from the latest `docs/research/<host>/page-inspection/<stamp>/` capture (using `LAUNCHFRAME_SOURCE_URL` as the base) into `public/`. **Mirrored bundles are runtime fixtures, never the code humans edit.** They do not replace your hand-authored `src/components/**` rebuild — they only let pages that reference `/_next/...` paths resolve locally.\n7. Verify: `npm run build` passes\n\n### Asset Discovery Script Pattern\n\nUse browser MCP to enumerate all assets on the page:\n\n```javascript\n// Run this via browser MCP to discover all assets\nJSON.stringify({\n  images: [...document.querySelectorAll('img')].map(img => ({\n    src: img.src || img.currentSrc,\n    alt: img.alt,\n    width: img.naturalWidth,\n    height: img.naturalHeight,\n    // Include parent info to detect layered compositions\n    parentClasses: img.parentElement?.className,\n    siblings: img.parentElement ? [...img.parentElement.querySelectorAll('img')].length : 0,\n    position: getComputedStyle(img).position,\n    zIndex: getComputedStyle(img).zIndex\n  })),\n  videos: [...document.querySelectorAll('video')].map(v => ({\n    src: v.src || v.querySelector('source')?.src,\n    poster: v.poster,\n    autoplay: v.autoplay,\n    loop: v.loop,\n    muted: v.muted\n  })),\n  backgroundImages: [...document.querySelectorAll('*')].filter(el => {\n    const bg = getComputedStyle(el).backgroundImage;\n    return bg && bg !== 'none';\n  }).map(el => ({\n    url: getComputedStyle(el).backgroundImage,\n    element: el.tagName + '.' + el.className?.split(' ')[0]\n  })),\n  svgCount: document.querySelectorAll('svg').length,\n  fonts: [...new Set([...document.querySelectorAll('*')].slice(0, 200).map(el => getComputedStyle(el).fontFamily))],\n  favicons: [...document.querySelectorAll('link[rel*=\"icon\"]')].map(l => ({ href: l.href, sizes: l.sizes?.toString() }))\n});\n```\n\nThen write a download script that fetches everything to `public/`. Use batched parallel downloads (4 at a time) with proper error handling.\n\n## Phase 3: Component Specification & Dispatch\n\nThis is the core loop. For each section in your page topology (top to bottom), you do THREE things: **extract**, **write the spec file**, then **dispatch builders**.\n\n### Step 1: Extract\n\nFor each section, use browser MCP to extract everything:\n\n1. **Screenshot** the section in isolation (scroll to it, screenshot the viewport). Save to `docs/design-references/`.\n\n2. **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:\n\n```javascript\n// Per-component extraction — run via browser MCP\n// Replace SELECTOR with the actual CSS selector for the component\n(function(selector) {\n  const el = document.querySelector(selector);\n  if (!el) return JSON.stringify({ error: 'Element not found: ' + selector });\n  const props = [\n    'fontSize','fontWeight','fontFamily','lineHeight','letterSpacing','color',\n    'textTransform','textDecoration','backgroundColor','background',\n    'padding','paddingTop','paddingRight','paddingBottom','paddingLeft',\n    'margin','marginTop','marginRight','marginBottom','marginLeft',\n    'width','height','maxWidth','minWidth','maxHeight','minHeight',\n    'display','flexDirection','justifyContent','alignItems','gap',\n    'gridTemplateColumns','gridTemplateRows',\n    'borderRadius','border','borderTop','borderBottom','borderLeft','borderRight',\n    'boxShadow','overflow','overflowX','overflowY',\n    'position','top','right','bottom','left','zIndex',\n    'opacity','transform','transition','cursor',\n    'objectFit','objectPosition','mixBlendMode','filter','backdropFilter',\n    'whiteSpace','textOverflow','WebkitLineClamp'\n  ];\n  function extractStyles(element) {\n    const cs = getComputedStyle(element);\n    const styles = {};\n    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; });\n    return styles;\n  }\n  function walk(element, depth) {\n    if (depth > 4) return null;\n    const children = [...element.children];\n    return {\n      tag: element.tagName.toLowerCase(),\n      classes: element.className?.toString().split(' ').slice(0, 5).join(' '),\n      text: element.childNodes.length === 1 && element.childNodes[0].nodeType === 3 ? element.textContent.trim().slice(0, 200) : null,\n      styles: extractStyles(element),\n      images: element.tagName === 'IMG' ? { src: element.src, alt: element.alt, naturalWidth: element.naturalWidth, naturalHeight: element.naturalHeight } : null,\n      childCount: children.length,\n      children: children.slice(0, 20).map(c => walk(c, depth + 1)).filter(Boolean)\n    };\n  }\n  return JSON.stringify(walk(el, 0), null, 2);\n})('SELECTOR');\n```\n\n3. **Extract multi-state styles** — for any element with multiple states (scroll-triggered, hover, active tab), capture BOTH states:\n\n```javascript\n// State A: capture styles at current state (e.g., scroll position 0)\n// Then trigger the state change (scroll, click, hover via browser MCP)\n// State B: re-run the extraction script on the same element\n// The diff between A and B IS the behavior specification\n```\n\nRecord the diff explicitly: \"Property X changes from VALUE_A to VALUE_B, triggered by TRIGGER, with transition: TRANSITION_CSS.\"\n\n4. **Extract real content** — all text, alt attributes, aria labels, placeholder text. Use `element.textContent` for each text node. For tabbed/stateful content, **click each tab and extract content per state**.\n\n5. **Identify assets** this section uses — which downloaded images/videos from `public/`, which icon components from `icons.tsx`. Check for **layered images** (multiple `<img>` or background-images stacked in the same container).\n\n6. **Assess complexity** — how many distinct sub-components does this section contain? A distinct sub-component is an element with its own unique styling, structure, and behavior (e.g., a card, a nav item, a search panel).\n\n### Step 2: Write the Component Spec File\n\nFor each section (or sub-component, if you're breaking it up), create a spec file in `docs/research/components/`. This is NOT optional — every builder must have a corresponding spec file.\n\n**File path:** `docs/research/components/<component-name>.spec.md`\n\n**Template:**\n\n```markdown\n# <ComponentName> Specification\n\n## Overview\n- **Semantic component name:** `<ComponentName>` (PascalCase, role-based — e.g. `SiteHeader`, `Hero`, `FeatureGrid`, `PricingTier`)\n- **Target file:** `src/components/<ComponentName>.tsx`\n- **Screenshot:** `docs/design-references/<screenshot-name>.png`\n- **Interaction model:** <static | click-driven | scroll-driven | time-driven>\n- **Reference selector(s):** <CSS selectors used during extraction — for traceability only, NOT for pasting into JSX>\n\n## Rebuild plan (semantic JSX outline)\n<Indented bullet tree of the **rebuilt** structure using semantic tags + role-named children. Example:\n\n- `<header>` (sticky on scroll past 50px)\n  - `<div>` brand row\n    - `<WordmarkLogo />`\n    - `<nav>` primary links (`<NavLink>` × N)\n  - `<div>` actions\n    - `<Button variant=\"ghost\">Sign in</Button>`\n    - `<Button>Get started</Button>`\n\nThis is the structure builders implement — NOT a transcription of the reference's hashed-class wrapper soup.>\n\n## Computed Styles (exact values from getComputedStyle)\n\n### Container\n- display: ...\n- padding: ...\n- maxWidth: ...\n- (every relevant property with exact values)\n\n### <Child element 1>\n- fontSize: ...\n- color: ...\n- (every relevant property)\n\n### <Child element N>\n...\n\n## States & Behaviors\n\n### <Behavior name, e.g., \"Scroll-triggered floating mode\">\n- **Trigger:** <exact mechanism — scroll position 50px, IntersectionObserver rootMargin \"-30% 0px\", click on .tab-button, hover>\n- **State A (before):** maxWidth: 100vw, boxShadow: none, borderRadius: 0\n- **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1), borderRadius: 16px\n- **Transition:** transition: all 0.3s ease\n- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | etc.>\n\n### Hover states\n- **<Element>:** <property>: <before> → <after>, transition: <value>\n\n## Per-State Content (if applicable)\n\n### State: \"Featured\"\n- Title: \"...\"\n- Subtitle: \"...\"\n- Cards: [{ title, description, image, link }, ...]\n\n### State: \"Productivity\"\n- Title: \"...\"\n- Cards: [...]\n\n## Assets\n- Background image: `public/images/<file>.webp`\n- Overlay image: `public/images/<file>.png`\n- Icons used: <ArrowIcon>, <SearchIcon> from icons.tsx\n\n## Text Content (verbatim)\n<All text content, copy-pasted from the live site>\n\n## Responsive Behavior\n- **Desktop (1440px):** <layout description>\n- **Tablet (768px):** <what changes — e.g., \"maintains 2-column, gap reduces to 16px\">\n- **Mobile (390px):** <what changes — e.g., \"stacks to single column, images full-width\">\n- **Breakpoint:** layout switches at ~<N>px\n\n## Implementation notes (clean-rebuild reminders)\n- Use semantic tags (`<header>`, `<nav>`, `<section>`, `<button>`, `<a>`).\n- Use Tailwind utilities for layout; use **arbitrary values** when measured numbers don't land on a default token.\n- **Do not** paste reference class names like `module__a83f2`, `navigation-menu__item`, or any hashed/build-tool-generated string into JSX.\n- Pull repeating data (cards, links, tiers) into a typed array near the top of the component or in `src/lib/data/<name>.ts`; `.map()` over it.\n- Conditional classes go through `cn()` from `src/lib/utils.ts`.\n```\n\nFill every section. If a section doesn't apply (e.g., no states for a static footer), write \"N/A\" — but think twice before marking States & Behaviors as N/A. Even a footer might have hover states on links.\n\n### Step 3: Dispatch Builders\n\nBased on complexity, dispatch builder agent(s) in worktree(s):\n\n**Simple section** (1-2 sub-components): One builder agent gets the entire section.\n\n**Complex section** (3+ distinct sub-components): Break it up. One agent per sub-component, plus one agent for the section wrapper that imports them. Sub-component builders go first since the wrapper depends on them.\n\n**What every builder agent receives:**\n- The full contents of its component spec file (inline in the prompt — don't say \"go read the spec file\")\n- Path to the section screenshot in `docs/design-references/`\n- Which shared components to import (`icons.tsx`, `cn()`, shadcn primitives)\n- The **semantic** target file path (e.g., `src/components/Hero.tsx`, not `Section1.tsx`)\n- Instruction to verify with `npx tsc --noEmit` before finishing\n- For responsive behavior: the specific breakpoint values and what changes\n- **Explicit rebuild-clean rule** (paste verbatim into every builder prompt):\n\n  > **Write fresh React.** Read the spec to understand structure, content, tokens, and motion numbers. **Do not** paste hashed class names (`module__a83f2`, `navigation-menu__hash`), inline `style=\"...\"` strings, or minified DOM from `document.html` into JSX. Write semantic JSX (`<header>`, `<nav>`, `<section>`, `<button>`, `<a>` …), Tailwind utilities (with arbitrary values where measured numbers demand it), and shadcn primitives. Pull repeating data into typed arrays. Use `cn()` for conditional classes. The result must be readable to a future human or agent without consulting the reference site.\n\n**Don't wait.** As soon as you've dispatched the builder(s) for one section, move to extracting the next section. Builders work in parallel in their worktrees while you continue extraction.\n\n### Step 4: Merge\n\nAs builder agents complete their work:\n- Merge their worktree branches into main\n- You have full context on what each agent built, so resolve any conflicts intelligently\n- After each merge, verify the build still passes: `npm run build`\n- If a merge introduces type errors, fix them immediately\n\nThe extract → spec → dispatch → merge cycle continues until all sections are built.\n\n## Phase 4: Page Assembly\n\nAfter all sections are built and merged, wire everything together in `src/app/page.tsx`:\n\n- Import all section components\n- Implement the page-level layout from your topology doc (scroll containers, column structures, sticky positioning, z-index layering)\n- Connect real content to component props\n- Implement page-level behaviors: scroll snap, scroll-driven animations, dark-to-light transitions, intersection observers, smooth scroll (Lenis etc.)\n- Verify: `npm run build` passes clean\n\n## Phase 5: Visual QA Diff\n\nAfter assembly, do NOT declare the clone complete. Take side-by-side comparison screenshots:\n\n1. 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\n2. Compare section by section, top to bottom, at desktop (1440px)\n3. Compare again at mobile (390px)\n4. For each discrepancy found:\n   - **Tolerances:** ±2px on layout dimensions, ±20ms on motion durations, easing curves equivalent. Larger gaps are bugs.\n   - Check the component spec file — was the value extracted correctly?\n   - If the spec was wrong: re-extract from browser MCP, update the spec, fix the component\n   - If the spec was right but the builder got it wrong: fix the component to match the spec\n5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements\n6. **Motion QA:** Re-run the **motion audit script** (or per-element `getAnimations`) on the reference and spot-check the clone in devtools — durations within **±20ms**, easing curves equivalent, scroll/intersection thresholds preserved. Re-scroll hero and sticky headers; carousels and scroll-driven sections must trigger at the same thresholds documented in `BEHAVIORS.md`.\n7. **Codebase clarity sanity check:** open 2–3 random components under `src/components/` and confirm they read like normal hand-authored React (semantic tags, Tailwind utilities, no hashed class strings, no pasted minified markup). If a builder shipped DOM-soup, send it back.\n\nOnly after this visual QA pass is the clone ready for **Phase 6 verification**. Immediately **confirm `docs/research/LAUNCHFRAME_SUBAGENTS.md`** contains four self-contained **`## Prompt — Pass N`** sections matching the Phase 6 rubrics; update that file whenever you change rubric wording locally.\n\n## Phase 6: Verification passes (mandatory)\n\nForeman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.\n\n### How to run them (hosts differ)\n\n| Host capability | What you must do |\n|-----------------|------------------|\n| **Parallel agents / Task / subagents** | Open **`docs/research/LAUNCHFRAME_SUBAGENTS.md`**. Dispatch **four** separate runs — each agent receives **exactly one** complete `## Prompt — Pass …` section copied **verbatim from that Markdown file**. Prefer **`explore`/readonly**. Do **not** paraphrase the rubric from chat memory. Claude Code-style teams: follow **`AGENTS.md`** — isolated **worktrees/branches per checker**, then merge after triage. |\n| **Single agent / no spawning** | Open the same Markdown file and **execute prompts 1 → 4 yourself** in order, appending **`docs/research/LAUNCHFRAME_VERIFICATION.md`** after each (`### Pass N`, findings, **`VERDICT: PASS`** or **`FAIL`**) per that file's **Output contract**. |\n\n**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.\n\n**Minimum four verification passes** (four subagents **or** four self-executed steps — prompts sourced from **`LAUNCHFRAME_SUBAGENTS.md`;** the authoritative rubric text below must stay mirrored there):\n\n1. **Raster media & icons** — **Narrative slots:** inventory every reference marketing/lifestyle/card/hero image role from specs vs **committed files** (`public/images/...`) actually referenced in JSX; **`FAIL`** if the reference showed a photo/panel thumbnail and this clone relies on placeholders or bare gradients. Then list every raster/video poster and **every authored SVG/component used as an icon** from `src/`. Confirm **files exist** under `public/` with **correct paths**; compare presentation to specs: `picture`/`source` behavior or documented `next/image` mapping, `sizes` / responsive behavior, `object-fit` / `object-position`, dimensions/aspect-ratio, parent overflow and radius, `background-image` and pseudo-elements. For SVGs/icons: `viewBox`, strokes/fills/`currentColor`, and sprite usage must match specs and live under **semantic component names** in `src/components/icons.tsx` — reject opportunistic Lucide substitutions unless the spec explicitly allowed them.\n2. **Semantic structure & code clarity** — Diff `PAGE_TOPOLOGY.md` + component specs against the React tree for **section order**, **scroll/sticky containers**, and **z-index stacking**. Confirm `src/components/` files use **semantic component names** (`SiteHeader`, `Hero`, `FeatureGrid`, …), semantic HTML, and Tailwind utilities. **`FAIL`** if any source file contains hashed class names (`module__a83f2`, `__hash`, `navigation-menu-module`), pasted minified DOM, or inline `style=\"...\"` strings copied from `document.html`. Wrapper-count drift is fine **as long as computed layout, scroll, and stacking match** at 1440 / 768 / 390.\n3. **Visual & CSS parity (within tolerance)** — Take side-by-side screenshots of the clone vs the reference at **1440 / 768 / 390**. Spot-check hero, nav, first fold, footer (plus any spec-flagged risky section): layout dimensions within **±2px**, colors/typography exact, tokens present in `globals.css`, arbitrary Tailwind values matching measured px. Run `npm run lint` and `npm run typecheck`; failures = **`FAIL`** until green.\n4. **Motion & interaction** — Re-walk `docs/research/BEHAVIORS.md` and motion-audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Confirm durations/easings match within **±20ms** / equivalent curves, `@keyframes` ported into `globals.css`, scroll-trigger thresholds preserved. Phase 5 motion QA must be **confirmed**, not assumed.\n\nEach pass (whether another agent or you) 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**). **First rubric checklist includes:** confirm every narrative image slot has on-disk raster files wired in JSX — **`FAIL`** if any slot is placeholder-only while the reference showed imagery. **Do not** declare Launchframe complete until all four passes **`PASS`** or gaps are accepted by the user context.\n\n## Pre-Dispatch Checklist\n\nBefore dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.\n\n- [ ] **Semantic component name** chosen (`SiteHeader`, `Hero`, `FeatureGrid`, …) — not `Section1` or a transliteration of a hashed CSS-module name\n- [ ] **Rebuild plan (semantic JSX outline)** included in the spec — drawn from the reference's hierarchy but written in clean tags, NOT pasted DOM\n- [ ] **Authored narrative rasters planned:** list each marketing/lifestyle/card image slot vs **planned `public/images/...` path** (Brand identity originals). No section ships with “TODO image” once built\n- [ ] **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\n- [ ] **Icon/SVG snippets** inlined in spec where needed: dominant paths or sprite `id`s, `viewBox`, stroke/fill rules — enough that a builder does not guess Lucide substitutions, plus the **semantic component name** the icon will live under in `icons.tsx`\n- [ ] Spec file written to `docs/research/components/<name>.spec.md` with ALL sections filled\n- [ ] Every CSS value in the spec is from `getComputedStyle()`, not estimated; tolerances documented (±2px / ±20ms)\n- [ ] Interaction model is identified and documented (static / click / scroll / time)\n- [ ] For stateful components: every state's content and styles are captured\n- [ ] For scroll-driven components: trigger threshold, before/after styles, and transition are recorded\n- [ ] For hover states: before/after values and transition timing are recorded\n- [ ] **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\n- [ ] Relevant `@keyframes` from the reference appear in `globals.css` or module CSS **verbatim** (or equivalent WAAPI) — not hand-waved\n- [ ] Elements that move via **Web Animations API** have timing cross-checked with `getAnimations` output from Chrome MCP\n- [ ] All images in the section are identified (including overlays and layered compositions)\n- [ ] Responsive behavior is documented for at least desktop and mobile\n- [ ] Text content is verbatim from the site (or overlaid with the SaaS idea per Phase 4), not paraphrased into nonsense\n- [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split\n- [ ] **Rebuild-clean rule** is included verbatim in the builder prompt (no hashed class strings, no pasted minified DOM)\n\n## What NOT to Do\n\nThese are lessons from previous failed clones — each one cost hours of rework:\n\n- **Don't paste compiled DOM, hashed class names, or minified bundle output as the implementation.** `document.html`, `body-outer.html`, and `ai-page-bundle.txt` are reference material. Class strings like `navigation-menu-module__a83f2`, inline `style=\"--var:...\"`-laden divs, and `__hash__` suffixes copied from those files must NOT survive into `src/`. If you used a transient html-to-jsx pass to lift content blocks, rewrite the result into clean React with semantic tags and Tailwind utilities before merging.\n- **Don't ship `Section1.tsx` / `Block2.tsx`.** Component file and export names must read like the role they play (`Hero`, `PricingTable`, `TestimonialsCarousel`). A future agent should not have to guess.\n- **Don't hand a builder a bare `document.html` excerpt as the spec.** Every builder gets the structured spec from `docs/research/components/<name>.spec.md` — including the semantic JSX outline and the rebuild-clean rule. Pasted minified HTML is not a spec.\n- **Don't build click-based tabs when the original is scroll-driven (or vice versa).** Determine the interaction model FIRST by scrolling before clicking. This is the #1 most expensive mistake — it requires a complete rewrite, not a CSS fix.\n- **Don't extract only the default state.** If there are tabs showing \"Featured\" on load, click Productivity, Creative, Lifestyle and extract each one's cards/content. If the header changes on scroll, capture styles at position 0 AND position 100+.\n- **Don't miss overlay/layered images.** A background watercolor + foreground UI mockup = 2 images. Check every container's DOM tree for multiple `<img>` elements and positioned overlays.\n- **Don't build mockup components for content that's actually videos/animations.** Check if a section uses `<video>`, Lottie, or canvas before building elaborate HTML mockups of what the video shows.\n- **Don't approximate CSS classes.** \"It looks like `text-lg`\" is wrong if the computed value is `18px` and `text-lg` is `18px/28px` but the actual line-height is `24px`. Extract exact values, and reach for arbitrary values (`text-[18px] leading-[24px]`) when defaults don't land on the measurement.\n- **Don't import the reference's CSS modules / hashed class names.** If you find yourself wanting `import styles from \"./_navigation-menu-module__a83f2.module.css\"` and then `<div className={styles[\"root-3f9\"]}>` in JSX, stop — that's the wrong direction. Re-author the styles as Tailwind utilities (with arbitrary values) or, when truly needed, a small hand-authored `.module.css` with **meaningful** class names.\n- **Don't treat `npm run mirror:snapshot-assets` output as code.** Mirrored `public/_next/...` is a runtime fixture for offline preview. The hand-authored `src/components/**` files are the deliverable.\n- **Don't build everything in one monolithic commit.** The whole point of this pipeline is incremental progress with verified builds at each step.\n- **Don't reference docs from builder prompts.** Each builder gets the CSS spec inline in its prompt — never \"see DESIGN_TOKENS.md for colors.\" The builder should have zero need to read external docs.\n- **Don't skip asset extraction.** Without real images, videos, and fonts, the clone will always look fake regardless of how perfect the CSS is.\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\"\n- **Don't swap reference-specific SVG/UI icons for random Lucide** (or unrelated stock glyphs) unless the spec proves geometric equivalence — extract the DOM paths/sprites instead.\n- **Don't declare Launchframe finished without Phase 6.** Execute the four **`LAUNCHFRAME_SUBAGENTS.md`** prompts (via **Task**/subagents or yourself) and write **`LAUNCHFRAME_VERIFICATION.md`** with four **`PASS`**/**`FAIL`** verdicts — “subagents wouldn't start” is not an excuse to skip opening the Markdown runbook.\n- **Don't ship marketing image slots empty.** Narrative raster roles need real files under **`public/images/`** (or equivalent): no permanent gray boxes where the reference had photography.\n\n## Completion\n\nWhen done, report:\n- Total sections built\n- Total components created\n- Total spec files written (should match components)\n- Total assets downloaded (images, videos, SVGs, fonts)\n- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)\n- Build status (`npm run build` result)\n- Visual QA results (any remaining discrepancies)\n- **Phase 6 verification:** cite **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** (prompt source) **`docs/research/LAUNCHFRAME_VERIFICATION.md`** (results), summarize four passes with **PASS/FAIL** each; unresolved items under **Known gaps**\n- Any known gaps or limitations\n",
   "fileContext": [
     "AGENTS.md",
     "docs/research/**"

package/.amazonq/cli-agents/snapshot.json

@@ -1,7 +1,7 @@
 {
   "name": "snapshot",
   "description": "Verbatim page snapshot — run inspect:page, copy document.html to public/captured/, and show it on the home route via a full-viewport iframe (not a React rebuild).",
-  "prompt": "\n# Snapshot (`/snapshot`)\n\n**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).\n\nParse **the reference URL the user passed with /snapshot**:\n\n1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.\n\n## Step 1 — Persist the source URL\n\nUpdate **`src/lib/launchframe-config.ts`**:\n\n- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).\n\n## Step 2 — Capture (mandatory)\n\nFrom the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):\n\n1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.\n2. **Capture:**\n\n```bash\nnpm run inspect:page -- \"<URL>\" --scroll-full --wait-until networkidle --timeout 120000 --out-parent \"docs/research/<hostname>/page-inspection\"\n```\n\nThis creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.\n\nIf navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.\n\n## Step 3 — Verbatim copy to `public`\n\n1. Ensure **`public/captured/`** exists.\n2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).\n3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:\n\n   **`public/captured/<host-slug>-document.html`**\n\n   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).\n\nSame-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.\n\n## Step 4 — Home page iframe\n\nReplace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):\n\n```tsx\nexport default function Home() {\n  return (\n    <iframe\n      src=\"/captured/<host-slug>-document.html\"\n      title=\"Captured snapshot\"\n      className=\"fixed inset-0 h-dvh w-dvw border-0\"\n    />\n  );\n}\n```\n\nUse the same **`<host-slug>`** as in Step 3.\n\n## Step 5 — Verify\n\nRun **`npm run build`** and fix any errors.\n\n## What to tell the user\n\nAfter **`npm run dev`**:\n\n- **Iframe:** `http://localhost:3000/`\n- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`\n\n## What not to do\n\n- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).\n- Do **not** hand-rebuild the page in React for this command.\n- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.\n",
+  "prompt": "\n# Snapshot (`/snapshot`)\n\n**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).\n\nParse **the reference URL the user passed with /snapshot**:\n\n1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.\n\n## Step 1 — Persist the source URL\n\nUpdate **`src/lib/launchframe-config.ts`**:\n\n- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).\n\n## Step 2 — Capture (mandatory)\n\nFrom the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):\n\n1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.\n2. **Capture:**\n\n```bash\nnpm run inspect:page -- \"<URL>\" --scroll-full --wait-until networkidle --timeout 120000 --out-parent \"docs/research/<hostname>/page-inspection\"\n```\n\nThis creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.\n\nIf navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.\n\n## Step 3 — Verbatim copy to `public`\n\n1. Ensure **`public/captured/`** exists.\n2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).\n3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:\n\n   **`public/captured/<host-slug>-document.html`**\n\n   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).\n\nSame-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.\n\n## Step 4 — Home page iframe\n\nReplace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):\n\n```tsx\nexport default function Home() {\n  return (\n    <iframe\n      src=\"/captured/<host-slug>-document.html\"\n      title=\"Captured snapshot\"\n      className=\"fixed inset-0 h-dvh w-dvw border-0\"\n    />\n  );\n}\n```\n\nUse the same **`<host-slug>`** as in Step 3.\n\n## Step 5 — Verify\n\nRun **`npm run build`** and fix any errors.\n\n## Optional — mirror root-relative assets for offline preview\n\nIf the captured `document.html` references root-relative paths like **`/_next/...`**, **`/assets/...`**, or **`/static/...`**, those will 404 in the iframe because they resolve against `localhost:3000`, not the live site. To make the iframe self-contained, run:\n\n```bash\nnpm run mirror:snapshot-assets\n```\n\nThis downloads referenced root-relative assets from **`LAUNCHFRAME_SOURCE_URL`** into `public/_next/`, `public/assets/`, etc., so the iframe can render fully offline. The mirrored bundles are runtime fixtures — they are **not** code you edit, and `/launchframe` does not use them as the implementation source. Skip this step if the iframe already renders correctly (the page may be fully self-contained, or the live origin may be reachable from the browser without needing local mirrors).\n\n## What to tell the user\n\nAfter **`npm run dev`**:\n\n- **Iframe:** `http://localhost:3000/`\n- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`\n\n## What not to do\n\n- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).\n- Do **not** hand-rebuild the page in React for this command.\n- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.\n",
   "fileContext": [
     "AGENTS.md",
     "docs/research/**"

package/.amazonq/rules/project.md

@@ -10,13 +10,13 @@ This version has breaking changes — APIs, conventions, and file structure may
 # Website Reverse-Engineer Template
 
 ## What This Is
-A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — use **`/launchframe <url> "saas idea"`** for the full pixel-perfect clone plus SaaS landing copy (`src/lib/launchframe-config.ts`, `launchframe.context.json`, `docs/research/LAUNCHFRAME.md`). The agent executing **`/launchframe`** must follow **Step 0a** in that command: run **`npm run inspect:page`** once per reference URL (Playwright: `document.html`, network CSS, `motion-summary.json`) before Phase 1. For a **new empty folder** only, **`npx launchframe@latest`** unpacks this template; then run **`/launchframe`** in that project with your URL and pitch.
+A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — use **`/launchframe <url> "saas idea"`** to **decompile** a reference URL into hand-authored Next.js components that are **visually equivalent** (within measured tolerances) plus your SaaS landing copy. The output is a normal, human-editable codebase: clear file names (`SiteHeader.tsx`, `Hero.tsx`, `FeatureGrid.tsx`, …), readable Tailwind v4 JSX, motion ported as explicit `@keyframes` and durations — **not** preserved compiled DOM or hashed CSS-module class strings. Inspection artifacts (`docs/research/<host>/page-inspection/<stamp>/`) are reference material, not code. State-tracking files: `src/lib/launchframe-config.ts`, `launchframe.context.json`, `docs/research/LAUNCHFRAME.md`. The agent executing **`/launchframe`** must follow **Step 0a** in that command: run **`npm run inspect:page`** once per reference URL (Playwright: `document.html`, network CSS, `motion-summary.json`) before Phase 1. Use **`/snapshot <url>`** for a **verbatim** local copy: Playwright capture → `public/captured/<host>-document.html` → full-viewport iframe on **`src/app/page.tsx`** (not a React rebuild). For a **new empty folder** only, **`npx launchframe@latest`** unpacks this template; then run **`/launchframe`** in that project with your URL and pitch.
 
 ## Tech Stack
 - **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
 - **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
-- **Icons:** Lucide ships as a default only — **`/launchframe` clones must lift reference SVG sprites/paths/masks first** so UI icons match the source; Lucide fills gaps only where documented equivalent
-- **Styling:** Tailwind CSS v4 with oklch design tokens
+- **Icons:** Lucide ships as a default only — **`/launchframe` clones must lift reference SVG geometry into `src/components/icons.tsx` under semantic component names** (`SearchIcon`, `WordmarkLogo`, …); Lucide fills gaps only where documented equivalent
+- **Styling:** Tailwind CSS v4 with oklch design tokens; arbitrary values (`max-w-[872px]`, `gap-[18px]`) where measured numbers don't land on a default token; tokens in `globals.css`
 - **Deployment:** Vercel
 
 ## Commands
@@ -25,6 +25,8 @@ A reusable template for reverse-engineering any website into a clean, modern Nex
 - `npm run lint` — ESLint check
 - `npm run typecheck` — TypeScript check
 - `npm run check` — Run lint + typecheck + build
+- `npm run inspect:page -- "<url>" --scroll-full` — Playwright capture (HTML, CSS, motion summary) used as **reference** by `/launchframe`
+- `npm run mirror:snapshot-assets` — Optional: copy root-relative `/_next/...` (and similar) assets from the latest inspection capture into `public/` so offline preview / `/snapshot` iframes resolve. Mirrored bundles are runtime fixtures, **not** code humans edit.
 
 ## Code Style
 - TypeScript strict mode, no `any`
@@ -34,11 +36,12 @@ A reusable template for reverse-engineering any website into a clean, modern Nex
 - Responsive: mobile-first
 
 ## Design Principles
-- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
-- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later
+- **Visually equivalent within measured tolerances** — colors and typography exact; layout dimensions within ±2px at 1440 / 768 / 390; motion durations within ±20ms with equivalent easing curves. **Not** byte-equal compiled-DOM cloning of the reference's bundle.
+- **Codebase clarity is a first-class deliverable** — components named for the role they play (`SiteHeader`, `Hero`, `FeatureGrid`, `PricingTable`, `SiteFooter`, …); JSX written by hand with semantic Tailwind utilities; tokens in `globals.css`. **No** hashed class names (`module__a83f2`), no inline `style="..."` strings copied from `document.html`, no minified DOM pasted from the reference's compiled bundle. A future human or AI agent should be able to read and edit any file under `src/` without consulting the reference site.
+- **No personal aesthetic changes during emulation phase** — match the reference 1:1 (within tolerance) first, customize later
 - **Real content** — use actual text and assets from the target site where they are interchangeable chrome; **`/launchframe`** overlays your SaaS pitch on headings and CTAs. **Marketing photographs and illustrative hero/feature imagery are not photocopied**: you **must** ship **committed files** under `public/images/` (etc.) for every such slot — **generate them yourself** with your host **image-generation** tool (prompts tied to the SaaS idea), wire into components, supplement with UI mock composites only if helpful. Blank placeholders count as unfinished. Record paths in `docs/research/LAUNCHFRAME.md`
-- **Beauty-first** — every pixel matters
-- **Inspection workflow (canonical)** — Follow the ordered **five steps** in `docs/research/INSPECTION_GUIDE.md`: (1) **Structure** — DOM as hierarchy reference, not pasted production HTML; (2) **Styles** — Computed/stylesheets and tokens; (3) **Motion** — `@keyframes`, transitions, timings, triggers; (4) **Assets** — rasters/SVGs with brand-safe originals for marketing slots when required; (5) **Implementation** — Next.js components rebuild. Within crawls (Chrome MCP / DevTools), still emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline, sprites, masks — **exact geometry**, not unrelated Lucide stand-ins), then **motion fidelity**. **Measure and mirror** from the DOM; scrape **permission-neutral** bytes when appropriate — **SVG and animation fidelity are not waived** when rasters are replaced
+- **Beauty-first** — visual fidelity matters; perceived polish comes from motion + raster + icon parity
+- **Inspection workflow (canonical)** — Follow the ordered **five steps** in `docs/research/INSPECTION_GUIDE.md`: (1) **Structure** — DOM as hierarchy reference, not pasted production HTML; (2) **Styles** — Computed/stylesheets and tokens; (3) **Motion** — `@keyframes`, transitions, timings, triggers; (4) **Assets** — rasters/SVGs with brand-safe originals for marketing slots when required; (5) **Implementation** — Next.js components rebuild (hand-authored, semantic, Tailwind). Within crawls (Chrome MCP / DevTools), still emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline, sprites, masks — **exact geometry** under semantic component names, not unrelated Lucide stand-ins), then **motion fidelity**. **Measure and rewrite** into clean React; scrape **permission-neutral** bytes when appropriate — **SVG and animation fidelity are not waived** when rasters are replaced
 
 ## Project Structure
 ```
@@ -166,10 +169,16 @@ Motion is rarely recoverable from HTML copy; it lives in **CSS animations/transi
 
 ## Step 5 — Implementation (Next.js + components)
 
-Rebuild deliberately in **this template’s stack** (Next.js App Router, React, TypeScript strict, shadcn/ui, Tailwind v4).
+Rebuild deliberately in **this template’s stack** (Next.js App Router, React, TypeScript strict, shadcn/ui, Tailwind v4). The deliverable is a **clean, hand-authored** codebase that is **visually equivalent within measured tolerances** — not a byte-equal copy of the reference's compiled bundle.
 
-- **Do:** Small composable components, shared tokens, `cn()`, extracted icons in `src/components/icons.tsx` (or adjacent), routes under `src/app/`.
-- **Don’t:** Ship one monolithic HTML string as the app or skip TypeScript/component boundaries.
+- **Do:** Small composable components named for their role (`SiteHeader.tsx`, `Hero.tsx`, `FeatureGrid.tsx`); shared tokens in `globals.css`; `cn()` for conditional classes; semantically named icons in `src/components/icons.tsx` (or adjacent); routes under `src/app/`. Use Tailwind utilities with arbitrary values (`max-w-[872px]`, `gap-[18px]`) when measurements don't land on default tokens.
+- **Don’t:** Paste compiled DOM, hashed CSS-module class names (`module__a83f2`), or minified inline `style="..."` strings from `document.html` into JSX. Don’t ship `Section1.tsx` or transliterations of bundle filenames. Don’t skip TypeScript/component boundaries.
+
+### Tolerances (default fidelity)
+
+- Layout dimensions within **±2px** at the documented breakpoints (1440 / 768 / 390).
+- Motion durations within **±20ms**; easing curves equivalent.
+- Colors and typography exact (extracted via `getComputedStyle`).
 
 ### Stack parity (helps choose libraries)
 
@@ -195,4 +204,4 @@ Navigation (top/side/bottom), cards, buttons, links, forms, modals, menus, tabs,
 
 ## Reference: Chrome MCP / agent crawl habits
 
-Walk the DOM and network **top-down**. When multiple agents collaborate, reconcile tokens and animation specs in shared research files so Step 5 does not drift. For **`/launchframe`**, tie findings to `launchframe.context.json` and `docs/research/LAUNCHFRAME.md` per project conventions.
+Walk the DOM and network **top-down**. When multiple agents collaborate, reconcile tokens and animation specs in shared research files so Step 5 does not drift. For **`/launchframe`**, tie findings to `launchframe.context.json` and `docs/research/LAUNCHFRAME.md` per project conventions.