launchframe 0.4.8 → 0.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.amazonq/cli-agents/launchframe.json +1 -1
- package/.amazonq/rules/project.md +2 -1
- package/.augment/commands/launchframe.md +23 -10
- package/.claude/skills/launchframe/SKILL.md +23 -10
- package/.clinerules +2 -1
- package/.codex/skills/launchframe/SKILL.md +23 -10
- package/.continue/commands/launchframe.md +23 -10
- package/.continue/rules/project.md +2 -1
- package/.cursor/commands/launchframe.md +23 -10
- package/.gemini/commands/launchframe.toml +23 -10
- package/.github/copilot-instructions.md +2 -1
- package/.github/skills/launchframe/SKILL.md +23 -10
- package/.opencode/commands/launchframe.md +23 -10
- package/.windsurf/workflows/launchframe.md +23 -10
- package/AGENTS.md +2 -1
- package/docs/research/LAUNCHFRAME_SUBAGENTS.md +73 -0
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ user-invocable: true
|
|
|
13
13
|
1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
|
|
14
14
|
2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
|
|
15
15
|
|
|
16
|
-
You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **
|
|
16
|
+
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**.
|
|
17
17
|
|
|
18
18
|
## Step 0 — Persist Launchframe inputs
|
|
19
19
|
|
|
@@ -22,6 +22,7 @@ Before reconnaissance, write or update:
|
|
|
22
22
|
- `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`
|
|
23
23
|
- `launchframe.context.json`
|
|
24
24
|
- `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
|
|
25
|
+
- **`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.
|
|
25
26
|
|
|
26
27
|
## SaaS copy overlay (Phase 4 assembly and final polish)
|
|
27
28
|
|
|
@@ -37,7 +38,7 @@ The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's
|
|
|
37
38
|
- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
|
|
38
39
|
- **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
|
|
39
40
|
- **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.
|
|
40
|
-
- **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.
|
|
41
|
+
- **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.
|
|
41
42
|
- **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.
|
|
42
43
|
|
|
43
44
|
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
|
|
|
546
547
|
5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
|
|
547
548
|
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`
|
|
548
549
|
|
|
549
|
-
Only after this visual QA pass is the clone ready for **
|
|
550
|
+
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.
|
|
550
551
|
|
|
551
|
-
## Phase 6:
|
|
552
|
+
## Phase 6: Verification passes (mandatory)
|
|
552
553
|
|
|
553
|
-
Foreman
|
|
554
|
+
Foreman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.
|
|
554
555
|
|
|
555
|
-
|
|
556
|
+
### How to run them (hosts differ)
|
|
556
557
|
|
|
557
|
-
|
|
558
|
+
| Host capability | What you must do |
|
|
559
|
+
|-----------------|------------------|
|
|
560
|
+
| **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. |
|
|
561
|
+
| **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**. |
|
|
562
|
+
|
|
563
|
+
**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.
|
|
564
|
+
|
|
565
|
+
**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):
|
|
566
|
+
|
|
567
|
+
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.
|
|
558
568
|
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.
|
|
559
569
|
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.
|
|
560
570
|
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.
|
|
561
571
|
|
|
562
|
-
Each
|
|
572
|
+
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.
|
|
563
573
|
|
|
564
574
|
## Pre-Dispatch Checklist
|
|
565
575
|
|
|
566
576
|
Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
|
|
567
577
|
|
|
578
|
+
- [ ] **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
|
|
568
579
|
- [ ] **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
|
|
569
580
|
- [ ] **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
|
|
570
581
|
- [ ] **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:
|
|
|
601
612
|
- **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.
|
|
602
613
|
- **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."
|
|
603
614
|
- **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.
|
|
604
|
-
- **Don't
|
|
615
|
+
- **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.
|
|
616
|
+
- **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.
|
|
605
617
|
|
|
606
618
|
## Completion
|
|
607
619
|
|
|
@@ -610,7 +622,8 @@ When done, report:
|
|
|
610
622
|
- Total components created
|
|
611
623
|
- Total spec files written (should match components)
|
|
612
624
|
- Total assets downloaded (images, videos, SVGs, fonts)
|
|
625
|
+
- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)
|
|
613
626
|
- Build status (`npm run build` result)
|
|
614
627
|
- Visual QA results (any remaining discrepancies)
|
|
615
|
-
- **
|
|
628
|
+
- **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**
|
|
616
629
|
- Any known gaps or limitations
|
|
@@ -12,7 +12,7 @@ description: "Pixel-perfect reverse-engineer of a reference URL into this repo,
|
|
|
12
12
|
1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
|
|
13
13
|
2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
|
|
14
14
|
|
|
15
|
-
You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **
|
|
15
|
+
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**.
|
|
16
16
|
|
|
17
17
|
## Step 0 — Persist Launchframe inputs
|
|
18
18
|
|
|
@@ -21,6 +21,7 @@ Before reconnaissance, write or update:
|
|
|
21
21
|
- `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`
|
|
22
22
|
- `launchframe.context.json`
|
|
23
23
|
- `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
|
|
24
|
+
- **`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.
|
|
24
25
|
|
|
25
26
|
## SaaS copy overlay (Phase 4 assembly and final polish)
|
|
26
27
|
|
|
@@ -36,7 +37,7 @@ The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's
|
|
|
36
37
|
- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
|
|
37
38
|
- **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
|
|
38
39
|
- **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.
|
|
39
|
-
- **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.
|
|
40
|
+
- **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.
|
|
40
41
|
- **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.
|
|
41
42
|
|
|
42
43
|
If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
|
|
@@ -545,25 +546,35 @@ After assembly, do NOT declare the clone complete. Take side-by-side comparison
|
|
|
545
546
|
5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
|
|
546
547
|
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`
|
|
547
548
|
|
|
548
|
-
Only after this visual QA pass is the clone ready for **
|
|
549
|
+
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.
|
|
549
550
|
|
|
550
|
-
## Phase 6:
|
|
551
|
+
## Phase 6: Verification passes (mandatory)
|
|
551
552
|
|
|
552
|
-
Foreman
|
|
553
|
+
Foreman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.
|
|
553
554
|
|
|
554
|
-
|
|
555
|
+
### How to run them (hosts differ)
|
|
555
556
|
|
|
556
|
-
|
|
557
|
+
| Host capability | What you must do |
|
|
558
|
+
|-----------------|------------------|
|
|
559
|
+
| **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. |
|
|
560
|
+
| **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**. |
|
|
561
|
+
|
|
562
|
+
**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.
|
|
563
|
+
|
|
564
|
+
**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):
|
|
565
|
+
|
|
566
|
+
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.
|
|
557
567
|
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.
|
|
558
568
|
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.
|
|
559
569
|
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.
|
|
560
570
|
|
|
561
|
-
Each
|
|
571
|
+
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.
|
|
562
572
|
|
|
563
573
|
## Pre-Dispatch Checklist
|
|
564
574
|
|
|
565
575
|
Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
|
|
566
576
|
|
|
577
|
+
- [ ] **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
|
|
567
578
|
- [ ] **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
|
|
568
579
|
- [ ] **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
|
|
569
580
|
- [ ] **DOM outline** included for non-trivial sections (wrappers, order)
|
|
@@ -600,7 +611,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
|
|
|
600
611
|
- **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.
|
|
601
612
|
- **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."
|
|
602
613
|
- **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.
|
|
603
|
-
- **Don't
|
|
614
|
+
- **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.
|
|
615
|
+
- **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.
|
|
604
616
|
|
|
605
617
|
## Completion
|
|
606
618
|
|
|
@@ -609,7 +621,8 @@ When done, report:
|
|
|
609
621
|
- Total components created
|
|
610
622
|
- Total spec files written (should match components)
|
|
611
623
|
- Total assets downloaded (images, videos, SVGs, fonts)
|
|
624
|
+
- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)
|
|
612
625
|
- Build status (`npm run build` result)
|
|
613
626
|
- Visual QA results (any remaining discrepancies)
|
|
614
|
-
- **
|
|
627
|
+
- **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**
|
|
615
628
|
- Any known gaps or limitations
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
1. **Reference URL(s)** — Every `http://` or `https://` token (clone each site; use `docs/research/<hostname>/` when there are multiple).
|
|
10
10
|
2. **SaaS idea** — All remaining text that is not a URL (often quoted): product pitch for hero and key marketing lines.
|
|
11
11
|
|
|
12
|
-
You are a **foreman walking the job site** — write specs per section, dispatch builders in parallel where possible, **
|
|
12
|
+
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**.
|
|
13
13
|
|
|
14
14
|
## Step 0 — Persist Launchframe inputs
|
|
15
15
|
|
|
@@ -18,6 +18,7 @@ Before reconnaissance, write or update:
|
|
|
18
18
|
- `src/lib/launchframe-config.ts` — `LAUNCHFRAME_SOURCE_URL` (primary URL, usually first), `LAUNCHFRAME_SAAS_IDEA`
|
|
19
19
|
- `launchframe.context.json`
|
|
20
20
|
- `docs/research/LAUNCHFRAME.md` — URLs and SaaS idea
|
|
21
|
+
- **`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.
|
|
21
22
|
|
|
22
23
|
## SaaS copy overlay (Phase 4 assembly and final polish)
|
|
23
24
|
|
|
@@ -33,7 +34,7 @@ The target page(s) are the URL(s) you parsed in Pre-Flight. Clone exactly what's
|
|
|
33
34
|
- **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
|
|
34
35
|
- **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
|
|
35
36
|
- **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.
|
|
36
|
-
- **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.
|
|
37
|
+
- **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.
|
|
37
38
|
- **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.
|
|
38
39
|
|
|
39
40
|
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
|
|
|
542
543
|
5. Test all interactive behaviors: scroll through the page, click every button/tab, hover over interactive elements
|
|
543
544
|
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`
|
|
544
545
|
|
|
545
|
-
Only after this visual QA pass is the clone ready for **
|
|
546
|
+
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.
|
|
546
547
|
|
|
547
|
-
## Phase 6:
|
|
548
|
+
## Phase 6: Verification passes (mandatory)
|
|
548
549
|
|
|
549
|
-
Foreman
|
|
550
|
+
Foreman skim is insufficient — someone must execute **all four prompts in `LAUNCHFRAME_SUBAGENTS.md`** before you call Launchframe complete.
|
|
550
551
|
|
|
551
|
-
|
|
552
|
+
### How to run them (hosts differ)
|
|
552
553
|
|
|
553
|
-
|
|
554
|
+
| Host capability | What you must do |
|
|
555
|
+
|-----------------|------------------|
|
|
556
|
+
| **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. |
|
|
557
|
+
| **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**. |
|
|
558
|
+
|
|
559
|
+
**Do not** mark Launchframe done because verification “doesn’t apply” — it always applies. **Prompts live in Markdown** so runs are repeatable and auditable.
|
|
560
|
+
|
|
561
|
+
**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):
|
|
562
|
+
|
|
563
|
+
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.
|
|
554
564
|
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.
|
|
555
565
|
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.
|
|
556
566
|
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.
|
|
557
567
|
|
|
558
|
-
Each
|
|
568
|
+
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.
|
|
559
569
|
|
|
560
570
|
## Pre-Dispatch Checklist
|
|
561
571
|
|
|
562
572
|
Before dispatching ANY builder agent, verify you can check every box. If you can't, go back and extract more.
|
|
563
573
|
|
|
574
|
+
- [ ] **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
|
|
564
575
|
- [ ] **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
|
|
565
576
|
- [ ] **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
|
|
566
577
|
- [ ] **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:
|
|
|
597
608
|
- **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.
|
|
598
609
|
- **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."
|
|
599
610
|
- **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.
|
|
600
|
-
- **Don't
|
|
611
|
+
- **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.
|
|
612
|
+
- **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.
|
|
601
613
|
|
|
602
614
|
## Completion
|
|
603
615
|
|
|
@@ -606,7 +618,8 @@ When done, report:
|
|
|
606
618
|
- Total components created
|
|
607
619
|
- Total spec files written (should match components)
|
|
608
620
|
- Total assets downloaded (images, videos, SVGs, fonts)
|
|
621
|
+
- **`public/images/` (and similar)** — explicit list of **authored narrative** raster files produced for Brand identity slots (paths + intent)
|
|
609
622
|
- Build status (`npm run build` result)
|
|
610
623
|
- Visual QA results (any remaining discrepancies)
|
|
611
|
-
- **
|
|
624
|
+
- **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**
|
|
612
625
|
- Any known gaps or limitations
|
package/AGENTS.md
CHANGED
|
@@ -33,7 +33,7 @@ A reusable template for reverse-engineering any website into a clean, modern Nex
|
|
|
33
33
|
## Design Principles
|
|
34
34
|
- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
|
|
35
35
|
- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later
|
|
36
|
-
- **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**:
|
|
36
|
+
- **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`
|
|
37
37
|
- **Beauty-first** — every pixel matters
|
|
38
38
|
- **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**
|
|
39
39
|
|
|
@@ -60,6 +60,7 @@ scripts/ # Asset download scripts
|
|
|
60
60
|
|
|
61
61
|
## MOST IMPORTANT NOTES
|
|
62
62
|
- 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.
|
|
63
|
+
- **`/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.
|
|
63
64
|
- After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
|
|
64
65
|
- 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).
|
|
65
66
|
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# Launchframe — subagent verification prompts
|
|
2
|
+
|
|
3
|
+
**How to use this file:** Before Phase 6, the foreman **fills or refreshes** the four prompt blocks below (they must stay **self-contained** so a subagent never needs to open the skill file). Then either:
|
|
4
|
+
|
|
5
|
+
- Spawn **four parallel** readonly agents (`Task` / team subagents / Claude Code checkers in separate worktrees), each given **one** `## Prompt — Pass N` section only, **or**
|
|
6
|
+
- Run the same four prompts **yourself** in order if the host has no subagents.
|
|
7
|
+
|
|
8
|
+
Each executor appends results to **`docs/research/LAUNCHFRAME_VERIFICATION.md`** using the **output contract** at the bottom.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Prompt — Pass 1 — Raster media & icons
|
|
13
|
+
|
|
14
|
+
You are a **readonly verification subagent** for a Next.js clone. Repository root is this project.
|
|
15
|
+
|
|
16
|
+
**Rubric — execute fully:**
|
|
17
|
+
|
|
18
|
+
1. **Narrative slots:** Inventory every reference marketing/lifestyle/card/hero **image role** described in `docs/research/` specs vs **committed files** under `public/` (e.g. `public/images/...`) actually referenced from `src/`. **FAIL** if the reference showed a photo/panel thumbnail and this clone relies on placeholders, empty `src`, or bare gradients only.
|
|
19
|
+
2. List every **raster** and **video poster** and every **authored SVG / component used as an icon** referenced from `src/` (`app/`, `components/`). Confirm files exist and paths resolve.
|
|
20
|
+
3. 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.
|
|
21
|
+
4. For SVGs/icons: `viewBox`, strokes, fills, `currentColor`, sprite usage must match specs — flag opportunistic Lucide substitutions unless the spec explicitly allowed them. Flag wrong crops, missing layers, or lazy `next/image` `fill` misuse.
|
|
22
|
+
|
|
23
|
+
Return the **output contract** below.
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Prompt — Pass 2 — HTML / DOM structure
|
|
28
|
+
|
|
29
|
+
You are a **readonly verification subagent** for a Next.js clone.
|
|
30
|
+
|
|
31
|
+
**Rubric — execute fully:**
|
|
32
|
+
|
|
33
|
+
Diff **PAGE_TOPOLOGY.md** (or equivalent topology in `docs/research/`) plus component specs against the React tree: **section order**, **wrapper count**, **sibling order**, scroll/sticky containers. Any flattened structure that changes stacking or scroll is **FAIL** until fixed.
|
|
34
|
+
|
|
35
|
+
Return the **output contract** below.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Prompt — Pass 3 — CSS parity
|
|
40
|
+
|
|
41
|
+
You are a **readonly verification subagent** for a Next.js clone.
|
|
42
|
+
|
|
43
|
+
**Rubric — execute fully:**
|
|
44
|
+
|
|
45
|
+
Spot-check **hero, nav, first fold, footer** (and any section flagged risky in specs) against component CSS: tokens in `src/app/globals.css`, arbitrary Tailwind vs measured px from specs, **`@keyframes`** presence where required. Run **`npm run lint`** and **`npm run typecheck`**; failures = **FAIL** until green.
|
|
46
|
+
|
|
47
|
+
Return the **output contract** below.
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Prompt — Pass 4 — Motion & interaction
|
|
52
|
+
|
|
53
|
+
You are a **readonly verification subagent** for a Next.js clone.
|
|
54
|
+
|
|
55
|
+
**Rubric — execute fully:**
|
|
56
|
+
|
|
57
|
+
Re-walk **`docs/research/BEHAVIORS.md`** and the motion audit JSON under `## Motion audit (Chrome MCP)`: headers, carousels, scroll-driven UI, smooth-scroll libraries. Phase 5 motion QA must be **confirmed** against the reference behavior described in research — not assumed.
|
|
58
|
+
|
|
59
|
+
Return the **output contract** below.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Output contract (every pass)
|
|
64
|
+
|
|
65
|
+
Append to **`docs/research/LAUNCHFRAME_VERIFICATION.md`**:
|
|
66
|
+
|
|
67
|
+
```markdown
|
|
68
|
+
### Pass N — <short name>
|
|
69
|
+
- Findings: (bullets with `path:line` where possible)
|
|
70
|
+
- VERDICT: PASS | FAIL
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
If the file does not exist, create it with a top heading `# Launchframe verification log`.
|