launchframe 0.2.5 → 0.3.0

package/{template/.opencode → .opencode}/commands/clone-website.md

@@ -39,7 +39,7 @@ If the user provides additional instructions (specific fidelity level, deeper cu
 ## Pre-Flight
 
 1. **Read `launchframe.config.json`** (see Step 0 above). After a fresh `npx launchframe` scaffold, proceed immediately — only echo `url`/`idea` for confirmation if the config looks wrong or the user asked to verify.
-2. **Browser automation.** Prefer an MCP (Chrome DevTools MCP, Playwright MCP, Browserbase MCP, etc.) when it is healthy. **If MCP is missing or in an error state, run `npm run recon` (Playwright)** — see `scripts/recon-playwright.mjs`. It writes `docs/research/computed-snapshot.json`, `docs/research/MEDIA_MANIFEST.md`, and full-page screenshots under `docs/design-references/`. Use `npm run recon:headed` if headless hits a WAF/challenge page. One-time install: `npx playwright install chromium`. Do not skip extraction — adapt the pipeline to the tools that work.
+2. **Browser automation.** Prefer an MCP (Chrome DevTools MCP, Playwright MCP, Browserbase MCP, etc.) when it is healthy. **If MCP is missing or in an error state, run `npm run recon` (Playwright)** — see `scripts/recon-playwright.mjs`. It performs **stabilized full-document scrolling** at desktop and mobile, writes merged **`computed-snapshot.json`** + **`MEDIA_MANIFEST.md`**, and **full-page** screenshots under `docs/design-references/`. Use `npm run recon:headed` if headless hits a WAF/challenge page. One-time install: `npx playwright install chromium`. Do not skip extraction — adapt the pipeline to the tools that work.
 3. Validate the resolved URL(s). Normalize and verify each is accessible via your browser MCP tool. If any are invalid, ask the user to correct `launchframe.config.json` (or pass an override) before proceeding.
 4. 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 run `npm install` first.
 5. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. Plan `docs/research/MEDIA_MANIFEST.md` as soon as media is inventoried. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
@@ -55,7 +55,7 @@ These are the truths that separate a successful clone from a "close enough" mess
 
 **Motion defaults to Framer Motion.** This template lists `framer-motion` as a dependency. After foundation tokens, ensure `import { motion } from "framer-motion"` (and related APIs: `useScroll`, `useTransform`, `AnimatePresence`, `LayoutGroup`, **`useReducedMotion`**) for: scroll-triggered reveals, staggered children, layout transitions, and gestures — anything beyond a trivial one-property CSS `transition`. In each spec file, add a **Motion** subsection: trigger, duration, easing, delay/stagger, **tier A–E coverage** (see `AGENTS.md` production polish table), reduced-motion fallback, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
 
-**Illustration & pixel art are production inputs.** Where the target (or post-rebrand layout) lacks convincing visuals, specs MUST still allocate **SVG illustration layers** — hero backdrop cluster, section separators, feature-card scenes tied to copy — using React SVG components (`currentColor` + theme vars). Pixel-art motifs require an explicit palette table in the spec. Do not ship ambiguous gray placeholders when `AGENTS.md` calls for production density on authored landings.
+**Illustration & pixel art are production inputs.** Where the target (or post-rebrand layout) lacks convincing visuals, specs MUST allocate **idea-tailored SVG scenes** — metaphors drawn from `launchframe.config.json#idea`, documented with **Idea tie-in** per asset — not generic gray placeholders or unrelated clipart. Pixel-art motifs require concept justification plus palette table in the spec.
 
 ### 1. Completeness Beats Speed
 
@@ -142,10 +142,12 @@ Every builder agent must verify `npx tsc --noEmit` passes before finishing. Afte
 
 Navigate to the target URL with browser MCP.
 
-### Screenshots
-- Take **full-page screenshots** at desktop (1440px) and mobile (390px) viewports
-- Save to `docs/design-references/` with descriptive names
-- These are your master reference — builders will receive section-specific crops/screenshots later
+### Screenshots *(entire landing — never “above the fold” only)*
+- Capture the **whole marketing surface**: hero through footer (single-page landings). Do **not** stop after the first viewport — lazy-loaded sections, footer nav, and bottom CTAs are required context.
+- Before **every** full-page capture (MCP or Playwright): **slow scroll top → bottom → top** once or twice until `scrollHeight` stops growing, so lazy images/`srcset`/`data-src` resolve where possible.
+- Take **`fullPage: true`** (or MCP equivalent) screenshots at desktop (**1440px**) and mobile (**390px**); save under `docs/design-references/` with descriptive names.
+- **`npm run recon`** already performs stabilized full-document scrolling + merged desktop/mobile asset inventory — prefer running it when automation must match full-page depth reliably.
+- These masters are references — builders still get section crops later, but those crops must exist because **you** scrolled and documented every band first.
 
 ### Global Extraction
 Extract these from the page before doing anything else:
@@ -375,10 +377,12 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **Library:** <`framer-motion` | CSS-only — justify if CSS-only>
 - **Keyframes / springs:** <if any — match target curve>
 
-## Illustration & pixel art *(production uplift)*
+## Illustration & pixel art *(production uplift — idea-native)*
+- **Idea tie-in:** <one sentence — why this asset belongs only to this product>
+- **Metaphor link:** <which keyword from `idea` / metaphor list this illustrates>
 - **SVG components:** <named exports, paths using currentColor vs fixed fills>
 - **Pixel motif:** <palette hex table, grid, scaling — or N/A>
-- **Motif thread:** <how illustration echoes logo / OG / favicon>
+- **Motif thread:** <how this echoes logo / OG / favicon for this SaaS>
 
 ## Per-State Content (if applicable)
 
@@ -460,11 +464,7 @@ For every section, replace:
 3. **Feature/section copy** — rewrite each feature card, callout, stat, and testimonial to fit the SaaS idea. Preserve the count and shape of items (3 feature cards stay 3 feature cards; a 4-column logo bar stays 4 columns). Generate plausible customer-logo names — never use real company names you haven't been authorized to use.
 4. **CTA labels** — adapt button text to the SaaS idea ("Start free", "Get a demo", "Try it free", etc.). Keep the CTA hierarchy (primary/secondary) identical to the original.
 5. **Mock data** — for product UI mockups embedded in marketing screenshots (e.g., a fake dashboard inside a hero), generate mock data shaped for the SaaS idea: realistic-looking but fictional rows, charts, conversation logs, etc.
-6. **Imagery** — placeholder-swap any photography or product screenshots that depict the original brand. Prefer using:
-   - A neutral abstract gradient / shape composition you generate with CSS or SVG
-   - A Lucide icon arrangement
-   - Placeholder service URLs only if explicitly allowed by the user
-   Keep dimensions, aspect ratios, drop shadows, and surrounding spacing identical to the original.
+6. **Imagery** — Replace photography/screenshots that depict the original brand with visuals **authored for this SaaS idea**, not interchangeable decoration. Before designing: derive a **metaphor list** from `idea` (3–6 concrete hooks). Each hero/feature/OG asset gets an **Idea tie-in** sentence in `docs/research/REBRAND.md`. Prefer bespoke SVG scenes (`src/components/marketing/art/`) or raster under `public/images/marketing/` that preserve dimensions/aspect/shadows from the cloned layout. **Avoid:** unrelated filler (e.g. apparel, random lifestyle props when the product is notes/voice), generic gradient-only heroes, Lucide-icon piles unless the reference was already that minimal — those fail the uniqueness bar in `AGENTS.md`.
 7. **Metadata** — update `<title>`, meta description, OG tags, and favicon manifest in `src/app/layout.tsx` to reflect the new SaaS. Generate a simple favicon (initial letter on a brand-colored square) if no asset is provided.
 
 What you must NOT change in this pass:
@@ -475,25 +475,24 @@ What you must NOT change in this pass:
 
 After the rebrand pass, the codebase should look like the original site visually but read like the user's SaaS at a glance. Save a short `docs/research/REBRAND.md` summarizing the product name you chose, the headline rewrites, and any assets you swapped — so the user can audit what's clone-derived vs. authored.
 
-## Phase 4.6: Production uplift *(sparse references / user asks for prod polish)*
+## Phase 4.6: Production uplift *(sparse references / stronger idea-specific art)*
 
 Run this pass when **any** of the following is true:
 
 - The cloned reference is mostly typography with weak imagery (internal demos, minimalist SaaS shells).
-- The user asks for **more motion**, **SVG / illustration**, **pixel art**, **brandability**, or **production-ready** marketing polish.
-- Visual QA feels “correct but dead” — layout matches but nothing moves and cards use unrelated placeholders.
+- The user asks for **more unique images**, **illustration tailored to the idea**, **stronger visuals**, motion, pixel art, or production polish.
+- Visual QA feels “correct but dead” — layout matches but art is generic, unrelated, or repeated stock metaphors.
 
-**Do not contradict pixel-perfect emulation when cloning a rich reference** — this phase *adds* density only where the brief allows uplift or the reference was inherently flat.
+**Do not contradict pixel-perfect emulation when cloning a rich reference** — this phase *adds* or swaps **idea-native** imagery only where the brief allows uplift or the reference was inherently flat.
 
-Checklist (mirror `AGENTS.md`):
+Checklist (mirror `AGENTS.md` — **uniqueness first**):
 
-1. **Imagery** — Add layered hero treatment + purposeful SVG scenes per feature (swap nonsense placeholders). Prefer named components under `src/components/marketing/art/`.
-2. **Motion tiers** — Implement at minimum **A + B + one of C/D**, optionally **E**: staggered hero load, `whileInView` sections + card stagger, looping ambient (marquee / caret / SVG dash loop), hover lifts / nav scroll shrink, optional light parallax. Gate loops with **`useReducedMotion()`**.
-3. **Brand** — Establish motif thread + accent tokens in `:root`; refresh favicon / OG sketch to match.
+1. **Idea-tailored imagery** — Metaphor list from `idea`; replace any asset that could belong to another vertical. Per-asset **Idea tie-in** in `docs/research/PRODUCTION_UPLIFT.md` alongside SVG/raster paths.
+2. **Density** — Layered hero + distinct scene per feature card in **one shared visual language** (stroke/accent/grid), still idea-specific.
+3. **Motion tiers** — Implement at minimum **A + B + one of C/D**, optionally **E**: staggered hero load, `whileInView` sections + card stagger, looping ambient (marquee / caret / SVG dash loop), hover lifts / nav scroll shrink, optional light parallax. Gate loops with **`useReducedMotion()`**.
+4. **Brand** — Motif thread + accent tokens in `:root`; favicon / OG echo **this** product narrative.
 
-Document deltas in `docs/research/PRODUCTION_UPLIFT.md` (what SVGs/motion/accent decisions shipped).
-
-Invoke `.claude/skills/marketing-landing-production/SKILL.md` as a focused playbook for this pass.
+Document deltas in `docs/research/PRODUCTION_UPLIFT.md`.
 
 ## Phase 5: Visual QA Diff
 
@@ -524,7 +523,7 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] All images in the section are identified (including overlays and layered compositions)
 - [ ] Any `<video>` (and poster), Lottie, or canvas-driven hero is identified — not approximated as a static div
 - [ ] **Motion** subsection filled: tiers **A–E** coverage (see `AGENTS.md`), CSS vs **framer-motion**, durations, easings, stagger, scroll triggers, **reduced-motion** fallback
-- [ ] **Illustration** subsection filled when uplift applies: SVG components / palette / motif thread — or explicit **N/A** with justification only on strict clone parity jobs
+- [ ] **Illustration** subsection filled when uplift applies: **Idea tie-in** + metaphor link per asset, SVG/pixel detail — or explicit **N/A** with justification only on strict clone parity jobs
 - [ ] Responsive behavior is documented for at least desktop and mobile
 - [ ] Text content is verbatim from the site, not paraphrased
 - [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split
@@ -547,6 +546,7 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't bundle unrelated sections into one agent.** A CTA section and a footer are different components with different designs — don't hand them both to one agent and hope for the best.
 - **Don't skip responsive extraction.** If you only inspect at desktop width, the clone will break at tablet and mobile. Test at 1440, 768, and 390 during extraction.
 - **Don't forget smooth scroll libraries.** Check for Lenis (`.lenis` class), Locomotive Scroll, or similar. Default browser scrolling feels noticeably different and the user will spot it immediately.
+- **Don't ship interchangeable marketing art.** Random objects, unrelated lifestyle stock, or generic gradients that could match any SaaS violate the **idea-tailored** rule in `AGENTS.md` — every major visual needs a metaphor from `launchframe.config.json#idea`.
 - **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

package/{template/.cursor/commands → .windsurf/workflows}/clone-website.md

@@ -36,7 +36,7 @@ If the user provides additional instructions (specific fidelity level, deeper cu
 ## Pre-Flight
 
 1. **Read `launchframe.config.json`** (see Step 0 above). After a fresh `npx launchframe` scaffold, proceed immediately — only echo `url`/`idea` for confirmation if the config looks wrong or the user asked to verify.
-2. **Browser automation.** Prefer an MCP (Chrome DevTools MCP, Playwright MCP, Browserbase MCP, etc.) when it is healthy. **If MCP is missing or in an error state, run `npm run recon` (Playwright)** — see `scripts/recon-playwright.mjs`. It writes `docs/research/computed-snapshot.json`, `docs/research/MEDIA_MANIFEST.md`, and full-page screenshots under `docs/design-references/`. Use `npm run recon:headed` if headless hits a WAF/challenge page. One-time install: `npx playwright install chromium`. Do not skip extraction — adapt the pipeline to the tools that work.
+2. **Browser automation.** Prefer an MCP (Chrome DevTools MCP, Playwright MCP, Browserbase MCP, etc.) when it is healthy. **If MCP is missing or in an error state, run `npm run recon` (Playwright)** — see `scripts/recon-playwright.mjs`. It performs **stabilized full-document scrolling** at desktop and mobile, writes merged **`computed-snapshot.json`** + **`MEDIA_MANIFEST.md`**, and **full-page** screenshots under `docs/design-references/`. Use `npm run recon:headed` if headless hits a WAF/challenge page. One-time install: `npx playwright install chromium`. Do not skip extraction — adapt the pipeline to the tools that work.
 3. Validate the resolved URL(s). Normalize and verify each is accessible via your browser MCP tool. If any are invalid, ask the user to correct `launchframe.config.json` (or pass an override) before proceeding.
 4. 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 run `npm install` first.
 5. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. Plan `docs/research/MEDIA_MANIFEST.md` as soon as media is inventoried. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
@@ -52,7 +52,7 @@ These are the truths that separate a successful clone from a "close enough" mess
 
 **Motion defaults to Framer Motion.** This template lists `framer-motion` as a dependency. After foundation tokens, ensure `import { motion } from "framer-motion"` (and related APIs: `useScroll`, `useTransform`, `AnimatePresence`, `LayoutGroup`, **`useReducedMotion`**) for: scroll-triggered reveals, staggered children, layout transitions, and gestures — anything beyond a trivial one-property CSS `transition`. In each spec file, add a **Motion** subsection: trigger, duration, easing, delay/stagger, **tier A–E coverage** (see `AGENTS.md` production polish table), reduced-motion fallback, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
 
-**Illustration & pixel art are production inputs.** Where the target (or post-rebrand layout) lacks convincing visuals, specs MUST still allocate **SVG illustration layers** — hero backdrop cluster, section separators, feature-card scenes tied to copy — using React SVG components (`currentColor` + theme vars). Pixel-art motifs require an explicit palette table in the spec. Do not ship ambiguous gray placeholders when `AGENTS.md` calls for production density on authored landings.
+**Illustration & pixel art are production inputs.** Where the target (or post-rebrand layout) lacks convincing visuals, specs MUST allocate **idea-tailored SVG scenes** — metaphors drawn from `launchframe.config.json#idea`, documented with **Idea tie-in** per asset — not generic gray placeholders or unrelated clipart. Pixel-art motifs require concept justification plus palette table in the spec.
 
 ### 1. Completeness Beats Speed
 
@@ -139,10 +139,12 @@ Every builder agent must verify `npx tsc --noEmit` passes before finishing. Afte
 
 Navigate to the target URL with browser MCP.
 
-### Screenshots
-- Take **full-page screenshots** at desktop (1440px) and mobile (390px) viewports
-- Save to `docs/design-references/` with descriptive names
-- These are your master reference — builders will receive section-specific crops/screenshots later
+### Screenshots *(entire landing — never “above the fold” only)*
+- Capture the **whole marketing surface**: hero through footer (single-page landings). Do **not** stop after the first viewport — lazy-loaded sections, footer nav, and bottom CTAs are required context.
+- Before **every** full-page capture (MCP or Playwright): **slow scroll top → bottom → top** once or twice until `scrollHeight` stops growing, so lazy images/`srcset`/`data-src` resolve where possible.
+- Take **`fullPage: true`** (or MCP equivalent) screenshots at desktop (**1440px**) and mobile (**390px**); save under `docs/design-references/` with descriptive names.
+- **`npm run recon`** already performs stabilized full-document scrolling + merged desktop/mobile asset inventory — prefer running it when automation must match full-page depth reliably.
+- These masters are references — builders still get section crops later, but those crops must exist because **you** scrolled and documented every band first.
 
 ### Global Extraction
 Extract these from the page before doing anything else:
@@ -372,10 +374,12 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **Library:** <`framer-motion` | CSS-only — justify if CSS-only>
 - **Keyframes / springs:** <if any — match target curve>
 
-## Illustration & pixel art *(production uplift)*
+## Illustration & pixel art *(production uplift — idea-native)*
+- **Idea tie-in:** <one sentence — why this asset belongs only to this product>
+- **Metaphor link:** <which keyword from `idea` / metaphor list this illustrates>
 - **SVG components:** <named exports, paths using currentColor vs fixed fills>
 - **Pixel motif:** <palette hex table, grid, scaling — or N/A>
-- **Motif thread:** <how illustration echoes logo / OG / favicon>
+- **Motif thread:** <how this echoes logo / OG / favicon for this SaaS>
 
 ## Per-State Content (if applicable)
 
@@ -457,11 +461,7 @@ For every section, replace:
 3. **Feature/section copy** — rewrite each feature card, callout, stat, and testimonial to fit the SaaS idea. Preserve the count and shape of items (3 feature cards stay 3 feature cards; a 4-column logo bar stays 4 columns). Generate plausible customer-logo names — never use real company names you haven't been authorized to use.
 4. **CTA labels** — adapt button text to the SaaS idea ("Start free", "Get a demo", "Try it free", etc.). Keep the CTA hierarchy (primary/secondary) identical to the original.
 5. **Mock data** — for product UI mockups embedded in marketing screenshots (e.g., a fake dashboard inside a hero), generate mock data shaped for the SaaS idea: realistic-looking but fictional rows, charts, conversation logs, etc.
-6. **Imagery** — placeholder-swap any photography or product screenshots that depict the original brand. Prefer using:
-   - A neutral abstract gradient / shape composition you generate with CSS or SVG
-   - A Lucide icon arrangement
-   - Placeholder service URLs only if explicitly allowed by the user
-   Keep dimensions, aspect ratios, drop shadows, and surrounding spacing identical to the original.
+6. **Imagery** — Replace photography/screenshots that depict the original brand with visuals **authored for this SaaS idea**, not interchangeable decoration. Before designing: derive a **metaphor list** from `idea` (3–6 concrete hooks). Each hero/feature/OG asset gets an **Idea tie-in** sentence in `docs/research/REBRAND.md`. Prefer bespoke SVG scenes (`src/components/marketing/art/`) or raster under `public/images/marketing/` that preserve dimensions/aspect/shadows from the cloned layout. **Avoid:** unrelated filler (e.g. apparel, random lifestyle props when the product is notes/voice), generic gradient-only heroes, Lucide-icon piles unless the reference was already that minimal — those fail the uniqueness bar in `AGENTS.md`.
 7. **Metadata** — update `<title>`, meta description, OG tags, and favicon manifest in `src/app/layout.tsx` to reflect the new SaaS. Generate a simple favicon (initial letter on a brand-colored square) if no asset is provided.
 
 What you must NOT change in this pass:
@@ -472,25 +472,24 @@ What you must NOT change in this pass:
 
 After the rebrand pass, the codebase should look like the original site visually but read like the user's SaaS at a glance. Save a short `docs/research/REBRAND.md` summarizing the product name you chose, the headline rewrites, and any assets you swapped — so the user can audit what's clone-derived vs. authored.
 
-## Phase 4.6: Production uplift *(sparse references / user asks for prod polish)*
+## Phase 4.6: Production uplift *(sparse references / stronger idea-specific art)*
 
 Run this pass when **any** of the following is true:
 
 - The cloned reference is mostly typography with weak imagery (internal demos, minimalist SaaS shells).
-- The user asks for **more motion**, **SVG / illustration**, **pixel art**, **brandability**, or **production-ready** marketing polish.
-- Visual QA feels “correct but dead” — layout matches but nothing moves and cards use unrelated placeholders.
+- The user asks for **more unique images**, **illustration tailored to the idea**, **stronger visuals**, motion, pixel art, or production polish.
+- Visual QA feels “correct but dead” — layout matches but art is generic, unrelated, or repeated stock metaphors.
 
-**Do not contradict pixel-perfect emulation when cloning a rich reference** — this phase *adds* density only where the brief allows uplift or the reference was inherently flat.
+**Do not contradict pixel-perfect emulation when cloning a rich reference** — this phase *adds* or swaps **idea-native** imagery only where the brief allows uplift or the reference was inherently flat.
 
-Checklist (mirror `AGENTS.md`):
+Checklist (mirror `AGENTS.md` — **uniqueness first**):
 
-1. **Imagery** — Add layered hero treatment + purposeful SVG scenes per feature (swap nonsense placeholders). Prefer named components under `src/components/marketing/art/`.
-2. **Motion tiers** — Implement at minimum **A + B + one of C/D**, optionally **E**: staggered hero load, `whileInView` sections + card stagger, looping ambient (marquee / caret / SVG dash loop), hover lifts / nav scroll shrink, optional light parallax. Gate loops with **`useReducedMotion()`**.
-3. **Brand** — Establish motif thread + accent tokens in `:root`; refresh favicon / OG sketch to match.
+1. **Idea-tailored imagery** — Metaphor list from `idea`; replace any asset that could belong to another vertical. Per-asset **Idea tie-in** in `docs/research/PRODUCTION_UPLIFT.md` alongside SVG/raster paths.
+2. **Density** — Layered hero + distinct scene per feature card in **one shared visual language** (stroke/accent/grid), still idea-specific.
+3. **Motion tiers** — Implement at minimum **A + B + one of C/D**, optionally **E**: staggered hero load, `whileInView` sections + card stagger, looping ambient (marquee / caret / SVG dash loop), hover lifts / nav scroll shrink, optional light parallax. Gate loops with **`useReducedMotion()`**.
+4. **Brand** — Motif thread + accent tokens in `:root`; favicon / OG echo **this** product narrative.
 
-Document deltas in `docs/research/PRODUCTION_UPLIFT.md` (what SVGs/motion/accent decisions shipped).
-
-Invoke `.claude/skills/marketing-landing-production/SKILL.md` as a focused playbook for this pass.
+Document deltas in `docs/research/PRODUCTION_UPLIFT.md`.
 
 ## Phase 5: Visual QA Diff
 
@@ -521,7 +520,7 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] All images in the section are identified (including overlays and layered compositions)
 - [ ] Any `<video>` (and poster), Lottie, or canvas-driven hero is identified — not approximated as a static div
 - [ ] **Motion** subsection filled: tiers **A–E** coverage (see `AGENTS.md`), CSS vs **framer-motion**, durations, easings, stagger, scroll triggers, **reduced-motion** fallback
-- [ ] **Illustration** subsection filled when uplift applies: SVG components / palette / motif thread — or explicit **N/A** with justification only on strict clone parity jobs
+- [ ] **Illustration** subsection filled when uplift applies: **Idea tie-in** + metaphor link per asset, SVG/pixel detail — or explicit **N/A** with justification only on strict clone parity jobs
 - [ ] Responsive behavior is documented for at least desktop and mobile
 - [ ] Text content is verbatim from the site, not paraphrased
 - [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split
@@ -544,6 +543,7 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't bundle unrelated sections into one agent.** A CTA section and a footer are different components with different designs — don't hand them both to one agent and hope for the best.
 - **Don't skip responsive extraction.** If you only inspect at desktop width, the clone will break at tablet and mobile. Test at 1440, 768, and 390 during extraction.
 - **Don't forget smooth scroll libraries.** Check for Lenis (`.lenis` class), Locomotive Scroll, or similar. Default browser scrolling feels noticeably different and the user will spot it immediately.
+- **Don't ship interchangeable marketing art.** Random objects, unrelated lifestyle stock, or generic gradients that could match any SaaS violate the **idea-tailored** rule in `AGENTS.md` — every major visual needs a metaphor from `launchframe.config.json#idea`.
 - **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

package/{template/AGENTS.md → AGENTS.md}

@@ -37,16 +37,26 @@ Treat these as **first-class deliverables**, not polish at the end.
 2. **Motion** — Match the target’s feel: easing, duration, stagger, scroll triggers. Prefer **`motion` from `framer-motion`** for entrance sequences, viewport-driven animations, shared-layout-style transitions, and anything beyond a one-off CSS transition. Note in each component spec whether behavior is **CSS-only** vs **Framer Motion**.
 3. **Illustration & brand marks** — Inline **SVG React components** (not only Lucide) for motifs that repeat across sections: logo glyph variants, dividers, grain/noise overlays, hero “scene” shapes, feature-card mini-compositions. Prefer **`currentColor`** + CSS variables so SVGs inherit theme tokens. For **pixel art**, keep a tight palette (4–8 fills), consistent pixel grid logic, and use `style={{ imageRendering: "pixelated" }}` on upscaled raster OR build pixel SVG paths intentionally — never blurry upscale.
 
-## Production polish for marketing landings *(imagery + motion density + brandability)*
+## Production polish for marketing landings *(idea-tailored visuals + motion + brand)*
 
-Use this whenever the page is **authored or minimalist** (internal templates, rebranded clones that still feel flat, or targets that are mostly typography). “Looks OK” is not ship-ready — **production landings** stack multiple visual layers, choreographed motion, and recognizable brand cues.
+Use this whenever the page is **authored or minimalist** (internal templates, rebranded clones that still feel flat, or targets that are mostly typography). “Looks OK” is not ship-ready — **production landings** stack multiple visual layers, choreographed motion, and cues that clearly belong to **this** product (`launchframe.config.json#idea`), not any SaaS.
+
+### Idea-tailored imagery *(uniqueness bar)*
+
+Generic decoration fails review. Apply this to **every** hero composition, feature-card illustration, OG image sketch, and major `public/` marketing raster.
+
+1. **Derive metaphors from the idea** — Read `idea` (and product name). List 3–6 concrete nouns/verbs the product owns (e.g. voice → waveform, mic; notes → folded page, margin line; sync → paired arrows). Every bespoke visual must trace back to that list — **not** interchangeable clipart (random apparel, unrelated lifestyle objects, vague “business” silhouettes unless the idea demands them).
+2. **Could this ship on another site unchanged?** If yes, redesign until **no** — different silhouette story, palette accent, or composition so the asset “only fits” this narrative.
+3. **One tie-in sentence per asset** — In specs or `docs/research/REBRAND.md`, each image/SVG scene gets **Idea tie-in:** `<why this belongs to this product>`.
+4. **Prefer authored scenes** — Custom SVG narratives (several shapes telling one moment), optional pixel mascot **on-brand** for the category, or composed raster under `public/images/marketing/` when illustration needs texture. Lucide-only piles and neutral blobs are **last resort**, not default.
+5. **Distinct accents** — Pick accent hues/shapes suggested by the idea’s personality (precise studio vs warm companion vs rugged utility); avoid default gray-only SaaS anonymity unless the brief is explicitly brutalist.
 
 ### Imagery density (every fold earns a visual idea)
 
-- **Hero** — Never headline-only on white: add at least two of — soft gradient mesh / radial spotlight, subtle SVG grid or notebook lines, floating glyph cluster, ambient particle dots, masked photo or device frame with **real `public/` raster**, thin geometric frame that echoes the logo.
-- **Between sections** — Optional SVG waves, angled cuts, or dashed “tape” strips so rhythm feels intentional.
-- **Feature rows** — Replace generic placeholders (random shirts, blank boxes) with **purpose-built SVG scenes** tied to copy (capture → waveform + mic; workspace → windows + avatars; publish → export arrows + formats). Each card gets **foreground illustration + supporting UI chrome**, not one flat rectangle.
-- **Social proof** — Logo strip may use grayscale marks; add **slow infinite marquee** or gentle opacity drift — motion sells “living product.”
+- **Hero** — Never headline-only on white: add at least two of — soft gradient mesh / radial spotlight, **idea-specific** SVG cluster (metaphors from the list above), notebook/grid lines when the idea is docs, waveform device frame when the idea is capture, masked **purpose-built** raster in `public/images/marketing/`, geometric frame echoing **this** logo shape.
+- **Between sections** — Optional dividers whose pattern/stroke **echoes the product motif** (not a stock wave).
+- **Feature rows** — Each card illustration is a **different** moment in the same visual language (shared stroke weight, accent, or grid) — all still **idea-native** (e.g. capture → transcript lines; workspace → shared cursors; publish → export channels). No unrelated filler.
+- **Social proof** — Logo strip may use grayscale marks; add **slow infinite marquee** or gentle opacity drift — motion sells “living product.” Name recognizable companies where appropriate; use lawful logo marks under `public/images/logos/` (or generate **original** tiles — never counterfeit trademarks). Full workflow: **`.claude/skills/marketing-social-proof-motion/SKILL.md`** · Cursor **`/marketing-social-proof-motion`**.
 
 ### Motion choreography *(ship several layers; respect `prefers-reduced-motion`)*
 
@@ -77,9 +87,7 @@ Always gate looping motion: **`useReducedMotion()`** from Framer Motion — swap
 
 ### Spec requirement *(hand-off quality)*
 
-When writing `docs/research/components/*.spec.md`, add sections **Illustration** (layers, SVG components, raster paths) and expand **Motion** with tier **A–E** coverage and reduced-motion fallback. Builders should not invent motion ad hoc — the spec states durations and triggers.
-
-Invoke **`marketing-landing-production`** (`.claude/skills/marketing-landing-production/SKILL.md`) when the user asks for **prod-ready polish**, **more motion**, **SVG/pixel art**, or **stronger branding** on an existing landing.
+When writing `docs/research/components/*.spec.md`, add sections **Illustration** (**Idea tie-in** per asset, layers, SVG components, raster paths) and expand **Motion** with tier **A–E** coverage and reduced-motion fallback. Builders should not invent motion ad hoc — the spec states durations and triggers.
 
 ## Commands
 - `npm run dev` — Start dev server
@@ -87,7 +95,7 @@ Invoke **`marketing-landing-production`** (`.claude/skills/marketing-landing-pro
 - `npm run lint` — ESLint check
 - `npm run typecheck` — TypeScript check
 - `npm run check` — Run lint + typecheck + build
-- **`npm run recon`** — **Playwright** capture: full-page screenshots, `computed-snapshot.json`, `MEDIA_MANIFEST.md` (use when Browser MCP / Chrome DevTools MCP is broken or missing)
+- **`npm run recon`** — **Playwright**: stabilized **full-document** scrolling at **desktop + mobile**, merged **`computed-snapshot.json`** + **`MEDIA_MANIFEST.md`**, **full-page** screenshots under `docs/design-references/` (use when Browser MCP / Chrome DevTools MCP is broken or missing)
 - **`npm run recon:headed`** — Same as `recon` but **headed** Chromium (often better for WAF / “Just a moment…” pages)
 
 **Playwright browser binaries (once per machine):** `npx playwright install chromium`
@@ -95,6 +103,10 @@ Invoke **`marketing-landing-production`** (`.claude/skills/marketing-landing-pro
 ## When Browser MCP is down
 Prefer **Playwright** for repeatable extraction in-repo — do **not** rely on Chrome DevTools MCP alone.
 
+### Full landing coverage (agents + automation)
+
+Whether using MCP or Playwright, extraction must cover the **entire visible landing** (hero → footer): slow-scroll until lazy content settles, then **`fullPage`** screenshots — never treat “what fits in one viewport” as sufficient for inventory or specs.
+
 1. Run **`npm run recon`** (or **`npm run recon:headed`** if headless hits a challenge page).
 2. Read **`docs/research/computed-snapshot.json`**, **`docs/research/MEDIA_MANIFEST.md`**, and **`docs/research/EXTRACTION_LIMITATIONS.md`** before writing specs.
 3. Fill **`scripts/download-assets.mjs`** from `MEDIA_MANIFEST.md` and run it to populate `public/images/` and `public/videos/`.
@@ -109,7 +121,8 @@ Prefer **Playwright** for repeatable extraction in-repo — do **not** rely on C
 ## Design Principles
 - **Images & video fidelity** — prefer real downloaded assets; preserve aspect ratio, `object-fit`, layering, and poster frames. Rebrand pass may **swap** URLs for IP-safe alternates but must keep layout identical.
 - **Motion fidelity** — timing and easing matter as much as color; use Framer Motion when CSS alone cannot match staggered or scroll-driven behavior.
-- **Production landing density** — For authored/minimal pages, deliberately add **SVG illustration layers**, **pixel-art accents**, and **tiered motion (A–E)** per “Production polish” above; static monochrome layouts are incomplete unless the user explicitly wants extreme minimalism.
+- **Idea-specific imagery** — Marketing art (SVG, raster, OG) must be **tailored to `launchframe.config.json#idea`**: explicit metaphors, per-asset **Idea tie-in** notes, and **no interchangeable filler** that could belong to any generic SaaS.
+- **Production landing density** — For authored/minimal pages, deliberately add **idea-specific** illustration (not generic SaaS filler), **pixel-art accents** when they reinforce the metaphor, and **tiered motion (A–E)** per “Production polish” above; static monochrome layouts are incomplete unless the user explicitly wants extreme minimalism.
 - **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
 - **No personal aesthetic changes during emulation phase** — match 1:1 first, rebrand later
 - **Real content during extraction** — use actual text and assets from the target site so the clone scaffolds against real shapes
@@ -143,6 +156,5 @@ scripts/            # Asset download scripts
 - 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/clone-website/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the skill for all platforms.
-- After editing `.claude/skills/marketing-landing-production/SKILL.md`, update `.cursor/commands/marketing-landing-production.md` to match (Cursor command is maintained beside the Claude skill until sync-skills grows multi-skill support).
 
 @docs/research/INSPECTION_GUIDE.md

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Evan Gruhlkey and Launchframe contributors
+Copyright (c) 2025 JCodesMore
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,86 +1,36 @@
-# Launchframe
+# Launchframe Project
 
-> **Scaffold a SaaS-ready Next.js codebase from any URL — in one command.**
+This project was scaffolded by **[Launchframe](https://github.com/evangruhlkey/launchframe)** — an AI-powered website cloner + SaaS rebrander.
 
 ```bash
 npx launchframe@latest <url> "<saas idea>"
 ```
 
-Launchframe drops an [AI-cloner template](https://github.com/JCodesMore/ai-website-cloner-template) into **your current folder (project root)** by default — so **`.cursor`**, **`.claude`**, and the rest of the dotfolders sit where your editor expects them when you open that folder. It **runs `npm install` for you**. Then tell your AI **Build it** (same as `/clone-website`).
+Dependencies were installed for you. Files were written to **this directory** (project root) so **`.cursor`**, **`.claude`**, etc. work when you open this folder in your editor. Config lives in **`launchframe.config.json`** (`url` + SaaS `idea`).
 
-## Why Launchframe
+---
 
-Cloning a website is a solved problem if you have a great AI agent and a great template. What's missing is **a one-command entrypoint that wires those together with your specific intent**.
+## Quick start (two steps)
 
-- ✅ Pick a real, beautiful, production-tested landing page
-- ✅ Pick the SaaS you want to ship
-- ✅ Get a buildable Next.js codebase in seconds, ready for your AI agent to clone + rebrand
+1. **Open this folder** in [Cursor](https://cursor.com/) — the directory that **contains** `.cursor/` (not a parent folder).
+2. In chat, say: **Build it.**
 
-You spend your time on product, not on translating Figma boxes into Tailwind.
+Your AI reads [`launchframe.config.json`](./launchframe.config.json) and [`AGENTS.md`](./AGENTS.md) and runs the full clone + rebrand pipeline (same as **`/clone-website`**).
 
-## Quick Start
+Rather read a postcard? See [`START_HERE.md`](./START_HERE.md).
 
-From an **empty** project folder (or after `git init` only):
+## What `/clone-website` does
 
-```bash
-mkdir my-saas && cd my-saas
-npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
-```
-
-Then open **this folder** in [Cursor](https://cursor.com/) and chat: **Build it.**
+A multi-phase pipeline runs inside your AI agent:
 
-Files land in the **current directory** so workspace rules apply. Prefer a subfolder? Use `--dir launchframe-app`.
+1. **Reconnaissance** — screenshots, design-token extraction, **image/video inventory** (`MEDIA_MANIFEST.md`), interaction sweep (scroll, click, hover, responsive)
+2. **Foundation** — fonts, globals, **`framer-motion`**, **download images & videos** to `public/` before most UI build
+3. **Component Specs** — writes detailed spec files (`docs/research/components/`) with exact CSS, **local media paths**, and **Motion** (CSS vs Framer)
+4. **Parallel Build** — dispatches builder agents in git worktrees, one per section
+5. **SaaS Rebrand Pass** — swaps product name, headlines, feature copy, CTAs, and brand marks to match `launchframe.config.json#idea`. Visuals stay 1:1.
+6. **Assembly & Visual QA** — merges worktrees, wires up the page, runs visual diff against the original
 
-Optional: **`/clone-website`** in Cursor, or **`--skip-install`** for CI / debugging.
-
-```bash
-npx launchframe@latest https://linear.app "My idea" --skip-install
-```
-
-## What gets generated
-
-```
-my-saas/   (or use --dir to create a subfolder)
-├─ START_HERE.md             ← "open Cursor, say Build it"
-├─ launchframe.config.json   ← url + saas idea (the directive)
-├─ AGENTS.md                 ← agent instructions (single source of truth)
-├─ .cursor/                  ← at project root (Cursor rules + /clone-website)
-├─ .claude/                  ← Claude Code skill
-├─ .codex/ .gemini/ .opencode/ .windsurf/ .github/ .augment/
-│  .continue/ .amazonq/      ← every other agent gets the same skill, format-adapted
-├─ src/                      ← Next.js 16 + shadcn/ui + Tailwind v4 scaffold
-├─ public/                   ← becomes populated by the cloner with real assets
-├─ docs/research/            ← extraction artifacts the cloner writes during the run
-└─ scripts/                  ← asset download + sync scripts
-```
-
-## CLI Reference
-
-```
-npx launchframe@latest <url> "<saas idea>" [options]
-
-Arguments:
-  <url>          URL of the site you want to clone (e.g. https://linear.app)
-  <saas idea>    One-line description of the SaaS you're building
-
-Options:
-  --dir <path>   Output folder (default: . — current directory / project root)
-  --force        Merge into a non-empty directory (use with care)
-  --skip-install Skip npm install (for CI / debugging only)
-  --help, -h     Show this message
-  --version, -v  Show the version
-```
-
-### Examples
-
-```bash
-npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
-
-npx launchframe@latest https://vercel.com "DevOps for ML" --dir launchframe-app
-
-# Hostname-only — launchframe will prepend https://
-npx launchframe@latest stripe.com "B2B billing for AI agent companies"
-```
+Each builder agent receives the full component spec inline — exact `getComputedStyle()` values, interaction models, multi-state content, responsive breakpoints, asset paths. No guessing.
 
 ## Supported AI Agents
 
@@ -88,60 +38,84 @@ npx launchframe@latest stripe.com "B2B billing for AI agent companies"
 | ------------------------------------------------------------- | -------------------------- |
 | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **Recommended** — Opus 4.7 |
 | [Codex CLI](https://github.com/openai/codex)                  | Supported                  |
-| [Cursor](https://cursor.com/)                                 | Supported                  |
-| [Gemini CLI](https://github.com/google-gemini/gemini-cli)     | Supported                  |
-| [GitHub Copilot](https://github.com/features/copilot)         | Supported                  |
 | [OpenCode](https://opencode.ai/)                              | Supported                  |
+| [GitHub Copilot](https://github.com/features/copilot)         | Supported                  |
+| [Cursor](https://cursor.com/)                                 | Supported                  |
 | [Windsurf](https://codeium.com/windsurf)                      | Supported                  |
-| [Cline](https://github.com/cline/cline) / Roo Code            | Supported                  |
+| [Gemini CLI](https://github.com/google-gemini/gemini-cli)     | Supported                  |
+| [Cline](https://github.com/cline/cline)                       | Supported                  |
+| [Roo Code](https://github.com/RooCodeInc/Roo-Code)            | Supported                  |
 | [Continue](https://continue.dev/)                             | Supported                  |
 | [Amazon Q](https://aws.amazon.com/q/developer/)               | Supported                  |
 | [Augment Code](https://www.augmentcode.com/)                  | Supported                  |
 | [Aider](https://aider.chat/)                                  | Supported                  |
 
-Every supported agent receives the same `/clone-website` skill — it's auto-synced from a single source-of-truth file in the template.
-
-## How `/clone-website` Works
+## Tech Stack
 
-A multi-phase pipeline runs inside your AI agent. Browser automation MCP (Chrome MCP / Playwright MCP / Browserbase MCP) is required.
+- **Next.js 16** — App Router, React 19, TypeScript strict
+- **shadcn/ui** — Radix primitives + Tailwind CSS v4
+- **Tailwind CSS v4** — oklch design tokens
+- **Framer Motion** — default for non-trivial marketing animation (scroll reveals, staggers, layout); see `AGENTS.md`
+- **Lucide React** — default icons (replaced by extracted SVGs during cloning)
+- **Media** — targets download to `public/images/` & `public/videos/` per `docs/research/MEDIA_MANIFEST.md` (see `INSPECTION_GUIDE.md`)
 
-1. **Reconnaissance** — full-page screenshots at desktop + mobile, design-token extraction, mandatory scroll/click/hover/responsive sweep
-2. **Foundation** — updates fonts, colors, globals.css; downloads all assets; extracts SVG icons
-3. **Component Specs** — writes detailed `.spec.md` files for every section with exact `getComputedStyle()` values
-4. **Parallel Build** — dispatches builder agents in git worktrees, one per section/component
-5. **SaaS Rebrand Pass** — swaps product name, headlines, feature copy, CTAs, and brand marks to match `launchframe.config.json#idea`. Spacing, color, typography, animations stay 1:1
-6. **Assembly + Visual QA** — merges worktrees, wires `src/app/page.tsx`, runs side-by-side diff against the original
-
-Each builder agent gets the full component spec inline. No guessing.
+## Prerequisites
 
-## Editing the Config Mid-Project
+- [Node.js](https://nodejs.org/) 24+
+- An AI coding agent with browser automation MCP **or** [Playwright](https://playwright.dev/) for `npm run recon` when MCP is unavailable
+- **First-time Playwright browsers:** after `npm install`, run `npx playwright install chromium`
 
-`launchframe.config.json` is the contract between you and the skill. Change either field any time and re-invoke `/clone-website`:
+## Project Structure
 
-```json
-{
-  "url": "https://stripe.com",
-  "idea": "Usage-based billing for AI agent startups"
-}
+```
+src/
+  app/              # Next.js routes
+  components/       # React components
+    ui/             # shadcn/ui primitives
+    icons.tsx       # Extracted SVG icons
+  lib/utils.ts      # cn() utility
+  types/            # TypeScript interfaces
+  hooks/            # Custom React hooks
+public/
+  images/           # Downloaded images from target
+  videos/           # Downloaded videos from target
+  seo/              # Favicons, OG images
+docs/
+  research/         # Extraction output, component specs, REBRAND.md
+  design-references/ # Screenshots
+scripts/
+  sync-agent-rules.sh  # Regenerate agent instruction files
+  sync-skills.mjs      # Regenerate /clone-website for all platforms
+launchframe.config.json  # ← URL + SaaS idea (single source of truth)
+AGENTS.md           # Agent instructions (single source of truth)
+START_HERE.md       # "Open Cursor → say Build it"
+CLAUDE.md           # Claude Code config (imports AGENTS.md)
+GEMINI.md           # Gemini CLI config (imports AGENTS.md)
 ```
 
-## Built On
+## Commands
 
-- The amazing [`ai-website-cloner-template`](https://github.com/JCodesMore/ai-website-cloner-template) by [@JCodesMore](https://github.com/JCodesMore) — Launchframe vendors and extends this as its payload
-- [Next.js 16](https://nextjs.org/), [React 19](https://react.dev/), [shadcn/ui](https://ui.shadcn.com/), [Tailwind CSS v4](https://tailwindcss.com/)
+```bash
+npm run dev        # Start dev server
+npm run build      # Production build
+npm run lint       # ESLint check
+npm run typecheck  # TypeScript check
+npm run check      # Run lint + typecheck + build
+```
 
-## Prerequisites
+## Use Cases
 
-- [Node.js](https://nodejs.org/) 18+ to run the CLI
-- [Node.js](https://nodejs.org/) 24+ inside the scaffolded project (for Next.js 16)
-- An AI coding agent with browser automation MCP
+- **Launch a SaaS faster** — start from a proven landing page, not a blank canvas
+- **Platform migration** — rebuild a site you own from WordPress/Webflow/Squarespace into a modern Next.js codebase
+- **Lost source code** — your site is live but the repo is gone; get the code back in a modern format
+- **Learning** — deconstruct how production sites achieve specific layouts, animations, and responsive behavior
 
 ## Not Intended For
 
-- Phishing or impersonation
-- Passing off someone else's design as your own
-- Violating terms of service (some sites prohibit scraping or reproduction — check first)
+- **Phishing or impersonation** — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law
+- **Passing off someone's design as your own** — logos, brand assets, and original copy belong to their owners
+- **Violating terms of service** — some sites prohibit scraping or reproduction. Check first
 
 ## License
 
-MIT — see [LICENSE](./LICENSE).
+MIT