launchframe 0.2.2 → 0.2.4

package/template/.windsurf/workflows/clone-website.md

@@ -36,16 +36,22 @@ 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 is required.** Check for available browser MCP tools (Chrome MCP, Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). Use whichever is available — if multiple exist, prefer Chrome MCP. If none are detected, ask the user which browser tool they have and how to connect it. This skill cannot work without browser automation.
+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.
 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/`. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
+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>/`.
 6. When working with multiple sites in one command, optionally confirm whether to run them in parallel (recommended, if resources allow) or sequentially to avoid overload.
 
 ## Guiding Principles
 
 These are the truths that separate a successful clone from a "close enough" mess. Internalize them — they should inform every decision you make.
 
+### 0. Launchframe priorities: media & motion (do not defer)
+
+**Raster & video are first-class.** Before you treat the page as “mostly typography,” run a dedicated **media inventory** (see `@docs/research/INSPECTION_GUIDE.md` Priority section): every `<img>`, `<picture>` / `<source>`, `<video>` (+ poster), and non-trivial `background-image`. Download to `public/images/` and `public/videos/` and write `docs/research/MEDIA_MANIFEST.md` (URL → local path, or `BLOCKED` + reason). Component specs MUST list concrete `public/...` paths; if you use a placeholder, say why in `docs/research/EXTRACTION_LIMITATIONS.md`. Never silently drop a hero layer, reel, or og visual.
+
+**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`) 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, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
+
 ### 1. Completeness Beats Speed
 
 Every builder agent must receive **everything** it needs to do its job perfectly: screenshot, exact CSS values, downloaded assets with local paths, real text content, component structure. If a builder has to guess anything — a color, a font size, a padding value — you have failed at extraction. Take the extra minute to extract one more property rather than shipping an incomplete brief.
@@ -190,11 +196,12 @@ Save this as `docs/research/PAGE_TOPOLOGY.md` — it becomes your assembly bluep
 This is sequential. Do it yourself (not delegated to an agent) since it touches many files:
 
 1. **Update fonts** in `layout.tsx` to match the target site's actual fonts
-2. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
-3. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
-4. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
-5. **Download global assets** — write and run a Node.js script (`scripts/download-assets.mjs`) that downloads all images, videos, and other binary assets from the page to `public/`. Preserve meaningful directory structure.
-6. Verify: `npm run build` passes
+2. **Confirm Framer Motion** — `framer-motion` should already be in `package.json`. If missing, add it (`npm install framer-motion`) so builders can import `motion` without ad-hoc library drift.
+3. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
+4. **Media inventory + download (early, high priority)** — run the asset discovery script (below) via browser MCP, write `docs/research/MEDIA_MANIFEST.md`, then implement **`scripts/download-assets.mjs`** and execute it so **images** land in `public/images/` and **videos** (+ posters) in `public/videos/` (or a clear subdirectory scheme under `public/`). Batch parallel downloads (4 concurrent) with errors logged — do not claim success if URLs failed. This step should complete **before** most section components are built so builders use real paths.
+5. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
+6. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
+7. Verify: `npm run build` passes
 
 ### Asset Discovery Script Pattern
 
@@ -351,11 +358,16 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **State A (before):** maxWidth: 100vw, boxShadow: none, borderRadius: 0
 - **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1), borderRadius: 16px
 - **Transition:** transition: all 0.3s ease
-- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | etc.>
+- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | **framer-motion** (`motion`, `whileInView`, stagger container) | etc.>
 
 ### Hover states
 - **<Element>:** <property>: <before> → <after>, transition: <value>
 
+## Motion (Framer Motion vs CSS)
+- **Entrance / scroll reveals:** <e.g. fade+translateY, staggerChildren — specify duration, easing, delay, viewport `once`/`margin`>
+- **Library:** <`framer-motion` | CSS-only — justify if CSS-only>
+- **Keyframes / springs:** <if any — match target curve>
+
 ## Per-State Content (if applicable)
 
 ### State: "Featured"
@@ -367,9 +379,10 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - Title: "..."
 - Cards: [...]
 
-## Assets
-- Background image: `public/images/<file>.webp`
-- Overlay image: `public/images/<file>.png`
+## Assets (images & video — required detail)
+- Raster: `public/images/<file>` — dimensions, `object-fit`, lazy if below fold
+- Video: `public/videos/<file>` — poster `public/images/...` or `public/videos/...`, autoplay/muted/loop, controls
+- Background layers: which div uses `background-image` and resolved URL → local path
 - Icons used: <ArrowIcon>, <SearchIcon> from icons.tsx
 
 ## Text Content (verbatim)
@@ -443,7 +456,7 @@ For every section, replace:
 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:
-- Spacing, padding, typography scale, color tokens, animations, responsive breakpoints — those are still 1:1 to the original
+- Spacing, padding, typography scale, color tokens, **animation timing & motion choreography** (including Framer Motion `variants` / `transition` props), responsive breakpoints — those are still 1:1 to the original
 - Section order, section count, component structure
 - Interaction models (scroll-driven stays scroll-driven, etc.)
 - Any computed-style value extracted in Phase 3
@@ -477,6 +490,8 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] For scroll-driven components: trigger threshold, before/after styles, and transition are recorded
 - [ ] For hover states: before/after values and transition timing are recorded
 - [ ] 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: CSS vs **framer-motion**, durations, easings, stagger, scroll triggers
 - [ ] 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
@@ -493,6 +508,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't build everything in one monolithic commit.** The whole point of this pipeline is incremental progress with verified builds at each step.
 - **Don't reference docs from builder prompts.** Each builder gets the CSS spec inline in its prompt — never "see DESIGN_TOKENS.md for colors." The builder should have zero need to read external docs.
 - **Don't skip asset extraction.** Without real images, videos, and fonts, the clone will always look fake regardless of how perfect the CSS is.
+- **Don't defer image/video download to the end.** Run `MEDIA_MANIFEST.md` + `download-assets.mjs` during foundation so components reference real `public/` paths from the first build.
+- **Don't fake complex motion with a single CSS `transition` when the target uses staggered, scroll-scrubbed, or layout-driven animation** — use **`framer-motion`** (`motion`, `whileInView`, `variants`, `staggerChildren`) and match duration/easing from extraction.
 - **Don't give a builder agent too much scope.** If you're writing a builder prompt and it's getting long because the section is complex, that's a signal to break it into smaller tasks.
 - **Don't bundle unrelated sections into one agent.** A CTA section and a footer are different components with different designs — don't hand them both to one agent and hope for the best.
 - **Don't 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.
@@ -507,7 +524,7 @@ When done, report:
 - Total sections built
 - Total components created
 - Total spec files written (should match components)
-- Total assets downloaded (images, videos, SVGs, fonts)
+- Total assets downloaded (images, videos, SVGs, fonts) — path to `docs/research/MEDIA_MANIFEST.md`
 - Rebrand summary (path to `docs/research/REBRAND.md`)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)

package/template/AGENTS.md

@@ -1,79 +1,100 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
-
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->
-
-# Launchframe Project (AI Website Cloner + SaaS Rebrand)
-
-## What This Is
-This project was scaffolded by [Launchframe](https://github.com/evangruhlkey/launchframe) via `npx launchframe@latest <url> "<saas idea>"`. It is a Next.js + shadcn/ui + Tailwind v4 base wired with an AI-cloner skill (`/clone-website`) that reverse-engineers a real website pixel-perfectly and then re-skins its copy/branding for the user's SaaS idea.
-
-## Single Source of Truth: `launchframe.config.json`
-At the project root there is a `launchframe.config.json` containing:
-- `url` — the visual source-of-truth to clone
-- `idea` — the SaaS idea used as the rebranding directive after the clone
-
-**Always read this file first** at the start of any cloning or build task. The `/clone-website` skill depends on it.
-
-## What the user says (zero-setup flow)
-Users scaffold with `npx launchframe@latest <url> "<saas idea>"` — `npm install` already ran — then they open this folder and say **Build it** (or **Go**, **Ship it**, **Clone the site**).
-
-When you see that with no other instructions, **start the full clone-website pipeline immediately** using only `launchframe.config.json` for `url` and `idea`. Do not ask them to repeat the URL unless the config is missing or invalid. `/clone-website` is an alias for the same work.
-
-## 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)
-- **Styling:** Tailwind CSS v4 with oklch design tokens
-- **Deployment:** Vercel
-
-## Commands
-- `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
-
-## Code Style
-- TypeScript strict mode, no `any`
-- Named exports, PascalCase components, camelCase utils
-- Tailwind utility classes, no inline styles
-- 2-space indentation
-- Responsive: mobile-first
-
-## Design Principles
-- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
-- **No personal aesthetic changes during emulation phase** — match 1:1 first, rebrand later
-- **Real content during extraction** — use actual text and assets from the target site so the clone scaffolds against real shapes
-- **Rebrand pass swaps copy, not visuals** — once the clone is built, replace product name, headlines, feature copy, and brand marks with content tuned to `launchframe.config.json#idea`. Do NOT alter spacing, color tokens, typography scale, animations, or responsive breakpoints during the rebrand.
-- **Beauty-first** — every pixel matters
-
-## Project Structure
-```
-src/
-  app/              # Next.js routes
-  components/       # React components
-    ui/             # shadcn/ui primitives
-    icons.tsx       # Extracted SVG icons as React components
-  lib/
-    utils.ts        # cn() utility (shadcn)
-  types/            # TypeScript interfaces
-  hooks/            # Custom React hooks
-public/
-  images/           # Downloaded images from target site
-  videos/           # Downloaded videos from target site
-  seo/              # Favicons, OG images, webmanifest
-docs/
-  research/         # Inspection output (design tokens, components, layout)
-  design-references/ # Screenshots and visual references
-scripts/            # Asset download scripts
-```
-
-## MOST IMPORTANT NOTES
-- **Always start by reading `launchframe.config.json`** — that file dictates the URL to clone and the SaaS idea to re-skin for.
-- 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.
-
-@docs/research/INSPECTION_GUIDE.md
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
+
+# Launchframe Project (AI Website Cloner + SaaS Rebrand)
+
+## What This Is
+This project was scaffolded by [Launchframe](https://github.com/evangruhlkey/launchframe) via `npx launchframe@latest <url> "<saas idea>"`. It is a Next.js + shadcn/ui + Tailwind v4 base wired with an AI-cloner skill (`/clone-website`) that reverse-engineers a real website pixel-perfectly and then re-skins its copy/branding for the user's SaaS idea.
+
+## Single Source of Truth: `launchframe.config.json`
+At the project root there is a `launchframe.config.json` containing:
+- `url` — the visual source-of-truth to clone
+- `idea` — the SaaS idea used as the rebranding directive after the clone
+
+**Always read this file first** at the start of any cloning or build task. The `/clone-website` skill depends on it.
+
+## What the user says (zero-setup flow)
+Users scaffold with `npx launchframe@latest <url> "<saas idea>"` — `npm install` already ran — then they open this folder and say **Build it** (or **Go**, **Ship it**, **Clone the site**).
+
+When you see that with no other instructions, **start the full clone-website pipeline immediately** using only `launchframe.config.json` for `url` and `idea`. Do not ask them to repeat the URL unless the config is missing or invalid. `/clone-website` is an alias for the same work.
+
+## Tech Stack
+- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
+- **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
+- **Motion:** **Framer Motion** (`framer-motion`) — **default for non-trivial animation** (scroll reveals, staggers, layout, gestures). Use CSS `transition` / `@keyframes` only when they reproduce the target exactly without JS.
+- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)
+- **Styling:** Tailwind CSS v4 with oklch design tokens
+- **Media:** Real **images & videos** from the target URL, saved under `public/images/` and `public/videos/` (see `.claude/skills/clone-website/SKILL.md` and `docs/research/INSPECTION_GUIDE.md`). Do not ship a “pretty shell” with missing raster/video unless extraction is **blocked** and documented in `docs/research/EXTRACTION_LIMITATIONS.md`.
+- **Deployment:** Vercel
+
+## Priority: images, videos & motion
+Treat these as **first-class deliverables**, not polish at the end.
+
+1. **Raster & video** — Early in recon, inventory every `<img>`, `<picture>` / `<source>`, `<video>`, poster image, and meaningful `background-image` URL. Download into `public/` and reference **local paths** in specs and components. Hero bands and marketing sections often fail visually when a single layer is skipped.
+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**.
+
+## Commands
+- `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
+- **`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: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`
+
+## When Browser MCP is down
+Prefer **Playwright** for repeatable extraction in-repo — do **not** rely on Chrome DevTools MCP alone.
+
+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/`.
+
+## Code Style
+- TypeScript strict mode, no `any`
+- Named exports, PascalCase components, camelCase utils
+- Tailwind utility classes, no inline styles
+- 2-space indentation
+- Responsive: mobile-first
+
+## 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.
+- **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
+- **Rebrand pass swaps copy, not visuals** — once the clone is built, replace product name, headlines, feature copy, and brand marks with content tuned to `launchframe.config.json#idea`. Do NOT alter spacing, color tokens, typography scale, animations, or responsive breakpoints during the rebrand.
+- **Beauty-first** — every pixel matters
+
+## Project Structure
+```
+src/
+  app/              # Next.js routes
+  components/       # React components
+    ui/             # shadcn/ui primitives
+    icons.tsx       # Extracted SVG icons as React components
+  lib/
+    utils.ts        # cn() utility (shadcn)
+  types/            # TypeScript interfaces
+  hooks/            # Custom React hooks
+public/
+  images/           # Downloaded images from target site
+  videos/           # Downloaded videos from target site
+  seo/              # Favicons, OG images, webmanifest
+docs/
+  research/         # Inspection output (design tokens, components, layout)
+  design-references/ # Screenshots and visual references
+scripts/            # Asset download scripts
+```
+
+## MOST IMPORTANT NOTES
+- **Always start by reading `launchframe.config.json`** — that file dictates the URL to clone and the SaaS idea to re-skin for.
+- 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.
+
+@docs/research/INSPECTION_GUIDE.md

package/template/README.md

@@ -1,118 +1,121 @@
-# Launchframe Project
-
-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>"
-```
-
-Dependencies were installed for you. It bundles the [`ai-website-cloner-template`](https://github.com/JCodesMore/ai-website-cloner-template) workflow with **`launchframe.config.json`** (your `url` + SaaS `idea`).
-
----
-
-## Quick start (two steps)
-
-1. **Open this folder** in [Cursor](https://cursor.com/) (or any AI editor).
-2. In chat, say: **Build it.**
-
-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`**).
-
-Rather read a postcard? See [`START_HERE.md`](./START_HERE.md).
-
-## What `/clone-website` does
-
-A multi-phase pipeline runs inside your AI agent:
-
-1. **Reconnaissance** — screenshots, design-token extraction, interaction sweep (scroll, click, hover, responsive)
-2. **Foundation** — updates fonts, colors, globals, downloads all assets
-3. **Component Specs** — writes detailed spec files (`docs/research/components/`) with exact computed CSS values
-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
-
-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
-
-| Agent                                                         | Status                     |
-| ------------------------------------------------------------- | -------------------------- |
-| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **Recommended** — Opus 4.7 |
-| [Codex CLI](https://github.com/openai/codex)                  | 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                  |
-| [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                  |
-
-## Tech Stack
-
-- **Next.js 16** — App Router, React 19, TypeScript strict
-- **shadcn/ui** — Radix primitives + Tailwind CSS v4
-- **Tailwind CSS v4** — oklch design tokens
-- **Lucide React** — default icons (replaced by extracted SVGs during cloning)
-
-## Prerequisites
-
-- [Node.js](https://nodejs.org/) 24+
-- An AI coding agent with browser automation MCP (Chrome MCP, Playwright MCP, Browserbase MCP, etc.)
-
-## Project Structure
-
-```
-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)
-```
-
-## Commands
-
-```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
-```
-
-## Use Cases
-
-- **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** — 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
+# Launchframe Project
+
+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>"
+```
+
+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`).
+
+---
+
+## Quick start (two steps)
+
+1. **Open this folder** in [Cursor](https://cursor.com/) — the directory that **contains** `.cursor/` (not a parent folder).
+2. In chat, say: **Build it.**
+
+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`**).
+
+Rather read a postcard? See [`START_HERE.md`](./START_HERE.md).
+
+## What `/clone-website` does
+
+A multi-phase pipeline runs inside your AI agent:
+
+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
+
+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
+
+| Agent                                                         | Status                     |
+| ------------------------------------------------------------- | -------------------------- |
+| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **Recommended** — Opus 4.7 |
+| [Codex CLI](https://github.com/openai/codex)                  | 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                  |
+| [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                  |
+
+## Tech Stack
+
+- **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`)
+
+## Prerequisites
+
+- [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`
+
+## Project Structure
+
+```
+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)
+```
+
+## Commands
+
+```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
+```
+
+## Use Cases
+
+- **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** — 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

package/template/START_HERE.md

@@ -1,15 +1,15 @@
-# Start here
-
-You already ran `npx launchframe@latest <url> "<saas idea>"` — dependencies were installed for you.
-
-## Do this next
-
-1. **Open this folder** in [Cursor](https://cursor.com/) (or any AI editor).
-2. In chat, say: **Build it.**
-
-That tells your AI to read `launchframe.config.json` and `AGENTS.md` and run the full **clone + SaaS rebrand** pipeline (same work as `/clone-website`).
-
-## Optional
-
-- Prefer a slash command? Use **`/clone-website`** in Cursor.
-- Wrong URL or idea? Edit **`launchframe.config.json`**, then say **Build it** again.
+# Start here
+
+Launchframe wrote files into **this folder** (your project root), including **`.cursor`** and **`.claude`**, so they work when you open this directory in your editor.
+
+## Do this next
+
+1. **Open this folder** in [Cursor](https://cursor.com/) (the root that contains `.cursor` — not a parent directory).
+2. In chat, say: **Build it.**
+
+That tells your AI to read `launchframe.config.json` and `AGENTS.md` and run the full **clone + SaaS rebrand** pipeline (same work as `/clone-website`).
+
+## Optional
+
+- Prefer a slash command? Use **`/clone-website`** in Cursor.
+- Wrong URL or idea? Edit **`launchframe.config.json`**, then say **Build it** again.