launchframe 0.2.4 → 0.2.5

package/template/.codex/skills/clone-website/SKILL.md

@@ -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

@@ -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

package/template/.continue/rules/project.md

@@ -42,6 +42,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
@@ -71,6 +116,7 @@ Prefer **Playwright** for repeatable extraction in-repo — do **not** rely on C
 ## 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
@@ -83,6 +129,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)
@@ -103,6 +150,7 @@ 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
 
@@ -129,6 +177,18 @@ If automation hits a bot wall, **do not pretend extraction succeeded** — captu
 - [ ] **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

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

@@ -50,7 +50,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
 
@@ -364,10 +366,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"
@@ -463,6 +472,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:
@@ -491,7 +520,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/.cursor/commands/marketing-landing-production.md

@@ -0,0 +1,31 @@
+<!-- Mirrors .claude/skills/marketing-landing-production/SKILL.md — edit skill first, then sync this body if drift occurs. -->
+
+# 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; treat this command as 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/.cursor/rules/project.mdc

@@ -13,7 +13,10 @@ When the user says **Build it**, **Go**, **Ship it**, **Clone the site**, **Run
 2. Execute the **full** workflow described in `AGENTS.md` and in `.cursor/commands/clone-website.md` (recon → foundation → component specs → build → SaaS rebrand pass → assembly → QA).
 3. Continue until `npm run build` passes unless the user stops you.
 
-Do **not** ask the user to re-type the URL or idea unless the config is missing or broken. Optional: use **`/clone-website`** as the explicit slash-command alias.
+Do **not** ask the user to re-type the URL or idea unless the config is missing or broken. Optional slash commands:
+
+- **`/clone-website`** — full recon → clone → rebrand pipeline (`launchframe.config.json`).
+- **`/marketing-landing-production`** — production polish pass: SVG illustration density, pixel-art accents, choreographed motion tiers A–E, accent tokens, OG/favicon cohesion (see `AGENTS.md`).
 
 ## Browser automation
 

package/template/.gemini/commands/clone-website.toml

@@ -54,7 +54,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
 
@@ -368,10 +370,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"
@@ -467,6 +476,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:
@@ -495,7 +524,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/.github/copilot-instructions.md

@@ -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
@@ -67,6 +112,7 @@ Prefer **Playwright** for repeatable extraction in-repo — do **not** rely on C
 ## 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
@@ -79,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)
@@ -99,6 +146,7 @@ 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
 
@@ -125,6 +173,18 @@ If automation hits a bot wall, **do not pretend extraction succeeded** — captu
 - [ ] **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

package/template/.github/skills/clone-website/SKILL.md

@@ -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