launchframe 0.3.0 → 0.4.0

package/.cursor/commands/marketing-social-proof-motion.md

@@ -1,42 +0,0 @@
-<!-- Canonical source: `.claude/skills/marketing-social-proof-motion/SKILL.md` — edit there first, then mirror here if needed. -->
-
-# Marketing social proof, logos & motion
-
-Ship sections that **feel alive**: named companies, visible marks, and **layered animation**. Generic gray blobs and static stacks fail this skill.
-
-## Named companies & copy
-
-- **Name real companies** where they strengthen the story: integrations (“Works with Slack, Salesforce…”), ecosystems, categories, or illustrative comparables the user allows.
-- **Do not invent endorsements.** Prefer truthful framings — “integrations,” “compatible with,” “shared stack,” “customers like” — unless the user supplied verified quotes/customers.
-- **Keep lists purposeful.** Match companies to `launchframe.config.json#idea` when present; avoid unrelated mega-brand name-dropping.
-
-## Logo marks & imagery
-
-- **Prefer real marks** when implementation-ready: monochrome SVG or PNG from vendor press/media kits, neutral compatibility strips, or OSS icon sets where license permits. Normalize to one visual system (single height, consistent padding, grayscale or duotone).
-- **Store assets** under `public/images/logos/` or `public/images/partners/` with predictable filenames; reference **local paths** in components — no hotlinked SVGs from third-party CDNs in production UI.
-- **If a mark is missing, blocked, or unclear:**
-  - Generate **original** imagery (image-generation tool or hand-authored SVG) — illustrated tiles, abstract glyphs, or metaphor icons tied to the **idea** — **not** counterfeit logos.
-  - Or ship **clean text lockups** (company wordmark as styled type) where safer than guessing trademark artwork.
-
-## Motion emphasis (non-negotiable bar)
-
-Motion sells credibility — implement several layers using **`framer-motion`** + CSS loops where appropriate; honor **`prefers-reduced-motion`**.
-
-| Layer | Goal | Typical implementation |
-|-------|------|-------------------------|
-| **Entrance** | Logos/testimonials **stagger in** | Parent `variants` + `staggerChildren`; opacity + `y` or blur-in on type |
-| **Scroll** | Proof bands **ease up / fade** on first view | `whileInView` + `viewport.once`; sensible `margin` so reveals feel early |
-| **Ambient** | Strip feels “live” | **Infinite marquee** (slow), gradient drift, subtle opacity pulse on logos |
-| **Hover / focus** | Cards lift; logos brighten | `whileHover` / CSS transitions on transforms + shadow |
-| **Depth** | Premium polish | Light pointer **parallax** on hero/logo cluster (small ranges) or scroll-linked `useTransform` |
-
-Also align tier **A–E** choreography and reduced-motion fallbacks described in **`AGENTS.md`** (Production polish → Motion choreography).
-
-## Hand-off checklist
-
-- [ ] Companies named in copy match user intent and truthful framing
-- [ ] Every logo path documented; placeholders explained if generated
-- [ ] At least **two** motion layers beyond a single fade (e.g., stagger + marquee, or scroll reveal + hover lift)
-- [ ] Reduced-motion path removes loops and tightens entrances
-
-When cloning an existing page, **extract** logo SVGs/rasters like any other asset; when authoring from scratch, follow this skill instead of shipping motionless filler.

package/.nvmrc

@@ -1 +0,0 @@
-24

package/CHANGELOG.md

@@ -1,80 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-### Changed
-- Raised the project Node.js baseline to 24 across local development, CI, Docker, and contributor-facing documentation
-
-## [0.3.1] - 2026-03-29
-
-### Fixed
-- `sync-agent-rules.sh` failing to resolve `@file` imports on Windows due to CRLF line endings — platform instruction files now correctly inline the Inspection Guide content
-
-## [0.3.0] - 2026-03-29
-
-### Added
-- Multi-URL support for `/clone-website` — clone multiple sites in a single command with parallel processing and isolated output
-- CI quality gates via GitHub Actions — automated lint, typecheck, and build on every push and PR
-- `npm run typecheck` and `npm run check` scripts for local quality validation
-- `.gitattributes` for cross-platform line ending normalization
-- `.nvmrc` to pin Node.js 20 for contributor consistency
-
-### Changed
-- Streamlined PR template — removed redundant checklist items and screenshots section
-- Improved project description and README — clearer use cases, limitations, and modern wording
-- Refined documentation and agent rules across all platforms for clarity and consistency
-- Fixed CRLF handling in `sync-skills.mjs` for reliable Windows operation
-
-### Removed
-- Outdated use case from README documentation
-
-## [0.2.0] - 2026-03-28
-
-### Added
-- Multi-platform AI agent support: Claude Code, Codex CLI, OpenCode, GitHub Copilot, Cursor, Windsurf, Gemini CLI, Cline/Roo Code, Continue, Amazon Q, Augment Code, Aider
-- Platform-specific instruction files and `/clone-website` skill for each supported agent
-- `scripts/sync-agent-rules.sh` to regenerate platform instruction files from AGENTS.md
-- `scripts/sync-skills.mjs` to regenerate `/clone-website` skill across all platforms
-- GEMINI.md for Gemini CLI configuration
-- Supported Platforms table in README
-- "Updating for Other Platforms" documentation section in README
-
-### Changed
-- README now describes the project as multi-agent (Claude Code recommended, not required)
-- AGENTS.md updated with sync script reminders
-
-## [0.1.1] - 2026-03-28
-
-### Added
-- Bug report and feature request issue templates
-- Pull request template with checklist
-- CHANGELOG.md following Keep a Changelog format
-- Package.json metadata (description, repository, homepage, keywords, engines)
-
-### Fixed
-- LICENSE copyright holder now attributed to JCodesMore
-
-## [0.1.0] - 2026-03-28
-
-### Added
-- Initial template scaffold for website reverse-engineering with Claude Code
-- `/clone-website` skill for full-site cloning pipeline
-- `/build-from-spec` and `/customize` skills
-- Parallel builder agents with git worktree isolation
-- Chrome MCP integration for design token extraction
-- Comprehensive inspection guide and project structure documentation
-- Next.js 16 + shadcn/ui + Tailwind CSS v4 base scaffold
-- MIT license
-- README with badges, demo section, quick start, and star history
-
-[Unreleased]: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.3.1...HEAD
-[0.3.1]: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.3.0...v0.3.1
-[0.3.0]: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.2.0...v0.3.0
-[0.2.0]: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.1.1...v0.2.0
-[0.1.1]: https://github.com/JCodesMore/ai-website-cloner-template/compare/v0.1.0...v0.1.1
-[0.1.0]: https://github.com/JCodesMore/ai-website-cloner-template/releases/tag/v0.1.0

package/START_HERE.md

@@ -1,15 +0,0 @@
-# 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.

package/launchframe.config.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://launchframe.dev/schema/launchframe.config.json",
-  "url": "https://vercel.com/",
-  "idea": "saas-idea",
-  "createdAt": "2026-05-15T00:27:49.833Z",
-  "launchframeVersion": "0.2.6",
-  "notes": [
-    "The /clone-website skill reads this file at the start of every run.",
-    "After scaffold: open this folder in Cursor (or your AI editor) and say **Build it** — same workflow.",
-    "`url` is the visual source-of-truth (clone its layout, spacing, tokens, motion).",
-    "`idea` is the rebranding directive applied AFTER the pixel-perfect clone.",
-    "Edit either field and re-invoke the skill to re-run."
-  ]
-}

package/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/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>
-  );
-}