launchframe 0.3.1 → 0.4.1

package/template/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "ai-website-cloner-template",
-  "version": "0.3.1",
-  "private": true,
-  "description": "clone any website into a clean, modern Next.js codebase using AI coding agents",
-  "license": "MIT",
-  "keywords": [
-    "claude-code",
-    "website-clone",
-    "reverse-engineering",
-    "nextjs",
-    "ai",
-    "template",
-    "tailwindcss",
-    "shadcn-ui"
-  ],
-  "engines": {
-    "node": ">=24"
-  },
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint",
-    "typecheck": "tsc --noEmit",
-    "check": "npm run lint && npm run typecheck && npm run build",
-    "recon": "node scripts/recon-playwright.mjs",
-    "recon:headed": "node scripts/recon-playwright.mjs --headed"
-  },
-  "dependencies": {
-    "@base-ui/react": "^1.3.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.4.0",
-    "lucide-react": "^1.6.0",
-    "next": "16.2.1",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "shadcn": "^4.1.0",
-    "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.1",
-    "playwright": "^1.49.1",
-    "tailwindcss": "^4",
-    "typescript": "^5"
-  }
-}

package/template/scripts/recon-playwright.mjs

@@ -1,396 +0,0 @@
-#!/usr/bin/env node
-/**
- * Playwright recon when Browser / Chrome DevTools MCP is unavailable or broken.
- *
- * Reads URL from launchframe.config.json (or --url). Writes:
- *   - docs/design-references/playwright-<host>-<w>px.png (full page)
- *   - docs/research/computed-snapshot.json (styles + merged asset inventory + bot-wall hint)
- *   - docs/research/MEDIA_MANIFEST.md (table of discovered media URLs)
- *
- * Usage:
- *   npm run recon
- *   npm run recon:headed
- *   node scripts/recon-playwright.mjs --url https://example.com --headed
- *
- * First time: npx playwright install chromium
- */
-
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
-
-function parseArgs(argv) {
-  const out = { url: null, headed: false, channel: process.env.PW_CHANNEL || undefined };
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a === "--headed" || a === "-H") out.headed = true;
-    else if (a === "--url" || a === "-u") out.url = argv[++i];
-    else if (a.startsWith("--url=")) out.url = a.slice(6);
-    else if (a === "--channel" || a === "-c") out.channel = argv[++i] || undefined;
-  }
-  return out;
-}
-
-function readLaunchframeUrl() {
-  const p = join(ROOT, "launchframe.config.json");
-  if (!existsSync(p)) return null;
-  try {
-    const j = JSON.parse(readFileSync(p, "utf8"));
-    return j.url || null;
-  } catch {
-    return null;
-  }
-}
-
-function safeHost(url) {
-  try {
-    return new URL(url).hostname.replace(/[^a-z0-9.-]+/gi, "_");
-  } catch {
-    return "unknown-host";
-  }
-}
-
-/**
- * Scroll the full document depth slowly so lazy-loaded media and below-fold DOM resolve.
- * Repeats until scrollHeight stabilizes (handles incremental infinite layouts up to max rounds).
- */
-async function scrollFullPage(page) {
-  await page.evaluate(async () => {
-    const delay = (ms) => new Promise((r) => setTimeout(r, ms));
-    const stepSize = () => Math.max(1, Math.floor(window.innerHeight * 0.85));
-
-    let unchangedStreak = 0;
-    let prevTotal = -1;
-
-    for (let round = 0; round < 12; round++) {
-      let y = 0;
-      let limit = document.documentElement.scrollHeight;
-
-      while (y < limit) {
-        y = Math.min(y + stepSize(), limit);
-        window.scrollTo(0, y);
-        await delay(130);
-        limit = document.documentElement.scrollHeight;
-      }
-
-      window.scrollTo(0, document.documentElement.scrollHeight);
-      await delay(420);
-
-      const h = document.documentElement.scrollHeight;
-
-      window.scrollTo(0, 0);
-      await delay(220);
-
-      if (h === prevTotal) unchangedStreak++;
-      else unchangedStreak = 0;
-      prevTotal = h;
-
-      if (unchangedStreak >= 2) break;
-    }
-  });
-}
-
-function mergeAssetInventory(base, extra) {
-  if (!extra) return base;
-  const imgKey = (i) => i.src || "";
-  const seenImg = new Set(base.images.map(imgKey));
-  const images = [...base.images];
-  for (const i of extra.images) {
-    const k = imgKey(i);
-    if (k && !seenImg.has(k)) {
-      seenImg.add(k);
-      images.push(i);
-    }
-  }
-
-  const vidKey = (v) => `${v.src || ""}|${v.poster || ""}`;
-  const seenVid = new Set(base.videos.map(vidKey));
-  const videos = [...base.videos];
-  for (const v of extra.videos) {
-    const k = vidKey(v);
-    if ((v.src || v.poster) && !seenVid.has(k)) {
-      seenVid.add(k);
-      videos.push(v);
-    }
-  }
-
-  const seenBg = new Set(base.backgroundImages.map((b) => b.url));
-  const backgroundImages = [...base.backgroundImages];
-  for (const b of extra.backgroundImages) {
-    if (b.url && !seenBg.has(b.url)) {
-      seenBg.add(b.url);
-      backgroundImages.push(b);
-    }
-  }
-
-  return {
-    images,
-    videos,
-    backgroundImages,
-    svgCount: Math.max(base.svgCount ?? 0, extra.svgCount ?? 0),
-  };
-}
-
-async function gatherPageData(page) {
-  return page.evaluate(() => {
-    const title = document.title || "";
-    const text = (document.body?.innerText || "").slice(0, 80000);
-    const likelyBotWall =
-      /just a moment/i.test(title) ||
-      /checking your browser/i.test(text) ||
-      /cf-browser-verification/i.test(document.documentElement?.innerHTML || "") ||
-      document.querySelector("#challenge-running, .cf-browser-verification, #cf-challenge-running") !== null;
-
-    const imgs = [...document.querySelectorAll("img")].map((img) => ({
-      src: img.currentSrc || img.src || "",
-      srcset: img.srcset || "",
-      alt: img.alt || "",
-      w: img.naturalWidth,
-      h: img.naturalHeight,
-    }));
-
-    const videos = [...document.querySelectorAll("video")].map((v) => ({
-      src: v.currentSrc || v.src || "",
-      poster: v.poster || "",
-      autoplay: v.autoplay,
-      loop: v.loop,
-      muted: v.muted,
-    }));
-
-    const bgUrls = [];
-    const seen = new Set();
-    for (const el of document.querySelectorAll("*")) {
-      if (bgUrls.length > 400) break;
-      const bg = getComputedStyle(el).backgroundImage;
-      if (!bg || bg === "none") continue;
-      const m = /url\(["']?([^"')]+)["']?\)/.exec(bg);
-      if (m && m[1] && !seen.has(m[1])) {
-        seen.add(m[1]);
-        bgUrls.push({ url: m[1], tag: el.tagName.toLowerCase() });
-      }
-    }
-
-    const props = [
-      "fontSize",
-      "fontWeight",
-      "fontFamily",
-      "lineHeight",
-      "letterSpacing",
-      "color",
-      "backgroundColor",
-      "padding",
-      "margin",
-      "maxWidth",
-      "display",
-      "gap",
-      "borderRadius",
-      "boxShadow",
-    ];
-
-    function pickStyles(el) {
-      if (!el) return null;
-      const cs = getComputedStyle(el);
-      const o = {};
-      for (const p of props) o[p] = cs[p];
-      return o;
-    }
-
-    const landmarks = {
-      html: pickStyles(document.documentElement),
-      body: pickStyles(document.body),
-      h1: pickStyles(document.querySelector("h1")),
-      header: pickStyles(document.querySelector("header")),
-      main: pickStyles(document.querySelector("main")),
-      firstSection: pickStyles(document.querySelector("main section, section")),
-    };
-
-    return {
-      title,
-      likelyBotWall,
-      textSample: text.slice(0, 24000),
-      assetInventory: {
-        images: imgs.filter((i) => i.src),
-        videos,
-        backgroundImages: bgUrls,
-        svgCount: document.querySelectorAll("svg").length,
-      },
-      computedLandmarks: landmarks,
-    };
-  });
-}
-
-function writeMediaManifest(host, data, limitationsPath) {
-  const { images, videos, backgroundImages } = data.assetInventory;
-  const lines = [
-    "# MEDIA_MANIFEST (Playwright)",
-    "",
-    `Host: **${host}**`,
-    "",
-    "## Images (`<img>`)",
-    "",
-    "| src | alt | natural |",
-    "|-----|-----|---------|",
-  ];
-  for (const i of images.slice(0, 200)) {
-    const s = i.src.replace(/\|/g, "\\|");
-    lines.push(`| ${s} | ${(i.alt || "").replace(/\|/g, "\\|")} | ${i.w}×${i.h} |`);
-  }
-  if (images.length > 200) lines.push(`\n_…and ${images.length - 200} more_\n`);
-
-  lines.push("", "## Video", "", "| src | poster |", "|-----|--------|");
-  for (const v of videos) {
-    lines.push(`| ${(v.src || "").replace(/\|/g, "\\|")} | ${(v.poster || "").replace(/\|/g, "\\|")} |`);
-  }
-
-  lines.push("", "## Background images (sample)", "", "| url |", "|-----|");
-  for (const b of backgroundImages.slice(0, 150)) {
-    lines.push(`| ${b.url.replace(/\|/g, "\\|")} |`);
-  }
-
-  lines.push("", "---", "", `_Generated by scripts/recon-playwright.mjs. Download with scripts/download-assets.mjs when ready._`);
-  if (limitationsPath) lines.push("", `See also: **${limitationsPath}**`);
-
-  writeFileSync(join(ROOT, "docs", "research", "MEDIA_MANIFEST.md"), lines.join("\n") + "\n", "utf8");
-}
-
-function writeLimitations(host, url, finalUrl, data) {
-  const p = join(ROOT, "docs", "research", "EXTRACTION_LIMITATIONS.md");
-  const lines = [
-    "# Extraction limitations",
-    "",
-    `- **Requested URL:** ${url}`,
-    `- **Final URL:** ${finalUrl}`,
-    `- **Host:** ${host}`,
-    `- **Captured at:** ${new Date().toISOString()}`,
-    `- **Tool:** Playwright (\`npm run recon\`)`,
-    "",
-  ];
-  if (data.likelyBotWall) {
-    lines.push(
-      "## Bot / challenge page suspected",
-      "",
-      "Title or DOM matches common WAF/interstitial patterns. **Computed styles and screenshots may not reflect the real marketing page.** Prefer \`npm run recon:headed\` with real Chrome, or open the site manually and export assets.",
-      ""
-    );
-  } else {
-    lines.push(
-      "## Notes",
-      "",
-      "Snapshot-derived data is from Playwright Chromium, not interactive MCP. Re-run after layout shifts; verify against a real browser for pixel QA.",
-      ""
-    );
-  }
-  writeFileSync(p, lines.join("\n"), "utf8");
-  return "docs/research/EXTRACTION_LIMITATIONS.md";
-}
-
-async function main() {
-  const args = parseArgs(process.argv.slice(2));
-  const url = args.url || readLaunchframeUrl();
-  if (!url) {
-    console.error("No URL: set launchframe.config.json or pass --url https://...");
-    process.exit(1);
-  }
-
-  let chromium;
-  try {
-    ({ chromium } = await import("playwright"));
-  } catch {
-    console.error("Install Playwright: npm i -D playwright && npx playwright install chromium");
-    process.exit(1);
-  }
-
-  const host = safeHost(url);
-  mkdirSync(join(ROOT, "docs", "design-references"), { recursive: true });
-  mkdirSync(join(ROOT, "docs", "research"), { recursive: true });
-
-  const browser = await chromium.launch({
-    headless: !args.headed,
-    channel: args.channel,
-  });
-
-  const context = await browser.newContext({
-    userAgent:
-      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
-    locale: "en-US",
-  });
-
-  const page = await context.newPage();
-
-  const snapshot = {
-    fetchedAt: new Date().toISOString(),
-    requestedUrl: url,
-    finalUrl: null,
-    viewports: {},
-    title: null,
-    likelyBotWall: false,
-    assetInventory: null,
-    computedLandmarks: null,
-    textSample: null,
-  };
-
-  try {
-    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 90_000 });
-    await new Promise((r) => setTimeout(r, 2500));
-    snapshot.finalUrl = page.url();
-
-    let mergedInventory = null;
-    let desktopLandmarks = null;
-
-    for (const w of [1440, 390]) {
-      await page.setViewportSize({ width: w, height: w === 1440 ? 900 : 844 });
-      await scrollFullPage(page);
-
-      const shotPath = join(ROOT, "docs", "design-references", `playwright-${host}-${w}px.png`);
-      await page.screenshot({ path: shotPath, fullPage: true });
-      snapshot.viewports[w] = { screenshot: `docs/design-references/playwright-${host}-${w}px.png` };
-
-      const data = await gatherPageData(page);
-
-      if (w === 1440) {
-        snapshot.title = data.title;
-        snapshot.likelyBotWall = data.likelyBotWall;
-        mergedInventory = data.assetInventory;
-        desktopLandmarks = data.computedLandmarks;
-        snapshot.textSample = data.textSample;
-      } else {
-        mergedInventory = mergeAssetInventory(mergedInventory, data.assetInventory);
-      }
-    }
-
-    snapshot.assetInventory = mergedInventory;
-    snapshot.computedLandmarks = desktopLandmarks;
-  } finally {
-    await browser.close();
-  }
-
-  const limRel = writeLimitations(host, url, snapshot.finalUrl, {
-    likelyBotWall: snapshot.likelyBotWall,
-  });
-
-  writeFileSync(
-    join(ROOT, "docs", "research", "computed-snapshot.json"),
-    JSON.stringify(snapshot, null, 2) + "\n",
-    "utf8"
-  );
-
-  if (snapshot.assetInventory) {
-    writeMediaManifest(host, { assetInventory: snapshot.assetInventory }, limRel);
-  }
-
-  console.log("Playwright recon finished.");
-  console.log(`  Screenshots: docs/design-references/playwright-${host}-1440px.png (+ 390px)`);
-  console.log(`  Snapshot:    docs/research/computed-snapshot.json`);
-  console.log(`  Media list:  docs/research/MEDIA_MANIFEST.md`);
-  console.log(`  Limits:      ${limRel}`);
-  if (snapshot.likelyBotWall) {
-    console.warn("\n⚠ Possible bot wall / challenge page — check EXTRACTION_LIMITATIONS.md and try: npm run recon:headed\n");
-  }
-}
-
-main().catch((e) => {
-  console.error(e);
-  process.exit(1);
-});

package/template/scripts/sync-skills.mjs

@@ -1,111 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Generates clone-website command/skill files for all supported AI coding platforms.
- * Source of truth: .claude/skills/clone-website/SKILL.md
- *
- * Usage: node scripts/sync-skills.mjs
- */
-
-import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
-const SOURCE = join(ROOT, '.claude', 'skills', 'clone-website', 'SKILL.md');
-
-// --- Parse source skill ---
-
-let raw;
-try {
-  raw = readFileSync(SOURCE, 'utf8').replace(/\r\n/g, '\n');
-} catch {
-  console.error(`Error: Source skill not found at .claude/skills/clone-website/SKILL.md`);
-  process.exit(1);
-}
-
-const match = raw.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
-if (!match) {
-  console.error('Error: Could not parse SKILL.md frontmatter');
-  process.exit(1);
-}
-
-const body = match[2];
-const shortDesc = 'Reverse-engineer and clone any website as a pixel-perfect replica';
-
-// --- Helpers ---
-
-function write(relPath, content) {
-  const full = join(ROOT, relPath);
-  mkdirSync(dirname(full), { recursive: true });
-  writeFileSync(full, content, 'utf8');
-  console.log(`  \u2713 ${relPath}`);
-}
-
-const HEADER =
-  '<!-- AUTO-GENERATED from .claude/skills/clone-website/SKILL.md \u2014 do not edit directly.\n' +
-  '     Run `node scripts/sync-skills.mjs` to regenerate. -->\n\n';
-
-const noArgs = (text) => text.replace(/\$ARGUMENTS/g, 'the target URL provided by the user');
-
-// --- Generate ---
-
-console.log('Syncing clone-website skill to all platforms...');
-console.log(`  Source: .claude/skills/clone-website/SKILL.md\n`);
-
-// 1. Codex CLI — same SKILL.md format, same $ARGUMENTS syntax
-write('.codex/skills/clone-website/SKILL.md', raw);
-
-// 2. GitHub Copilot — same SKILL.md format
-write('.github/skills/clone-website/SKILL.md', raw);
-
-// 3. Cursor — plain markdown, no argument substitution support
-write('.cursor/commands/clone-website.md', HEADER + noArgs(body));
-
-// 4. Windsurf — markdown workflow
-write('.windsurf/workflows/clone-website.md', HEADER + noArgs(body));
-
-// 5. Gemini CLI — TOML format, {{args}} for arguments
-const geminiBody = body.replace(/\$ARGUMENTS/g, '{{args}}');
-write(
-  '.gemini/commands/clone-website.toml',
-  `# AUTO-GENERATED from .claude/skills/clone-website/SKILL.md\n` +
-    `# Run \`node scripts/sync-skills.mjs\` to regenerate.\n\n` +
-    `description = "${shortDesc}"\n\n` +
-    `[prompt]\ntext = '''\n${geminiBody}\n'''\n`
-);
-
-// 6. OpenCode — markdown + YAML frontmatter, $ARGUMENTS works natively
-write(
-  '.opencode/commands/clone-website.md',
-  `---\ndescription: "${shortDesc}"\n---\n${HEADER}${body}`
-);
-
-// 7. Augment Code — markdown + YAML frontmatter
-write(
-  '.augment/commands/clone-website.md',
-  `---\ndescription: "${shortDesc}"\nargument-hint: "<url>"\n---\n${HEADER}${body}`
-);
-
-// 8. Continue — prompt file with invokable: true
-write(
-  '.continue/commands/clone-website.md',
-  `---\nname: clone-website\ndescription: "${shortDesc}"\ninvokable: true\n---\n${HEADER}${body}`
-);
-
-// 9. Amazon Q — JSON agent definition
-write(
-  '.amazonq/cli-agents/clone-website.json',
-  JSON.stringify(
-    {
-      name: 'clone-website',
-      description: shortDesc,
-      prompt: noArgs(body),
-      fileContext: ['AGENTS.md', 'docs/research/**'],
-    },
-    null,
-    2
-  ) + '\n'
-);
-
-console.log('\nDone! 9 platform command files generated from source skill.');

package/template/src/app/page.tsx

@@ -1,5 +0,0 @@
-import { ScribewiseLanding } from "@/components/marketing/scribewise-landing";
-
-export default function Home() {
-  return <ScribewiseLanding />;
-}

package/template/src/components/marketing/scribewise-landing.tsx

@@ -1,34 +0,0 @@
-import Link from "next/link";
-
-import { Button } from "@/components/ui/button";
-
-export function ScribewiseLanding() {
-  return (
-    <main className="relative flex flex-1 flex-col items-center justify-center gap-8 overflow-hidden px-6 py-24 text-center">
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,color-mix(in_oklab,var(--primary)_28%,transparent),transparent)]"
-      />
-      <p className="text-muted-foreground text-xs font-medium tracking-[0.2em] uppercase">
-        Launchframe template
-      </p>
-      <div className="max-w-2xl space-y-4">
-        <h1 className="text-balance font-semibold text-4xl tracking-tight sm:text-5xl">
-          Ready for `/clone-website`
-        </h1>
-        <p className="text-muted-foreground text-balance text-lg">
-          Add your target URL and SaaS idea via <code className="text-foreground">launchframe.config.json</code>,
-          run recon if needed, then let your agent ship the full landing.
-        </p>
-      </div>
-      <div className="flex flex-wrap items-center justify-center gap-3">
-        <Button nativeButton={false} render={<Link href="https://github.com/evangruhlkey/launchframe" />}>
-          Launchframe docs
-        </Button>
-        <Button variant="outline" nativeButton={false} render={<Link href="/" />}>
-          Replace this page
-        </Button>
-      </div>
-    </main>
-  );
-}