launchframe 0.4.8 → 0.4.10

package/.continue/commands/launchframe.md

@@ -14,7 +14,7 @@ invokable: true
 1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
 2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
 
-You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit raster slots **and extracted SVG/icons** / DOM / CSS / **motion choreography**, merge their findings, then QA. Not a shallow inspect-then-guess flow.
+You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible. After Phase 5, **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** defines the **verbatim prompts** you must use to run verification (either four parallel **`Task`/subagents** fed one prompt each — **paste from that file only**, not from memory — or execute those four prompts **yourself sequentially**). Aggregate results only in **`docs/research/LAUNCHFRAME_VERIFICATION.md`**. **Never skip Phase 6** because subagents didn't auto-start — you initiate them explicitly from the Markdown prompt blocks. Narrative/marketing raster slots use **imagery your session generates itself** with the host’s **image-generation** tool (saved into `public/images/`), not missing assets — see **Brand identity**. Verification still covers raster slots, extracted **SVG/icons**, DOM, CSS, and **motion choreography**.
 
 ## Step 0 — Persist Launchframe inputs
 
@@ -23,6 +23,7 @@ Before reconnaissance, write or update:
 - `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`
 - `launchframe.context.json`
 - `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
+- **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** — **before Phase 6**, ensure this runbook holds all four verifier prompts (**copy-ready**). When the bundled template differs from the latest SKILL rubrics (after skill edits), re-sync Section **Phase 6** rubrics **into this file**. Subagents receive prompts **only** from here.
 
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
@@ -38,7 +39,7 @@ The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's
 - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
 - **Customization:** Structure and visuals — pure emulation of the reference. **Marketing copy** — apply the parsed **SaaS idea** where hero/headlines/CTAs are interchangeable (see “SaaS copy overlay” above); do not invent a different product than the user’s idea.
-- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
+- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. **Mandatory delivery:** those slots **must** have real raster files checked into `public/images/` (or another committed static path your build serves) — **no** omitted `<img>`/`<Image>`, **no** indefinite placeholder divs/colors standing in for a photo where the reference showed one, **no** broken `href/src`. **You generate these files yourself:** use your host's **built-in image generation** capability (explicit image prompts aligned to the SaaS idea + composition brief from each reference slot), write outputs into `public/images/`, wire them into JSX, and note each file in `docs/research/LAUNCHFRAME.md`. You may **supplement** with composites or screenshots of **your** product UI mocks you build in code, but you **do not** wait for the user to supply artwork. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction, and **list paths** for every authored narrative image.
 - **Functional icons & motion choreography:** Anything the reference treats as **UI iconography that is not a forbidden trademark** (chevrons, menu marks, inline pictograms, sprite symbols, repeating UI glyphs) — **lift path data / sprite refs / mask SVGs from the DOM** and reproduce **`viewBox`, stroke widths, joins, fills, `currentColor` behavior.** Do **not** swap in unrelated Lucide (or arbitrary stock SVG) guesses "that look close." **`@keyframes`**, **`transition` / `animation` longhands**, scroll-driven timelines, carousel timings, stagger delays, easing curves — **lift from live measurement + stylesheet text** per §0.3 — **omit or substitute timing only** when respecting `prefers-reduced-motion` or when the measured reference does the same. Product-themed raster replacements do **not** waive SVG or animation parity.
 
 If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
@@ -547,25 +548,35 @@ After assembly, do NOT declare the clone complete. Take side-by-side comparison
 5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
 6. **Motion QA:** Re-run the **motion audit script** (or per-element `getAnimations`) on the reference and spot-check the clone in devtools — **durations, delays, and easing curves must match** (e.g. 320ms vs 300ms is a failure). Re-scroll hero and sticky headers; carousels and scroll-driven sections must trigger at the same thresholds documented in `BEHAVIORS.md`
 
-Only after this visual QA pass is the clone ready for **subagent verification**.
+Only after this visual QA pass is the clone ready for **Phase 6 verification**. Immediately **confirm `docs/research/LAUNCHFRAME_SUBAGENTS.md`** contains four self-contained **`## Prompt — Pass N`** sections matching the Phase 6 rubrics; update that file whenever you change rubric wording locally.
 
-## Phase 6: Subagent verification pass (mandatory)
+## Phase 6: Verification passes (mandatory)
 
-Foreman self-review is insufficient — **dispatch independent checker agents** (subagents) after Phase 5 to audit the whole surface. Prefer **parallel** runs with **narrow rubrics**. When using multi-agent setups, follow **`AGENTS.md`**: give each subagent its **own git worktree/branch**, then merge after all reports are triaged.
+Foreman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.
 
-**Minimum four verification passes** (one subagent each, or one agent run sequentially if the host limits parallelism):
+### How to run them (hosts differ)
 
-1. **Raster media & icons** — List every image/video poster and **every authored SVG/component used as an icon** referenced from `src/` (components, `app/`). Confirm **files exist** under `public/` with **correct paths** where expected; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. For SVGs/icons: **`viewBox`**, strokes/fills/`currentColor`, and sprite usage must match specs — reject opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+| Host capability | What you must do |
+|-----------------|------------------|
+| **Parallel agents / Task / subagents** | Open **`docs/research/LAUNCHFRAME_SUBAGENTS.md`**. Dispatch **four** separate runs — each agent receives **exactly one** complete `## Prompt — Pass …` section copied **verbatim from that Markdown file**. Prefer **`explore`/readonly**. Do **not** paraphrase the rubric from chat memory. Claude Code-style teams: follow **`AGENTS.md`** — isolated **worktrees/branches per checker**, then merge after triage. |
+| **Single agent / no spawning** | Open the same Markdown file and **execute prompts 1 → 4 yourself** in order, appending **`docs/research/LAUNCHFRAME_VERIFICATION.md`** after each (`### Pass N`, findings, **`VERDICT: PASS`** or **`FAIL`**) per that file's **Output contract**. |
+
+**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.
+
+**Minimum four verification passes** (four subagents **or** four self-executed steps — prompts sourced from **`LAUNCHFRAME_SUBAGENTS.md`;** the authoritative rubric text below must stay mirrored there):
+
+1. **Raster media & icons** — **Narrative slots:** inventory every reference marketing/lifestyle/card/hero image role from specs vs **committed files** (`public/images/...`) actually referenced in JSX; **`FAIL`** if the reference showed a photo/panel thumbnail and this clone relies on placeholders or bare gradients. Then list every raster/video poster and **every authored SVG/component used as an icon** from `src/`. Confirm **files exist** under `public/` with **correct paths** where expected; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. For SVGs/icons: **`viewBox`**, strokes/fills/`currentColor`, and sprite usage must match specs — reject opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
 2. **HTML / DOM structure** — Diff **PAGE_TOPOLOGY.md** + component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll must be **FAIL** until fixed.
 3. **CSS parity** — Spot-check **hero, nav, first fold, footer** (and any section flagged risky) against spec CSS: tokens in **`globals.css`**, arbitrary Tailwind vs measured px, **keyframes** presence. Run **`npm run lint`** and **`npm run typecheck`** inside the verification worktree; failures = **FAIL** until green.
 4. **Motion & interaction** — Re-walk **`docs/research/BEHAVIORS.md`** and motion audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Phase 5 motion QA must be **confirmed**, not assumed.
 
-Each subagent returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`file:line`** pointers, and **suggested fixes**. The foreman **resolves or explicitly documents** every `FAIL` (deferred items listed in the completion report under **Known gaps**). **Do not** declare Launchframe complete until all subagents **`PASS`** or gaps are accepted by the user context.
+Each pass (whether another agent or you) returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`file:line`** pointers, and **suggested fixes**. The foreman **resolves or explicitly documents** every `FAIL` (deferred items listed in the completion report under **Known gaps**). **First rubric checklist includes:** confirm **every narrative image slot** from specs has **on-disk raster files** wired in JSX — **`FAIL`** if any slot is placeholder-only while the reference showed imagery. **Do not** declare Launchframe complete until all four passes **`PASS`** or gaps are accepted by the user context.
 
 ## Pre-Dispatch Checklist
 
 Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
 
+- [ ] **Authored narrative rasters planned:** list each marketing/lifestyle/card image slot vs **planned `public/images/...` path** (Brand identity originals). No section ships with “TODO image” once built
 - [ ] **Image markup + styling** captured in spec: `picture`/`source`/`sizes`/`srcset` (or documented `next/image` mapping), `object-fit`/`object-position`, clipping parents, pseudo-element backgrounds if any
 - [ ] **Icon/SVG snippets** inlined in spec where needed: dominant paths or sprite `id`s, **`viewBox`**, stroke/fill rules — enough that a builder does not guess Lucide substitutions
 - [ ] **DOM outline** included for non-trivial sections (wrappers, order)
@@ -602,7 +613,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't collapse responsive image markup.** Dropping `<picture>` / `<source media="…">` or `sizes` so “one JPEG is enough” changes which URL loads and breaks fidelity — mirror the reference’s responsive strategy.
 - **Don't guess motion.** If `transition-duration` is 280ms with `cubic-bezier(0.4, 0, 0.2, 1)`, the clone must use those exact values from Chrome MCP — not "about 0.3s ease."
 - **Don't swap reference-specific SVG/UI icons for random Lucide** (or unrelated stock glyphs) unless the spec proves geometric equivalence — extract the DOM paths/sprites instead.
-- **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
+- **Don't declare Launchframe finished without Phase 6.** Execute the four **`LAUNCHFRAME_SUBAGENTS.md`** prompts (via **Task**/subagents or yourself) and write **`LAUNCHFRAME_VERIFICATION.md`** with four **`PASS`**/**`FAIL`** verdicts — “subagents wouldn't start” is not an excuse to skip opening the Markdown runbook.
+- **Don't ship marketing image slots empty.** Narrative raster roles need real files under **`public/images/`** (or equivalent): no permanent gray boxes where the reference had photography.
 
 ## Completion
 
@@ -611,7 +623,8 @@ When done, report:
 - Total components created
 - Total spec files written (should match components)
 - Total assets downloaded (images, videos, SVGs, fonts)
+- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
-- **Subagent verification:** which audit passes ran (raster + SVG icons / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
+- **Phase 6 verification:** cite **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** (prompt source) **`docs/research/LAUNCHFRAME_VERIFICATION.md`** (results), summarize four passes with **PASS/FAIL** each; unresolved items under **Known gaps**
 - Any known gaps or limitations

package/.continue/rules/project.md

@@ -1,11 +1,8 @@
-<!-- AUTO-GENERATED from AGENTS.md — do not edit directly.
-     Run `bash scripts/sync-agent-rules.sh` to regenerate. -->
-
----
+<!-- AUTO-GENERATED from AGENTS.md \u2014 do not edit directly.
+     Run \ash scripts/sync-agent-rules.sh\ to regenerate. -->\n\n---
 description: Project conventions for AI Website Clone Template
 alwaysApply: true
----
-<!-- BEGIN:nextjs-agent-rules -->
+---\n<!-- BEGIN:nextjs-agent-rules -->
 # This is NOT the Next.js you know
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
@@ -40,9 +37,9 @@ A reusable template for reverse-engineering any website into a clean, modern Nex
 ## Design Principles
 - **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
 - **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later
-- **Real content** — use actual text and assets from the target site where they are interchangeable chrome; **`/launchframe`** overlays your SaaS pitch on headings and CTAs. **Marketing photographs and illustrative hero/feature imagery are not photocopied**: recreate each visual slot with **new images** scoped to **your product** (same framing, hierarchy, and aspect ratio — detail insets / secondary crops should echo the reference layout but show product-relevant subjects), and note originals vs substitutes in `docs/research/`
+- **Real content** — use actual text and assets from the target site where they are interchangeable chrome; **`/launchframe`** overlays your SaaS pitch on headings and CTAs. **Marketing photographs and illustrative hero/feature imagery are not photocopied**: you **must** ship **committed files** under `public/images/` (etc.) for every such slot — **generate them yourself** with your host **image-generation** tool (prompts tied to the SaaS idea), wire into components, supplement with UI mock composites only if helpful. Blank placeholders count as unfinished. Record paths in `docs/research/LAUNCHFRAME.md`
 - **Beauty-first** — every pixel matters
-- **DOM crawl priority** — when walking the target page, emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline icons, sprites, masks — **copy extracted geometry**, do not approximate with unrelated Lucide glyphs), then **motion** (**copy** `@keyframes`, `transition`/`animation` timings, scroll triggers, carousel staggers via Chrome MCP / CSS sources). **Measure and mirror** mounting and styling from the DOM; scrape **permission-neutral** bytes when appropriate. When a raster slot must be original for brand safety, **author** replacements and label them in research notes — **that never waives SVG or animation fidelity**
+- **Inspection workflow (canonical)** — Follow the ordered **five steps** in `docs/research/INSPECTION_GUIDE.md`: (1) **Structure** — DOM as hierarchy reference, not pasted production HTML; (2) **Styles** — Computed/stylesheets and tokens; (3) **Motion** — `@keyframes`, transitions, timings, triggers; (4) **Assets** — rasters/SVGs with brand-safe originals for marketing slots when required; (5) **Implementation** — Next.js components rebuild. Within crawls (Chrome MCP / DevTools), still emphasize **images** (raster, responsive sources, CSS backgrounds), **SVGs** (inline, sprites, masks — **exact geometry**, not unrelated Lucide stand-ins), then **motion fidelity**. **Measure and mirror** from the DOM; scrape **permission-neutral** bytes when appropriate — **SVG and animation fidelity are not waived** when rasters are replaced
 
 ## Project Structure
 ```
@@ -67,6 +64,7 @@ scripts/            # Asset download scripts
 
 ## MOST IMPORTANT NOTES
 - 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.
+- **`/launchframe` Phase 6 verification** must always run: prompt text lives in **`docs/research/LAUNCHFRAME_SUBAGENTS.md`**; results in **`docs/research/LAUNCHFRAME_VERIFICATION.md`**. Use four parallel **Task**/subagents (paste one `## Prompt — Pass …` section per agent) or run all four sequentially yourself — never skip verification.
 - After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
 - After editing **any** `SKILL.md` under `.claude/skills/<skill-id>/`, run `node scripts/sync-skills.mjs` to regenerate that skill’s slash commands/workflows for **every supported platform** (discovered automatically).
 
@@ -74,89 +72,131 @@ scripts/            # Asset download scripts
 
 ## How to Reverse-Engineer Any Website
 
-This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
+This guide is the **canonical workflow** when inspecting a target site (Chrome MCP, DevTools, or similar). Execute the steps **in order**: structure and styles establish the blueprint; motion and assets define feel and legality; implementation is always a deliberate rebuild—not a pasted dump.
 
-## Priority: media, SVGs, and motion (do this early)
+---
 
-When crawling the DOM and network, **tackle these before fine-tuning copy or spacing**:
+## Step 1 — Structure (DOM hierarchy only)
 
-1. **Raster imagery** — Every `<img>`, `<picture>` / `source`, `srcset` / `sizes`, CDN URLs, lazy-loaded `data-src`, `loading="lazy"` nodes, **CSS `background-image`** on the element and ancestors (including `::before` / `::after`), masks that use `url()`, `<video>` still / poster frames. Prefer **downloading** originals via scripts or MCP; if a URL is blocked or session-gated, **export a screenshot** of the element’s bounding box at a crisp DPR and store it under `public/images/`, and note the substitute in the spec.
-2. **SVGs** — Inline `<svg>`, `<use>` / sprite sheets, **SVG in CSS** (`mask-image`, `background-image`), favicons as SVG, logo marks. Prefer extracting path/viewBox into React components or static files under `public/` — **recreate** from a screenshot/trace only when the markup is obfuscated or blocked.
-3. **Motion & animation** — Inspect Styles for `animation`, `animation-name`, `animation-timeline`, `transition`, `transform`, `@keyframes`; check for libraries (Framer Motion, GSAP, Lottie, Lenis). Capture **durations, easings, delays, fill-modes**, scroll/view triggers, and `prefers-reduced-motion` handling. Motion often defines perceived quality — do not leave it as an afterthought.
+Treat HTML as a **map of hierarchy**, not as shippable source code.
 
-Then continue with typography, spacing, and component structure as usual.
+- **DevTools limitation:** Copying `<head>` and `<body>` with “Copy ▸ Copy outerHTML” gives **one frozen snapshot**. It omits most **stylesheet and script** behavior and may inline classes whose meaning lives in external bundles.
+- **What to extract anyway:** Landmark regions, heading levels, nesting (sections → rows → cards), repeated patterns, form fields, navigation trees, semantic roles.
+- **What not to do:** Do not paste a single giant HTML file into production or assume it reproduces routing, hydration, or data fetching.
 
-## Phase 1: Visual Audit
+### Component & layout checklist (supports Step 1)
+
+**Component inventory** — For each distinct UI block, capture:
 
-### 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
-
-### 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?
+2. **Structure** — HTML elements / child components and order
+3. **Variants** — sizes, tones, densities
 4. **States** — default, hover, active, disabled, loading, error, empty
-5. **Responsive behavior** — how does it change at different breakpoints?
-6. **Interactions** — click, hover, focus, keyboard navigation
-7. **Animations** — transitions, entrance/exit animations, micro-interactions
-
-### 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
-
-## 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
-- [ ] **Animation library** — Framer Motion, GSAP, CSS transitions only
-
-## Phase 5: Documentation Output
-
-After inspection, create these files in `docs/research/`:
-1. `DESIGN_TOKENS.md` — All extracted colors, typography, spacing
-2. `COMPONENT_INVENTORY.md` — Every component with structure notes
-3. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
-4. `INTERACTION_PATTERNS.md` — Animations, transitions, hover states
-5. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents
+5. **Responsive behavior** — changes per breakpoint
+6. **Interactions** — click, hover, focus, keyboard
+
+**Layout architecture**
+
+- [ ] **Grid vs flex** — primary layout mechanism
+- [ ] **Columns** — count per breakpoint
+- [ ] **Max-width** — content well width
+- [ ] **Sticky / fixed** — header, sidebars, floating CTAs
+- [ ] **Z-index layers** — nav, overlays, tooltips
+- [ ] **Scroll model** — normal, infinite, virtual lists, snap
+
+**Screenshots** (tie each shot to a section in the hierarchy)
+
+- [ ] Every distinct page — desktop, tablet, mobile
+- [ ] Theme variants (light / dark if applicable)
+- [ ] Hover, active, menus open, modals
+- [ ] Loading / skeleton / empty / error states
+
+---
+
+## Step 2 — Styles (computed appearance + real CSS)
+
+Rendered look comes from **CSS** (linked files, injected `<style>` blocks, build output)—not from raw element copy alone.
+
+- **Per-element:** In DevTools **Styles** / **Computed**, capture what matters for fidelity: typography, spacing, colors, borders, shadows, breakpoints where rules change.
+- **Global:** From **Sources** or **Network**, identify main stylesheets / CSS chunks; note filenames or URLs for the agents or scripts that will mirror tokens.
+- **Design tokens to extract**
+
+  - [ ] **Colors** — background, text (primary / secondary / muted), accent, border, hover / focus, semantic (error, success, warning)
+  - [ ] **Typography** — families, scale (h1–h6, body, captions), weights, line-height, letter-spacing
+  - [ ] **Spacing** — padding/margin rhythm (e.g. 4/8/12/16…)
+  - [ ] **Radius & elevation** — cards, buttons, inputs, overlays
+  - [ ] **Breakpoints** — layout shifts (responsive mode)
+  - [ ] **Icons & avatars** — sizes, masks, fallbacks
+
+**Technical CSS context** (informs Tailwind mapping)
+
+- [ ] **CSS approach** — utilities vs modules vs styled components vs vanilla
+- [ ] **Fonts** — Google, self-hosted, system stacks
+- [ ] **Image CSS** — `object-fit`, `aspect-ratio`, background layers
+
+---
+
+## Step 3 — Motion (what moves and how)
+
+Motion is rarely recoverable from HTML copy; it lives in **CSS animations/transitions** and often **JavaScript** (scroll, gestures, carousel timing).
+
+- **Catalog behaviors:** Entrance, hover, focus, drag, scroll-linked, carousel stagger, modal open/close, page transitions.
+- **From Styles / Sources:** `animation-*`, `@keyframes`, `transition`, `transform`, `will-change`; note **duration, easing, delay, fill-mode**.
+- **Libraries:** Identify Framer Motion, GSAP, Lottie, Lenis, CSS-only, etc.
+- **Accessibility:** Note `prefers-reduced-motion` behavior if present.
+
+**Priority reminder:** Capture **motion early** alongside media—perceived polish depends on it; do not leave it until the end.
+
+---
+
+## Step 4 — Assets (permission-neutral bytes + originals where required)
+
+**Early capture**
+
+1. **Raster imagery** — `<img>`, `<picture>` / `<source>`, `srcset` / `sizes`, CDN URLs, lazy `data-src`, `loading="lazy"`, **`background-image`** on elements and ancestors (including `::before` / `::after`), masks using `url()`, video posters / stills.
+2. **SVGs** — Inline `<svg>`, `<use>` / sprites, **SVG in CSS** (`mask-image`, backgrounds), favicons. Prefer extracting path/viewBox into React components or files under `public/` — recreate from screenshot/trace only when markup is blocked or obfuscated.
+3. **Brand-safe slots** — **Marketing photos and illustrative hero/feature art** must not be photocopied when policy requires originality: ship **committed** files under `public/images/` (etc.), generated for **your** product idea; document paths in `docs/research/LAUNCHFRAME.md`. Blank placeholders are unfinished.
+4. **Fallbacks** — If URLs are gated, export a crisp screenshot of the element’s box (note DPR) and record the substitution in research notes.
+
+**Technical**
+
+- [ ] CDN vs origin paths
+- [ ] Lazy loading and responsive image strategy
+
+---
+
+## Step 5 — Implementation (Next.js + components)
+
+Rebuild deliberately in **this template’s stack** (Next.js App Router, React, TypeScript strict, shadcn/ui, Tailwind v4).
+
+- **Do:** Small composable components, shared tokens, `cn()`, extracted icons in `src/components/icons.tsx` (or adjacent), routes under `src/app/`.
+- **Don’t:** Ship one monolithic HTML string as the app or skip TypeScript/component boundaries.
+
+### Stack parity (helps choose libraries)
+
+- [ ] **Framework signals** — e.g. `__NEXT_DATA__`, `__NUXT__`, `ng-version`
+- [ ] **State / data** — REST, GraphQL, client stores (infer from Network)
+- [ ] **Animation stack** — match or approximate with CSS or an approved motion library
+
+### Documentation output (`docs/research/`)
+
+After inspection, produce durable notes:
+
+1. `DESIGN_TOKENS.md` — colors, typography, spacing, radius, shadows
+2. `COMPONENT_INVENTORY.md` — components with structure and states
+3. `LAYOUT_ARCHITECTURE.md` — grids, breakpoints, sticky layers
+4. `INTERACTION_PATTERNS.md` — motion, transitions, hover/focus
+5. `TECH_STACK_ANALYSIS.md` — source stack vs chosen equivalents
+
+### Common components to hunt for
+
+Navigation (top/side/bottom), cards, buttons, links, forms, modals, menus, tabs, avatars/badges, skeletons, toasts, tooltips/popovers.
+
+---
+
+## Reference: Chrome MCP / agent crawl habits
+
+Walk the DOM and network **top-down**. When multiple agents collaborate, reconcile tokens and animation specs in shared research files so Step 5 does not drift. For **`/launchframe`**, tie findings to `launchframe.context.json` and `docs/research/LAUNCHFRAME.md` per project conventions.
+
+
+\n

package/.cursor/commands/launchframe.md

@@ -9,7 +9,7 @@
 1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
 2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
 
-You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit raster slots **and extracted SVG/icons** / DOM / CSS / **motion choreography**, merge their findings, then QA. Not a shallow inspect-then-guess flow.
+You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible. After Phase 5, **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** defines the **verbatim prompts** you must use to run verification (either four parallel **`Task`/subagents** fed one prompt each — **paste from that file only**, not from memory — or execute those four prompts **yourself sequentially**). Aggregate results only in **`docs/research/LAUNCHFRAME_VERIFICATION.md`**. **Never skip Phase 6** because subagents didn't auto-start — you initiate them explicitly from the Markdown prompt blocks. Narrative/marketing raster slots use **imagery your session generates itself** with the host’s **image-generation** tool (saved into `public/images/`), not missing assets — see **Brand identity**. Verification still covers raster slots, extracted **SVG/icons**, DOM, CSS, and **motion choreography**.
 
 ## Step 0 — Persist Launchframe inputs
 
@@ -18,6 +18,7 @@ Before reconnaissance, write or update:
 - `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`
 - `launchframe.context.json`
 - `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
+- **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** — **before Phase 6**, ensure this runbook holds all four verifier prompts (**copy-ready**). When the bundled template differs from the latest SKILL rubrics (after skill edits), re-sync Section **Phase 6** rubrics **into this file**. Subagents receive prompts **only** from here.
 
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
@@ -33,7 +34,7 @@ The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's
 - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
 - **Customization:** Structure and visuals — pure emulation of the reference. **Marketing copy** — apply the parsed **SaaS idea** where hero/headlines/CTAs are interchangeable (see “SaaS copy overlay” above); do not invent a different product than the user’s idea.
-- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
+- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. **Mandatory delivery:** those slots **must** have real raster files checked into `public/images/` (or another committed static path your build serves) — **no** omitted `<img>`/`<Image>`, **no** indefinite placeholder divs/colors standing in for a photo where the reference showed one, **no** broken `href/src`. **You generate these files yourself:** use your host's **built-in image generation** capability (explicit image prompts aligned to the SaaS idea + composition brief from each reference slot), write outputs into `public/images/`, wire them into JSX, and note each file in `docs/research/LAUNCHFRAME.md`. You may **supplement** with composites or screenshots of **your** product UI mocks you build in code, but you **do not** wait for the user to supply artwork. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction, and **list paths** for every authored narrative image.
 - **Functional icons & motion choreography:** Anything the reference treats as **UI iconography that is not a forbidden trademark** (chevrons, menu marks, inline pictograms, sprite symbols, repeating UI glyphs) — **lift path data / sprite refs / mask SVGs from the DOM** and reproduce **`viewBox`, stroke widths, joins, fills, `currentColor` behavior.** Do **not** swap in unrelated Lucide (or arbitrary stock SVG) guesses "that look close." **`@keyframes`**, **`transition` / `animation` longhands**, scroll-driven timelines, carousel timings, stagger delays, easing curves — **lift from live measurement + stylesheet text** per §0.3 — **omit or substitute timing only** when respecting `prefers-reduced-motion` or when the measured reference does the same. Product-themed raster replacements do **not** waive SVG or animation parity.
 
 If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
@@ -542,25 +543,35 @@ After assembly, do NOT declare the clone complete. Take side-by-side comparison
 5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
 6. **Motion QA:** Re-run the **motion audit script** (or per-element `getAnimations`) on the reference and spot-check the clone in devtools — **durations, delays, and easing curves must match** (e.g. 320ms vs 300ms is a failure). Re-scroll hero and sticky headers; carousels and scroll-driven sections must trigger at the same thresholds documented in `BEHAVIORS.md`
 
-Only after this visual QA pass is the clone ready for **subagent verification**.
+Only after this visual QA pass is the clone ready for **Phase 6 verification**. Immediately **confirm `docs/research/LAUNCHFRAME_SUBAGENTS.md`** contains four self-contained **`## Prompt — Pass N`** sections matching the Phase 6 rubrics; update that file whenever you change rubric wording locally.
 
-## Phase 6: Subagent verification pass (mandatory)
+## Phase 6: Verification passes (mandatory)
 
-Foreman self-review is insufficient — **dispatch independent checker agents** (subagents) after Phase 5 to audit the whole surface. Prefer **parallel** runs with **narrow rubrics**. When using multi-agent setups, follow **`AGENTS.md`**: give each subagent its **own git worktree/branch**, then merge after all reports are triaged.
+Foreman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.
 
-**Minimum four verification passes** (one subagent each, or one agent run sequentially if the host limits parallelism):
+### How to run them (hosts differ)
 
-1. **Raster media & icons** — List every image/video poster and **every authored SVG/component used as an icon** referenced from `src/` (components, `app/`). Confirm **files exist** under `public/` with **correct paths** where expected; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. For SVGs/icons: **`viewBox`**, strokes/fills/`currentColor`, and sprite usage must match specs — reject opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+| Host capability | What you must do |
+|-----------------|------------------|
+| **Parallel agents / Task / subagents** | Open **`docs/research/LAUNCHFRAME_SUBAGENTS.md`**. Dispatch **four** separate runs — each agent receives **exactly one** complete `## Prompt — Pass …` section copied **verbatim from that Markdown file**. Prefer **`explore`/readonly**. Do **not** paraphrase the rubric from chat memory. Claude Code-style teams: follow **`AGENTS.md`** — isolated **worktrees/branches per checker**, then merge after triage. |
+| **Single agent / no spawning** | Open the same Markdown file and **execute prompts 1 → 4 yourself** in order, appending **`docs/research/LAUNCHFRAME_VERIFICATION.md`** after each (`### Pass N`, findings, **`VERDICT: PASS`** or **`FAIL`**) per that file's **Output contract**. |
+
+**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.
+
+**Minimum four verification passes** (four subagents **or** four self-executed steps — prompts sourced from **`LAUNCHFRAME_SUBAGENTS.md`;** the authoritative rubric text below must stay mirrored there):
+
+1. **Raster media & icons** — **Narrative slots:** inventory every reference marketing/lifestyle/card/hero image role from specs vs **committed files** (`public/images/...`) actually referenced in JSX; **`FAIL`** if the reference showed a photo/panel thumbnail and this clone relies on placeholders or bare gradients. Then list every raster/video poster and **every authored SVG/component used as an icon** from `src/`. Confirm **files exist** under `public/` with **correct paths** where expected; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. For SVGs/icons: **`viewBox`**, strokes/fills/`currentColor`, and sprite usage must match specs — reject opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
 2. **HTML / DOM structure** — Diff **PAGE_TOPOLOGY.md** + component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll must be **FAIL** until fixed.
 3. **CSS parity** — Spot-check **hero, nav, first fold, footer** (and any section flagged risky) against spec CSS: tokens in **`globals.css`**, arbitrary Tailwind vs measured px, **keyframes** presence. Run **`npm run lint`** and **`npm run typecheck`** inside the verification worktree; failures = **FAIL** until green.
 4. **Motion & interaction** — Re-walk **`docs/research/BEHAVIORS.md`** and motion audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Phase 5 motion QA must be **confirmed**, not assumed.
 
-Each subagent returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`file:line`** pointers, and **suggested fixes**. The foreman **resolves or explicitly documents** every `FAIL` (deferred items listed in the completion report under **Known gaps**). **Do not** declare Launchframe complete until all subagents **`PASS`** or gaps are accepted by the user context.
+Each pass (whether another agent or you) returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`file:line`** pointers, and **suggested fixes**. The foreman **resolves or explicitly documents** every `FAIL` (deferred items listed in the completion report under **Known gaps**). **First rubric checklist includes:** confirm **every narrative image slot** from specs has **on-disk raster files** wired in JSX — **`FAIL`** if any slot is placeholder-only while the reference showed imagery. **Do not** declare Launchframe complete until all four passes **`PASS`** or gaps are accepted by the user context.
 
 ## Pre-Dispatch Checklist
 
 Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
 
+- [ ] **Authored narrative rasters planned:** list each marketing/lifestyle/card image slot vs **planned `public/images/...` path** (Brand identity originals). No section ships with “TODO image” once built
 - [ ] **Image markup + styling** captured in spec: `picture`/`source`/`sizes`/`srcset` (or documented `next/image` mapping), `object-fit`/`object-position`, clipping parents, pseudo-element backgrounds if any
 - [ ] **Icon/SVG snippets** inlined in spec where needed: dominant paths or sprite `id`s, **`viewBox`**, stroke/fill rules — enough that a builder does not guess Lucide substitutions
 - [ ] **DOM outline** included for non-trivial sections (wrappers, order)
@@ -597,7 +608,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't collapse responsive image markup.** Dropping `<picture>` / `<source media="…">` or `sizes` so “one JPEG is enough” changes which URL loads and breaks fidelity — mirror the reference’s responsive strategy.
 - **Don't guess motion.** If `transition-duration` is 280ms with `cubic-bezier(0.4, 0, 0.2, 1)`, the clone must use those exact values from Chrome MCP — not "about 0.3s ease."
 - **Don't swap reference-specific SVG/UI icons for random Lucide** (or unrelated stock glyphs) unless the spec proves geometric equivalence — extract the DOM paths/sprites instead.
-- **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
+- **Don't declare Launchframe finished without Phase 6.** Execute the four **`LAUNCHFRAME_SUBAGENTS.md`** prompts (via **Task**/subagents or yourself) and write **`LAUNCHFRAME_VERIFICATION.md`** with four **`PASS`**/**`FAIL`** verdicts — “subagents wouldn't start” is not an excuse to skip opening the Markdown runbook.
+- **Don't ship marketing image slots empty.** Narrative raster roles need real files under **`public/images/`** (or equivalent): no permanent gray boxes where the reference had photography.
 
 ## Completion
 
@@ -606,7 +618,8 @@ When done, report:
 - Total components created
 - Total spec files written (should match components)
 - Total assets downloaded (images, videos, SVGs, fonts)
+- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
-- **Subagent verification:** which audit passes ran (raster + SVG icons / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
+- **Phase 6 verification:** cite **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** (prompt source) **`docs/research/LAUNCHFRAME_VERIFICATION.md`** (results), summarize four passes with **PASS/FAIL** each; unresolved items under **Known gaps**
 - Any known gaps or limitations

package/.gemini/commands/launchframe.toml

@@ -13,7 +13,7 @@ text = '''
 1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
 2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
 
-You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **dispatch verification subagents** after assembly to audit raster slots **and extracted SVG/icons** / DOM / CSS / **motion choreography**, merge their findings, then QA. Not a shallow inspect-then-guess flow.
+You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible. After Phase 5, **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** defines the **verbatim prompts** you must use to run verification (either four parallel **`Task`/subagents** fed one prompt each — **paste from that file only**, not from memory — or execute those four prompts **yourself sequentially**). Aggregate results only in **`docs/research/LAUNCHFRAME_VERIFICATION.md`**. **Never skip Phase 6** because subagents didn't auto-start — you initiate them explicitly from the Markdown prompt blocks. Narrative/marketing raster slots use **imagery your session generates itself** with the host’s **image-generation** tool (saved into `public/images/`), not missing assets — see **Brand identity**. Verification still covers raster slots, extracted **SVG/icons**, DOM, CSS, and **motion choreography**.
 
 ## Step 0 — Persist Launchframe inputs
 
@@ -22,6 +22,7 @@ Before reconnaissance, write or update:
 - `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`
 - `launchframe.context.json`
 - `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
+- **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** — **before Phase 6**, ensure this runbook holds all four verifier prompts (**copy-ready**). When the bundled template differs from the latest SKILL rubrics (after skill edits), re-sync Section **Phase 6** rubrics **into this file**. Subagents receive prompts **only** from here.
 
 ## SaaS copy overlay (Phase 4 assembly and final polish)
 
@@ -37,7 +38,7 @@ The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's
 - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
 - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
 - **Customization:** Structure and visuals — pure emulation of the reference. **Marketing copy** — apply the parsed **SaaS idea** where hero/headlines/CTAs are interchangeable (see “SaaS copy overlay” above); do not invent a different product than the user’s idea.
-- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction.
+- **Brand identity:** The reference is a **pattern** for layout, motion, and UI craft — **not** permission to ship their brand. Unless the user **explicitly** asks for a faithful copy of the reference brand (e.g. licensed work, clearly labeled internal mock, private design audit), **invent an original brand** aligned with the SaaS idea: product name, wordmark or simple logomark (SVG or styled text) sized to the same logo slot, favicon / app icon, OG imagery, and a cohesive palette. Do **not** reuse their trademarked logo paths, mascot art, or distinctive illustrative brand assets; use originals or functional UI icons instead. **Every raster slot** that is a photograph, illustration, or narrative marketing image on the reference (hero, feature mockups, social proof portraits, decorative panels, card thumbnails) must ship as **new, original imagery** grounded in the **SaaS idea** — treat the reference shot as a **composition brief** (aspect ratio, mood, subject *role*: dashboard vs lifestyle vs avatar) and recreate with product-relevant scenes, UI surrogates, logosafe crops, or **supporting sub-frames** (detail insets, secondary panels) that read as one family. **Mandatory delivery:** those slots **must** have real raster files checked into `public/images/` (or another committed static path your build serves) — **no** omitted `<img>`/`<Image>`, **no** indefinite placeholder divs/colors standing in for a photo where the reference showed one, **no** broken `href/src`. **You generate these files yourself:** use your host's **built-in image generation** capability (explicit image prompts aligned to the SaaS idea + composition brief from each reference slot), write outputs into `public/images/`, wire them into JSX, and note each file in `docs/research/LAUNCHFRAME.md`. You may **supplement** with composites or screenshots of **your** product UI mocks you build in code, but you **do not** wait for the user to supply artwork. Preserve **exact** framing CSS (`object-fit`, `object-position`, masks, layering). Do **not** hotlink or ship their competitor lifestyle/brand photography bytes except when the user explicitly allows it. Note in `docs/research/LAUNCHFRAME.md` which marks and assets are **original brand** versus **layout-only** extraction, and **list paths** for every authored narrative image.
 - **Functional icons & motion choreography:** Anything the reference treats as **UI iconography that is not a forbidden trademark** (chevrons, menu marks, inline pictograms, sprite symbols, repeating UI glyphs) — **lift path data / sprite refs / mask SVGs from the DOM** and reproduce **`viewBox`, stroke widths, joins, fills, `currentColor` behavior.** Do **not** swap in unrelated Lucide (or arbitrary stock SVG) guesses "that look close." **`@keyframes`**, **`transition` / `animation` longhands**, scroll-driven timelines, carousel timings, stagger delays, easing curves — **lift from live measurement + stylesheet text** per §0.3 — **omit or substitute timing only** when respecting `prefers-reduced-motion` or when the measured reference does the same. Product-themed raster replacements do **not** waive SVG or animation parity.
 
 If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
@@ -546,25 +547,35 @@ After assembly, do NOT declare the clone complete. Take side-by-side comparison
 5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
 6. **Motion QA:** Re-run the **motion audit script** (or per-element `getAnimations`) on the reference and spot-check the clone in devtools — **durations, delays, and easing curves must match** (e.g. 320ms vs 300ms is a failure). Re-scroll hero and sticky headers; carousels and scroll-driven sections must trigger at the same thresholds documented in `BEHAVIORS.md`
 
-Only after this visual QA pass is the clone ready for **subagent verification**.
+Only after this visual QA pass is the clone ready for **Phase 6 verification**. Immediately **confirm `docs/research/LAUNCHFRAME_SUBAGENTS.md`** contains four self-contained **`## Prompt — Pass N`** sections matching the Phase 6 rubrics; update that file whenever you change rubric wording locally.
 
-## Phase 6: Subagent verification pass (mandatory)
+## Phase 6: Verification passes (mandatory)
 
-Foreman self-review is insufficient — **dispatch independent checker agents** (subagents) after Phase 5 to audit the whole surface. Prefer **parallel** runs with **narrow rubrics**. When using multi-agent setups, follow **`AGENTS.md`**: give each subagent its **own git worktree/branch**, then merge after all reports are triaged.
+Foreman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.
 
-**Minimum four verification passes** (one subagent each, or one agent run sequentially if the host limits parallelism):
+### How to run them (hosts differ)
 
-1. **Raster media & icons** — List every image/video poster and **every authored SVG/component used as an icon** referenced from `src/` (components, `app/`). Confirm **files exist** under `public/` with **correct paths** where expected; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. For SVGs/icons: **`viewBox`**, strokes/fills/`currentColor`, and sprite usage must match specs — reject opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
+| Host capability | What you must do |
+|-----------------|------------------|
+| **Parallel agents / Task / subagents** | Open **`docs/research/LAUNCHFRAME_SUBAGENTS.md`**. Dispatch **four** separate runs — each agent receives **exactly one** complete `## Prompt — Pass …` section copied **verbatim from that Markdown file**. Prefer **`explore`/readonly**. Do **not** paraphrase the rubric from chat memory. Claude Code-style teams: follow **`AGENTS.md`** — isolated **worktrees/branches per checker**, then merge after triage. |
+| **Single agent / no spawning** | Open the same Markdown file and **execute prompts 1 → 4 yourself** in order, appending **`docs/research/LAUNCHFRAME_VERIFICATION.md`** after each (`### Pass N`, findings, **`VERDICT: PASS`** or **`FAIL`**) per that file's **Output contract**. |
+
+**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.
+
+**Minimum four verification passes** (four subagents **or** four self-executed steps — prompts sourced from **`LAUNCHFRAME_SUBAGENTS.md`;** the authoritative rubric text below must stay mirrored there):
+
+1. **Raster media & icons** — **Narrative slots:** inventory every reference marketing/lifestyle/card/hero image role from specs vs **committed files** (`public/images/...`) actually referenced in JSX; **`FAIL`** if the reference showed a photo/panel thumbnail and this clone relies on placeholders or bare gradients. Then list every raster/video poster and **every authored SVG/component used as an icon** from `src/`. Confirm **files exist** under `public/` with **correct paths** where expected; compare presentation to specs: **`picture`/`source` behavior**, **`sizes` / responsive behavior**, **`object-fit` / `object-position`**, dimensions/aspect-ratio, **parent overflow and radius**, **`background-image`** and **pseudo-elements**. For SVGs/icons: **`viewBox`**, strokes/fills/`currentColor`, and sprite usage must match specs — reject opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
 2. **HTML / DOM structure** — Diff **PAGE_TOPOLOGY.md** + component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll must be **FAIL** until fixed.
 3. **CSS parity** — Spot-check **hero, nav, first fold, footer** (and any section flagged risky) against spec CSS: tokens in **`globals.css`**, arbitrary Tailwind vs measured px, **keyframes** presence. Run **`npm run lint`** and **`npm run typecheck`** inside the verification worktree; failures = **FAIL** until green.
 4. **Motion & interaction** — Re-walk **`docs/research/BEHAVIORS.md`** and motion audit JSON: headers, carousels, scroll-driven UI, smooth-scroll libs. Phase 5 motion QA must be **confirmed**, not assumed.
 
-Each subagent returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`file:line`** pointers, and **suggested fixes**. The foreman **resolves or explicitly documents** every `FAIL` (deferred items listed in the completion report under **Known gaps**). **Do not** declare Launchframe complete until all subagents **`PASS`** or gaps are accepted by the user context.
+Each pass (whether another agent or you) returns **`PASS` or `FAIL`**, a **bullet list** of issues with **`file:line`** pointers, and **suggested fixes**. The foreman **resolves or explicitly documents** every `FAIL` (deferred items listed in the completion report under **Known gaps**). **First rubric checklist includes:** confirm **every narrative image slot** from specs has **on-disk raster files** wired in JSX — **`FAIL`** if any slot is placeholder-only while the reference showed imagery. **Do not** declare Launchframe complete until all four passes **`PASS`** or gaps are accepted by the user context.
 
 ## Pre-Dispatch Checklist
 
 Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
 
+- [ ] **Authored narrative rasters planned:** list each marketing/lifestyle/card image slot vs **planned `public/images/...` path** (Brand identity originals). No section ships with “TODO image” once built
 - [ ] **Image markup + styling** captured in spec: `picture`/`source`/`sizes`/`srcset` (or documented `next/image` mapping), `object-fit`/`object-position`, clipping parents, pseudo-element backgrounds if any
 - [ ] **Icon/SVG snippets** inlined in spec where needed: dominant paths or sprite `id`s, **`viewBox`**, stroke/fill rules — enough that a builder does not guess Lucide substitutions
 - [ ] **DOM outline** included for non-trivial sections (wrappers, order)
@@ -601,7 +612,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't collapse responsive image markup.** Dropping `<picture>` / `<source media="…">` or `sizes` so “one JPEG is enough” changes which URL loads and breaks fidelity — mirror the reference’s responsive strategy.
 - **Don't guess motion.** If `transition-duration` is 280ms with `cubic-bezier(0.4, 0, 0.2, 1)`, the clone must use those exact values from Chrome MCP — not "about 0.3s ease."
 - **Don't swap reference-specific SVG/UI icons for random Lucide** (or unrelated stock glyphs) unless the spec proves geometric equivalence — extract the DOM paths/sprites instead.
-- **Don't dispatch builders without a spec file.** The spec file forces exhaustive extraction and creates an auditable artifact. Skipping it means the builder gets whatever you can fit in a prompt from memory.
+- **Don't declare Launchframe finished without Phase 6.** Execute the four **`LAUNCHFRAME_SUBAGENTS.md`** prompts (via **Task**/subagents or yourself) and write **`LAUNCHFRAME_VERIFICATION.md`** with four **`PASS`**/**`FAIL`** verdicts — “subagents wouldn't start” is not an excuse to skip opening the Markdown runbook.
+- **Don't ship marketing image slots empty.** Narrative raster roles need real files under **`public/images/`** (or equivalent): no permanent gray boxes where the reference had photography.
 
 ## Completion
 
@@ -610,9 +622,10 @@ When done, report:
 - Total components created
 - Total spec files written (should match components)
 - Total assets downloaded (images, videos, SVGs, fonts)
+- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)
-- **Subagent verification:** which audit passes ran (raster + SVG icons / DOM / CSS / motion), **PASS/FAIL** each, and link or paste issue lists; unresolved items under **Known gaps**
+- **Phase 6 verification:** cite **`docs/research/LAUNCHFRAME_SUBAGENTS.md`** (prompt source) **`docs/research/LAUNCHFRAME_VERIFICATION.md`** (results), summarize four passes with **PASS/FAIL** each; unresolved items under **Known gaps**
 - Any known gaps or limitations
 
 '''