launchframe 0.3.1 → 0.4.1

package/{template/.opencode → .opencode}/commands/clone-website.md

@@ -7,18 +7,7 @@ description: "Reverse-engineer and clone any website as a pixel-perfect replica"
 
 # Clone Website
 
-You are about to reverse-engineer and rebuild a website as a pixel-perfect clone, then re-skin the copy/branding for the user's SaaS idea.
-
-**Launchframe shorthand:** If the user only says **Build it**, **Go**, **Ship it**, **Clone the site**, or **Run launchframe** with no URL in the message, treat that as an invocation of this skill with empty `$ARGUMENTS` — **`launchframe.config.json` alone** supplies `url` and `idea`. Proceed without asking them to repeat those values unless the file is missing or invalid.
-
-## Step 0: Read `launchframe.config.json`
-
-**Before doing anything else**, read `launchframe.config.json` at the project root. This file was written by the `launchframe` CLI when the project was scaffolded and is the authoritative source of:
-
-- `url` — the visual source-of-truth you are cloning
-- `idea` — the user's SaaS idea, which becomes the rebranding directive applied after the pixel-perfect clone
-
-If `$ARGUMENTS` is non-empty, treat the arguments as additional URLs (or an override) and merge them with the config — explicit CLI args win on conflict. If `launchframe.config.json` is missing, fall back to `$ARGUMENTS` and ask the user for an idea if one wasn't provided.
+You are about to reverse-engineer and rebuild **$ARGUMENTS** as pixel-perfect clones.
 
 When multiple URLs are provided, process them independently and in parallel where possible, while keeping each site's extraction artifacts isolated in dedicated folders (for example, `docs/research/<hostname>/`).
 
@@ -26,36 +15,36 @@ This is not a two-phase process (inspect then build). You are a **foreman walkin
 
 ## Scope Defaults
 
-The target is the `url` from `launchframe.config.json` (or any URL provided in `$ARGUMENTS`). Clone exactly what's visible at that URL, then apply the SaaS-idea rebrand. Unless the user specifies otherwise, use these defaults:
+The target is whatever page `$ARGUMENTS` resolves to. Clone exactly what's visible at that URL. Unless the user specifies otherwise, use these defaults:
 
-- **Fidelity level (visuals):** Pixel-perfect — exact match in colors, spacing, typography, animations, responsive behavior
-- **Copy & branding:** Replaced to match the `idea` from `launchframe.config.json` (product name, headlines, feature copy, CTA labels, testimonials). Visuals stay 1:1; words and brand marks get re-skinned.
-- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data shaped for the SaaS idea
+- **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations
+- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
-- **Customization beyond the rebrand:** None during the initial pass — match 1:1 visually, swap copy/brand only
+- **Customization:** None — pure emulation
 
-If the user provides additional instructions (specific fidelity level, deeper customizations, extra context), honor those over the defaults.
+If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
 
 ## Pre-Flight
 
-1. **Read `launchframe.config.json`** (see Step 0 above). After a fresh `npx launchframe` scaffold, proceed immediately — only echo `url`/`idea` for confirmation if the config looks wrong or the user asked to verify.
-2. **Browser automation.** Prefer an MCP (Chrome DevTools MCP, Playwright MCP, Browserbase MCP, etc.) when it is healthy. **If MCP is missing or in an error state, run `npm run recon` (Playwright)** — see `scripts/recon-playwright.mjs`. It performs **stabilized full-document scrolling** at desktop and mobile, writes merged **`computed-snapshot.json`** + **`MEDIA_MANIFEST.md`**, and **full-page** screenshots under `docs/design-references/`. Use `npm run recon:headed` if headless hits a WAF/challenge page. One-time install: `npx playwright install chromium`. Do not skip extraction — adapt the pipeline to the tools that work.
-3. Validate the resolved URL(s). Normalize and verify each is accessible via your browser MCP tool. If any are invalid, ask the user to correct `launchframe.config.json` (or pass an override) before proceeding.
-4. Verify the base project builds: `npm run build`. The Next.js + shadcn/ui + Tailwind v4 scaffold should already be in place. If not, tell the user to run `npm install` first.
-5. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. Plan `docs/research/MEDIA_MANIFEST.md` as soon as media is inventoried. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
-6. When working with multiple sites in one command, optionally confirm whether to run them in parallel (recommended, if resources allow) or sequentially to avoid overload.
+1. **Browser automation is required.** Check for available browser MCP tools (Chrome MCP, Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). Use whichever is available — if multiple exist, prefer Chrome MCP. If none are detected, ask the user which browser tool they have and how to connect it. This skill cannot work without browser automation.
+2. Parse `$ARGUMENTS` as one or more URLs. Normalize and validate each URL; if any are invalid, ask the user to correct them before proceeding. For each valid URL, verify it is accessible via your browser MCP tool.
+3. Verify the base project builds: `npm run build`. The Next.js + shadcn/ui + Tailwind v4 scaffold should already be in place. If not, tell the user to set it up first.
+4. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
+5. When working with multiple sites in one command, optionally confirm whether to run them in parallel (recommended, if resources allow) or sequentially to avoid overload.
 
 ## Guiding Principles
 
 These are the truths that separate a successful clone from a "close enough" mess. Internalize them — they should inform every decision you make.
 
-### 0. Launchframe priorities: media & motion (do not defer)
+### 0. Visual crawl priority (images, SVGs, motion — first)
 
-**Raster & video are first-class.** Before you treat the page as “mostly typography,” run a dedicated **media inventory** (see `@docs/research/INSPECTION_GUIDE.md` Priority section): every `<img>`, `<picture>` / `<source>`, `<video>` (+ poster), and non-trivial `background-image`. Download to `public/images/` and `public/videos/` and write `docs/research/MEDIA_MANIFEST.md` (URL → local path, or `BLOCKED` + reason). Component specs MUST list concrete `public/...` paths; if you use a placeholder, say why in `docs/research/EXTRACTION_LIMITATIONS.md`. Never silently drop a hero layer, reel, or og visual.
+When you traverse the DOM and the Network panel, do **not** treat all nodes equally. Work in this **priority order** so the clone feels like the original, not a wireframe:
 
-**Motion defaults to Framer Motion.** This template lists `framer-motion` as a dependency. After foundation tokens, ensure `import { motion } from "framer-motion"` (and related APIs: `useScroll`, `useTransform`, `AnimatePresence`, `LayoutGroup`, **`useReducedMotion`**) for: scroll-triggered reveals, staggered children, layout transitions, and gestures — anything beyond a trivial one-property CSS `transition`. In each spec file, add a **Motion** subsection: trigger, duration, easing, delay/stagger, **tier A–E coverage** (see `AGENTS.md` production polish table), reduced-motion fallback, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
+1. **Images (raster + video stills)** — Enumerate `<img>`, `<picture>`, responsive `srcset`, `data-*` lazy URLs, **computed `background-image`** on the element and parents (including pseudo-elements), mask images, `<video poster>`, hero media. **Scrape:** download binary assets to `public/images/` (or `public/videos/`) with stable paths referenced in specs. **Create** a replacement PNG/WebP/SVG only when the asset is blocked (CORS, auth cookie, 403), ephemeral, or impossible to URL-fetch — use a high-DPI screenshot crop, traced artwork, or CSS gradient approximation, and mark `ASSET_SOURCE: generated` in the component spec with a short reason.
+2. **SVGs & iconography** — Inline `<svg>`, sprite `symbol` defs, **SVG used as masks/filters**, icon fonts (prefer path extraction). Convert to `@/components/icons.tsx` (or section-local components) with meaningful names. Prioritize crisp edges and correct `viewBox` over shrinking bundle size during emulation.
+3. **Motion & animation** — CSS `@keyframes`, `animation`, `animation-timeline`, `transition`, `transform`, will-change hints; JS-driven motion (carousel timing, IntersectionObserver reveals); libraries (GSAP, Framer, Lottie JSON, Lenis). Capture **numbers** (ms, easing curves, stagger, scroll thresholds), not adjectives. Include **reduced-motion** behavior if present.
 
-**Illustration & pixel art are production inputs.** Where the target (or post-rebrand layout) lacks convincing visuals, specs MUST allocate **idea-tailored SVG scenes** — metaphors drawn from `launchframe.config.json#idea`, documented with **Idea tie-in** per asset — not generic gray placeholders or unrelated clipart. Pixel-art motifs require concept justification plus palette table in the spec.
+Only after the above are accounted for should you spend cycle time on minor text or non-visual refactors. A perfect grid with missing hero art and dead animation still fails the clone.
 
 ### 1. Completeness Beats Speed
 
@@ -73,6 +62,8 @@ Look at each section and judge its complexity. A simple banner with a heading an
 
 Extract the actual text, images, videos, and SVGs from the live site. This is a clone, not a mockup. Use `element.textContent`, download every `<img>` and `<video>`, extract inline `<svg>` elements as React components. The only time you generate content is when something is clearly server-generated and unique per session.
 
+**Prioritize** (see §0): downloadable imagery and backgrounds first, then SVG/icon layers, then motion. If you must **fabricate** an asset, prefer screenshot-based exports or traced vectors tied to measured box sizes — avoid unrelated stock art.
+
 **Layered assets matter.** A section that looks like one image is often multiple layers — a background watercolor/gradient, a foreground UI mockup PNG, an overlay icon. Inspect each container's full DOM tree and enumerate ALL `<img>` elements and background images within it, including absolutely-positioned overlays. Missing an overlay image makes the clone look empty even if the background is correct.
 
 ### 4. Foundation First
@@ -142,12 +133,12 @@ Every builder agent must verify `npx tsc --noEmit` passes before finishing. Afte
 
 Navigate to the target URL with browser MCP.
 
-### Screenshots *(entire landing — never “above the fold” only)*
-- Capture the **whole marketing surface**: hero through footer (single-page landings). Do **not** stop after the first viewport — lazy-loaded sections, footer nav, and bottom CTAs are required context.
-- Before **every** full-page capture (MCP or Playwright): **slow scroll top → bottom → top** once or twice until `scrollHeight` stops growing, so lazy images/`srcset`/`data-src` resolve where possible.
-- Take **`fullPage: true`** (or MCP equivalent) screenshots at desktop (**1440px**) and mobile (**390px**); save under `docs/design-references/` with descriptive names.
-- **`npm run recon`** already performs stabilized full-document scrolling + merged desktop/mobile asset inventory — prefer running it when automation must match full-page depth reliably.
-- These masters are references — builders still get section crops later, but those crops must exist because **you** scrolled and documented every band first.
+Follow **§0 (Visual crawl priority)** during the entire reconnaissance pass: images and backgrounds → SVGs/icons → motion/animations — before spending time on secondary copy tweaks.
+
+### Screenshots
+- Take **full-page screenshots** at desktop (1440px) and mobile (390px) viewports
+- Save to `docs/design-references/` with descriptive names
+- These are your master reference — builders will receive section-specific crops/screenshots later
 
 ### Global Extraction
 Extract these from the page before doing anything else:
@@ -203,12 +194,11 @@ Save this as `docs/research/PAGE_TOPOLOGY.md` — it becomes your assembly bluep
 This is sequential. Do it yourself (not delegated to an agent) since it touches many files:
 
 1. **Update fonts** in `layout.tsx` to match the target site's actual fonts
-2. **Confirm Framer Motion** — `framer-motion` should already be in `package.json`. If missing, add it (`npm install framer-motion`) so builders can import `motion` without ad-hoc library drift.
-3. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
-4. **Media inventory + download (early, high priority)** — run the asset discovery script (below) via browser MCP, write `docs/research/MEDIA_MANIFEST.md`, then implement **`scripts/download-assets.mjs`** and execute it so **images** land in `public/images/` and **videos** (+ posters) in `public/videos/` (or a clear subdirectory scheme under `public/`). Batch parallel downloads (4 concurrent) with errors logged — do not claim success if URLs failed. This step should complete **before** most section components are built so builders use real paths.
-5. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
-6. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
-7. Verify: `npm run build` passes
+2. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
+3. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
+4. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
+5. **Download global assets** — write and run a Node.js script (`scripts/download-assets.mjs`) that downloads all images, videos, and other binary assets from the page to `public/`. Preserve meaningful directory structure.
+6. Verify: `npm run build` passes
 
 ### Asset Discovery Script Pattern
 
@@ -365,25 +355,11 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **State A (before):** maxWidth: 100vw, boxShadow: none, borderRadius: 0
 - **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1), borderRadius: 16px
 - **Transition:** transition: all 0.3s ease
-- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | **framer-motion** (`motion`, `whileInView`, stagger container) | etc.>
+- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | etc.>
 
 ### Hover states
 - **<Element>:** <property>: <before> → <after>, transition: <value>
 
-## Motion (Framer Motion vs CSS)
-- **Tiers A–E:** <which tiers apply — load stagger, scroll reveal, ambient loop, interaction lifts, decorative parallax — list triggers>
-- **Reduced motion:** <what disables or simplifies when user prefers reduced motion>
-- **Entrance / scroll reveals:** <e.g. fade+translateY, staggerChildren — specify duration, easing, delay, viewport `once`/`margin`>
-- **Library:** <`framer-motion` | CSS-only — justify if CSS-only>
-- **Keyframes / springs:** <if any — match target curve>
-
-## Illustration & pixel art *(production uplift — idea-native)*
-- **Idea tie-in:** <one sentence — why this asset belongs only to this product>
-- **Metaphor link:** <which keyword from `idea` / metaphor list this illustrates>
-- **SVG components:** <named exports, paths using currentColor vs fixed fills>
-- **Pixel motif:** <palette hex table, grid, scaling — or N/A>
-- **Motif thread:** <how this echoes logo / OG / favicon for this SaaS>
-
 ## Per-State Content (if applicable)
 
 ### State: "Featured"
@@ -395,10 +371,9 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - Title: "..."
 - Cards: [...]
 
-## Assets (images & video — required detail)
-- Raster: `public/images/<file>` — dimensions, `object-fit`, lazy if below fold
-- Video: `public/videos/<file>` — poster `public/images/...` or `public/videos/...`, autoplay/muted/loop, controls
-- Background layers: which div uses `background-image` and resolved URL → local path
+## Assets
+- Background image: `public/images/<file>.webp`
+- Overlay image: `public/images/<file>.png`
 - Icons used: <ArrowIcon>, <SearchIcon> from icons.tsx
 
 ## Text Content (verbatim)
@@ -451,49 +426,6 @@ After all sections are built and merged, wire everything together in `src/app/pa
 - Implement page-level behaviors: scroll snap, scroll-driven animations, dark-to-light transitions, intersection observers, smooth scroll (Lenis etc.)
 - Verify: `npm run build` passes clean
 
-## Phase 4.5: SaaS Rebrand Pass
-
-The pixel-perfect clone is done — now re-skin it for the SaaS idea from `launchframe.config.json`.
-
-**Guiding rule:** swap words and brand marks, leave structure untouched. The original site's visual hierarchy was already validated by a real product team. Your job is to put the user's product into that proven shell, not to redesign it.
-
-For every section, replace:
-
-1. **Product name & logo** — wherever the original brand appears, use the SaaS idea's name (derive a short product name from the `idea` string if one isn't supplied — keep it 1–2 words, easy to lockup). Replace the wordmark text in place. For the logo glyph, either reuse the original SVG silhouette with a fresh fill, or use a Lucide icon that matches the SaaS category (e.g., `Brain` for AI, `Workflow` for automation, `Sparkles` for generative tooling). Do NOT keep the original brand's actual logo file.
-2. **Hero headline & sub-headline** — write fresh copy that pitches the SaaS idea, using the original line lengths and tone as constraints. If the original is 6 words, write 6 words. If it's 14, write 14. Match emphasis, line breaks, and any inline highlighted phrase.
-3. **Feature/section copy** — rewrite each feature card, callout, stat, and testimonial to fit the SaaS idea. Preserve the count and shape of items (3 feature cards stay 3 feature cards; a 4-column logo bar stays 4 columns). Generate plausible customer-logo names — never use real company names you haven't been authorized to use.
-4. **CTA labels** — adapt button text to the SaaS idea ("Start free", "Get a demo", "Try it free", etc.). Keep the CTA hierarchy (primary/secondary) identical to the original.
-5. **Mock data** — for product UI mockups embedded in marketing screenshots (e.g., a fake dashboard inside a hero), generate mock data shaped for the SaaS idea: realistic-looking but fictional rows, charts, conversation logs, etc.
-6. **Imagery** — Replace photography/screenshots that depict the original brand with visuals **authored for this SaaS idea**, not interchangeable decoration. Before designing: derive a **metaphor list** from `idea` (3–6 concrete hooks). Each hero/feature/OG asset gets an **Idea tie-in** sentence in `docs/research/REBRAND.md`. Prefer bespoke SVG scenes (`src/components/marketing/art/`) or raster under `public/images/marketing/` that preserve dimensions/aspect/shadows from the cloned layout. **Avoid:** unrelated filler (e.g. apparel, random lifestyle props when the product is notes/voice), generic gradient-only heroes, Lucide-icon piles unless the reference was already that minimal — those fail the uniqueness bar in `AGENTS.md`.
-7. **Metadata** — update `<title>`, meta description, OG tags, and favicon manifest in `src/app/layout.tsx` to reflect the new SaaS. Generate a simple favicon (initial letter on a brand-colored square) if no asset is provided.
-
-What you must NOT change in this pass:
-- Spacing, padding, typography scale, color tokens, **animation timing & motion choreography** (including Framer Motion `variants` / `transition` props), responsive breakpoints — those are still 1:1 to the original
-- Section order, section count, component structure
-- Interaction models (scroll-driven stays scroll-driven, etc.)
-- Any computed-style value extracted in Phase 3
-
-After the rebrand pass, the codebase should look like the original site visually but read like the user's SaaS at a glance. Save a short `docs/research/REBRAND.md` summarizing the product name you chose, the headline rewrites, and any assets you swapped — so the user can audit what's clone-derived vs. authored.
-
-## Phase 4.6: Production uplift *(sparse references / stronger idea-specific art)*
-
-Run this pass when **any** of the following is true:
-
-- The cloned reference is mostly typography with weak imagery (internal demos, minimalist SaaS shells).
-- The user asks for **more unique images**, **illustration tailored to the idea**, **stronger visuals**, motion, pixel art, or production polish.
-- Visual QA feels “correct but dead” — layout matches but art is generic, unrelated, or repeated stock metaphors.
-
-**Do not contradict pixel-perfect emulation when cloning a rich reference** — this phase *adds* or swaps **idea-native** imagery only where the brief allows uplift or the reference was inherently flat.
-
-Checklist (mirror `AGENTS.md` — **uniqueness first**):
-
-1. **Idea-tailored imagery** — Metaphor list from `idea`; replace any asset that could belong to another vertical. Per-asset **Idea tie-in** in `docs/research/PRODUCTION_UPLIFT.md` alongside SVG/raster paths.
-2. **Density** — Layered hero + distinct scene per feature card in **one shared visual language** (stroke/accent/grid), still idea-specific.
-3. **Motion tiers** — Implement at minimum **A + B + one of C/D**, optionally **E**: staggered hero load, `whileInView` sections + card stagger, looping ambient (marquee / caret / SVG dash loop), hover lifts / nav scroll shrink, optional light parallax. Gate loops with **`useReducedMotion()`**.
-4. **Brand** — Motif thread + accent tokens in `:root`; favicon / OG echo **this** product narrative.
-
-Document deltas in `docs/research/PRODUCTION_UPLIFT.md`.
-
 ## Phase 5: Visual QA Diff
 
 After assembly, do NOT declare the clone complete. Take side-by-side comparison screenshots:
@@ -521,9 +453,6 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] For scroll-driven components: trigger threshold, before/after styles, and transition are recorded
 - [ ] For hover states: before/after values and transition timing are recorded
 - [ ] All images in the section are identified (including overlays and layered compositions)
-- [ ] Any `<video>` (and poster), Lottie, or canvas-driven hero is identified — not approximated as a static div
-- [ ] **Motion** subsection filled: tiers **A–E** coverage (see `AGENTS.md`), CSS vs **framer-motion**, durations, easings, stagger, scroll triggers, **reduced-motion** fallback
-- [ ] **Illustration** subsection filled when uplift applies: **Idea tie-in** + metaphor link per asset, SVG/pixel detail — or explicit **N/A** with justification only on strict clone parity jobs
 - [ ] Responsive behavior is documented for at least desktop and mobile
 - [ ] Text content is verbatim from the site, not paraphrased
 - [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split
@@ -540,25 +469,19 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't build everything in one monolithic commit.** The whole point of this pipeline is incremental progress with verified builds at each step.
 - **Don't reference docs from builder prompts.** Each builder gets the CSS spec inline in its prompt — never "see DESIGN_TOKENS.md for colors." The builder should have zero need to read external docs.
 - **Don't skip asset extraction.** Without real images, videos, and fonts, the clone will always look fake regardless of how perfect the CSS is.
-- **Don't defer image/video download to the end.** Run `MEDIA_MANIFEST.md` + `download-assets.mjs` during foundation so components reference real `public/` paths from the first build.
-- **Don't fake complex motion with a single CSS `transition` when the target uses staggered, scroll-scrubbed, or layout-driven animation** — use **`framer-motion`** (`motion`, `whileInView`, `variants`, `staggerChildren`) and match duration/easing from extraction.
 - **Don't give a builder agent too much scope.** If you're writing a builder prompt and it's getting long because the section is complex, that's a signal to break it into smaller tasks.
 - **Don't bundle unrelated sections into one agent.** A CTA section and a footer are different components with different designs — don't hand them both to one agent and hope for the best.
 - **Don't skip responsive extraction.** If you only inspect at desktop width, the clone will break at tablet and mobile. Test at 1440, 768, and 390 during extraction.
 - **Don't forget smooth scroll libraries.** Check for Lenis (`.lenis` class), Locomotive Scroll, or similar. Default browser scrolling feels noticeably different and the user will spot it immediately.
-- **Don't ship interchangeable marketing art.** Random objects, unrelated lifestyle stock, or generic gradients that could match any SaaS violate the **idea-tailored** rule in `AGENTS.md` — every major visual needs a metaphor from `launchframe.config.json#idea`.
 - **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
 
 ## Completion
 
 When done, report:
-- Source URL cloned (from `launchframe.config.json` or `$ARGUMENTS`)
-- SaaS idea applied (from `launchframe.config.json`) and the product name you chose
 - Total sections built
 - Total components created
 - Total spec files written (should match components)
-- Total assets downloaded (images, videos, SVGs, fonts) — path to `docs/research/MEDIA_MANIFEST.md`
-- Rebrand summary (path to `docs/research/REBRAND.md`)
+- Total assets downloaded (images, videos, SVGs, fonts)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
 - Any known gaps or limitations

package/.opencode/commands/launchframe.md

@@ -0,0 +1,45 @@
+---
+description: "Scaffold a Next.js app with npx launchframe@latest from a reference URL and SaaS idea"
+---
+<!-- AUTO-GENERATED from .claude/skills/launchframe/SKILL.md — do not edit directly.
+     Run `node scripts/sync-skills.mjs` to regenerate. -->
+
+
+# Launchframe
+
+You are helping the user scaffold a **new** project from **$ARGUMENTS**:
+
+- 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 **$ARGUMENTS** 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.