launchframe 0.2.3 → 0.2.5

package/template/.claude/skills/marketing-landing-production/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: marketing-landing-production
+description: Elevate an authored or minimalist marketing landing to production quality — layered SVG illustration, pixel-art accents, choreographed motion (Framer Motion tiers A–E), accent tokens, OG/favicon cohesion. Use when the user asks for prod polish, more motion, stronger branding, SVG scenes, or pixel art on `src/app/page.tsx` / `src/components/marketing/**`.
+argument-hint: "[optional paths or sections to prioritize]"
+user-invocable: true
+---
+
+# Marketing Landing — Production Polish
+
+You are upgrading a **marketing landing** so it feels shipped — not “fine for a demo.” Read **`AGENTS.md` → Production polish for marketing landings** first; this skill is the executable checklist.
+
+## When to run
+
+- Clone/rebrand finished but the page still reads **flat** (mostly black text on white + gray placeholders).
+- User explicitly wants **more images**, **motion**, **SVG / illustration**, **pixel art**, **brandability**, **production-ready**.
+- Feature cards use **off-topic filler art** — replace with scenes tied to copy.
+
+## Hard requirements
+
+1. **`framer-motion`** — staggered hero load (**tier A**), scroll reveals + nested staggers (**tier B**), at least **one** ambient loop (**tier C**: marquee, typing caret, SVG dash drift, gradient pulse — pick what fits brand).
+2. **Interaction polish (tier D)** — measurable hover/tap on primary surfaces (buttons, cards): subtle lift, shadow ramp, scale ≤ 1.02.
+3. **Decorative depth (tier E, optional)** — light pointer parallax **or** scroll-linked transforms; keep translation ≤ ~8px and rotation ≤ ~2deg.
+4. **`useReducedMotion()`** — disable or simplify looping motion and shorten entrances when the user prefers reduced motion.
+5. **SVG illustration layers** — dedicated React components (prefer `src/components/marketing/art/`); use **`currentColor`** where possible so theme tokens drive strokes/fills.
+6. **Pixel art** — if requested: declare palette (hex table in component comment), crisp scaling (`imageRendering: "pixelated"` for intentional upscale), consistent grid logic.
+7. **Brand spine** — motif repeats once in hero + once in a card or footer glyph cluster; define **accent CSS variables** if the page is only monochrome gray today.
+8. **Artifacts** — write **`docs/research/PRODUCTION_UPLIFT.md`**: bullets for SVG modules added, motion tiers shipped, accent tokens, OG/favicon edits.
+
+## Verification
+
+- `npm run build` passes.
+- Lighthouse/visual sanity: no layout shift explosions from animations; loops are subtle at default amplitude.
+
+## Out of scope unless asked
+
+Backend, CMS wiring, analytics, full accessibility audit beyond motion preferences.

package/template/.clinerules

@@ -38,6 +38,51 @@ Treat these as **first-class deliverables**, not polish at the end.
 
 1. **Raster & video** — Early in recon, inventory every `<img>`, `<picture>` / `<source>`, `<video>`, poster image, and meaningful `background-image` URL. Download into `public/` and reference **local paths** in specs and components. Hero bands and marketing sections often fail visually when a single layer is skipped.
 2. **Motion** — Match the target’s feel: easing, duration, stagger, scroll triggers. Prefer **`motion` from `framer-motion`** for entrance sequences, viewport-driven animations, shared-layout-style transitions, and anything beyond a one-off CSS transition. Note in each component spec whether behavior is **CSS-only** vs **Framer Motion**.
+3. **Illustration & brand marks** — Inline **SVG React components** (not only Lucide) for motifs that repeat across sections: logo glyph variants, dividers, grain/noise overlays, hero “scene” shapes, feature-card mini-compositions. Prefer **`currentColor`** + CSS variables so SVGs inherit theme tokens. For **pixel art**, keep a tight palette (4–8 fills), consistent pixel grid logic, and use `style={{ imageRendering: "pixelated" }}` on upscaled raster OR build pixel SVG paths intentionally — never blurry upscale.
+
+## Production polish for marketing landings *(imagery + motion density + brandability)*
+
+Use this whenever the page is **authored or minimalist** (internal templates, rebranded clones that still feel flat, or targets that are mostly typography). “Looks OK” is not ship-ready — **production landings** stack multiple visual layers, choreographed motion, and recognizable brand cues.
+
+### Imagery density (every fold earns a visual idea)
+
+- **Hero** — Never headline-only on white: add at least two of — soft gradient mesh / radial spotlight, subtle SVG grid or notebook lines, floating glyph cluster, ambient particle dots, masked photo or device frame with **real `public/` raster**, thin geometric frame that echoes the logo.
+- **Between sections** — Optional SVG waves, angled cuts, or dashed “tape” strips so rhythm feels intentional.
+- **Feature rows** — Replace generic placeholders (random shirts, blank boxes) with **purpose-built SVG scenes** tied to copy (capture → waveform + mic; workspace → windows + avatars; publish → export arrows + formats). Each card gets **foreground illustration + supporting UI chrome**, not one flat rectangle.
+- **Social proof** — Logo strip may use grayscale marks; add **slow infinite marquee** or gentle opacity drift — motion sells “living product.”
+
+### Motion choreography *(ship several layers; respect `prefers-reduced-motion`)*
+
+Default minimum bar for authored landings — implement with **`framer-motion`** unless matching CSS-only parity:
+
+| Tier | What users feel | Typical implementation |
+|------|-----------------|-------------------------|
+| **A — Page load** | Hero headline, subcopy, CTAs, and hero art **stagger in** (opacity + `y`, or blur-in for type) | Parent `variants` + `staggerChildren`; durations 0.35–0.7s, ease `[0.22, 1, 0.36, 1]` or springs |
+| **B — Scroll** | Sections **ease up / fade** on first viewport entry; grids **stagger cards** | `whileInView` + `viewport.once`; `margin: "-80px"` tweak so reveals feel early |
+| **C — Looping ambient** | Logo strip marquee; gradient drift; subtle SVG stroke dashoffset loop; “thinking…” **typing caret** | CSS `@keyframes` or Framer `animate` repeat; keep amplitude **low** |
+| **D — Interaction** | Buttons scale/shine on hover; cards **lift** (`translateY`, shadow); nav **backdrop blur / height** past threshold | `whileHover`, `whileTap`; scroll listener or Framer scroll hooks for nav |
+| **E — Decorative depth** | Pointer parallax on hero cluster (2–4 layers at different strengths) OR scroll-linked `useTransform` | Small rotate/translate ranges (≤ 8px / ≤ 2deg) |
+
+Always gate looping motion: **`useReducedMotion()`** from Framer Motion — swap loops for static frames and shorten entrances.
+
+### Brandability checklist *(distinctive, not generic SaaS gray)*
+
+- **Motif thread** — One recurring visual hook (pen stroke, folded page corner, hub spark, pixel creature) reused in hero, favicon, OG image sketch, and one feature illustration.
+- **Accent discipline** — Define **primary + secondary accent** in `:root` (even if mostly monochrome). Use accents on CTAs, SVG highlights, focus rings — not rainbow scatter.
+- **Wordmark lockup** — SVG glyph + tracked type; provide **icon-only** variant for favicon / meta.
+- **OG & SEO assets** — Generate **`public/seo/og.png`** (or route og image) that includes motif + product name — not a bare screenshot.
+
+### Where artifacts live
+
+- **Raster/video** — `public/images/`, `public/videos/` (see `MEDIA_MANIFEST.md`).
+- **SVG React illustrations** — Prefer `src/components/marketing/art/` or co-located `*-scene.tsx` modules; export named components (`HeroBackdrop`, `FeatureCaptureIllustration`).
+- **Pixel art** — Same folder pattern; document palette in file header comment.
+
+### Spec requirement *(hand-off quality)*
+
+When writing `docs/research/components/*.spec.md`, add sections **Illustration** (layers, SVG components, raster paths) and expand **Motion** with tier **A–E** coverage and reduced-motion fallback. Builders should not invent motion ad hoc — the spec states durations and triggers.
+
+Invoke **`marketing-landing-production`** (`.claude/skills/marketing-landing-production/SKILL.md`) when the user asks for **prod-ready polish**, **more motion**, **SVG/pixel art**, or **stronger branding** on an existing landing.
 
 ## Commands
 - `npm run dev` — Start dev server
@@ -45,6 +90,17 @@ Treat these as **first-class deliverables**, not polish at the end.
 - `npm run lint` — ESLint check
 - `npm run typecheck` — TypeScript check
 - `npm run check` — Run lint + typecheck + build
+- **`npm run recon`** — **Playwright** capture: full-page screenshots, `computed-snapshot.json`, `MEDIA_MANIFEST.md` (use when Browser MCP / Chrome DevTools MCP is broken or missing)
+- **`npm run recon:headed`** — Same as `recon` but **headed** Chromium (often better for WAF / “Just a moment…” pages)
+
+**Playwright browser binaries (once per machine):** `npx playwright install chromium`
+
+## When Browser MCP is down
+Prefer **Playwright** for repeatable extraction in-repo — do **not** rely on Chrome DevTools MCP alone.
+
+1. Run **`npm run recon`** (or **`npm run recon:headed`** if headless hits a challenge page).
+2. Read **`docs/research/computed-snapshot.json`**, **`docs/research/MEDIA_MANIFEST.md`**, and **`docs/research/EXTRACTION_LIMITATIONS.md`** before writing specs.
+3. Fill **`scripts/download-assets.mjs`** from `MEDIA_MANIFEST.md` and run it to populate `public/images/` and `public/videos/`.
 
 ## Code Style
 - TypeScript strict mode, no `any`
@@ -56,6 +112,7 @@ Treat these as **first-class deliverables**, not polish at the end.
 ## Design Principles
 - **Images & video fidelity** — prefer real downloaded assets; preserve aspect ratio, `object-fit`, layering, and poster frames. Rebrand pass may **swap** URLs for IP-safe alternates but must keep layout identical.
 - **Motion fidelity** — timing and easing matter as much as color; use Framer Motion when CSS alone cannot match staggered or scroll-driven behavior.
+- **Production landing density** — For authored/minimal pages, deliberately add **SVG illustration layers**, **pixel-art accents**, and **tiered motion (A–E)** per “Production polish” above; static monochrome layouts are incomplete unless the user explicitly wants extreme minimalism.
 - **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
 - **No personal aesthetic changes during emulation phase** — match 1:1 first, rebrand later
 - **Real content during extraction** — use actual text and assets from the target site so the clone scaffolds against real shapes
@@ -68,6 +125,7 @@ src/
   app/              # Next.js routes
   components/       # React components
     ui/             # shadcn/ui primitives
+    marketing/      # Landing sections + authored SVG scenes (`art/` recommended)
     icons.tsx       # Extracted SVG icons as React components
   lib/
     utils.ts        # cn() utility (shadcn)
@@ -88,113 +146,126 @@ scripts/            # Asset download scripts
 - 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.
+- After editing `.claude/skills/marketing-landing-production/SKILL.md`, update `.cursor/commands/marketing-landing-production.md` to match (Cursor command is maintained beside the Claude skill until sync-skills grows multi-skill support).
+
+# 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.
+
+### 3. Illustration, pixel art & brand motifs *(production landings)*
+
+When the reference page is **sparse** (mostly type + gray boxes) or after a **rebrand** the UI still reads generic, treat illustration as required inventory — not optional garnish.
+
+- [ ] **Inline SVG** — hero shapes, dividers, card mini-scenes; note `viewBox`, whether fills use **`currentColor`**, and which CSS variables apply
+- [ ] **Pixel art / sprite accents** — intentional palette (list hex fills), grid size, scaling strategy (`imageRendering`), animation frames if any
+- [ ] **Motif thread** — recurring stroke/icon creature/grid that should echo across hero, OG sketch, favicon
+- [ ] **Accent tokens** — beyond monochrome: primary/secondary accent roles for SVG strokes, CTAs, focus (extract or **define** in `:root` for authored pages)
+- [ ] **Motion tiers A–E** — page-load stagger, scroll reveals + staggerChildren, looping ambient (marquee/caret), hover lifts, decorative parallax — document each with **reduced-motion** fallback (`prefers-reduced-motion`)
+
+See **`AGENTS.md` → Production polish for marketing landings** for tier definitions and folder conventions (`src/components/marketing/art/`).
+
+---
+
+## 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
 
-# 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)
+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/.codex/skills/clone-website/SKILL.md

@@ -39,7 +39,7 @@ If the user provides additional instructions (specific fidelity level, deeper cu
 ## 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 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. **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 writes `docs/research/computed-snapshot.json`, `docs/research/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>/`.
@@ -53,7 +53,9 @@ These are the truths that separate a successful clone from a "close enough" mess
 
 **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.
 
-**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`) 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, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
+**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.
+
+**Illustration & pixel art are production inputs.** Where the target (or post-rebrand layout) lacks convincing visuals, specs MUST still allocate **SVG illustration layers** — hero backdrop cluster, section separators, feature-card scenes tied to copy — using React SVG components (`currentColor` + theme vars). Pixel-art motifs require an explicit palette table in the spec. Do not ship ambiguous gray placeholders when `AGENTS.md` calls for production density on authored landings.
 
 ### 1. Completeness Beats Speed
 
@@ -367,10 +369,17 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **<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)*
+- **SVG components:** <named exports, paths using currentColor vs fixed fills>
+- **Pixel motif:** <palette hex table, grid, scaling — or N/A>
+- **Motif thread:** <how illustration echoes logo / OG / favicon>
+
 ## Per-State Content (if applicable)
 
 ### State: "Featured"
@@ -466,6 +475,26 @@ What you must NOT change in this pass:
 
 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 / user asks for prod polish)*
+
+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 motion**, **SVG / illustration**, **pixel art**, **brandability**, or **production-ready** marketing polish.
+- Visual QA feels “correct but dead” — layout matches but nothing moves and cards use unrelated placeholders.
+
+**Do not contradict pixel-perfect emulation when cloning a rich reference** — this phase *adds* density only where the brief allows uplift or the reference was inherently flat.
+
+Checklist (mirror `AGENTS.md`):
+
+1. **Imagery** — Add layered hero treatment + purposeful SVG scenes per feature (swap nonsense placeholders). Prefer named components under `src/components/marketing/art/`.
+2. **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()`**.
+3. **Brand** — Establish motif thread + accent tokens in `:root`; refresh favicon / OG sketch to match.
+
+Document deltas in `docs/research/PRODUCTION_UPLIFT.md` (what SVGs/motion/accent decisions shipped).
+
+Invoke `.claude/skills/marketing-landing-production/SKILL.md` as a focused playbook for this pass.
+
 ## Phase 5: Visual QA Diff
 
 After assembly, do NOT declare the clone complete. Take side-by-side comparison screenshots:
@@ -494,7 +523,8 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] 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: CSS vs **framer-motion**, durations, easings, stagger, scroll triggers
+- [ ] **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: SVG components / palette / motif thread — 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

package/template/.continue/commands/clone-website.md

@@ -41,7 +41,7 @@ If the user provides additional instructions (specific fidelity level, deeper cu
 ## 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 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. **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 writes `docs/research/computed-snapshot.json`, `docs/research/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>/`.
@@ -55,7 +55,9 @@ These are the truths that separate a successful clone from a "close enough" mess
 
 **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.
 
-**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`) 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, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
+**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.
+
+**Illustration & pixel art are production inputs.** Where the target (or post-rebrand layout) lacks convincing visuals, specs MUST still allocate **SVG illustration layers** — hero backdrop cluster, section separators, feature-card scenes tied to copy — using React SVG components (`currentColor` + theme vars). Pixel-art motifs require an explicit palette table in the spec. Do not ship ambiguous gray placeholders when `AGENTS.md` calls for production density on authored landings.
 
 ### 1. Completeness Beats Speed
 
@@ -369,10 +371,17 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **<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)*
+- **SVG components:** <named exports, paths using currentColor vs fixed fills>
+- **Pixel motif:** <palette hex table, grid, scaling — or N/A>
+- **Motif thread:** <how illustration echoes logo / OG / favicon>
+
 ## Per-State Content (if applicable)
 
 ### State: "Featured"
@@ -468,6 +477,26 @@ What you must NOT change in this pass:
 
 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 / user asks for prod polish)*
+
+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 motion**, **SVG / illustration**, **pixel art**, **brandability**, or **production-ready** marketing polish.
+- Visual QA feels “correct but dead” — layout matches but nothing moves and cards use unrelated placeholders.
+
+**Do not contradict pixel-perfect emulation when cloning a rich reference** — this phase *adds* density only where the brief allows uplift or the reference was inherently flat.
+
+Checklist (mirror `AGENTS.md`):
+
+1. **Imagery** — Add layered hero treatment + purposeful SVG scenes per feature (swap nonsense placeholders). Prefer named components under `src/components/marketing/art/`.
+2. **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()`**.
+3. **Brand** — Establish motif thread + accent tokens in `:root`; refresh favicon / OG sketch to match.
+
+Document deltas in `docs/research/PRODUCTION_UPLIFT.md` (what SVGs/motion/accent decisions shipped).
+
+Invoke `.claude/skills/marketing-landing-production/SKILL.md` as a focused playbook for this pass.
+
 ## Phase 5: Visual QA Diff
 
 After assembly, do NOT declare the clone complete. Take side-by-side comparison screenshots:
@@ -496,7 +525,8 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] 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: CSS vs **framer-motion**, durations, easings, stagger, scroll triggers
+- [ ] **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: SVG components / palette / motif thread — 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