launchframe 0.2.1 → 0.2.3

package/template/README.md

@@ -6,38 +6,26 @@ This project was scaffolded by **[Launchframe](https://github.com/evangruhlkey/l
 npx launchframe@latest <url> "<saas idea>"
 ```
 
-It bundles the [`ai-website-cloner-template`](https://github.com/JCodesMore/ai-website-cloner-template) workflow with one extra ingredient: a `launchframe.config.json` that tells your AI agent which URL to clone visually and which SaaS idea to re-skin it for.
+Dependencies were installed for you. Files were written to **this directory** (project root) so **`.cursor`**, **`.claude`**, etc. work when you open this folder in your editor. Config lives in **`launchframe.config.json`** (`url` + SaaS `idea`).
 
 ---
 
-## Quick Start
-
-1. **Install dependencies**
-   ```bash
-   npm install
-   ```
-2. **Confirm the config** in [`launchframe.config.json`](./launchframe.config.json):
-   ```json
-   {
-     "url": "https://linear.app",
-     "idea": "AI-powered customer feedback platform"
-   }
-   ```
-   Edit either field any time — the skill re-reads it every run.
-3. **Open the project in your AI coding agent** — [Claude Code](https://docs.anthropic.com/en/docs/claude-code) with Opus 4.7 is recommended (`claude --chrome`), but [Cursor](https://cursor.com/), [Codex CLI](https://github.com/openai/codex), [Gemini CLI](https://github.com/google-gemini/gemini-cli), [Copilot](https://github.com/features/copilot), [Windsurf](https://codeium.com/windsurf), [Cline](https://github.com/cline/cline), [Continue](https://continue.dev/), [Amazon Q](https://aws.amazon.com/q/developer/), [Augment](https://www.augmentcode.com/), and [Aider](https://aider.chat/) all work.
-4. **Run the skill:**
-   ```
-   /clone-website
-   ```
-   It reads `launchframe.config.json` automatically — no need to pass the URL again.
+## Quick start (two steps)
+
+1. **Open this folder** in [Cursor](https://cursor.com/) — the directory that **contains** `.cursor/` (not a parent folder).
+2. In chat, say: **Build it.**
+
+Your AI reads [`launchframe.config.json`](./launchframe.config.json) and [`AGENTS.md`](./AGENTS.md) and runs the full clone + rebrand pipeline (same as **`/clone-website`**).
+
+Rather read a postcard? See [`START_HERE.md`](./START_HERE.md).
 
 ## What `/clone-website` does
 
 A multi-phase pipeline runs inside your AI agent:
 
-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
+1. **Reconnaissance** — screenshots, design-token extraction, **image/video inventory** (`MEDIA_MANIFEST.md`), interaction sweep (scroll, click, hover, responsive)
+2. **Foundation** — fonts, globals, **`framer-motion`**, **download images & videos** to `public/` before most UI build
+3. **Component Specs** — writes detailed spec files (`docs/research/components/`) with exact CSS, **local media paths**, and **Motion** (CSS vs Framer)
 4. **Parallel Build** — dispatches builder agents in git worktrees, one per section
 5. **SaaS Rebrand Pass** — swaps product name, headlines, feature copy, CTAs, and brand marks to match `launchframe.config.json#idea`. Visuals stay 1:1.
 6. **Assembly & Visual QA** — merges worktrees, wires up the page, runs visual diff against the original
@@ -67,7 +55,9 @@ Each builder agent receives the full component spec inline — exact `getCompute
 - **Next.js 16** — App Router, React 19, TypeScript strict
 - **shadcn/ui** — Radix primitives + Tailwind CSS v4
 - **Tailwind CSS v4** — oklch design tokens
+- **Framer Motion** — default for non-trivial marketing animation (scroll reveals, staggers, layout); see `AGENTS.md`
 - **Lucide React** — default icons (replaced by extracted SVGs during cloning)
+- **Media** — targets download to `public/images/` & `public/videos/` per `docs/research/MEDIA_MANIFEST.md` (see `INSPECTION_GUIDE.md`)
 
 ## Prerequisites
 
@@ -97,6 +87,7 @@ scripts/
   sync-skills.mjs      # Regenerate /clone-website for all platforms
 launchframe.config.json  # ← URL + SaaS idea (single source of truth)
 AGENTS.md           # Agent instructions (single source of truth)
+START_HERE.md       # "Open Cursor → say Build it"
 CLAUDE.md           # Claude Code config (imports AGENTS.md)
 GEMINI.md           # Gemini CLI config (imports AGENTS.md)
 ```

package/template/START_HERE.md

@@ -0,0 +1,15 @@
+# Start here
+
+Launchframe wrote files into **this folder** (your project root), including **`.cursor`** and **`.claude`**, so they work when you open this directory in your editor.
+
+## Do this next
+
+1. **Open this folder** in [Cursor](https://cursor.com/) (the root that contains `.cursor` — not a parent directory).
+2. In chat, say: **Build it.**
+
+That tells your AI to read `launchframe.config.json` and `AGENTS.md` and run the full **clone + SaaS rebrand** pipeline (same work as `/clone-website`).
+
+## Optional
+
+- Prefer a slash command? Use **`/clone-website`** in Cursor.
+- Wrong URL or idea? Edit **`launchframe.config.json`**, then say **Build it** again.

package/template/docs/research/INSPECTION_GUIDE.md

@@ -1,5 +1,30 @@
 # Website Inspection Guide
 
+## Priority (read first): media & motion
+
+Launchframe clones live pages for a **visual** result. Two things most often separate a convincing build from a hollow one:
+
+### 1. Images & video (do this before obsessing over utility classes)
+
+- [ ] **Every `<img>`** — `src` / `srcset` / `currentSrc`, `sizes`, `loading`, `decoding`, `alt`, intrinsic dimensions
+- [ ] **`<picture>` / `<source>`** — resolution switches, art direction, `type` (WebP/AVIF)
+- [ ] **Every `<video>`** — `src` + nested `<source>`, **poster**, `autoplay`, `loop`, `muted`, `playsinline`, `controls`
+- [ ] **Background images** — `background-image` on ancestors (hero stacks are often **layers** of img + gradient + PNG mockup)
+- [ ] **Lazy / below-fold** — scroll the page once before asset discovery so `data-src` / lazy-loaded URLs resolve if the site uses them
+- [ ] **Download** — mirror into `public/images/` and `public/videos/` with stable paths; list failures in `docs/research/EXTRACTION_LIMITATIONS.md`
+
+If automation hits a bot wall, **do not pretend extraction succeeded** — capture what you can from successful fetches and document gaps.
+
+### 2. Motion (prefer Framer Motion in this repo)
+
+- [ ] **Entrance** — fade/slide/scale on mount or on **scroll into view** (note threshold / `margin`)
+- [ ] **Stagger** — children animating in sequence (hero bullets, card grids)
+- [ ] **Scroll-linked** — progress, parallax, pinned sections (may combine with CSS `animation-timeline` or libs)
+- [ ] **Gestures** — drag, pan, hover follow (often Framer Motion)
+- [ ] **Implementation rule** — use **`framer-motion`** for anything beyond trivial single-property CSS `transition`. Record **duration, easing, delay, stagger**, and **trigger** (scroll, hover, tap) in specs.
+
+---
+
 ## How to Reverse-Engineer Any Website
 
 This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
@@ -14,6 +39,8 @@ This guide outlines what to capture when inspecting a target website via Chrome
 - [ ] Loading/skeleton states
 - [ ] Empty states
 - [ ] Error states
+- [ ] **Video frames** — capture a frame mid-play for reference if motion is subtle
+- [ ] **Hero / full-bleed** — wide crops where raster layers are easy to miss
 
 ### Design Tokens to Extract
 - [ ] **Colors** — background, text (primary/secondary/muted), accent, border, hover, error, success, warning
@@ -36,7 +63,7 @@ For each distinct UI component, document:
 4. **States** — default, hover, active, disabled, loading, error, empty
 5. **Responsive behavior** — how does it change at different breakpoints?
 6. **Interactions** — click, hover, focus, keyboard navigation
-7. **Animations** — transitions, entrance/exit animations, micro-interactions
+7. **Animations** — transitions, entrance/exit, micro-interactions — **`framer-motion` vs CSS** and exact timing
 
 ### Common Components to Look For
 - Navigation (top bar, sidebar, bottom bar)
@@ -50,6 +77,7 @@ For each distinct UI component, document:
 - Loading skeletons
 - Toast notifications
 - Tooltips and popovers
+- **Video / Lottie / canvas** blocks (do not substitute with static mockups without documenting why)
 
 ## Phase 3: Layout Architecture
 
@@ -67,14 +95,15 @@ For each distinct UI component, document:
 - [ ] **State management** — Redux (check DevTools), React Query, Zustand, Pinia
 - [ ] **API patterns** — REST, GraphQL (check network tab for `/graphql` requests)
 - [ ] **Font loading** — Google Fonts, self-hosted, system fonts
-- [ ] **Image strategy** — CDN, lazy loading, srcset, WebP/AVIF
-- [ ] **Animation library** — Framer Motion, GSAP, CSS transitions only
+- [ ] **Image strategy** — CDN, lazy loading, srcset, WebP/AVIF — **mirror URLs you are allowed to fetch**
+- [ ] **Animation library** — site may use GSAP, Lottie, Rive, or CSS only — **in the Next.js clone, default to Framer Motion** unless a different lib is required for parity
 
 ## Phase 5: Documentation Output
 
 After inspection, create these files in `docs/research/`:
 1. `DESIGN_TOKENS.md` — All extracted colors, typography, spacing
 2. `COMPONENT_INVENTORY.md` — Every component with structure notes
-3. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
-4. `INTERACTION_PATTERNS.md` — Animations, transitions, hover states
-5. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents
+3. **`MEDIA_MANIFEST.md`** — (recommended) Table of every image/video/poster URL → local `public/` path or “blocked”
+4. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
+5. `INTERACTION_PATTERNS.md` — Animations: **CSS vs Framer Motion**, transitions, hover states
+6. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents (Framer Motion for React animation)

package/template/package.json

@@ -38,6 +38,7 @@
     "@base-ui/react": "^1.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.4.0",
     "lucide-react": "^1.6.0",
     "next": "16.2.1",
     "react": "19.2.4",