launchframe 0.2.6 → 0.3.0

package/bin/launchframe.mjs

@@ -1,315 +0,0 @@
-#!/usr/bin/env node
-// @ts-check
-/**
- * launchframe — scaffold an AI-cloner project pointed at any URL + SaaS idea.
- *
- * Usage:
- *   npx launchframe@latest <url> "<saas idea>" [--dir <path>] [--force] [--skip-install]
- *
- * Behavior:
- *   1. Validates the URL and SaaS-idea string.
- *   2. Copies the bundled `template/` payload into the project root (current
- *      directory by default) so dotfolders like `.cursor` and `.claude` live at
- *      the workspace root when you open that folder in your editor. Use
- *      `--dir <name>` for a subdirectory if you prefer.
- *   3. Writes `launchframe.config.json` into the new project so the bundled
- *      `/clone-website` skill knows which URL to clone and how to re-skin it
- *      for your SaaS idea.
- *   4. Runs `npm install` in the new project (so the user does not have to).
- *   5. Prints one line: open the folder in Cursor and tell the AI **Build it**.
- */
-
-import { spawnSync } from "node:child_process";
-import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
-import { createRequire } from "node:module";
-import { dirname, basename, isAbsolute, join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const pkgRoot = resolve(__dirname, "..");
-const templateDir = join(pkgRoot, "template");
-const require = createRequire(import.meta.url);
-const pkgJson = require(join(pkgRoot, "package.json"));
-
-const COLORS = {
-  reset: "\x1b[0m",
-  bold: "\x1b[1m",
-  dim: "\x1b[2m",
-  red: "\x1b[31m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-  cyan: "\x1b[36m",
-};
-const supportsColor = process.stdout.isTTY && !process.env.NO_COLOR;
-const c = (color, s) => (supportsColor ? COLORS[color] + s + COLORS.reset : s);
-
-function printHelp() {
-  console.log(`
-${c("bold", "launchframe")} ${c("dim", `v${pkgJson.version}`)}
-Scaffold an AI-cloner project pointed at any URL + SaaS idea.
-
-${c("bold", "Usage:")}
-  npx launchframe@latest <url> "<saas idea>" [options]
-
-${c("bold", "Arguments:")}
-  <url>          URL of the site you want to clone (e.g. https://linear.app)
-  <saas idea>    One-line description of the SaaS you're building
-                 (used to re-skin copy/branding after the visual clone)
-
-${c("bold", "Options:")}
-  --dir <path>   Output folder (default: .  — current directory / project root)
-  --force        Overwrite merging files into a non-empty directory (use with care)
-  --skip-install Skip npm install after scaffold (faster for CI / debugging)
-  --help, -h     Show this message
-  --version, -v  Show the launchframe version
-
-${c("bold", "Example:")}
-  npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
-  # From an empty folder (or git init only), files land in .  so .cursor/ works at workspace root
-  npx launchframe@latest https://vercel.com "DevOps for ML" --dir launchframe-app
-  npx launchframe@latest https://stripe.com "Billing for AI agents" --skip-install
-`);
-}
-
-function exitErr(msg, code = 1) {
-  console.error(c("red", `\nlaunchframe: ${msg}`));
-  console.error(c("dim", "Run `npx launchframe --help` for usage.\n"));
-  process.exit(code);
-}
-
-function parseArgs(argv) {
-  const positional = [];
-  const opts = {
-    dir: ".",
-    force: false,
-    skipInstall: false,
-    help: false,
-    version: false,
-  };
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a === "--help" || a === "-h") opts.help = true;
-    else if (a === "--version" || a === "-v") opts.version = true;
-    else if (a === "--force" || a === "-f") opts.force = true;
-    else if (a === "--skip-install") opts.skipInstall = true;
-    else if (a === "--dir" || a === "-d") {
-      const next = argv[++i];
-      if (!next || next.startsWith("-")) exitErr("`--dir` requires a value");
-      opts.dir = next;
-    } else if (a.startsWith("--dir=")) {
-      opts.dir = a.slice("--dir=".length);
-    } else if (a.startsWith("-")) {
-      exitErr(`unknown option: ${a}`);
-    } else {
-      positional.push(a);
-    }
-  }
-  return { positional, opts };
-}
-
-function normalizeUrl(raw) {
-  let candidate = raw.trim();
-  if (!/^https?:\/\//i.test(candidate)) candidate = `https://${candidate}`;
-  try {
-    const u = new URL(candidate);
-    if (!u.hostname || !u.hostname.includes(".")) throw new Error("missing hostname");
-    return u.toString();
-  } catch {
-    exitErr(`invalid URL: ${raw}`);
-  }
-}
-
-function isDirEmpty(dir) {
-  try {
-    return readdirSync(dir).length === 0;
-  } catch {
-    return true;
-  }
-}
-
-/** True if the folder is empty or only has git/bootstrap noise (so we can scaffold at project root). */
-function isScaffoldRootUsable(dir) {
-  let names;
-  try {
-    names = readdirSync(dir);
-  } catch {
-    return true;
-  }
-  if (names.length === 0) return true;
-  const allowedOnly = new Set([".git", ".gitignore", ".gitattributes"]);
-  return names.every((n) => allowedOnly.has(n));
-}
-
-function npmPackageSlug(dirName, targetDir) {
-  const raw =
-    dirName === "." || dirName === "./"
-      ? basename(targetDir) || "launchframe-app"
-      : dirName;
-  const slug = raw
-    .toLowerCase()
-    .replace(/[^a-z0-9-_]/g, "-")
-    .replace(/-+/g, "-")
-    .replace(/^-|-$/g, "")
-    .slice(0, 64);
-  return slug || "launchframe-app";
-}
-
-function rewritePackageJson(targetDir, packageSlug, url, idea) {
-  const pkgPath = join(targetDir, "package.json");
-  if (!existsSync(pkgPath)) return;
-  let pkg;
-  try {
-    pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
-  } catch {
-    return;
-  }
-  pkg.name = packageSlug;
-  pkg.version = "0.1.0";
-  pkg.private = true;
-  pkg.description = `Launchframe project — clone of ${url} reframed as: ${idea}`;
-  delete pkg.author;
-  delete pkg.homepage;
-  delete pkg.repository;
-  delete pkg.bugs;
-  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
-}
-
-function writeLaunchframeConfig(targetDir, url, idea) {
-  const cfg = {
-    $schema: "https://launchframe.dev/schema/launchframe.config.json",
-    url,
-    idea,
-    createdAt: new Date().toISOString(),
-    launchframeVersion: pkgJson.version,
-    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.",
-    ],
-  };
-  writeFileSync(
-    join(targetDir, "launchframe.config.json"),
-    JSON.stringify(cfg, null, 2) + "\n",
-    "utf8"
-  );
-}
-
-function runNpmInstall(targetDir) {
-  console.log(c("dim", "\nRunning npm install (this may take a minute)...\n"));
-  const result = spawnSync("npm", ["install", "--no-fund", "--no-audit"], {
-    cwd: targetDir,
-    stdio: "inherit",
-    shell: true,
-    env: process.env,
-  });
-  if (result.status !== 0) {
-    console.error(
-      c("yellow", "\nlaunchframe: npm install exited with an error. ") +
-        c("dim", `Fix the issue and run \`npm install\` inside the project folder, or re-run with \`--force\`.\n`)
-    );
-    process.exit(result.status === null ? 1 : result.status);
-  }
-  console.log(c("green", "\n\u2713 npm install finished.\n"));
-}
-
-function nextSteps(projectDir, dirLabel, openHint, url, idea) {
-  console.log(`
-${c("green", "\u2713")} Done — ${c("bold", dirLabel)} is ready.
-
-  ${c("dim", "Target URL:")}  ${c("cyan", url)}
-  ${c("dim", "SaaS idea:")}   ${c("cyan", idea)}
-  ${c("dim", "Folder:")}      ${projectDir}
-
-${c("bold", "All you do next:")}
-  1. Open ${c("cyan", openHint)} in ${c("bold", "Cursor")} ${c("dim", "(File \u2192 Open Folder)")}
-  2. In chat, say: ${c("bold", "Build it")}
-     ${c("dim", "Your AI reads launchframe.config.json + AGENTS.md and runs the full clone + rebrand workflow.")}
-     ${c("dim", "You can also type ") + c("cyan", "/clone-website") + c("dim", " if you prefer.")}
-
-${c("dim", "Dotfolders (.cursor, .claude, …) are at this project root so rules and skills apply when you open this folder.")}
-${c("dim", "Other editors: same folder — say Build it, or run the /clone-website skill for your tool.")}
-${c("dim", "Edit launchframe.config.json anytime to change URL or SaaS idea.")}
-`);
-}
-
-function main() {
-  const { positional, opts } = parseArgs(process.argv.slice(2));
-  if (opts.help) return printHelp();
-  if (opts.version) return console.log(pkgJson.version);
-
-  if (positional.length < 2) {
-    if (positional.length === 0) {
-      console.error(c("red", "\nlaunchframe: missing <url> and <saas idea>"));
-    } else {
-      console.error(c("red", '\nlaunchframe: missing <saas idea> (wrap it in quotes: "...")'));
-    }
-    printHelp();
-    process.exit(1);
-  }
-  if (positional.length > 2) {
-    exitErr(
-      `too many positional arguments. Wrap your SaaS idea in quotes: ` +
-        `\`npx launchframe ${positional[0]} "${positional.slice(1).join(" ")}"\``
-    );
-  }
-
-  const url = normalizeUrl(positional[0]);
-  const idea = positional[1].trim();
-  if (!idea) exitErr("SaaS idea cannot be empty");
-
-  const dirNameRaw = opts.dir;
-  const targetDir = isAbsolute(dirNameRaw) ? dirNameRaw : resolve(process.cwd(), dirNameRaw);
-
-  const isRootDot = dirNameRaw === "." || dirNameRaw === "./";
-  const usable = isDirEmpty(targetDir) || isScaffoldRootUsable(targetDir);
-  if (existsSync(targetDir) && !usable && !opts.force) {
-    exitErr(
-      `target directory \`${dirNameRaw}\` is not empty.\n` +
-        `Create an empty folder (or \`git init\` only), run again from there, or pass \`--force\` to merge files, ` +
-        `or use \`--dir launchframe-app\` to scaffold into a subdirectory.`
-    );
-  }
-
-  if (!existsSync(templateDir)) {
-    exitErr(
-      `bundled template not found at \`${templateDir}\`.\n` +
-        `This usually means the launchframe package was installed incompletely. ` +
-        `Try: \`npm install -g launchframe@latest\` or re-run \`npx launchframe@latest ...\`.`
-    );
-  }
-
-  mkdirSync(targetDir, { recursive: true });
-
-  console.log(c("dim", `\nCopying template \u2192 ${targetDir} ...`));
-  cpSync(templateDir, targetDir, {
-    recursive: true,
-    force: opts.force,
-    filter: (src) => {
-      const lower = src.toLowerCase();
-      if (lower.endsWith(`${"\\"}node_modules`) || lower.endsWith("/node_modules")) return false;
-      if (lower.endsWith(`${"\\"}.next`) || lower.endsWith("/.next")) return false;
-      if (lower.endsWith("package-lock.json")) return false;
-      return true;
-    },
-  });
-
-  const packageSlug = npmPackageSlug(dirNameRaw, targetDir);
-  rewritePackageJson(targetDir, packageSlug, url, idea);
-  writeLaunchframeConfig(targetDir, url, idea);
-
-  if (!opts.skipInstall) runNpmInstall(targetDir);
-
-  const dirLabel = isRootDot ? "this folder (project root)" : dirNameRaw;
-  const openHint = isRootDot ? "this folder" : `./${dirNameRaw}`;
-  nextSteps(targetDir, dirLabel, openHint, url, idea);
-}
-
-try {
-  main();
-} catch (err) {
-  console.error(c("red", `\nlaunchframe: ${err?.message || err}\n`));
-  process.exit(1);
-}

package/template/README.md

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