launchframe 0.2.3 → 0.2.4

package/template/README.md

@@ -1,120 +1,121 @@
-# Launchframe Project
-
-This project was scaffolded by **[Launchframe](https://github.com/evangruhlkey/launchframe)** — an AI-powered website cloner + SaaS rebrander.
-
-```bash
-npx launchframe@latest <url> "<saas idea>"
-```
-
-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 (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, **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
-
-Each builder agent receives the full component spec inline — exact `getComputedStyle()` values, interaction models, multi-state content, responsive breakpoints, asset paths. No guessing.
-
-## Supported AI Agents
-
-| 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                  |
-
-## Tech Stack
-
-- **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
-
-- [Node.js](https://nodejs.org/) 24+
-- An AI coding agent with browser automation MCP (Chrome MCP, Playwright MCP, Browserbase MCP, etc.)
-
-## 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, REBRAND.md
-  design-references/ # Screenshots
-scripts/
-  sync-agent-rules.sh  # Regenerate agent instruction files
-  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)
-```
-
-## 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
-```
-
-## Use Cases
-
-- **Launch a SaaS faster** — start from a proven landing page, not a blank canvas
-- **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; get the code back in a modern format
-- **Learning** — deconstruct how production sites achieve specific layouts, animations, and responsive behavior
-
-## 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 prohibit scraping or reproduction. Check first
-
-## License
-
-MIT
+# Launchframe Project
+
+This project was scaffolded by **[Launchframe](https://github.com/evangruhlkey/launchframe)** — an AI-powered website cloner + SaaS rebrander.
+
+```bash
+npx launchframe@latest <url> "<saas idea>"
+```
+
+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 (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, **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
+
+Each builder agent receives the full component spec inline — exact `getComputedStyle()` values, interaction models, multi-state content, responsive breakpoints, asset paths. No guessing.
+
+## Supported AI Agents
+
+| 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                  |
+
+## Tech Stack
+
+- **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
+
+- [Node.js](https://nodejs.org/) 24+
+- An AI coding agent with browser automation MCP **or** [Playwright](https://playwright.dev/) for `npm run recon` when MCP is unavailable
+- **First-time Playwright browsers:** after `npm install`, run `npx playwright install chromium`
+
+## 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, REBRAND.md
+  design-references/ # Screenshots
+scripts/
+  sync-agent-rules.sh  # Regenerate agent instruction files
+  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)
+```
+
+## 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
+```
+
+## Use Cases
+
+- **Launch a SaaS faster** — start from a proven landing page, not a blank canvas
+- **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; get the code back in a modern format
+- **Learning** — deconstruct how production sites achieve specific layouts, animations, and responsive behavior
+
+## 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 prohibit scraping or reproduction. Check first
+
+## License
+
+MIT

package/template/START_HERE.md

@@ -1,15 +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.
+# 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,109 +1,109 @@
-# 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.
-
-## Phase 1: Visual Audit
-
-### Screenshots to Capture
-- [ ] Every distinct page — desktop, tablet, mobile
-- [ ] Dark mode variants (if applicable)
-- [ ] Light mode variants (if applicable)
-- [ ] Key interaction states (hover, active, open menus, modals)
-- [ ] 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
-- [ ] **Typography** — font family, sizes (h1-h6, body, caption, label), weights, line heights, letter spacing
-- [ ] **Spacing** — padding/margin patterns (look for a scale: 4px, 8px, 12px, 16px, 24px, 32px, etc.)
-- [ ] **Border radius** — buttons, cards, avatars, inputs
-- [ ] **Shadows/elevation** — card shadows, dropdown shadows, modal overlay
-- [ ] **Breakpoints** — when does the layout shift? (inspect with DevTools responsive mode)
-- [ ] **Icons** — which icon library? custom SVGs? sizes?
-- [ ] **Avatars** — sizes, shapes, fallback behavior
-- [ ] **Buttons** — all variants (primary, secondary, ghost, icon-only, danger)
-- [ ] **Inputs** — text fields, textareas, selects, checkboxes, toggles
-
-## Phase 2: Component Inventory
-
-For each distinct UI component, document:
-1. **Name** — what would you call this component?
-2. **Structure** — what HTML elements / child components does it contain?
-3. **Variants** — does it have different sizes, colors, or states?
-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, micro-interactions — **`framer-motion` vs CSS** and exact timing
-
-### Common Components to Look For
-- Navigation (top bar, sidebar, bottom bar)
-- Cards / list items
-- Buttons and links
-- Forms and inputs
-- Modals and dialogs
-- Dropdowns and menus
-- Tabs and segmented controls
-- Avatars and user badges
-- Loading skeletons
-- Toast notifications
-- Tooltips and popovers
-- **Video / Lottie / canvas** blocks (do not substitute with static mockups without documenting why)
-
-## Phase 3: Layout Architecture
-
-- [ ] **Grid system** — CSS Grid? Flexbox? Fixed widths?
-- [ ] **Column layout** — how many columns at each breakpoint?
-- [ ] **Max-width** — main content area max-width
-- [ ] **Sticky elements** — header, sidebar, floating buttons
-- [ ] **Z-index layers** — navigation, modals, tooltips, overlays
-- [ ] **Scroll behavior** — infinite scroll, pagination, virtual scrolling
-
-## Phase 4: Technical Stack Analysis
-
-- [ ] **Framework** — React? Vue? Angular? Check `__NEXT_DATA__`, `__NUXT__`, `ng-version`
-- [ ] **CSS approach** — Tailwind (utility classes), CSS Modules, Styled Components, Emotion, vanilla CSS
-- [ ] **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 — **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. **`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)
+# 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.
+
+## Phase 1: Visual Audit
+
+### Screenshots to Capture
+- [ ] Every distinct page — desktop, tablet, mobile
+- [ ] Dark mode variants (if applicable)
+- [ ] Light mode variants (if applicable)
+- [ ] Key interaction states (hover, active, open menus, modals)
+- [ ] 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
+- [ ] **Typography** — font family, sizes (h1-h6, body, caption, label), weights, line heights, letter spacing
+- [ ] **Spacing** — padding/margin patterns (look for a scale: 4px, 8px, 12px, 16px, 24px, 32px, etc.)
+- [ ] **Border radius** — buttons, cards, avatars, inputs
+- [ ] **Shadows/elevation** — card shadows, dropdown shadows, modal overlay
+- [ ] **Breakpoints** — when does the layout shift? (inspect with DevTools responsive mode)
+- [ ] **Icons** — which icon library? custom SVGs? sizes?
+- [ ] **Avatars** — sizes, shapes, fallback behavior
+- [ ] **Buttons** — all variants (primary, secondary, ghost, icon-only, danger)
+- [ ] **Inputs** — text fields, textareas, selects, checkboxes, toggles
+
+## Phase 2: Component Inventory
+
+For each distinct UI component, document:
+1. **Name** — what would you call this component?
+2. **Structure** — what HTML elements / child components does it contain?
+3. **Variants** — does it have different sizes, colors, or states?
+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, micro-interactions — **`framer-motion` vs CSS** and exact timing
+
+### Common Components to Look For
+- Navigation (top bar, sidebar, bottom bar)
+- Cards / list items
+- Buttons and links
+- Forms and inputs
+- Modals and dialogs
+- Dropdowns and menus
+- Tabs and segmented controls
+- Avatars and user badges
+- Loading skeletons
+- Toast notifications
+- Tooltips and popovers
+- **Video / Lottie / canvas** blocks (do not substitute with static mockups without documenting why)
+
+## Phase 3: Layout Architecture
+
+- [ ] **Grid system** — CSS Grid? Flexbox? Fixed widths?
+- [ ] **Column layout** — how many columns at each breakpoint?
+- [ ] **Max-width** — main content area max-width
+- [ ] **Sticky elements** — header, sidebar, floating buttons
+- [ ] **Z-index layers** — navigation, modals, tooltips, overlays
+- [ ] **Scroll behavior** — infinite scroll, pagination, virtual scrolling
+
+## Phase 4: Technical Stack Analysis
+
+- [ ] **Framework** — React? Vue? Angular? Check `__NEXT_DATA__`, `__NUXT__`, `ng-version`
+- [ ] **CSS approach** — Tailwind (utility classes), CSS Modules, Styled Components, Emotion, vanilla CSS
+- [ ] **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 — **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. **`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

@@ -1,60 +1,63 @@
-{
-  "name": "ai-website-clone-template",
-  "version": "0.3.1",
-  "private": true,
-  "description": "Clone any website into a clean, modern Next.js codebase using AI coding agents",
-  "author": "JCodesMore",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/JCodesMore/ai-website-cloner-template.git"
-  },
-  "homepage": "https://github.com/JCodesMore/ai-website-cloner-template",
-  "bugs": {
-    "url": "https://github.com/JCodesMore/ai-website-cloner-template/issues"
-  },
-  "keywords": [
-    "claude-code",
-    "website-clone",
-    "reverse-engineering",
-    "nextjs",
-    "ai",
-    "template",
-    "tailwindcss",
-    "shadcn-ui"
-  ],
-  "engines": {
-    "node": ">=24"
-  },
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint",
-    "typecheck": "tsc --noEmit",
-    "check": "npm run lint && npm run typecheck && npm run build"
-  },
-  "dependencies": {
-    "@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",
-    "react-dom": "19.2.4",
-    "shadcn": "^4.1.0",
-    "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.1",
-    "tailwindcss": "^4",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "ai-website-clone-template",
+  "version": "0.3.1",
+  "private": true,
+  "description": "Clone any website into a clean, modern Next.js codebase using AI coding agents",
+  "author": "JCodesMore",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JCodesMore/ai-website-cloner-template.git"
+  },
+  "homepage": "https://github.com/JCodesMore/ai-website-cloner-template",
+  "bugs": {
+    "url": "https://github.com/JCodesMore/ai-website-cloner-template/issues"
+  },
+  "keywords": [
+    "claude-code",
+    "website-clone",
+    "reverse-engineering",
+    "nextjs",
+    "ai",
+    "template",
+    "tailwindcss",
+    "shadcn-ui"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit",
+    "check": "npm run lint && npm run typecheck && npm run build",
+    "recon": "node scripts/recon-playwright.mjs",
+    "recon:headed": "node scripts/recon-playwright.mjs --headed"
+  },
+  "dependencies": {
+    "@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",
+    "react-dom": "19.2.4",
+    "shadcn": "^4.1.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.1",
+    "playwright": "^1.49.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}