launchframe 0.4.11 → 0.4.13

package/.continue/commands/snapshot.md

@@ -0,0 +1,84 @@
+---
+name: snapshot
+description: "Verbatim page snapshot — run inspect:page, copy document.html to public/captured/, and show it on the home route via a full-viewport iframe (not a React rebuild)."
+invokable: true
+---
+<!-- AUTO-GENERATED from .claude/skills/snapshot/SKILL.md — do not edit directly.
+     Run `node scripts/sync-skills.mjs` to regenerate. -->
+
+
+# Snapshot (`/snapshot`)
+
+**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).
+
+Parse **$ARGUMENTS**:
+
+1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.
+
+## Step 1 — Persist the source URL
+
+Update **`src/lib/launchframe-config.ts`**:
+
+- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).
+
+## Step 2 — Capture (mandatory)
+
+From the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):
+
+1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.
+2. **Capture:**
+
+```bash
+npm run inspect:page -- "<URL>" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/<hostname>/page-inspection"
+```
+
+This creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.
+
+If navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.
+
+## Step 3 — Verbatim copy to `public`
+
+1. Ensure **`public/captured/`** exists.
+2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).
+3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:
+
+   **`public/captured/<host-slug>-document.html`**
+
+   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).
+
+Same-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.
+
+## Step 4 — Home page iframe
+
+Replace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):
+
+```tsx
+export default function Home() {
+  return (
+    <iframe
+      src="/captured/<host-slug>-document.html"
+      title="Captured snapshot"
+      className="fixed inset-0 h-dvh w-dvw border-0"
+    />
+  );
+}
+```
+
+Use the same **`<host-slug>`** as in Step 3.
+
+## Step 5 — Verify
+
+Run **`npm run build`** and fix any errors.
+
+## What to tell the user
+
+After **`npm run dev`**:
+
+- **Iframe:** `http://localhost:3000/`
+- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`
+
+## What not to do
+
+- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).
+- Do **not** hand-rebuild the page in React for this command.
+- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.

package/.cursor/commands/launchframe.md

@@ -22,7 +22,7 @@ Before reconnaissance, write or update:
 
 ### Step 0a — Automated page inspection dump (mandatory)
 
-Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — a frozen DOM/CSS/motion bundle to attach or diff alongside live `getComputedStyle` / WAAPI work (**this does not replace** Chrome MCP for numeric motion and interaction sweeps).
+Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).
 
 1. **One-time per machine:** `npx playwright install chromium`
 2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):

package/.cursor/commands/snapshot.md

@@ -0,0 +1,79 @@
+<!-- AUTO-GENERATED from .claude/skills/snapshot/SKILL.md — do not edit directly.
+     Run `node scripts/sync-skills.mjs` to regenerate. -->
+
+
+# Snapshot (`/snapshot`)
+
+**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).
+
+Parse **the reference URL the user passed with /snapshot**:
+
+1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.
+
+## Step 1 — Persist the source URL
+
+Update **`src/lib/launchframe-config.ts`**:
+
+- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).
+
+## Step 2 — Capture (mandatory)
+
+From the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):
+
+1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.
+2. **Capture:**
+
+```bash
+npm run inspect:page -- "<URL>" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/<hostname>/page-inspection"
+```
+
+This creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.
+
+If navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.
+
+## Step 3 — Verbatim copy to `public`
+
+1. Ensure **`public/captured/`** exists.
+2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).
+3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:
+
+   **`public/captured/<host-slug>-document.html`**
+
+   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).
+
+Same-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.
+
+## Step 4 — Home page iframe
+
+Replace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):
+
+```tsx
+export default function Home() {
+  return (
+    <iframe
+      src="/captured/<host-slug>-document.html"
+      title="Captured snapshot"
+      className="fixed inset-0 h-dvh w-dvw border-0"
+    />
+  );
+}
+```
+
+Use the same **`<host-slug>`** as in Step 3.
+
+## Step 5 — Verify
+
+Run **`npm run build`** and fix any errors.
+
+## What to tell the user
+
+After **`npm run dev`**:
+
+- **Iframe:** `http://localhost:3000/`
+- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`
+
+## What not to do
+
+- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).
+- Do **not** hand-rebuild the page in React for this command.
+- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.

package/.gemini/commands/launchframe.toml

@@ -26,7 +26,7 @@ Before reconnaissance, write or update:
 
 ### Step 0a — Automated page inspection dump (mandatory)
 
-Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — a frozen DOM/CSS/motion bundle to attach or diff alongside live `getComputedStyle` / WAAPI work (**this does not replace** Chrome MCP for numeric motion and interaction sweeps).
+Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).
 
 1. **One-time per machine:** `npx playwright install chromium`
 2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):

package/.gemini/commands/snapshot.toml

@@ -0,0 +1,85 @@
+# AUTO-GENERATED from .claude/skills/snapshot/SKILL.md
+# Run `node scripts/sync-skills.mjs` to regenerate.
+
+description = "Verbatim page snapshot — run inspect:page, copy document.html to public/captured/, and show it on the home route via a full-viewport iframe (not a React rebuild)."
+
+[prompt]
+text = '''
+
+# Snapshot (`/snapshot`)
+
+**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).
+
+Parse **{{args}}**:
+
+1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.
+
+## Step 1 — Persist the source URL
+
+Update **`src/lib/launchframe-config.ts`**:
+
+- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).
+
+## Step 2 — Capture (mandatory)
+
+From the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):
+
+1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.
+2. **Capture:**
+
+```bash
+npm run inspect:page -- "<URL>" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/<hostname>/page-inspection"
+```
+
+This creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.
+
+If navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.
+
+## Step 3 — Verbatim copy to `public`
+
+1. Ensure **`public/captured/`** exists.
+2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).
+3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:
+
+   **`public/captured/<host-slug>-document.html`**
+
+   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).
+
+Same-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.
+
+## Step 4 — Home page iframe
+
+Replace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):
+
+```tsx
+export default function Home() {
+  return (
+    <iframe
+      src="/captured/<host-slug>-document.html"
+      title="Captured snapshot"
+      className="fixed inset-0 h-dvh w-dvw border-0"
+    />
+  );
+}
+```
+
+Use the same **`<host-slug>`** as in Step 3.
+
+## Step 5 — Verify
+
+Run **`npm run build`** and fix any errors.
+
+## What to tell the user
+
+After **`npm run dev`**:
+
+- **Iframe:** `http://localhost:3000/`
+- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`
+
+## What not to do
+
+- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).
+- Do **not** hand-rebuild the page in React for this command.
+- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.
+
+'''

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

@@ -26,7 +26,7 @@ Before reconnaissance, write or update:
 
 ### Step 0a — Automated page inspection dump (mandatory)
 
-Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — a frozen DOM/CSS/motion bundle to attach or diff alongside live `getComputedStyle` / WAAPI work (**this does not replace** Chrome MCP for numeric motion and interaction sweeps).
+Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).
 
 1. **One-time per machine:** `npx playwright install chromium`
 2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):

package/.github/skills/snapshot/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: snapshot
+description: Verbatim page snapshot — run inspect:page, copy document.html to public/captured/, and show it on the home route via a full-viewport iframe (not a React rebuild).
+argument-hint: "<url>"
+argument-substitution: the reference URL the user passed with /snapshot
+user-invocable: true
+---
+
+# Snapshot (`/snapshot`)
+
+**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).
+
+Parse **$ARGUMENTS**:
+
+1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.
+
+## Step 1 — Persist the source URL
+
+Update **`src/lib/launchframe-config.ts`**:
+
+- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).
+
+## Step 2 — Capture (mandatory)
+
+From the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):
+
+1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.
+2. **Capture:**
+
+```bash
+npm run inspect:page -- "<URL>" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/<hostname>/page-inspection"
+```
+
+This creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.
+
+If navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.
+
+## Step 3 — Verbatim copy to `public`
+
+1. Ensure **`public/captured/`** exists.
+2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).
+3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:
+
+   **`public/captured/<host-slug>-document.html`**
+
+   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).
+
+Same-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.
+
+## Step 4 — Home page iframe
+
+Replace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):
+
+```tsx
+export default function Home() {
+  return (
+    <iframe
+      src="/captured/<host-slug>-document.html"
+      title="Captured snapshot"
+      className="fixed inset-0 h-dvh w-dvw border-0"
+    />
+  );
+}
+```
+
+Use the same **`<host-slug>`** as in Step 3.
+
+## Step 5 — Verify
+
+Run **`npm run build`** and fix any errors.
+
+## What to tell the user
+
+After **`npm run dev`**:
+
+- **Iframe:** `http://localhost:3000/`
+- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`
+
+## What not to do
+
+- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).
+- Do **not** hand-rebuild the page in React for this command.
+- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.

package/.opencode/commands/launchframe.md

@@ -25,7 +25,7 @@ Before reconnaissance, write or update:
 
 ### Step 0a — Automated page inspection dump (mandatory)
 
-Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — a frozen DOM/CSS/motion bundle to attach or diff alongside live `getComputedStyle` / WAAPI work (**this does not replace** Chrome MCP for numeric motion and interaction sweeps).
+Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).
 
 1. **One-time per machine:** `npx playwright install chromium`
 2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):

package/.opencode/commands/snapshot.md

@@ -0,0 +1,82 @@
+---
+description: "Verbatim page snapshot — run inspect:page, copy document.html to public/captured/, and show it on the home route via a full-viewport iframe (not a React rebuild)."
+---
+<!-- AUTO-GENERATED from .claude/skills/snapshot/SKILL.md — do not edit directly.
+     Run `node scripts/sync-skills.mjs` to regenerate. -->
+
+
+# Snapshot (`/snapshot`)
+
+**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).
+
+Parse **$ARGUMENTS**:
+
+1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.
+
+## Step 1 — Persist the source URL
+
+Update **`src/lib/launchframe-config.ts`**:
+
+- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).
+
+## Step 2 — Capture (mandatory)
+
+From the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):
+
+1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.
+2. **Capture:**
+
+```bash
+npm run inspect:page -- "<URL>" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/<hostname>/page-inspection"
+```
+
+This creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.
+
+If navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.
+
+## Step 3 — Verbatim copy to `public`
+
+1. Ensure **`public/captured/`** exists.
+2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).
+3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:
+
+   **`public/captured/<host-slug>-document.html`**
+
+   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).
+
+Same-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.
+
+## Step 4 — Home page iframe
+
+Replace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):
+
+```tsx
+export default function Home() {
+  return (
+    <iframe
+      src="/captured/<host-slug>-document.html"
+      title="Captured snapshot"
+      className="fixed inset-0 h-dvh w-dvw border-0"
+    />
+  );
+}
+```
+
+Use the same **`<host-slug>`** as in Step 3.
+
+## Step 5 — Verify
+
+Run **`npm run build`** and fix any errors.
+
+## What to tell the user
+
+After **`npm run dev`**:
+
+- **Iframe:** `http://localhost:3000/`
+- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`
+
+## What not to do
+
+- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).
+- Do **not** hand-rebuild the page in React for this command.
+- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.

package/.windsurf/workflows/launchframe.md

@@ -22,7 +22,7 @@ Before reconnaissance, write or update:
 
 ### Step 0a — Automated page inspection dump (mandatory)
 
-Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — a frozen DOM/CSS/motion bundle to attach or diff alongside live `getComputedStyle` / WAAPI work (**this does not replace** Chrome MCP for numeric motion and interaction sweeps).
+Right after Step 0 files are written, **from the repository root**, run the bundled **Playwright** capture **once per parsed reference URL** (before Phase 1 Chrome MCP). This produces **`ai-page-bundle.txt`** (one plain-text file: full post-JS HTML + all captured CSS), plus `document.html`, network `*.css` bodies, `inline-styles.json`, and `motion-summary.json` — attach **`ai-page-bundle.txt`** to the agent when a single pasteable artifact is enough; the frozen bundle complements live `getComputedStyle` / WAAPI work (**it does not replace** Chrome MCP for numeric motion and interaction sweeps).
 
 1. **One-time per machine:** `npx playwright install chromium`
 2. **Per URL** — use the URL’s hostname for the folder (example hostname `www.example.com`):

package/.windsurf/workflows/snapshot.md

@@ -0,0 +1,79 @@
+<!-- AUTO-GENERATED from .claude/skills/snapshot/SKILL.md — do not edit directly.
+     Run `node scripts/sync-skills.mjs` to regenerate. -->
+
+
+# Snapshot (`/snapshot`)
+
+**`/snapshot`** serves a **frozen copy** of a live URL: the captured **`document.html`** from Playwright lives under **`public/captured/`** and **`src/app/page.tsx`** embeds it in a **full-viewport iframe**. This is **verbatim hosting**, not **`/launchframe`** (no component rebuild, no SaaS overlay, no Phase 6 verification).
+
+Parse **the reference URL the user passed with /snapshot**:
+
+1. **URL** — Exactly one `http://` or `https://` URL. If the user omitted it, ask once. If multiple URLs appear, use the **first** only and say you are snapshotting that one.
+
+## Step 1 — Persist the source URL
+
+Update **`src/lib/launchframe-config.ts`**:
+
+- Set **`LAUNCHFRAME_SOURCE_URL`** to the parsed URL (string, `as const`).
+
+## Step 2 — Capture (mandatory)
+
+From the repository root, run **once** for that URL (same inspector as Launchframe Step 0a). Use the URL’s **hostname** for the output parent (example: `https://www.example.com/path` → `www.example.com`):
+
+1. **One-time per machine:** `npx playwright install chromium` if captures fail for missing browsers.
+2. **Capture:**
+
+```bash
+npm run inspect:page -- "<URL>" --scroll-full --wait-until networkidle --timeout 120000 --out-parent "docs/research/<hostname>/page-inspection"
+```
+
+This creates `docs/research/<hostname>/page-inspection/<hostname>-<iso-stamp>/` with **`document.html`** and related artifacts.
+
+If navigation times out, retry with `--wait-until domcontentloaded` or a higher `--timeout`, and record what worked.
+
+## Step 3 — Verbatim copy to `public`
+
+1. Ensure **`public/captured/`** exists.
+2. Pick the **latest** inspection folder under that hostname (sort by the ISO stamp in the folder name).
+3. **Copy** (do not prettify or edit) **`document.html`** from that folder to:
+
+   **`public/captured/<host-slug>-document.html`**
+
+   where **`<host-slug>`** is the URL hostname with each **`.`** replaced by **`-`** (e.g. `www.example.com` → `www-example-com`).
+
+Same-origin scripts and inline styles stay inside the file; external URLs (CDNs) remain as in the capture.
+
+## Step 4 — Home page iframe
+
+Replace **`src/app/page.tsx`** with a single full-viewport iframe **only** (no `sandbox` — it breaks many real pages):
+
+```tsx
+export default function Home() {
+  return (
+    <iframe
+      src="/captured/<host-slug>-document.html"
+      title="Captured snapshot"
+      className="fixed inset-0 h-dvh w-dvw border-0"
+    />
+  );
+}
+```
+
+Use the same **`<host-slug>`** as in Step 3.
+
+## Step 5 — Verify
+
+Run **`npm run build`** and fix any errors.
+
+## What to tell the user
+
+After **`npm run dev`**:
+
+- **Iframe:** `http://localhost:3000/`
+- **Direct static file:** `http://localhost:3000/captured/<host-slug>-document.html`
+
+## What not to do
+
+- Do **not** treat this as **`/launchframe`** (no parallel component specs, no `docs/research/LAUNCHFRAME_SUBAGENTS.md` runs for snapshot).
+- Do **not** hand-rebuild the page in React for this command.
+- Do **not** add `sandbox` on the iframe unless the user explicitly asks and accepts broken script behavior.

package/AGENTS.md

@@ -7,7 +7,7 @@ This version has breaking changes — APIs, conventions, and file structure may
 # Website Reverse-Engineer Template
 
 ## What This Is
-A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — use **`/launchframe <url> "saas idea"`** for the full pixel-perfect clone plus SaaS landing copy (`src/lib/launchframe-config.ts`, `launchframe.context.json`, `docs/research/LAUNCHFRAME.md`). The agent executing **`/launchframe`** must follow **Step 0a** in that command: run **`npm run inspect:page`** once per reference URL (Playwright: `document.html`, network CSS, `motion-summary.json`) before Phase 1. For a **new empty folder** only, **`npx launchframe@latest`** unpacks this template; then run **`/launchframe`** in that project with your URL and pitch.
+A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — use **`/launchframe <url> "saas idea"`** for the full pixel-perfect clone plus SaaS landing copy (`src/lib/launchframe-config.ts`, `launchframe.context.json`, `docs/research/LAUNCHFRAME.md`). The agent executing **`/launchframe`** must follow **Step 0a** in that command: run **`npm run inspect:page`** once per reference URL (Playwright: `document.html`, network CSS, `motion-summary.json`) before Phase 1. Use **`/snapshot <url>`** for a **verbatim** local copy: Playwright capture → `public/captured/<host>-document.html` → full-viewport iframe on **`src/app/page.tsx`** (not a React rebuild). For a **new empty folder** only, **`npx launchframe@latest`** unpacks this template; then run **`/launchframe`** in that project with your URL and pitch.
 
 ## Tech Stack
 - **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/README.txt

@@ -0,0 +1,17 @@
+LaunchFrame page inspection capture
+====================================
+Source: https://example.com/
+
+Files:
+  ai-page-bundle.txt — **ALL-IN-ONE for LLMs:** HTML + inline/network CSS as plain text
+  document.html      — Full <html> outerHTML after JS (same HTML as Part 1 of bundle)
+  body-outer.html    — <body> outerHTML only (smaller)
+  inline-styles.json — All inline <style> tag contents
+  motion-summary.json— @keyframes + animation/transition-related lines
+  capture-meta.json  — Viewport, stylesheet URLs, <script> inventory
+  *.css              — Stylesheets observed on the network (unless --no-css-files)
+
+Notes:
+  • Some sites lazy-load CSS; use --scroll-full to force more requests.
+  • Cross-origin styles you cannot access via JS are still captured here if the browser downloaded them.
+  • Motion inside bundled JS (not CSS) is not fully extracted—check script src in capture-meta.json.

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/ai-page-bundle.txt

@@ -0,0 +1,29 @@
+
+================================================================================
+LAUNCHFRAME AI PAGE BUNDLE
+================================================================================
+
+Source URL: https://example.com/
+Generated: 2026-05-15T21:49:16.186Z
+Viewport: 1440x900
+Wait until: domcontentloaded
+
+Single plain-text file: POST-JS HTML plus all captured CSS (inline + network).
+Use document.html / *.css separately if you hit tool context limits.
+
+================================================================================
+PART 1 — HTML (document.documentElement.outerHTML)
+================================================================================
+
+<html lang="en"><head><title>Example Domain</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}</style></head><body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body></html>
+================================================================================
+PART 2 — CSS (inline <style> tags, then network stylesheets)
+================================================================================
+
+/* inline style #0 media=all */
+body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}
+================================================================================
+END OF BUNDLE
+================================================================================
+

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/body-outer.html

@@ -0,0 +1,2 @@
+<body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body>

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/capture-meta.json

@@ -0,0 +1,21 @@
+{
+  "sourceUrl": "https://example.com/",
+  "generatedAt": "2026-05-15T21:49:16.188Z",
+  "viewport": {
+    "width": 1440,
+    "height": 900
+  },
+  "waitUntil": "domcontentloaded",
+  "options": {
+    "scrollFull": false,
+    "wroteCssFiles": true,
+    "wroteAiBundle": true
+  },
+  "outputs": {
+    "documentHtmlBytes": 513,
+    "bodyOuterHtmlBytes": 220,
+    "aiPageBundleBytes": 1769,
+    "networkStylesheets": []
+  },
+  "scripts": []
+}

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/document.html

@@ -0,0 +1,2 @@
+<html lang="en"><head><title>Example Domain</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}</style></head><body><div><h1>Example Domain</h1><p>This domain is for use in documentation examples without needing permission. Avoid use in operations.</p><p><a href="https://iana.org/domains/example">Learn more</a></p></div>
+</body></html>

package/docs/research/example.com/page-inspection/example.com-2026-05-15T21-49-07-887Z/inline-styles.json

@@ -0,0 +1,7 @@
+[
+  {
+    "index": 0,
+    "media": "",
+    "text": "body{background:#eee;width:60vw;margin:15vh auto;font-family:system-ui,sans-serif}h1{font-size:1.5em}div{opacity:0.8}a:link,a:visited{color:#348}"
+  }
+]