launchframe 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.amazonq/cli-agents/launchframe.json +2 -2
- package/.amazonq/rules/project.md +1 -1
- package/.augment/commands/launchframe.md +21 -24
- package/.claude/skills/launchframe/SKILL.md +21 -24
- package/.clinerules +1 -1
- package/.codex/skills/launchframe/SKILL.md +21 -24
- package/.continue/commands/launchframe.md +20 -23
- package/.continue/rules/project.md +1 -1
- package/.cursor/commands/launchframe.md +19 -22
- package/.gemini/commands/launchframe.toml +20 -23
- package/.github/copilot-instructions.md +1 -1
- package/.github/skills/launchframe/SKILL.md +21 -24
- package/.opencode/commands/launchframe.md +20 -23
- package/.windsurf/workflows/launchframe.md +19 -22
- package/AGENTS.md +1 -1
- package/README.md +14 -25
- package/bin/launchframe.mjs +96 -64
- package/package.json +1 -1
- package/scripts/sync-skills.mjs +3 -3
- package/src/lib/launchframe-config.ts +2 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "launchframe",
|
|
3
|
-
"description": "Scaffold
|
|
4
|
-
"prompt": "\n# Launchframe\n\
|
|
3
|
+
"description": "Scaffold with npx launchframe@latest into the current folder — no arguments required",
|
|
4
|
+
"prompt": "\n# Launchframe\n\nHelp the user create a **new** Launchframe project. The CLI is **parameterless**:\n\n```bash\nnpx launchframe@latest\n```\n\nIt unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.\n\n## What you do\n\n1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.\n\n2. Run exactly:\n\n ```bash\n npx launchframe@latest\n ```\n\n Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.\n\n3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.\n\n4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.\n\n5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.\n\n## If optional notes from the user after the slash command (the CLI itself needs no URL or SaaS strings) are present\n\nThe user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.\n\n## Fallback (local dev only)\n\nFrom a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).\n",
|
|
5
5
|
"fileContext": [
|
|
6
6
|
"AGENTS.md",
|
|
7
7
|
"docs/research/**"
|
|
@@ -10,7 +10,7 @@ This version has breaking changes — APIs, conventions, and file structure may
|
|
|
10
10
|
# Website Reverse-Engineer Template
|
|
11
11
|
|
|
12
12
|
## What This Is
|
|
13
|
-
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded —
|
|
13
|
+
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — for a **new** folder, `mkdir`, `cd` into an **empty** directory, run **`npx launchframe@latest`** (no parameters), then edit **`src/lib/launchframe-config.ts`** and run **`/clone-website`** with your URL (or invoke **`/launchframe`** so the agent runs the same command). Or work in this repo and run **`/clone-website <url1> [<url2> ...]`** to clone into the current tree.
|
|
14
14
|
|
|
15
15
|
## Tech Stack
|
|
16
16
|
- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
|
-
description: "Scaffold
|
|
3
|
-
argument-hint: "
|
|
2
|
+
description: "Scaffold with npx launchframe@latest into the current folder — no arguments required"
|
|
3
|
+
argument-hint: ""
|
|
4
4
|
---
|
|
5
5
|
<!-- AUTO-GENERATED from .claude/skills/launchframe/SKILL.md — do not edit directly.
|
|
6
6
|
Run `node scripts/sync-skills.mjs` to regenerate. -->
|
|
@@ -8,39 +8,36 @@ argument-hint: "<url> \"<saas-idea>\""
|
|
|
8
8
|
|
|
9
9
|
# Launchframe
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
```bash
|
|
14
|
+
npx launchframe@latest
|
|
15
|
+
```
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
20
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
19
|
+
## What you do
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
2. Run exactly:
|
|
25
24
|
|
|
26
|
-
|
|
25
|
+
```bash
|
|
26
|
+
npx launchframe@latest
|
|
27
|
+
```
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
30
|
+
|
|
31
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
34
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
33
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
35
34
|
|
|
36
|
-
|
|
35
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
## If $ARGUMENTS are present
|
|
39
38
|
|
|
40
|
-
|
|
41
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
42
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
39
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
43
40
|
|
|
44
41
|
## Fallback (local dev only)
|
|
45
42
|
|
|
46
|
-
|
|
43
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
|
@@ -1,45 +1,42 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: launchframe
|
|
3
|
-
description: Scaffold a
|
|
4
|
-
argument-hint: "
|
|
3
|
+
description: Scaffold a Next.js app with npx launchframe@latest into the current folder — no CLI arguments required. Invoked as /launchframe.
|
|
4
|
+
argument-hint: ""
|
|
5
5
|
user-invocable: true
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
# Launchframe
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
```bash
|
|
13
|
+
npx launchframe@latest
|
|
14
|
+
```
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
19
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
18
|
+
## What you do
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
2. Run exactly:
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
```bash
|
|
25
|
+
npx launchframe@latest
|
|
26
|
+
```
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
29
|
+
|
|
30
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
33
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
32
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
34
33
|
|
|
35
|
-
|
|
34
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
## If $ARGUMENTS are present
|
|
38
37
|
|
|
39
|
-
|
|
40
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
41
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
38
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
42
39
|
|
|
43
40
|
## Fallback (local dev only)
|
|
44
41
|
|
|
45
|
-
|
|
42
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
package/.clinerules
CHANGED
|
@@ -10,7 +10,7 @@ This version has breaking changes — APIs, conventions, and file structure may
|
|
|
10
10
|
# Website Reverse-Engineer Template
|
|
11
11
|
|
|
12
12
|
## What This Is
|
|
13
|
-
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded —
|
|
13
|
+
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — for a **new** folder, `mkdir`, `cd` into an **empty** directory, run **`npx launchframe@latest`** (no parameters), then edit **`src/lib/launchframe-config.ts`** and run **`/clone-website`** with your URL (or invoke **`/launchframe`** so the agent runs the same command). Or work in this repo and run **`/clone-website <url1> [<url2> ...]`** to clone into the current tree.
|
|
14
14
|
|
|
15
15
|
## Tech Stack
|
|
16
16
|
- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
|
|
@@ -1,45 +1,42 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: launchframe
|
|
3
|
-
description: Scaffold a
|
|
4
|
-
argument-hint: "
|
|
3
|
+
description: Scaffold a Next.js app with npx launchframe@latest into the current folder — no CLI arguments required. Invoked as /launchframe.
|
|
4
|
+
argument-hint: ""
|
|
5
5
|
user-invocable: true
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
# Launchframe
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
```bash
|
|
13
|
+
npx launchframe@latest
|
|
14
|
+
```
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
19
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
18
|
+
## What you do
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
2. Run exactly:
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
```bash
|
|
25
|
+
npx launchframe@latest
|
|
26
|
+
```
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
29
|
+
|
|
30
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
33
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
32
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
34
33
|
|
|
35
|
-
|
|
34
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
## If $ARGUMENTS are present
|
|
38
37
|
|
|
39
|
-
|
|
40
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
41
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
38
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
42
39
|
|
|
43
40
|
## Fallback (local dev only)
|
|
44
41
|
|
|
45
|
-
|
|
42
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: launchframe
|
|
3
|
-
description: "Scaffold
|
|
3
|
+
description: "Scaffold with npx launchframe@latest into the current folder — no arguments required"
|
|
4
4
|
invokable: true
|
|
5
5
|
---
|
|
6
6
|
<!-- AUTO-GENERATED from .claude/skills/launchframe/SKILL.md — do not edit directly.
|
|
@@ -9,39 +9,36 @@ invokable: true
|
|
|
9
9
|
|
|
10
10
|
# Launchframe
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
```bash
|
|
15
|
+
npx launchframe@latest
|
|
16
|
+
```
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
21
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
20
|
+
## What you do
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
2. Run exactly:
|
|
26
25
|
|
|
27
|
-
|
|
26
|
+
```bash
|
|
27
|
+
npx launchframe@latest
|
|
28
|
+
```
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
31
|
+
|
|
32
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
32
33
|
|
|
33
|
-
|
|
34
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
35
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
34
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
38
37
|
|
|
39
|
-
|
|
38
|
+
## If $ARGUMENTS are present
|
|
40
39
|
|
|
41
|
-
|
|
42
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
43
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
40
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
44
41
|
|
|
45
42
|
## Fallback (local dev only)
|
|
46
43
|
|
|
47
|
-
|
|
44
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
|
@@ -14,7 +14,7 @@ This version has breaking changes — APIs, conventions, and file structure may
|
|
|
14
14
|
# Website Reverse-Engineer Template
|
|
15
15
|
|
|
16
16
|
## What This Is
|
|
17
|
-
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded —
|
|
17
|
+
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — for a **new** folder, `mkdir`, `cd` into an **empty** directory, run **`npx launchframe@latest`** (no parameters), then edit **`src/lib/launchframe-config.ts`** and run **`/clone-website`** with your URL (or invoke **`/launchframe`** so the agent runs the same command). Or work in this repo and run **`/clone-website <url1> [<url2> ...]`** to clone into the current tree.
|
|
18
18
|
|
|
19
19
|
## Tech Stack
|
|
20
20
|
- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
|
|
@@ -4,39 +4,36 @@
|
|
|
4
4
|
|
|
5
5
|
# Launchframe
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npx launchframe@latest
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
16
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
15
|
+
## What you do
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
2. Run exactly:
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
```bash
|
|
22
|
+
npx launchframe@latest
|
|
23
|
+
```
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
26
|
+
|
|
27
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
30
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
29
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
## If optional notes from the user after the slash command (the CLI itself needs no URL or SaaS strings) are present
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
38
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
35
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
39
36
|
|
|
40
37
|
## Fallback (local dev only)
|
|
41
38
|
|
|
42
|
-
|
|
39
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
|
@@ -1,48 +1,45 @@
|
|
|
1
1
|
# AUTO-GENERATED from .claude/skills/launchframe/SKILL.md
|
|
2
2
|
# Run `node scripts/sync-skills.mjs` to regenerate.
|
|
3
3
|
|
|
4
|
-
description = "Scaffold
|
|
4
|
+
description = "Scaffold with npx launchframe@latest into the current folder — no arguments required"
|
|
5
5
|
|
|
6
6
|
[prompt]
|
|
7
7
|
text = '''
|
|
8
8
|
|
|
9
9
|
# Launchframe
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
```bash
|
|
14
|
+
npx launchframe@latest
|
|
15
|
+
```
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
20
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
19
|
+
## What you do
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
2. Run exactly:
|
|
25
24
|
|
|
26
|
-
|
|
25
|
+
```bash
|
|
26
|
+
npx launchframe@latest
|
|
27
|
+
```
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
30
|
+
|
|
31
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
34
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
33
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
35
34
|
|
|
36
|
-
|
|
35
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
## If {{args}} are present
|
|
39
38
|
|
|
40
|
-
|
|
41
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
42
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
39
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
43
40
|
|
|
44
41
|
## Fallback (local dev only)
|
|
45
42
|
|
|
46
|
-
|
|
43
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
|
47
44
|
|
|
48
45
|
'''
|
|
@@ -10,7 +10,7 @@ This version has breaking changes — APIs, conventions, and file structure may
|
|
|
10
10
|
# Website Reverse-Engineer Template
|
|
11
11
|
|
|
12
12
|
## What This Is
|
|
13
|
-
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded —
|
|
13
|
+
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — for a **new** folder, `mkdir`, `cd` into an **empty** directory, run **`npx launchframe@latest`** (no parameters), then edit **`src/lib/launchframe-config.ts`** and run **`/clone-website`** with your URL (or invoke **`/launchframe`** so the agent runs the same command). Or work in this repo and run **`/clone-website <url1> [<url2> ...]`** to clone into the current tree.
|
|
14
14
|
|
|
15
15
|
## Tech Stack
|
|
16
16
|
- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
|
|
@@ -1,45 +1,42 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: launchframe
|
|
3
|
-
description: Scaffold a
|
|
4
|
-
argument-hint: "
|
|
3
|
+
description: Scaffold a Next.js app with npx launchframe@latest into the current folder — no CLI arguments required. Invoked as /launchframe.
|
|
4
|
+
argument-hint: ""
|
|
5
5
|
user-invocable: true
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
# Launchframe
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
```bash
|
|
13
|
+
npx launchframe@latest
|
|
14
|
+
```
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
19
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
18
|
+
## What you do
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
2. Run exactly:
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
```bash
|
|
25
|
+
npx launchframe@latest
|
|
26
|
+
```
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
29
|
+
|
|
30
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
33
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
32
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
34
33
|
|
|
35
|
-
|
|
34
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
## If $ARGUMENTS are present
|
|
38
37
|
|
|
39
|
-
|
|
40
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
41
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
38
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
42
39
|
|
|
43
40
|
## Fallback (local dev only)
|
|
44
41
|
|
|
45
|
-
|
|
42
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
description: "Scaffold
|
|
2
|
+
description: "Scaffold with npx launchframe@latest into the current folder — no arguments required"
|
|
3
3
|
---
|
|
4
4
|
<!-- AUTO-GENERATED from .claude/skills/launchframe/SKILL.md — do not edit directly.
|
|
5
5
|
Run `node scripts/sync-skills.mjs` to regenerate. -->
|
|
@@ -7,39 +7,36 @@ description: "Scaffold a Next.js app with npx launchframe@latest from a referenc
|
|
|
7
7
|
|
|
8
8
|
# Launchframe
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
```bash
|
|
13
|
+
npx launchframe@latest
|
|
14
|
+
```
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
19
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
18
|
+
## What you do
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
2. Run exactly:
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
```bash
|
|
25
|
+
npx launchframe@latest
|
|
26
|
+
```
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
29
|
+
|
|
30
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
33
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
32
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
34
33
|
|
|
35
|
-
|
|
34
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
## If $ARGUMENTS are present
|
|
38
37
|
|
|
39
|
-
|
|
40
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
41
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
38
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
42
39
|
|
|
43
40
|
## Fallback (local dev only)
|
|
44
41
|
|
|
45
|
-
|
|
42
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
|
@@ -4,39 +4,36 @@
|
|
|
4
4
|
|
|
5
5
|
# Launchframe
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Help the user create a **new** Launchframe project. The CLI is **parameterless**:
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npx launchframe@latest
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
It unpacks the full template into the **current working directory** (the folder root where the user runs the command). They should `mkdir`, `cd` into an **empty** folder first.
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
- **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
|
|
16
|
-
- **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
|
|
15
|
+
## What you do
|
|
17
16
|
|
|
18
|
-
|
|
17
|
+
1. Ensure the user has an **empty** directory (no existing `package.json`, `src/`, or `next.config.ts` there). If the workspace is already a Launchframe/Next project, they may only need `/clone-website` instead — clarify.
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
2. Run exactly:
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
```bash
|
|
22
|
+
npx launchframe@latest
|
|
23
|
+
```
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
|
|
26
|
+
|
|
27
|
+
3. **Never** run this with the output target **inside** the `launchframe` package directory (the npm-installed template). If the open folder is this monorepo/template, have them `mkdir ../my-app && cd ../my-app` (sibling path), then run `npx launchframe@latest` there.
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
- **Output path:** The Launchframe CLI must not write **inside** the npm package / template directory itself (that would recurse). If the open workspace is this repository, run `npx` with `--dir` pointing to a **sibling** path (e.g. `..\\my-app` on Windows, `../my-app` on macOS/Linux) or ask the user for a folder **outside** the repo.
|
|
30
|
-
- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
|
|
29
|
+
4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
5. After it finishes: they should **`npm run dev`** from **that same folder** (no extra `cd` if they scaffolded into cwd). Then they edit **`src/lib/launchframe-config.ts`** for reference URL and SaaS idea, and run **`/clone-website`** with that URL.
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
## If optional notes from the user after the slash command (the CLI itself needs no URL or SaaS strings) are present
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
2. `npm run dev` to preview the SaaS landing shell.
|
|
38
|
-
3. Run **`/clone-website <same-reference-url>`** in that project so the agent can reverse-engineer the reference site into components, while keeping the SaaS idea from `launchframe.context.json` / `src/lib/launchframe-config.ts`.
|
|
35
|
+
The user may still paste a URL or idea in chat — **do not** require them for the CLI. Put any extra context into **`src/lib/launchframe-config.ts`** or `launchframe.context.json` for them after scaffold.
|
|
39
36
|
|
|
40
37
|
## Fallback (local dev only)
|
|
41
38
|
|
|
42
|
-
|
|
39
|
+
From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--dir` outside the package root).
|
package/AGENTS.md
CHANGED
|
@@ -7,7 +7,7 @@ This version has breaking changes — APIs, conventions, and file structure may
|
|
|
7
7
|
# Website Reverse-Engineer Template
|
|
8
8
|
|
|
9
9
|
## What This Is
|
|
10
|
-
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded —
|
|
10
|
+
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — for a **new** folder, `mkdir`, `cd` into an **empty** directory, run **`npx launchframe@latest`** (no parameters), then edit **`src/lib/launchframe-config.ts`** and run **`/clone-website`** with your URL (or invoke **`/launchframe`** so the agent runs the same command). Or work in this repo and run **`/clone-website <url1> [<url2> ...]`** to clone into the current tree.
|
|
11
11
|
|
|
12
12
|
## Tech Stack
|
|
13
13
|
- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<a href="https://github.com/JCodesMore/ai-website-cloner-template/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License" /></a> <a href="https://github.com/JCodesMore/ai-website-cloner-template/stargazers"><img src="https://img.shields.io/github/stars/JCodesMore/ai-website-cloner-template?style=flat" alt="Stars" /></a> <a href="https://discord.gg/hrTSX5yTpB"><img src="https://img.shields.io/discord/1400896964597383279?label=discord" alt="Discord" /></a>
|
|
4
4
|
|
|
5
|
-
Scaffold a Next.js + shadcn/ui project
|
|
5
|
+
Scaffold a Next.js + shadcn/ui project in **the folder where you run the command** — use **`npx launchframe@latest`** (no arguments; create an empty directory, `cd` into it, then run it). Configure the reference URL and SaaS copy in **`src/lib/launchframe-config.ts`**. Then run **`/clone-website`** so your AI agent reverse-engineers the reference layout while preserving your messaging (`launchframe.context.json`, `docs/research/LAUNCHFRAME.md`, `src/lib/launchframe-config.ts`). In the agent, **`/launchframe`** means the same one-liner.
|
|
6
6
|
|
|
7
7
|
**Recommended: [Claude Code](https://docs.anthropic.com/en/docs/claude-code) with Opus 4.7 for best results** — but works with a variety of AI coding agents.
|
|
8
8
|
|
|
@@ -14,44 +14,33 @@ Scaffold a Next.js + shadcn/ui project from **a reference URL you want to copy**
|
|
|
14
14
|
|
|
15
15
|
## Quick Start
|
|
16
16
|
|
|
17
|
-
###
|
|
18
|
-
|
|
19
|
-
In Cursor, Claude Code, Continue, and other synced tools:
|
|
20
|
-
|
|
21
|
-
```text
|
|
22
|
-
/launchframe https://example.com "Your SaaS idea in plain language"
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
The agent runs **`npx launchframe@latest`** with those arguments (see `.cursor/commands/launchframe.md`). Output must be **outside** the template package directory when developing from a clone of this repo — use `--dir ../my-app` or an absolute path.
|
|
17
|
+
### 1. New project (empty folder)
|
|
26
18
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
From an empty folder (or anywhere you want the project folder created):
|
|
19
|
+
Create an **empty** directory, go into it, run the CLI with **no parameters** — files are written to **that folder** (your project root):
|
|
30
20
|
|
|
31
21
|
```bash
|
|
32
|
-
|
|
22
|
+
mkdir my-app
|
|
23
|
+
cd my-app
|
|
24
|
+
npx launchframe@latest
|
|
33
25
|
```
|
|
34
26
|
|
|
35
|
-
|
|
27
|
+
Optional: set `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` in the environment before running to pre-fill config without editing files.
|
|
36
28
|
|
|
37
|
-
|
|
29
|
+
Then edit `src/lib/launchframe-config.ts` if you still need to change the reference URL or SaaS pitch, run `npm run dev`, and use **`/clone-website`** with your reference URL.
|
|
38
30
|
|
|
39
|
-
|
|
40
|
-
- `--skip-install` — scaffold files only; run `npm install` yourself
|
|
31
|
+
### AI agents (slash command)
|
|
41
32
|
|
|
42
|
-
|
|
33
|
+
In Cursor, Claude Code, Continue, etc., **`/launchframe`** tells the agent to run **`npx launchframe@latest`** in an empty folder the user chooses (same as above). No URL or SaaS strings are required on the command line.
|
|
43
34
|
|
|
44
|
-
|
|
45
|
-
cd <your-project-folder>
|
|
46
|
-
npm run dev
|
|
47
|
-
```
|
|
35
|
+
### Optional flags
|
|
48
36
|
|
|
49
|
-
|
|
37
|
+
- `--dir path` / `-o path` — scaffold into another folder instead of the current directory (must be empty)
|
|
38
|
+
- `--skip-install` — skip `npm install`
|
|
50
39
|
|
|
51
40
|
### Git template (advanced)
|
|
52
41
|
|
|
53
42
|
1. Clone this repository and `npm install`
|
|
54
|
-
2.
|
|
43
|
+
2. Point `src/lib/launchframe-config.ts` at your site, or create sibling folder and run **`npx launchframe@latest`** there
|
|
55
44
|
3. Run `/clone-website <target-url>` from your agent
|
|
56
45
|
|
|
57
46
|
> Using a different agent? Open `AGENTS.md` for project instructions — most agents pick it up automatically.
|
package/bin/launchframe.mjs
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
/**
|
|
3
|
-
* Scaffold a Launchframe project
|
|
4
|
-
* Usage: npx launchframe@latest
|
|
3
|
+
* Scaffold a Launchframe project into the current directory (or --dir).
|
|
4
|
+
* Usage: npx launchframe@latest [--dir=path] [--skip-install]
|
|
5
|
+
* Optional: LAUNCHFRAME_SOURCE_URL, LAUNCHFRAME_SAAS_IDEA env vars, or legacy CLI args.
|
|
5
6
|
*/
|
|
6
7
|
|
|
7
|
-
import { cp, mkdir, readdir, readFile, writeFile } from "fs/promises";
|
|
8
|
+
import { cp, mkdir, readdir, readFile, stat, writeFile } from "fs/promises";
|
|
8
9
|
import { spawn } from "node:child_process";
|
|
9
|
-
import { dirname, isAbsolute, join, relative, resolve } from "node:path";
|
|
10
|
+
import { basename, dirname, isAbsolute, join, relative, resolve } from "node:path";
|
|
10
11
|
import { fileURLToPath } from "node:url";
|
|
11
12
|
|
|
12
13
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
13
14
|
const PKG_ROOT = resolve(__dirname, "..");
|
|
14
15
|
|
|
16
|
+
const DEFAULT_URL = "https://example.com";
|
|
17
|
+
const DEFAULT_SAAS_IDEA =
|
|
18
|
+
"Edit your SaaS pitch in src/lib/launchframe-config.ts, then run /clone-website with your reference URL.";
|
|
19
|
+
|
|
15
20
|
/**
|
|
16
21
|
* Never copy these root entries into a scaffolded app (build artifacts, VCS, the CLI itself).
|
|
17
22
|
* All other root files and folders are copied as-is — including every dotfile and dot-directory
|
|
18
|
-
* so AI agents see the same agent rules
|
|
23
|
+
* so AI agents see the same agent rules and commands as this template.
|
|
19
24
|
*/
|
|
20
25
|
const SKIP_DIR_NAMES = new Set([
|
|
21
26
|
"bin",
|
|
@@ -34,29 +39,44 @@ const SKIP_ROOT_FILES = new Set([
|
|
|
34
39
|
"Thumbs.db",
|
|
35
40
|
]);
|
|
36
41
|
|
|
42
|
+
async function pathExists(p) {
|
|
43
|
+
try {
|
|
44
|
+
await stat(p);
|
|
45
|
+
return true;
|
|
46
|
+
} catch {
|
|
47
|
+
return false;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
37
51
|
function printHelp() {
|
|
38
52
|
console.log(`
|
|
39
|
-
launchframe — scaffold a Next.js app
|
|
53
|
+
launchframe — scaffold a Next.js app into the current directory (project root)
|
|
40
54
|
|
|
41
55
|
Usage:
|
|
42
|
-
npx launchframe@latest
|
|
56
|
+
npx launchframe@latest
|
|
43
57
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
This unpacks the template into the folder you are in (where you ran the command).
|
|
59
|
+
No URL or SaaS arguments are required — edit src/lib/launchframe-config.ts after scaffold.
|
|
60
|
+
|
|
61
|
+
Optional environment variables (same session):
|
|
62
|
+
LAUNCHFRAME_SOURCE_URL Reference site to clone later (https://...)
|
|
63
|
+
LAUNCHFRAME_SAAS_IDEA Short landing-page pitch text
|
|
64
|
+
|
|
65
|
+
Legacy (optional positional args, for scripts only):
|
|
66
|
+
npx launchframe@latest <url> "<saas-idea>"
|
|
47
67
|
|
|
48
68
|
Options:
|
|
49
|
-
--dir, -o
|
|
69
|
+
--dir, -o Scaffold into this folder instead of the current directory (must be empty)
|
|
50
70
|
--skip-install Do not run npm install after scaffolding
|
|
51
71
|
-h, --help Show this message
|
|
52
72
|
|
|
53
73
|
Note:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.github, etc.) except build/cache directories, so your AI tools see the same rules and commands as upstream.
|
|
74
|
+
Run inside an empty project folder (no existing package.json / src / next.config).
|
|
75
|
+
The output folder must not be inside the Launchframe npm package directory.
|
|
57
76
|
|
|
58
77
|
Example:
|
|
59
|
-
|
|
78
|
+
mkdir my-app && cd my-app
|
|
79
|
+
npx launchframe@latest
|
|
60
80
|
`);
|
|
61
81
|
}
|
|
62
82
|
|
|
@@ -114,20 +134,8 @@ function validateUrl(raw) {
|
|
|
114
134
|
return u.href;
|
|
115
135
|
}
|
|
116
136
|
|
|
117
|
-
function
|
|
118
|
-
|
|
119
|
-
const host = new URL(urlStr).hostname.replace(/^www\./i, "");
|
|
120
|
-
const label = host.split(".")[0] || "site";
|
|
121
|
-
const safe = label.replace(/[^a-zA-Z0-9-_]/g, "-").toLowerCase();
|
|
122
|
-
return `${safe || "site"}-launchframe`;
|
|
123
|
-
} catch {
|
|
124
|
-
return "launchframe-app";
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
function slugFromDir(dir) {
|
|
130
|
-
const base = dir.replace(/\\/g, "/").split("/").filter(Boolean).pop() ?? "launchframe-app";
|
|
137
|
+
function slugFromDir(destRootAbs) {
|
|
138
|
+
const base = basename(resolve(destRootAbs));
|
|
131
139
|
return base
|
|
132
140
|
.toLowerCase()
|
|
133
141
|
.replace(/[^a-z0-9-_]/g, "-")
|
|
@@ -193,7 +201,8 @@ async function writeGeneratedPackageJson(destRoot, npmPackageName) {
|
|
|
193
201
|
|
|
194
202
|
async function writeLaunchframeArtifacts(destRoot, url, idea) {
|
|
195
203
|
const configTs = `/**
|
|
196
|
-
*
|
|
204
|
+
* Set your reference site and positioning, then use /clone-website with the same URL.
|
|
205
|
+
* Written by Launchframe CLI — edit freely.
|
|
197
206
|
*/
|
|
198
207
|
export const LAUNCHFRAME_SOURCE_URL = ${tsStringLiteral(url)} as const;
|
|
199
208
|
|
|
@@ -206,7 +215,7 @@ export const LAUNCHFRAME_SAAS_IDEA = ${tsStringLiteral(idea)} as const;
|
|
|
206
215
|
sourceUrl: url,
|
|
207
216
|
saasIdea: idea,
|
|
208
217
|
notes:
|
|
209
|
-
"Use /clone-website with sourceUrl for pixel-perfect extraction.
|
|
218
|
+
"Edit this file or src/lib/launchframe-config.ts. Use /clone-website with sourceUrl for pixel-perfect extraction.",
|
|
210
219
|
};
|
|
211
220
|
await writeFile(
|
|
212
221
|
join(destRoot, "launchframe.context.json"),
|
|
@@ -224,7 +233,7 @@ ${url}
|
|
|
224
233
|
|
|
225
234
|
${idea}
|
|
226
235
|
|
|
227
|
-
When running \`/clone-website\`, pass the reference URL above. After structural cloning,
|
|
236
|
+
When running \`/clone-website\`, pass the reference URL above (update src/lib/launchframe-config.ts first if you still use the default). After structural cloning, align hero copy with your SaaS idea while respecting attribution and copyright for third-party brands.
|
|
228
237
|
`;
|
|
229
238
|
|
|
230
239
|
await mkdir(join(destRoot, "docs", "research"), { recursive: true });
|
|
@@ -236,7 +245,14 @@ async function writeReadme(destRoot, npmPackageName, url, idea) {
|
|
|
236
245
|
|
|
237
246
|
Created with [\`launchframe\`](https://www.npmjs.com/package/launchframe).
|
|
238
247
|
|
|
239
|
-
##
|
|
248
|
+
## Configure
|
|
249
|
+
|
|
250
|
+
Edit \`src/lib/launchframe-config.ts\`:
|
|
251
|
+
|
|
252
|
+
- \`LAUNCHFRAME_SOURCE_URL\` — site to reverse-engineer
|
|
253
|
+
- \`LAUNCHFRAME_SAAS_IDEA\` — landing copy / positioning
|
|
254
|
+
|
|
255
|
+
Current values (from scaffold):
|
|
240
256
|
|
|
241
257
|
- **Reference site:** ${url}
|
|
242
258
|
- **SaaS idea:** ${idea}
|
|
@@ -248,13 +264,7 @@ npm install
|
|
|
248
264
|
npm run dev
|
|
249
265
|
\`\`\`
|
|
250
266
|
|
|
251
|
-
Open your AI agent (
|
|
252
|
-
|
|
253
|
-
\`\`\`
|
|
254
|
-
/clone-website ${url}
|
|
255
|
-
\`\`\`
|
|
256
|
-
|
|
257
|
-
Keep the SaaS positioning from \`launchframe.context.json\` / \`src/lib/launchframe-config.ts\` when adapting cloned sections.
|
|
267
|
+
Open your AI agent and run \`/clone-website <your-reference-url>\` (same URL as in the config).
|
|
258
268
|
|
|
259
269
|
See \`AGENTS.md\` for full agent instructions.
|
|
260
270
|
`;
|
|
@@ -262,6 +272,21 @@ See \`AGENTS.md\` for full agent instructions.
|
|
|
262
272
|
await writeFile(join(destRoot, "README.md"), body, "utf8");
|
|
263
273
|
}
|
|
264
274
|
|
|
275
|
+
/** Refuse to stomp an existing Next-style project in the target directory. */
|
|
276
|
+
async function assertScaffoldTargetVacant(destRoot) {
|
|
277
|
+
const conflicts = ["package.json", "next.config.ts", "src"];
|
|
278
|
+
for (const c of conflicts) {
|
|
279
|
+
if (await pathExists(join(destRoot, c))) {
|
|
280
|
+
console.error(
|
|
281
|
+
`Refusing to scaffold: "${c}" already exists in this folder.\n` +
|
|
282
|
+
`Create a new empty directory, cd into it, then run:\n` +
|
|
283
|
+
` npx launchframe@latest\n`,
|
|
284
|
+
);
|
|
285
|
+
process.exit(1);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
265
290
|
function runNpmInstall(cwd) {
|
|
266
291
|
return new Promise((resolvePromise, reject) => {
|
|
267
292
|
const child = spawn("npm", ["install"], {
|
|
@@ -277,6 +302,17 @@ function runNpmInstall(cwd) {
|
|
|
277
302
|
});
|
|
278
303
|
}
|
|
279
304
|
|
|
305
|
+
function resolveUrlAndIdea(args) {
|
|
306
|
+
const envUrl =
|
|
307
|
+
process.env.LAUNCHFRAME_SOURCE_URL?.trim() || process.env.LAUNCHFRAME_URL?.trim();
|
|
308
|
+
const envIdea = process.env.LAUNCHFRAME_SAAS_IDEA?.trim();
|
|
309
|
+
|
|
310
|
+
let urlRaw = args.url?.trim() || envUrl || DEFAULT_URL;
|
|
311
|
+
let ideaRaw = args.idea?.trim() || envIdea || DEFAULT_SAAS_IDEA;
|
|
312
|
+
|
|
313
|
+
return { urlRaw, ideaRaw };
|
|
314
|
+
}
|
|
315
|
+
|
|
280
316
|
async function main() {
|
|
281
317
|
const args = parseArgs(process.argv.slice(2));
|
|
282
318
|
if (args.help) {
|
|
@@ -284,36 +320,31 @@ async function main() {
|
|
|
284
320
|
process.exit(0);
|
|
285
321
|
}
|
|
286
322
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
323
|
+
const destRoot = args.dir?.trim()
|
|
324
|
+
? resolve(process.cwd(), args.dir.trim())
|
|
325
|
+
: resolve(process.cwd());
|
|
326
|
+
|
|
327
|
+
if (isForbiddenOutput(PKG_ROOT, destRoot)) {
|
|
328
|
+
console.error(
|
|
329
|
+
"Output folder cannot be inside the Launchframe package directory. Create a new folder outside this package and cd into it, then run npx launchframe@latest again.",
|
|
330
|
+
);
|
|
290
331
|
process.exit(1);
|
|
291
332
|
}
|
|
292
333
|
|
|
334
|
+
await assertScaffoldTargetVacant(destRoot);
|
|
335
|
+
|
|
336
|
+
const { urlRaw, ideaRaw } = resolveUrlAndIdea(args);
|
|
337
|
+
|
|
293
338
|
let url;
|
|
294
339
|
try {
|
|
295
|
-
url = validateUrl(
|
|
340
|
+
url = validateUrl(urlRaw);
|
|
296
341
|
} catch (e) {
|
|
297
342
|
console.error(String(e.message));
|
|
298
343
|
process.exit(1);
|
|
299
344
|
}
|
|
300
345
|
|
|
301
|
-
const idea =
|
|
302
|
-
|
|
303
|
-
console.error("Error: SaaS idea cannot be empty.");
|
|
304
|
-
process.exit(1);
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
const dirName = args.dir?.trim() || defaultDirName(url);
|
|
308
|
-
const destRoot = resolve(process.cwd(), dirName);
|
|
309
|
-
const npmPackageName = slugFromDir(dirName);
|
|
310
|
-
|
|
311
|
-
if (isForbiddenOutput(PKG_ROOT, destRoot)) {
|
|
312
|
-
console.error(
|
|
313
|
-
"Output folder cannot be inside the Launchframe package directory. Run from a parent folder or choose another path.",
|
|
314
|
-
);
|
|
315
|
-
process.exit(1);
|
|
316
|
-
}
|
|
346
|
+
const idea = ideaRaw.trim() || DEFAULT_SAAS_IDEA;
|
|
347
|
+
const npmPackageName = slugFromDir(destRoot);
|
|
317
348
|
|
|
318
349
|
await mkdir(destRoot, { recursive: true });
|
|
319
350
|
|
|
@@ -323,22 +354,23 @@ async function main() {
|
|
|
323
354
|
await writeLaunchframeArtifacts(destRoot, url, idea);
|
|
324
355
|
await writeReadme(destRoot, npmPackageName, url, idea);
|
|
325
356
|
|
|
326
|
-
console.log(`\
|
|
357
|
+
console.log(`\nScaffolded Launchframe in:\n ${destRoot}`);
|
|
327
358
|
console.log(` Reference URL: ${url}`);
|
|
328
359
|
console.log(` SaaS idea: ${idea}\n`);
|
|
360
|
+
console.log("Edit src/lib/launchframe-config.ts if you need different values.\n");
|
|
329
361
|
|
|
330
362
|
if (!args.skipInstall) {
|
|
331
363
|
console.log("Running npm install...\n");
|
|
332
364
|
try {
|
|
333
365
|
await runNpmInstall(destRoot);
|
|
334
|
-
console.log("\nDone.
|
|
366
|
+
console.log("\nDone. From this folder: npm run dev\n");
|
|
335
367
|
} catch (e) {
|
|
336
368
|
console.error(String(e.message));
|
|
337
|
-
console.error("\
|
|
369
|
+
console.error("\nRun npm install in this folder manually.\n");
|
|
338
370
|
process.exit(1);
|
|
339
371
|
}
|
|
340
372
|
} else {
|
|
341
|
-
console.log("Skipped npm install (--skip-install). Run npm install
|
|
373
|
+
console.log("Skipped npm install (--skip-install). Run npm install in this folder.\n");
|
|
342
374
|
}
|
|
343
375
|
}
|
|
344
376
|
|
package/package.json
CHANGED
package/scripts/sync-skills.mjs
CHANGED
|
@@ -25,10 +25,10 @@ const SKILLS = [
|
|
|
25
25
|
id: "launchframe",
|
|
26
26
|
sourceRel: ".claude/skills/launchframe/SKILL.md",
|
|
27
27
|
shortDesc:
|
|
28
|
-
"Scaffold
|
|
28
|
+
"Scaffold with npx launchframe@latest into the current folder — no arguments required",
|
|
29
29
|
plainSubstitution:
|
|
30
|
-
"
|
|
31
|
-
augmentArgumentHint: "
|
|
30
|
+
"optional notes from the user after the slash command (the CLI itself needs no URL or SaaS strings)",
|
|
31
|
+
augmentArgumentHint: "",
|
|
32
32
|
},
|
|
33
33
|
];
|
|
34
34
|
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Defaults
|
|
3
|
-
* The Launchframe CLI overwrites this file in scaffolded projects.
|
|
2
|
+
* Defaults before scaffolding. After `npx launchframe@latest`, edit these values.
|
|
4
3
|
*/
|
|
5
4
|
export const LAUNCHFRAME_SOURCE_URL = "https://example.com" as const;
|
|
6
5
|
|
|
7
6
|
export const LAUNCHFRAME_SAAS_IDEA =
|
|
8
|
-
|
|
7
|
+
"Edit your SaaS pitch here, then run /clone-website with LAUNCHFRAME_SOURCE_URL." as const;
|