launchframe 0.4.0 → 0.4.2

package/.gemini/commands/launchframe.toml

@@ -0,0 +1,45 @@
+# AUTO-GENERATED from .claude/skills/launchframe/SKILL.md
+# Run `node scripts/sync-skills.mjs` to regenerate.
+
+description = "Scaffold with npx launchframe@latest into the current folder — no arguments required"
+
+[prompt]
+text = '''
+
+# Launchframe
+
+Help the user create a **new** Launchframe project. The CLI is **parameterless**:
+
+```bash
+npx launchframe@latest
+```
+
+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.
+
+## What you do
+
+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.
+
+2. Run exactly:
+
+   ```bash
+   npx launchframe@latest
+   ```
+
+   Optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` environment variables in the same shell if they want values pre-filled without editing files later.
+
+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.
+
+4. Optional flags (same as CLI): `--dir <path>` to scaffold into another folder instead of cwd, `--skip-install` to skip `npm install`.
+
+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.
+
+## If {{args}} are present
+
+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.
+
+## Fallback (local dev only)
+
+From a checkout of this repo: `node bin/launchframe.mjs` with the same empty-folder rules (optionally `--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 — 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.
+
+## 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