launchframe 0.2.3 → 0.2.4

package/README.md

@@ -1,147 +1,147 @@
-# Launchframe
-
-> **Scaffold a SaaS-ready Next.js codebase from any URL — in one command.**
-
-```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`).
-
-## 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**.
-
-- ✅ 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
-
-You spend your time on product, not on translating Figma boxes into Tailwind.
-
-## Quick Start
-
-From an **empty** project folder (or after `git init` only):
-
-```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.**
-
-Files land in the **current directory** so workspace rules apply. Prefer a subfolder? Use `--dir launchframe-app`.
-
-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"
-```
-
-## 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                  |
-| [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                  |
-| [Windsurf](https://codeium.com/windsurf)                      | Supported                  |
-| [Cline](https://github.com/cline/cline) / 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
-
-A multi-phase pipeline runs inside your AI agent. Browser automation MCP (Chrome MCP / Playwright MCP / Browserbase MCP) is required.
-
-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.
-
-## Editing the Config Mid-Project
-
-`launchframe.config.json` is the contract between you and the skill. Change either field any time and re-invoke `/clone-website`:
-
-```json
-{
-  "url": "https://stripe.com",
-  "idea": "Usage-based billing for AI agent startups"
-}
-```
-
-## Built On
-
-- 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/)
-
-## Prerequisites
-
-- [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
-
-## 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)
-
-## License
-
-MIT — see [LICENSE](./LICENSE).
+# Launchframe
+
+> **Scaffold a SaaS-ready Next.js codebase from any URL — in one command.**
+
+```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`).
+
+## 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**.
+
+- ✅ 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
+
+You spend your time on product, not on translating Figma boxes into Tailwind.
+
+## Quick Start
+
+From an **empty** project folder (or after `git init` only):
+
+```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.**
+
+Files land in the **current directory** so workspace rules apply. Prefer a subfolder? Use `--dir launchframe-app`.
+
+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"
+```
+
+## 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                  |
+| [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                  |
+| [Windsurf](https://codeium.com/windsurf)                      | Supported                  |
+| [Cline](https://github.com/cline/cline) / 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
+
+A multi-phase pipeline runs inside your AI agent. Browser automation MCP (Chrome MCP / Playwright MCP / Browserbase MCP) is required.
+
+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.
+
+## Editing the Config Mid-Project
+
+`launchframe.config.json` is the contract between you and the skill. Change either field any time and re-invoke `/clone-website`:
+
+```json
+{
+  "url": "https://stripe.com",
+  "idea": "Usage-based billing for AI agent startups"
+}
+```
+
+## Built On
+
+- 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/)
+
+## Prerequisites
+
+- [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
+
+## 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)
+
+## License
+
+MIT — see [LICENSE](./LICENSE).