launchframe 0.4.8 → 0.4.10

package/AGENTS.md

@@ -33,9 +33,9 @@ A reusable template for reverse-engineering any website into a clean, modern Nex
 ## 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 where they are interchangeable chrome; **`/launchframe`** overlays your SaaS pitch on headings and CTAs. **Marketing photographs and illustrative hero/feature imagery are not photocopied**: recreate each visual slot with **new images** scoped to **your product** (same framing, hierarchy, and aspect ratio — detail insets / secondary crops should echo the reference layout but show product-relevant subjects), and note originals vs substitutes in `docs/research/`
+- **Real content** — use actual text and assets from the target site where they are interchangeable chrome; **`/launchframe`** overlays your SaaS pitch on headings and CTAs. **Marketing photographs and illustrative hero/feature imagery are not photocopied**: you **must** ship **committed files** under `public/images/` (etc.) for every such slot — **generate them yourself** with your host **image-generation** tool (prompts tied to the SaaS idea), wire into components, supplement with UI mock composites only if helpful. Blank placeholders count as unfinished. Record paths in `docs/research/LAUNCHFRAME.md`
 - **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 — **copy extracted geometry**, do not approximate with unrelated Lucide glyphs), then **motion** (**copy** `@keyframes`, `transition`/`animation` timings, scroll triggers, carousel staggers via Chrome MCP / CSS sources). **Measure and mirror** mounting and styling from the DOM; scrape **permission-neutral** bytes when appropriate. When a raster slot must be original for brand safety, **author** replacements and label them in research notes — **that never waives SVG or animation fidelity**
+- **Inspection workflow (canonical)** — Follow the ordered **five steps** in `docs/research/INSPECTION_GUIDE.md`: (1) **Structure** — DOM as hierarchy reference, not pasted production HTML; (2) **Styles** — Computed/stylesheets and tokens; (3) **Motion** — `@keyframes`, transitions, timings, triggers; (4) **Assets** — rasters/SVGs with brand-safe originals for marketing slots when required; (5) **Implementation** — Next.js components rebuild. Within crawls (Chrome MCP / DevTools), still emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline, sprites, masks — **exact geometry**, not unrelated Lucide stand-ins), then **motion fidelity**. **Measure and mirror** from the DOM; scrape **permission-neutral** bytes when appropriate — **SVG and animation fidelity are not waived** when rasters are replaced
 
 ## Project Structure
 ```
@@ -60,6 +60,7 @@ 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.
+- **`/launchframe` Phase 6 verification** must always run: prompt text lives in **`docs/research/LAUNCHFRAME_SUBAGENTS.md`**; results in **`docs/research/LAUNCHFRAME_VERIFICATION.md`**. Use four parallel **Task**/subagents (paste one `## Prompt — Pass …` section per agent) or run all four sequentially yourself — never skip verification.
 - After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
 - After editing **any** `SKILL.md` under `.claude/skills/<skill-id>/`, run `node scripts/sync-skills.mjs` to regenerate that skill’s slash commands/workflows for **every supported platform** (discovered automatically).
 

package/README.md

@@ -1,165 +1,38 @@
-# Launchframe (AI Website Cloner)
-
-<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>
-
-**`/launchframe`** — full pixel-perfect reverse-engineer of the reference page **plus** a SaaS pitch (two parameters: URL and quoted idea). Config is stored in `src/lib/launchframe-config.ts`, `launchframe.context.json`, and `docs/research/LAUNCHFRAME.md`. **CLI:** **`npx launchframe@latest`** (no args) only **unpacks this template** into an empty directory; then run **`/launchframe <url> "…"`** in that project.
-
-**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.
-
-## Demo
-
-[![Watch the demo](docs/design-references/comparison.png)](https://youtu.be/O669pVZ_qr0)
-
-> Click the image above to watch the full demo on YouTube.
-
-## Quick Start
-
-### 1. New project (empty folder)
-
-Create an **empty** directory, go into it, run the CLI with **no parameters** — files are written to **that folder** (your project root):
-
-```bash
-mkdir my-app
-cd my-app
-npx launchframe@latest
-```
-
-Optional: set `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` in the environment before running to pre-fill config without editing files.
-
-Then run `npm run dev` and your agent with **`/launchframe <url> "your saas idea"`**.
-
-### AI agents
-
-Use **`/launchframe <url> "saas idea"`** — the only clone workflow for this template (URL + SaaS positioning; full extraction/build pipeline).
-
-To start from zero files in a folder, run **`npx launchframe@latest`** once, then **`/launchframe`** in that project.
-
-### Optional flags
-
-- `--dir path` / `-o path` — scaffold into another folder instead of the current directory (must be empty)
-- `--skip-install` — skip `npm install`
-
-### Git template (advanced)
-
-1. Clone this repository and `npm install`
-2. Point `src/lib/launchframe-config.ts` at your site, or create a sibling folder and run **`npx launchframe@latest`** there
-3. Run **`/launchframe <url> "saas idea"`** from your agent
-
-> Using a different agent? Open `AGENTS.md` for project instructions — most agents pick it up automatically.
-
-## Supported Platforms
-
-| Agent                                                         | Status                     |
-| ------------------------------------------------------------- | -------------------------- |
-| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **Recommended** — Opus 4.7 |
-| [Codex CLI](https://github.com/openai/codex)                  | Supported                  |
-| [OpenCode](https://opencode.ai/)                              | Supported                  |
-| [GitHub Copilot](https://github.com/features/copilot)         | Supported                  |
-| [Cursor](https://cursor.com/)                                 | Supported                  |
-| [Windsurf](https://codeium.com/windsurf)                      | Supported                  |
-| [Gemini CLI](https://github.com/google-gemini/gemini-cli)     | Supported                  |
-| [Cline](https://github.com/cline/cline)                       | Supported                  |
-| [Roo Code](https://github.com/RooCodeInc/Roo-Code)            | Supported                  |
-| [Continue](https://continue.dev/)                             | Supported                  |
-| [Amazon Q](https://aws.amazon.com/q/developer/)               | Supported                  |
-| [Augment Code](https://www.augmentcode.com/)                  | Supported                  |
-| [Aider](https://aider.chat/)                                  | Supported                  |
-
-## Prerequisites
-
-- [Node.js](https://nodejs.org/) 24+
-- An AI coding agent (see [Supported Platforms](#supported-platforms))
-
-## Tech Stack
-
-- **Next.js 16** — App Router, React 19, TypeScript strict
-- **shadcn/ui** — Radix primitives + Tailwind CSS v4
-- **Tailwind CSS v4** — oklch design tokens
-- **Lucide React** — default icons (replaced by extracted SVGs during cloning)
-
-## How It Works
-
-The **`/launchframe`** skill runs a multi-phase pipeline:
-
-1. **Reconnaissance** — screenshots, design token extraction, interaction sweep (scroll, click, hover, responsive)
-2. **Foundation** — updates fonts, colors, globals, downloads all assets
-3. **Component Specs** — writes detailed spec files (`docs/research/components/`) with exact computed CSS values, states, behaviors, and content
-4. **Parallel Build** — dispatches builder agents in git worktrees, one per section/component
-5. **Assembly & QA** — merges worktrees, wires up the page, runs visual diff against the original
-
-Each builder agent receives the full component specification inline — exact `getComputedStyle()` values, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.
-
-## Use Cases
-
-- **Platform migration** — rebuild a site you own from WordPress/Webflow/Squarespace into a modern Next.js codebase
-- **Lost source code** — your site is live but the repo is gone, the developer left, or the stack is legacy. Get the code back in a modern format
-- **Learning** — deconstruct how production sites achieve specific layouts, animations, and responsive behavior by working with real code
-
-## Not Intended For
-
-- **Phishing or impersonation** — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.
-- **Passing off someone's design as your own** — logos, brand assets, and original copy belong to their owners.
-- **Violating terms of service** — some sites explicitly prohibit scraping or reproduction. Check first.
-
-## Project Structure
-
-```
-src/
-  app/              # Next.js routes
-  components/       # React components
-    ui/             # shadcn/ui primitives
-    icons.tsx       # Extracted SVG icons
-  lib/utils.ts      # cn() utility
-  types/            # TypeScript interfaces
-  hooks/            # Custom React hooks
-public/
-  images/           # Downloaded images from target
-  videos/           # Downloaded videos from target
-  seo/              # Favicons, OG images
-docs/
-  research/         # Extraction output & component specs
-  design-references/ # Screenshots
-scripts/
-  sync-agent-rules.sh  # Regenerate agent instruction files
-  sync-skills.mjs      # Regenerate /launchframe for all platforms
-AGENTS.md           # Agent instructions (single source of truth)
-CLAUDE.md           # Claude Code config (imports AGENTS.md)
-GEMINI.md           # Gemini CLI config (imports AGENTS.md)
-```
-
-## Commands
-
-```bash
-npm run dev    # Start dev server
-npm run build  # Production build
-npm run lint   # ESLint check
-npm run typecheck # TypeScript check
-npm run check  # Run lint + typecheck + build
-```
-
-### If using docker
-
-```bash
-docker compose up app --build # build and run the app
-docker compose up dev --build # run the app in dev mode on port 3001
-```
-
-## Updating for Other Platforms
-
-Two source-of-truth files power all platform support. Edit the source, then run the sync script:
-
-| What                   | Source of truth                         | Sync command                       |
-| ---------------------- | --------------------------------------- | ---------------------------------- |
-| Project instructions   | `AGENTS.md`                             | `bash scripts/sync-agent-rules.sh` |
-| `/launchframe` skill | `.claude/skills/launchframe/SKILL.md` | `node scripts/sync-skills.mjs`     |
-
-Each script regenerates the platform-specific copies automatically. Agents that read the source files natively need no regeneration.
-
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=JCodesMore/ai-website-cloner-template&type=Date)](https://star-history.com/#JCodesMore/ai-website-cloner-template&Date)
-
-## License
-
-MIT
+# Launchframe
+
+Next.js + shadcn/ui + Tailwind v4 template for cloning a reference site and layering your SaaS pitch—wired for AI agents. Project rules for agents: **`AGENTS.md`**. In Cursor (and similar), use the **`/launchframe`** command with a URL and your pitch in quotes.
+
+Requires **Node.js 24+**.
+
+## Quick start
+
+**You already have this repo**
+
+```bash
+npm install
+npm run dev
+```
+
+**New folder**
+
+```bash
+mkdir my-app && cd my-app
+npx launchframe@latest
+```
+
+That unpacks the template and runs `npm install` unless you pass `--skip-install`. Defaults live in **`src/lib/launchframe-config.ts`** (optional: `LAUNCHFRAME_SOURCE_URL` and `LAUNCHFRAME_SAAS_IDEA` in the environment when you scaffold).
+
+## Scripts
+
+| Command | What it does |
+| -------- | ------------- |
+| `npm run dev` | Dev server |
+| `npm run build` | Production build |
+| `npm run start` | Run production build |
+| `npm run lint` | ESLint |
+| `npm run typecheck` | TypeScript |
+| `npm run check` | Lint, typecheck, then build |
+
+Took inspiration from [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template).
+
+MIT