launchframe 0.4.0 → 0.4.1

package/.gemini/commands/launchframe.toml

@@ -0,0 +1,48 @@
+# AUTO-GENERATED from .claude/skills/launchframe/SKILL.md
+# Run `node scripts/sync-skills.mjs` to regenerate.
+
+description = "Scaffold a Next.js app with npx launchframe@latest from a reference URL and SaaS idea"
+
+[prompt]
+text = '''
+
+# Launchframe
+
+You are helping the user scaffold a **new** project from **{{args}}**:
+
+- A **reference URL** (the website to copy later with `/clone-website`)
+- A **SaaS idea** string (headline / positioning for the generated landing page)
+
+## Parse inputs
+
+1. Split **{{args}}** into:
+   - **URL** — First `http://` or `https://` URL. Normalize (trim, validate). If invalid or missing, ask once for a correct URL.
+   - **SaaS idea** — Everything after the URL, typically in quotes. Strip surrounding quotes. If empty, ask for a short product pitch.
+
+2. Optional flags the user might pass (same as the CLI): `--dir` / `-o` for output folder, `--skip-install` to skip `npm install`.
+
+## Run the published CLI
+
+Execute the scaffold using the **latest** package from npm (exact intent: **`launchframe@latest`**):
+
+```bash
+npx launchframe@latest "<url>" "<saas-idea>" [--dir <folder>] [--skip-install]
+```
+
+- Use shell-appropriate quoting (PowerShell vs bash). Escape embedded quotes in the SaaS idea.
+- **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.
+- Prefer letting the CLI run `npm install` unless the user passed `--skip-install`.
+
+## After scaffold
+
+Tell the user:
+
+1. `cd` into the new project directory.
+2. `npm run dev` to preview the SaaS landing shell.
+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`.
+
+## Fallback (local dev only)
+
+If `npx launchframe@latest` is unavailable (offline), from a **checkout of this repo** you may run `node bin/launchframe.mjs "<url>" "<saas-idea>" ...` with the same rules for `--dir` outside the package root.
+
+'''

package/.github/copilot-instructions.md

@@ -1,76 +1,87 @@
-<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
-     Run `bash scripts/sync-agent-rules.sh` to regenerate. -->
-
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
-
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->
-
-# Website Reverse-Engineer Template
-
-## What This Is
-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 — just run `/clone-website <url1> [<url2> ...]`.
-
-## Tech Stack
-- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
-- **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
-- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)
-- **Styling:** Tailwind CSS v4 with oklch design tokens
-- **Deployment:** Vercel
-
-## Commands
-- `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
-
-## Code Style
-- TypeScript strict mode, no `any`
-- Named exports, PascalCase components, camelCase utils
-- Tailwind utility classes, no inline styles
-- 2-space indentation
-- Responsive: mobile-first
-
-## Design Principles
-- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
-- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later
-- **Real content** — use actual text and assets from the target site, not placeholders
-- **Beauty-first** — every pixel matters
-
-## Project Structure
-```
-src/
-  app/              # Next.js routes
-  components/       # React components
-    ui/             # shadcn/ui primitives
-    icons.tsx       # Extracted SVG icons as React components
-  lib/
-    utils.ts        # cn() utility (shadcn)
-  types/            # TypeScript interfaces
-  hooks/            # Custom React hooks
-public/
-  images/           # Downloaded images from target site
-  videos/           # Downloaded videos from target site
-  seo/              # Favicons, OG images, webmanifest
-docs/
-  research/         # Inspection output (design tokens, components, layout)
-  design-references/ # Screenshots and visual references
-scripts/            # Asset download scripts
-```
-
-## MOST IMPORTANT NOTES
-- When launching Claude Code agent teams, ALWAYS have each teammate work in their own worktree branch and merge everyone's work at the end, resolving any merge conflicts smartly since you are basically serving the orchestrator role and have full context to our goals, work given, work achieved, and desired outcomes.
-- After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
-- After editing `.claude/skills/clone-website/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the skill for all platforms.
-
+<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
+     Run `bash scripts/sync-agent-rules.sh` to regenerate. -->
+
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
+
+# Website Reverse-Engineer Template
+
+## What This Is
+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 — start a **new** project with **`/launchframe <url> "your saas idea"`** (runs **`npx launchframe@latest`**), or work in the current repo and run **`/clone-website <url1> [<url2> ...]`** to clone into this tree.
+
+## Tech Stack
+- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
+- **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
+- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)
+- **Styling:** Tailwind CSS v4 with oklch design tokens
+- **Deployment:** Vercel
+
+## Commands
+- `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
+
+## Code Style
+- TypeScript strict mode, no `any`
+- Named exports, PascalCase components, camelCase utils
+- Tailwind utility classes, no inline styles
+- 2-space indentation
+- Responsive: mobile-first
+
+## Design Principles
+- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
+- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later
+- **Real content** — use actual text and assets from the target site, not placeholders
+- **Beauty-first** — every pixel matters
+- **DOM crawl priority** — when walking the target page, emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline icons, sprites, masks), then **motion** (keyframes, transitions, scroll/time-driven animation, libraries). Scrape and save real assets from the DOM/network first; **create** a stand-in image or vector only when fetch/blocking prevents extraction, and label substitutes clearly in research notes so the clone stays auditable
+
+## Project Structure
+```
+src/
+  app/              # Next.js routes
+  components/       # React components
+    ui/             # shadcn/ui primitives
+    icons.tsx       # Extracted SVG icons as React components
+  lib/
+    utils.ts        # cn() utility (shadcn)
+  types/            # TypeScript interfaces
+  hooks/            # Custom React hooks
+public/
+  images/           # Downloaded images from target site
+  videos/           # Downloaded videos from target site
+  seo/              # Favicons, OG images, webmanifest
+docs/
+  research/         # Inspection output (design tokens, components, layout)
+  design-references/ # Screenshots and visual references
+scripts/            # Asset download scripts
+```
+
+## MOST IMPORTANT NOTES
+- When launching Claude Code agent teams, ALWAYS have each teammate work in their own worktree branch and merge everyone's work at the end, resolving any merge conflicts smartly since you are basically serving the orchestrator role and have full context to our goals, work given, work achieved, and desired outcomes.
+- After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
+- After editing `.claude/skills/*/SKILL.md` (for example `clone-website` or `launchframe`), run `node scripts/sync-skills.mjs` to regenerate skill and command files for all platforms.
+
 # Website Inspection Guide
 
 ## How to Reverse-Engineer Any Website
 
 This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
 
+## Priority: media, SVGs, and motion (do this early)
+
+When crawling the DOM and network, **tackle these before fine-tuning copy or spacing**:
+
+1. **Raster imagery** — Every `<img>`, `<picture>` / `source`, `srcset` / `sizes`, CDN URLs, lazy-loaded `data-src`, `loading="lazy"` nodes, **CSS `background-image`** on the element and ancestors (including `::before` / `::after`), masks that use `url()`, `<video>` still / poster frames. Prefer **downloading** originals via scripts or MCP; if a URL is blocked or session-gated, **export a screenshot** of the element’s bounding box at a crisp DPR and store it under `public/images/`, and note the substitute in the spec.
+2. **SVGs** — Inline `<svg>`, `<use>` / sprite sheets, **SVG in CSS** (`mask-image`, `background-image`), favicons as SVG, logo marks. Prefer extracting path/viewBox into React components or static files under `public/` — **recreate** from a screenshot/trace only when the markup is obfuscated or blocked.
+3. **Motion & animation** — Inspect Styles for `animation`, `animation-name`, `animation-timeline`, `transition`, `transform`, `@keyframes`; check for libraries (Framer Motion, GSAP, Lottie, Lenis). Capture **durations, easings, delays, fill-modes**, scroll/view triggers, and `prefers-reduced-motion` handling. Motion often defines perceived quality — do not leave it as an afterthought.
+
+Then continue with typography, spacing, and component structure as usual.
+
 ## Phase 1: Visual Audit
 
 ### Screenshots to Capture