launchframe 0.2.6 → 0.3.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Evan Gruhlkey and Launchframe contributors
+Copyright (c) 2025 JCodesMore
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,86 +1,36 @@
-# Launchframe
+# Launchframe Project
 
-> **Scaffold a SaaS-ready Next.js codebase from any URL — in one command.**
+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>"
 ```
 
-Launchframe drops an [AI-cloner template](https://github.com/JCodesMore/ai-website-cloner-template) into **your current folder (project root)** by default — so **`.cursor`**, **`.claude`**, and the rest of the dotfolders sit where your editor expects them when you open that folder. It **runs `npm install` for you**. Then tell your AI **Build it** (same as `/clone-website`).
+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`).
 
-## Why Launchframe
+---
 
-Cloning a website is a solved problem if you have a great AI agent and a great template. What's missing is **a one-command entrypoint that wires those together with your specific intent**.
+## Quick start (two steps)
 
-- ✅ Pick a real, beautiful, production-tested landing page
-- ✅ Pick the SaaS you want to ship
-- ✅ Get a buildable Next.js codebase in seconds, ready for your AI agent to clone + rebrand
+1. **Open this folder** in [Cursor](https://cursor.com/) — the directory that **contains** `.cursor/` (not a parent folder).
+2. In chat, say: **Build it.**
 
-You spend your time on product, not on translating Figma boxes into Tailwind.
+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`**).
 
-## Quick Start
+Rather read a postcard? See [`START_HERE.md`](./START_HERE.md).
 
-From an **empty** project folder (or after `git init` only):
+## What `/clone-website` does
 
-```bash
-mkdir my-saas && cd my-saas
-npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
-```
-
-Then open **this folder** in [Cursor](https://cursor.com/) and chat: **Build it.**
+A multi-phase pipeline runs inside your AI agent:
 
-Files land in the **current directory** so workspace rules apply. Prefer a subfolder? Use `--dir launchframe-app`.
+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
 
-Optional: **`/clone-website`** in Cursor, or **`--skip-install`** for CI / debugging.
-
-```bash
-npx launchframe@latest https://linear.app "My idea" --skip-install
-```
-
-## What gets generated
-
-```
-my-saas/   (or use --dir to create a subfolder)
-├─ START_HERE.md             ← "open Cursor, say Build it"
-├─ launchframe.config.json   ← url + saas idea (the directive)
-├─ AGENTS.md                 ← agent instructions (single source of truth)
-├─ .cursor/                  ← at project root (Cursor rules + /clone-website)
-├─ .claude/                  ← Claude Code skill
-├─ .codex/ .gemini/ .opencode/ .windsurf/ .github/ .augment/
-│  .continue/ .amazonq/      ← every other agent gets the same skill, format-adapted
-├─ src/                      ← Next.js 16 + shadcn/ui + Tailwind v4 scaffold
-├─ public/                   ← becomes populated by the cloner with real assets
-├─ docs/research/            ← extraction artifacts the cloner writes during the run
-└─ scripts/                  ← asset download + sync scripts
-```
-
-## CLI Reference
-
-```
-npx launchframe@latest <url> "<saas idea>" [options]
-
-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
-
-Options:
-  --dir <path>   Output folder (default: . — current directory / project root)
-  --force        Merge into a non-empty directory (use with care)
-  --skip-install Skip npm install (for CI / debugging only)
-  --help, -h     Show this message
-  --version, -v  Show the version
-```
-
-### Examples
-
-```bash
-npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
-
-npx launchframe@latest https://vercel.com "DevOps for ML" --dir launchframe-app
-
-# Hostname-only — launchframe will prepend https://
-npx launchframe@latest stripe.com "B2B billing for AI agent companies"
-```
+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
 
@@ -88,60 +38,84 @@ npx launchframe@latest stripe.com "B2B billing for AI agent companies"
 | ------------------------------------------------------------- | -------------------------- |
 | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **Recommended** — Opus 4.7 |
 | [Codex CLI](https://github.com/openai/codex)                  | Supported                  |
-| [Cursor](https://cursor.com/)                                 | Supported                  |
-| [Gemini CLI](https://github.com/google-gemini/gemini-cli)     | Supported                  |
-| [GitHub Copilot](https://github.com/features/copilot)         | 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                  |
-| [Cline](https://github.com/cline/cline) / Roo Code            | 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                  |
 
-Every supported agent receives the same `/clone-website` skill — it's auto-synced from a single source-of-truth file in the template.
-
-## How `/clone-website` Works
+## Tech Stack
 
-A multi-phase pipeline runs inside your AI agent. Browser automation MCP (Chrome MCP / Playwright MCP / Browserbase MCP) is required.
+- **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`)
 
-1. **Reconnaissance** — full-page screenshots at desktop + mobile, design-token extraction, mandatory scroll/click/hover/responsive sweep
-2. **Foundation** — updates fonts, colors, globals.css; downloads all assets; extracts SVG icons
-3. **Component Specs** — writes detailed `.spec.md` files for every section with exact `getComputedStyle()` values
-4. **Parallel Build** — dispatches builder agents in git worktrees, one per section/component
-5. **SaaS Rebrand Pass** — swaps product name, headlines, feature copy, CTAs, and brand marks to match `launchframe.config.json#idea`. Spacing, color, typography, animations stay 1:1
-6. **Assembly + Visual QA** — merges worktrees, wires `src/app/page.tsx`, runs side-by-side diff against the original
-
-Each builder agent gets the full component spec inline. No guessing.
+## Prerequisites
 
-## Editing the Config Mid-Project
+- [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`
 
-`launchframe.config.json` is the contract between you and the skill. Change either field any time and re-invoke `/clone-website`:
+## Project Structure
 
-```json
-{
-  "url": "https://stripe.com",
-  "idea": "Usage-based billing for AI agent startups"
-}
+```
+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)
 ```
 
-## Built On
+## Commands
 
-- The amazing [`ai-website-cloner-template`](https://github.com/JCodesMore/ai-website-cloner-template) by [@JCodesMore](https://github.com/JCodesMore) — Launchframe vendors and extends this as its payload
-- [Next.js 16](https://nextjs.org/), [React 19](https://react.dev/), [shadcn/ui](https://ui.shadcn.com/), [Tailwind CSS v4](https://tailwindcss.com/)
+```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
+```
 
-## Prerequisites
+## Use Cases
 
-- [Node.js](https://nodejs.org/) 18+ to run the CLI
-- [Node.js](https://nodejs.org/) 24+ inside the scaffolded project (for Next.js 16)
-- An AI coding agent with browser automation MCP
+- **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
-- Passing off someone else's design as your own
-- Violating terms of service (some sites prohibit scraping or reproduction — check first)
+- **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 — see [LICENSE](./LICENSE).
+MIT

package/launchframe.config.json

@@ -0,0 +1,14 @@
+{
+  "$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/package.json

@@ -1,52 +1,54 @@
-{
-  "name": "launchframe",
-  "version": "0.2.6",
-  "description": "Scaffold a SaaS-ready Next.js codebase from any URL. Point launchframe at a website you admire and describe the SaaS you want to build — it drops in the AI-cloner template wired with your URL and idea so your AI agent (Claude Code, Cursor, Codex, etc.) can run /clone-website and produce a pixel-perfect, re-skinned starting point.",
-  "license": "MIT",
-  "author": "Evan Gruhlkey",
-  "homepage": "https://github.com/evangruhlkey/launchframe#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/evangruhlkey/launchframe.git"
-  },
-  "bugs": {
-    "url": "https://github.com/evangruhlkey/launchframe/issues"
-  },
-  "keywords": [
-    "launchframe",
-    "scaffold",
-    "ai",
-    "ai-agents",
-    "website-clone",
-    "reverse-engineering",
-    "saas",
-    "boilerplate",
-    "template",
-    "nextjs",
-    "shadcn",
-    "shadcn-ui",
-    "tailwindcss",
-    "claude-code",
-    "cursor",
-    "codex",
-    "cli"
-  ],
-  "bin": {
-    "launchframe": "bin/launchframe.mjs"
-  },
-  "files": [
-    "bin",
-    "template",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "test:scaffold": "node bin/launchframe.mjs https://linear.app \"AI feedback platform\" --dir tmp-scaffold --force --skip-install",
-    "sync:skill": "node template/scripts/sync-skills.mjs",
-    "sync:agents": "bash template/scripts/sync-agent-rules.sh"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "type": "module"
-}
+{
+  "name": "launchframe",
+  "version": "0.3.0",
+  "private": false,
+  "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"
+  }
+}