launchframe 0.4.7 → 0.4.8

package/.github/skills/launchframe/SKILL.md

@@ -2,6 +2,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.
 argument-hint: '<url> "<saas-idea>"'
+argument-substitution: the reference URL(s) and SaaS idea the user passed with /launchframe
 user-invocable: true
 ---
 
@@ -12,7 +13,7 @@ user-invocable: true
 1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
 2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
 
-You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit images / DOM / CSS / motion, merge their findings, then QA. Not a shallow inspect-then-guess flow.
+You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit raster slots **and extracted SVG/icons** / DOM / CSS / **motion choreography**, merge their findings, then QA. Not a shallow inspect-then-guess flow.
 
 ## Step 0 — Persist Launchframe inputs
 
@@ -24,7 +25,7 @@ Before reconnaissance, write or update:
 
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
-After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or motion from extracted specs. **Brand identity** (below) must be **original** for anything you ship as the user’s product — never pass off the reference company’s trademarks or distinctive marks.
+After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or **motion 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.
 
 ---
 
@@ -32,11 +33,12 @@ After structure and styles match the reference, apply the **SaaS idea** to hero,
 
 The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's visible at each URL. Unless the user specifies otherwise, use these defaults:
 
-- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations, **image presentation**, **DOM structure**, and **authored CSS intent** (computed values must match after extraction)
+- **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)
 - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
 - **Customization:** Structure and visuals — pure emulation of the reference. **Marketing copy** — apply the parsed **SaaS idea** where hero/headlines/CTAs are interchangeable (see “SaaS copy overlay” above); do not invent a different product than the user’s idea.
-- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. Hero or lifestyle images that center the reference brand should be replaced with **original** imagery or neutral compositions that keep the **same layout rhythm**. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
+- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **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. 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.
+- **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.
 
 If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
 
@@ -59,9 +61,9 @@ When you traverse the DOM and the Network panel, do **not** treat all nodes equa
 1. **Images (raster + video stills) — HTML, files, and CSS together** — Enumeration is not enough: the clone must match **how** each asset is mounted and styled.
    - **Markup parity:** Preserve `<picture>` / `<source>` **order**, **`media` / `type`** attributes, and **`sizes`** where the reference uses them; preserve **`srcset`** descriptor patterns (w/x qualifiers) on `<img>` or **equivalent** `next/image` `sizes` + `srcSet` (document the mapping in the spec). Copy **`loading`**, **`decoding`**, **`fetchpriority`**, **`alt`**, **`role`/`aria-*`** when they affect layout or LCP. **`width` / `height`** (or intrinsic aspect + CSS `aspect-ratio`) must stop layout shift the same way as the reference; note **`width`/`height` attributes vs CSS** if both exist.
    - **Box + painting:** Extract and reproduce **`object-fit`**, **`object-position`**, **parent `overflow`**, **clipping `border-radius`**, **masks**, **`filter`**, and **`mix-blend-mode`** on the same stacking context as the live node. **`background-image`** on the element or **`::before` / `::after`** must use the **same** cover/contain behavior, **position**, **size**, **repeat**, and **attachment** (record pseudo-elements explicitly in the spec).
-   - **Files:** Download real bytes to `public/images/` (or videos/posters). **Provenance** in spec: URL hash or byte size so verifiers can confirm the correct asset. No “similar” stock swaps unless marked **substitute** per Scope Defaults.
-2. **SVGs & iconography** — Inline `<svg>`, sprite `symbol` defs, **SVG used as masks/filters**, icon fonts (prefer path extraction). Convert to `@/components/icons.tsx` (or section-local components) with meaningful names. Prioritize crisp edges and correct `viewBox` over shrinking bundle size during emulation.
-3. **Motion & animation (Chrome MCP)** — Treat this like color and spacing: **numeric fidelity**. In Chrome MCP, evaluate scripts against the live page to capture:
+   - **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.
+2. **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.
+3. **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:
    - Full **`animation`** shorthand plus **`animation-*` longhands** (`animation-name`, `-duration`, `-delay`, `-timing-function`, `-iteration-count`, `-direction`, `-fill-mode`, `-play-state`, **`animation-timeline`** / scroll timelines)
    - Full **`transition`** shorthand plus **`transition-*` longhands**, and **`transform`** / **`will-change`** as applied during and after motion
    - **Author `@keyframes`** — walk `document.styleSheets` / `cssRules` and copy `CSSKeyframesRule` bodies **where the browser exposes them** (same-origin stylesheets). For cross-origin CSS that throws on access, use DevTools **Sources** or fetch the CSS URL and paste the `@keyframes` into the spec — do not guess intermediate keyframe percentages
@@ -94,9 +96,7 @@ Look at each section and judge its complexity. A simple banner with a heading an
 
 ### 3. Real Content, Real Assets
 
-Extract the actual text, images, videos, and SVGs from the live site. This is a clone, not a mockup. Use `element.textContent`, download every `<img>` and `<video>`, extract inline `<svg>` elements as React components. The only time you generate content is when something is clearly server-generated and unique per session.
-
-**Prioritize** (see §0): downloadable imagery and backgrounds first, then SVG/icon layers, then motion. If you must **fabricate** an asset, prefer screenshot-based exports or traced vectors tied to measured box sizes — avoid unrelated stock art.
+Extract 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.
 
 **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.
 
@@ -554,7 +554,7 @@ Foreman self-review is insufficient — **dispatch independent checker agents**
 
 **Minimum four verification passes** (one subagent each, or one agent run sequentially if the host limits parallelism):
 
-1. **Images & media** — List every image/video poster referenced from `src/` (components, `app/`). Confirm **files exist** under `public/` with **correct paths**; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+1. **Raster media & icons** — List every image/video poster and **every authored SVG/component used as an icon** referenced from `src/` (components, `app/`). 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.
 2. **HTML / DOM structure** — Diff **PAGE_TOPOLOGY.md** + component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll must be **FAIL** until fixed.
 3. **CSS parity** — Spot-check **hero, nav, first fold, footer** (and any section flagged risky) against spec CSS: tokens in **`globals.css`**, arbitrary Tailwind vs measured px, **keyframes** presence. Run **`npm run lint`** and **`npm run typecheck`** inside the verification worktree; failures = **FAIL** until green.
 4. **Motion & interaction** — Re-walk **`docs/research/BEHAVIORS.md`** and motion audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Phase 5 motion QA must be **confirmed**, not assumed.
@@ -566,6 +566,7 @@ Each subagent returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`
 Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
 
 - [ ] **Image markup + styling** captured in spec: `picture`/`source`/`sizes`/`srcset` (or documented `next/image` mapping), `object-fit`/`object-position`, clipping parents, pseudo-element backgrounds if any
+- [ ] **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
 - [ ] **DOM outline** included for non-trivial sections (wrappers, order)
 - [ ] Spec file written to `docs/research/components/<name>.spec.md` with ALL sections filled
 - [ ] Every CSS value in the spec is from `getComputedStyle()`, not estimated
@@ -599,6 +600,7 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't forget smooth scroll libraries.** Check for Lenis (`.lenis` class), Locomotive Scroll, or similar. Default browser scrolling feels noticeably different and the user will spot it immediately.
 - **Don't collapse responsive image markup.** Dropping `<picture>` / `<source media="…">` or `sizes` so “one JPEG is enough” changes which URL loads and breaks fidelity — mirror the reference’s responsive strategy.
 - **Don't guess motion.** If `transition-duration` is 280ms with `cubic-bezier(0.4, 0, 0.2, 1)`, the clone must use those exact values from Chrome MCP — not "about 0.3s ease."
+- **Don't 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.
 - **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
 
 ## Completion
@@ -610,5 +612,5 @@ When done, report:
 - Total assets downloaded (images, videos, SVGs, fonts)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
-- **Subagent verification:** which audit passes ran (images / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
+- **Subagent verification:** which audit passes ran (raster + SVG icons / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
 - Any known gaps or limitations

package/.opencode/commands/launchframe.md

@@ -1,5 +1,5 @@
 ---
-description: "Reverse-engineer a reference URL into this repo + SaaS landing copy — /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."
 ---
 <!-- AUTO-GENERATED from .claude/skills/launchframe/SKILL.md — do not edit directly.
      Run `node scripts/sync-skills.mjs` to regenerate. -->
@@ -12,7 +12,7 @@ description: "Reverse-engineer a reference URL into this repo + SaaS landing cop
 1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
 2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
 
-You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit images / DOM / CSS / motion, merge their findings, then QA. Not a shallow inspect-then-guess flow.
+You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit raster slots **and extracted SVG/icons** / DOM / CSS / **motion choreography**, merge their findings, then QA. Not a shallow inspect-then-guess flow.
 
 ## Step 0 — Persist Launchframe inputs
 
@@ -24,7 +24,7 @@ Before reconnaissance, write or update:
 
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
-After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or motion from extracted specs. **Brand identity** (below) must be **original** for anything you ship as the user’s product — never pass off the reference company’s trademarks or distinctive marks.
+After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or **motion 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.
 
 ---
 
@@ -32,11 +32,12 @@ After structure and styles match the reference, apply the **SaaS idea** to hero,
 
 The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's visible at each URL. Unless the user specifies otherwise, use these defaults:
 
-- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations, **image presentation**, **DOM structure**, and **authored CSS intent** (computed values must match after extraction)
+- **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)
 - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
 - **Customization:** Structure and visuals — pure emulation of the reference. **Marketing copy** — apply the parsed **SaaS idea** where hero/headlines/CTAs are interchangeable (see “SaaS copy overlay” above); do not invent a different product than the user’s idea.
-- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. Hero or lifestyle images that center the reference brand should be replaced with **original** imagery or neutral compositions that keep the **same layout rhythm**. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
+- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **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. 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.
+- **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.
 
 If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
 
@@ -59,9 +60,9 @@ When you traverse the DOM and the Network panel, do **not** treat all nodes equa
 1. **Images (raster + video stills) — HTML, files, and CSS together** — Enumeration is not enough: the clone must match **how** each asset is mounted and styled.
    - **Markup parity:** Preserve `<picture>` / `<source>` **order**, **`media` / `type`** attributes, and **`sizes`** where the reference uses them; preserve **`srcset`** descriptor patterns (w/x qualifiers) on `<img>` or **equivalent** `next/image` `sizes` + `srcSet` (document the mapping in the spec). Copy **`loading`**, **`decoding`**, **`fetchpriority`**, **`alt`**, **`role`/`aria-*`** when they affect layout or LCP. **`width` / `height`** (or intrinsic aspect + CSS `aspect-ratio`) must stop layout shift the same way as the reference; note **`width`/`height` attributes vs CSS** if both exist.
    - **Box + painting:** Extract and reproduce **`object-fit`**, **`object-position`**, **parent `overflow`**, **clipping `border-radius`**, **masks**, **`filter`**, and **`mix-blend-mode`** on the same stacking context as the live node. **`background-image`** on the element or **`::before` / `::after`** must use the **same** cover/contain behavior, **position**, **size**, **repeat**, and **attachment** (record pseudo-elements explicitly in the spec).
-   - **Files:** Download real bytes to `public/images/` (or videos/posters). **Provenance** in spec: URL hash or byte size so verifiers can confirm the correct asset. No “similar” stock swaps unless marked **substitute** per Scope Defaults.
-2. **SVGs & iconography** — Inline `<svg>`, sprite `symbol` defs, **SVG used as masks/filters**, icon fonts (prefer path extraction). Convert to `@/components/icons.tsx` (or section-local components) with meaningful names. Prioritize crisp edges and correct `viewBox` over shrinking bundle size during emulation.
-3. **Motion & animation (Chrome MCP)** — Treat this like color and spacing: **numeric fidelity**. In Chrome MCP, evaluate scripts against the live page to capture:
+   - **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.
+2. **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.
+3. **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:
    - Full **`animation`** shorthand plus **`animation-*` longhands** (`animation-name`, `-duration`, `-delay`, `-timing-function`, `-iteration-count`, `-direction`, `-fill-mode`, `-play-state`, **`animation-timeline`** / scroll timelines)
    - Full **`transition`** shorthand plus **`transition-*` longhands**, and **`transform`** / **`will-change`** as applied during and after motion
    - **Author `@keyframes`** — walk `document.styleSheets` / `cssRules` and copy `CSSKeyframesRule` bodies **where the browser exposes them** (same-origin stylesheets). For cross-origin CSS that throws on access, use DevTools **Sources** or fetch the CSS URL and paste the `@keyframes` into the spec — do not guess intermediate keyframe percentages
@@ -94,9 +95,7 @@ Look at each section and judge its complexity. A simple banner with a heading an
 
 ### 3. Real Content, Real Assets
 
-Extract the actual text, images, videos, and SVGs from the live site. This is a clone, not a mockup. Use `element.textContent`, download every `<img>` and `<video>`, extract inline `<svg>` elements as React components. The only time you generate content is when something is clearly server-generated and unique per session.
-
-**Prioritize** (see §0): downloadable imagery and backgrounds first, then SVG/icon layers, then motion. If you must **fabricate** an asset, prefer screenshot-based exports or traced vectors tied to measured box sizes — avoid unrelated stock art.
+Extract 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.
 
 **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.
 
@@ -554,7 +553,7 @@ Foreman self-review is insufficient — **dispatch independent checker agents**
 
 **Minimum four verification passes** (one subagent each, or one agent run sequentially if the host limits parallelism):
 
-1. **Images & media** — List every image/video poster referenced from `src/` (components, `app/`). Confirm **files exist** under `public/` with **correct paths**; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+1. **Raster media & icons** — List every image/video poster and **every authored SVG/component used as an icon** referenced from `src/` (components, `app/`). 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.
 2. **HTML / DOM structure** — Diff **PAGE_TOPOLOGY.md** + component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll must be **FAIL** until fixed.
 3. **CSS parity** — Spot-check **hero, nav, first fold, footer** (and any section flagged risky) against spec CSS: tokens in **`globals.css`**, arbitrary Tailwind vs measured px, **keyframes** presence. Run **`npm run lint`** and **`npm run typecheck`** inside the verification worktree; failures = **FAIL** until green.
 4. **Motion & interaction** — Re-walk **`docs/research/BEHAVIORS.md`** and motion audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Phase 5 motion QA must be **confirmed**, not assumed.
@@ -566,6 +565,7 @@ Each subagent returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`
 Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
 
 - [ ] **Image markup + styling** captured in spec: `picture`/`source`/`sizes`/`srcset` (or documented `next/image` mapping), `object-fit`/`object-position`, clipping parents, pseudo-element backgrounds if any
+- [ ] **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
 - [ ] **DOM outline** included for non-trivial sections (wrappers, order)
 - [ ] Spec file written to `docs/research/components/<name>.spec.md` with ALL sections filled
 - [ ] Every CSS value in the spec is from `getComputedStyle()`, not estimated
@@ -599,6 +599,7 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't forget smooth scroll libraries.** Check for Lenis (`.lenis` class), Locomotive Scroll, or similar. Default browser scrolling feels noticeably different and the user will spot it immediately.
 - **Don't collapse responsive image markup.** Dropping `<picture>` / `<source media="…">` or `sizes` so “one JPEG is enough” changes which URL loads and breaks fidelity — mirror the reference’s responsive strategy.
 - **Don't guess motion.** If `transition-duration` is 280ms with `cubic-bezier(0.4, 0, 0.2, 1)`, the clone must use those exact values from Chrome MCP — not "about 0.3s ease."
+- **Don't 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.
 - **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
 
 ## Completion
@@ -610,5 +611,5 @@ When done, report:
 - Total assets downloaded (images, videos, SVGs, fonts)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
-- **Subagent verification:** which audit passes ran (images / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
+- **Subagent verification:** which audit passes ran (raster + SVG icons / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
 - Any known gaps or limitations

package/.windsurf/workflows/launchframe.md

@@ -9,7 +9,7 @@
 1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
 2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
 
-You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit images / DOM / CSS / motion, merge their findings, then QA. Not a shallow inspect-then-guess flow.
+You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit raster slots **and extracted SVG/icons** / DOM / CSS / **motion choreography**, merge their findings, then QA. Not a shallow inspect-then-guess flow.
 
 ## Step 0 — Persist Launchframe inputs
 
@@ -21,7 +21,7 @@ Before reconnaissance, write or update:
 
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
-After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or motion from extracted specs. **Brand identity** (below) must be **original** for anything you ship as the user’s product — never pass off the reference company’s trademarks or distinctive marks.
+After structure and styles match the reference, apply the **SaaS idea** to hero, headings, and primary CTAs where the reference uses interchangeable marketing copy, **without** changing layout grids, spacing, or **motion 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.
 
 ---
 
@@ -29,11 +29,12 @@ After structure and styles match the reference, apply the **SaaS idea** to hero,
 
 The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's visible at each URL. Unless the user specifies otherwise, use these defaults:
 
-- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations, **image presentation**, **DOM structure**, and **authored CSS intent** (computed values must match after extraction)
+- **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)
 - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
 - **Customization:** Structure and visuals — pure emulation of the reference. **Marketing copy** — apply the parsed **SaaS idea** where hero/headlines/CTAs are interchangeable (see “SaaS copy overlay” above); do not invent a different product than the user’s idea.
-- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. Hero or lifestyle images that center the reference brand should be replaced with **original** imagery or neutral compositions that keep the **same layout rhythm**. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
+- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **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. 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.
+- **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.
 
 If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
 
@@ -56,9 +57,9 @@ When you traverse the DOM and the Network panel, do **not** treat all nodes equa
 1. **Images (raster + video stills) — HTML, files, and CSS together** — Enumeration is not enough: the clone must match **how** each asset is mounted and styled.
    - **Markup parity:** Preserve `<picture>` / `<source>` **order**, **`media` / `type`** attributes, and **`sizes`** where the reference uses them; preserve **`srcset`** descriptor patterns (w/x qualifiers) on `<img>` or **equivalent** `next/image` `sizes` + `srcSet` (document the mapping in the spec). Copy **`loading`**, **`decoding`**, **`fetchpriority`**, **`alt`**, **`role`/`aria-*`** when they affect layout or LCP. **`width` / `height`** (or intrinsic aspect + CSS `aspect-ratio`) must stop layout shift the same way as the reference; note **`width`/`height` attributes vs CSS** if both exist.
    - **Box + painting:** Extract and reproduce **`object-fit`**, **`object-position`**, **parent `overflow`**, **clipping `border-radius`**, **masks**, **`filter`**, and **`mix-blend-mode`** on the same stacking context as the live node. **`background-image`** on the element or **`::before` / `::after`** must use the **same** cover/contain behavior, **position**, **size**, **repeat**, and **attachment** (record pseudo-elements explicitly in the spec).
-   - **Files:** Download real bytes to `public/images/` (or videos/posters). **Provenance** in spec: URL hash or byte size so verifiers can confirm the correct asset. No “similar” stock swaps unless marked **substitute** per Scope Defaults.
-2. **SVGs & iconography** — Inline `<svg>`, sprite `symbol` defs, **SVG used as masks/filters**, icon fonts (prefer path extraction). Convert to `@/components/icons.tsx` (or section-local components) with meaningful names. Prioritize crisp edges and correct `viewBox` over shrinking bundle size during emulation.
-3. **Motion & animation (Chrome MCP)** — Treat this like color and spacing: **numeric fidelity**. In Chrome MCP, evaluate scripts against the live page to capture:
+   - **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.
+2. **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.
+3. **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:
    - Full **`animation`** shorthand plus **`animation-*` longhands** (`animation-name`, `-duration`, `-delay`, `-timing-function`, `-iteration-count`, `-direction`, `-fill-mode`, `-play-state`, **`animation-timeline`** / scroll timelines)
    - Full **`transition`** shorthand plus **`transition-*` longhands**, and **`transform`** / **`will-change`** as applied during and after motion
    - **Author `@keyframes`** — walk `document.styleSheets` / `cssRules` and copy `CSSKeyframesRule` bodies **where the browser exposes them** (same-origin stylesheets). For cross-origin CSS that throws on access, use DevTools **Sources** or fetch the CSS URL and paste the `@keyframes` into the spec — do not guess intermediate keyframe percentages
@@ -91,9 +92,7 @@ Look at each section and judge its complexity. A simple banner with a heading an
 
 ### 3. Real Content, Real Assets
 
-Extract the actual text, images, videos, and SVGs from the live site. This is a clone, not a mockup. Use `element.textContent`, download every `<img>` and `<video>`, extract inline `<svg>` elements as React components. The only time you generate content is when something is clearly server-generated and unique per session.
-
-**Prioritize** (see §0): downloadable imagery and backgrounds first, then SVG/icon layers, then motion. If you must **fabricate** an asset, prefer screenshot-based exports or traced vectors tied to measured box sizes — avoid unrelated stock art.
+Extract 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.
 
 **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.
 
@@ -551,7 +550,7 @@ Foreman self-review is insufficient — **dispatch independent checker agents**
 
 **Minimum four verification passes** (one subagent each, or one agent run sequentially if the host limits parallelism):
 
-1. **Images & media** — List every image/video poster referenced from `src/` (components, `app/`). Confirm **files exist** under `public/` with **correct paths**; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+1. **Raster media & icons** — List every image/video poster and **every authored SVG/component used as an icon** referenced from `src/` (components, `app/`). 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.
 2. **HTML / DOM structure** — Diff **PAGE_TOPOLOGY.md** + component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll must be **FAIL** until fixed.
 3. **CSS parity** — Spot-check **hero, nav, first fold, footer** (and any section flagged risky) against spec CSS: tokens in **`globals.css`**, arbitrary Tailwind vs measured px, **keyframes** presence. Run **`npm run lint`** and **`npm run typecheck`** inside the verification worktree; failures = **FAIL** until green.
 4. **Motion & interaction** — Re-walk **`docs/research/BEHAVIORS.md`** and motion audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Phase 5 motion QA must be **confirmed**, not assumed.
@@ -563,6 +562,7 @@ Each subagent returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`
 Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
 
 - [ ] **Image markup + styling** captured in spec: `picture`/`source`/`sizes`/`srcset` (or documented `next/image` mapping), `object-fit`/`object-position`, clipping parents, pseudo-element backgrounds if any
+- [ ] **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
 - [ ] **DOM outline** included for non-trivial sections (wrappers, order)
 - [ ] Spec file written to `docs/research/components/<name>.spec.md` with ALL sections filled
 - [ ] Every CSS value in the spec is from `getComputedStyle()`, not estimated
@@ -596,6 +596,7 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't forget smooth scroll libraries.** Check for Lenis (`.lenis` class), Locomotive Scroll, or similar. Default browser scrolling feels noticeably different and the user will spot it immediately.
 - **Don't collapse responsive image markup.** Dropping `<picture>` / `<source media="…">` or `sizes` so “one JPEG is enough” changes which URL loads and breaks fidelity — mirror the reference’s responsive strategy.
 - **Don't guess motion.** If `transition-duration` is 280ms with `cubic-bezier(0.4, 0, 0.2, 1)`, the clone must use those exact values from Chrome MCP — not "about 0.3s ease."
+- **Don't 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.
 - **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
 
 ## Completion
@@ -607,5 +608,5 @@ When done, report:
 - Total assets downloaded (images, videos, SVGs, fonts)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
-- **Subagent verification:** which audit passes ran (images / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
+- **Subagent verification:** which audit passes ran (raster + SVG icons / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
 - Any known gaps or limitations

package/AGENTS.md

@@ -12,7 +12,7 @@ A reusable template for reverse-engineering any website into a clean, modern Nex
 ## Tech Stack
 - **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
 - **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
-- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)
+- **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
 - **Deployment:** Vercel
 
@@ -33,9 +33,9 @@ A reusable template for reverse-engineering any website into a clean, modern Nex
 ## 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
-- **Real content** — use actual text and assets from the target site, not placeholders
+- **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**: recreate each visual slot with **new images** scoped to **your product** (same framing, hierarchy, and aspect ratio — detail insets / secondary crops should echo the reference layout but show product-relevant subjects), and note originals vs substitutes in `docs/research/`
 - **Beauty-first** — every pixel matters
-- **DOM crawl priority** — when walking the target page, emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline icons, sprites, masks), then **motion** (keyframes, transitions, scroll/time-driven animation, libraries). Scrape and save real assets from the DOM/network first; **create** a stand-in image or vector only when fetch/blocking prevents extraction, and label substitutes clearly in research notes so the clone stays auditable
+- **DOM crawl priority** — when walking the target page, emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline icons, sprites, masks — **copy extracted geometry**, do not approximate with unrelated Lucide glyphs), then **motion** (**copy** `@keyframes`, `transition`/`animation` timings, scroll triggers, carousel staggers via Chrome MCP / CSS sources). **Measure and mirror** mounting and styling from the DOM; scrape **permission-neutral** bytes when appropriate. When a raster slot must be original for brand safety, **author** replacements and label them in research notes — **that never waives SVG or animation fidelity**
 
 ## Project Structure
 ```
@@ -61,6 +61,6 @@ scripts/            # Asset download scripts
 ## MOST IMPORTANT NOTES
 - When launching Claude Code agent teams, ALWAYS have each teammate work in their own worktree branch and merge everyone's work at the end, resolving any merge conflicts smartly since you are basically serving the orchestrator role and have full context to our goals, work given, work achieved, and desired outcomes.
 - After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
-- After editing `.claude/skills/launchframe/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the `/launchframe` command for all platforms.
+- After editing **any** `SKILL.md` under `.claude/skills/<skill-id>/`, run `node scripts/sync-skills.mjs` to regenerate that skill’s slash commands/workflows for **every supported platform** (discovered automatically).
 
 @docs/research/INSPECTION_GUIDE.md

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "launchframe",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "private": false,
   "description": "Scaffold a Next.js app from a reference URL plus your SaaS idea — AI-ready website cloning",
   "author": "JCodesMore",