# Customization checklist — Maqueen Lab

This file was generated by `apply-template.mjs`. The template substituted
identifiers (product name, URLs, prices, version) but **not** feature
content. Work through the list below before publishing.

Run `node <path-to-template>/verify-clean.mjs` from this folder at any
point to scan for leftover template vocabulary. Exit code 0 = clean.

---

## 🖨 Printables — rewrite content
Each file starts with a `<!-- REWRITE PER PRODUCT -->` banner. Delete
the banner **after** the rewrite. The visual structure is yours to keep;
only the copy, steps, shortcuts, and examples need changing.

- [ ] `etsy-package/classroom-poster.html` — title + 5 big steps + footer motto
- [ ] `etsy-package/quickstart-card.html` — 5-minute setup sequence
- [ ] `etsy-package/shortcuts-cheatsheet.html` — keyboard shortcuts, product-specific actions
- [ ] `etsy-package/lesson-plan-template.html` — sample 45-minute lesson body
- [ ] `etsy-package/sticker-sheet.html` — 30 achievement badges
- [ ] `etsy-package/README-quickstart.html` — buyer welcome page + "First 3 things to do"

## 🖼 Listing mockups — rewrite mockups 2-7

- [ ] `etsy-package/etsy-listing-mockups.html`
   - M1 hero is identifier-templated; only the screenshot + compat badge likely needs a product-specific tweak
   - M2 (16-cell feature grid) — replace all cells with product features
   - M3 (teacher pitch) — rewrite for your audience
   - M4 (kid pitch) — rewrite copy + emojis
   - M5 (What's in the ZIP) — match actual ZIP contents
   - M6 (themes / personalities / variants)
   - M7 (trilingual or privacy or whatever angle fits)

## 📌 Pinterest pins
- [ ] `etsy-package/seller-only/pinterest-pins.html` — 4 portrait pins: hero, audience pitch, ZIP contents, features/languages

## 🛒 Seller docs (pasted into Etsy — important)
- [ ] `etsy-package/seller-only/ETSY_LISTING.md` — title, 13 tags, description, compare table, FAQ
- [ ] `etsy-package/seller-only/ETSY_LISTING.html` — HTML twin of the .md (must match)
- [ ] `etsy-package/seller-only/ETSY-1MIN-PLAYBOOK.md` — 60s video script + shot list
- [ ] `etsy-package/seller-only/ETSY_PUBLISH_GUIDE.html` — photo checklist (11 photo filenames often need renaming)

## 🎥 Video playbook (FR/AR)
- [ ] `etsy-package/seller-only/etsy-playbook.html` — EN video playbook
- [ ] `etsy-package/seller-only/etsy-playbook-fr.html` — French
- [ ] `etsy-package/seller-only/etsy-playbook-ar.html` — Arabic (RTL)

## 🎬 Video production tools (60-sec shoot)
These three companion files turn the playbook into an actual shoot. Rewrite
scene content per product; keep the 8-scene structure and time boundaries.

- [ ] `etsy-package/seller-only/video-teleprompter.html` — interactive HTML
   teleprompter. Open on a second monitor, press `F` for fullscreen, `Space`
   for a 3-2-1 countdown then auto-advance through 8 scenes. Shows SAY line
   large, DO/CLICK cues below, live clock, progress bar (turns red past 55s).
   Rewrite the `SCENES` array in the inline `<script>` tag.
- [ ] `etsy-package/seller-only/video-shoot-card.html` — A4 print-ready cheat
   sheet. Pre-flight checklist + Etsy specs + 8-row arc + cheat card on one
   page. Rendered to PNG by `build-package.js` (seller-only, not in ZIP).
   Rewrite the pre-flight items and the arc table; specs table stays.
- [ ] `etsy-package/tools/captions/video-captions-en.srt` — burn-in subtitle
   track for CapCut/DaVinci. Rewrite the 8 subtitle blocks to match your
   teleprompter's SAY lines verbatim. Timings (0-3 / 3-10 / 10-20 / 20-30
   / 30-40 / 40-50 / 50-55 / 55-60) should match scene boundaries.
- [ ] `etsy-package/tools/captions/video-captions-fr.srt` — French twin
- [ ] `etsy-package/tools/captions/video-captions-ar.srt` — Arabic twin (RTL;
   lines are prefixed with U+200F RLM markers — preserve them)
- [ ] `etsy-package/tools/generate-video.mjs` — ffmpeg-based generator
   that builds a 1080×1920 9:16 MP4 from 5 screenshots + EN captions.
   Screen-only v1 — replace with real hardware footage once filmed. Requires
   ffmpeg on PATH. Rewrite title/CTA text in the `SCENES` array if the
   `Maqueen Lab` / `Every component, live in your browser` substitutions don't fit your design.
   Run: `node etsy-package/tools/generate-video.mjs`

## 📸 Marketing capture pipeline (13 modes + helpers)

All outputs land in `etsy-package/seller-only/screenshots/` and
`etsy-package/output/`. Each tool is independently runnable; the full
pipeline is:

   capture → (optional) annotate → theme-morph → generate-video → visual-regress

- [ ] `capture-screenshots.mjs` — Playwright-based capturer covering all
   tabs × 2 (standard + synthetic live-looking state), before/after
   state pairs, theme variants, model variants, offline proof, SVG
   callout annotations, and multi-aspect (9:16/1:1/2:3/16:9) outputs.
   **CONFIG-DRIVEN — do not edit the script.** Edit `capture-config.json`
   (same folder). A filled-in reference is in
   `capture-config.example.json`. The `_rewrite` field at the top of
   the config lists the 10 sections you'll need to adjust for your
   product's DOM.
   Modes: `tabs synthetic pairs themes models offline annotated aspects all`.
- [ ] `qr-inject.mjs` — injects UTM-tagged QR codes into each printable.
   Default `--preview` writes to `output/printables-with-qr/`; add `--inplace`
   to modify the source HTMLs directly (reversible via git).
- [ ] `theme-morph.mjs` — renders a 1:1 square crossfade loop through
   your theme captures. MP4 + GIF. Requires `screenshot-theme-*.png`
   from the theme capture mode.
- [ ] `visual-regress.mjs` — md5 identity check + ffmpeg side-by-side
   diffs. Use `--baseline` to snapshot current state; later runs exit
   non-zero if any screenshot drifted. Fully generic, no rewrite needed.
- [ ] `hero-compose.mjs` + `hero-specs.json` — A/B hero image compositor
   (1500×1500 Etsy thumbnails). Rewrite `hero-specs.json` with 2-5
   per-audience variants; Etsy's image-order experiment picks the winner.
- [ ] `generate-gifs.mjs` — 5-second demo GIFs for Etsy image slots +
   Pinterest. **Rewrite** the `RECIPES` object per product — each recipe's
   `act(page)` function animates features of YOUR app.
- [ ] `generate-datasets.mjs` — 100 synthetic sensor CSVs + teacher
   README. Converts hardware-required product → hardware-optional.
   **Rewrite** the `SCENARIOS` object to match your product's sensor types.
- [ ] `watermark-zip.mjs` — per-buyer ZIP with buyer name + order ID baked
   into README-quickstart.html + LICENSE. Usage:
   `node tools/watermark-zip.mjs --buyer "Alice Smith" --order "12345"`.

**Prereq for capture:** `npm i --save-dev @playwright/test qrcode && npx playwright install chromium`.

## 📜 Buyer license
- [ ] `etsy-package/LICENSE.txt` — clauses 9 + 10 mention "printable materials"; check the list matches your actual printables. Clause 3 trademark disclaimer — update if your product uses different trademarks than BBC micro:bit.

## 📸 Screenshots
- [ ] Capture a real screenshot of your product's main UI → `assets/app-screenshot.png` (referenced by the hero mockup + pin 1)

## ⚙️ Last steps
- [ ] `npm install --save-dev @playwright/test qrcode && npx playwright install chromium`
- [ ] `node etsy-package/build-package.js` — renders all mockups + builds the ZIP
- [ ] `node <template-path>/verify-clean.mjs` — must exit clean (code 0)
- [ ] (Optional) `gh api -X POST "repos/abourdim/maqueen-lab/pages" -f 'source[branch]=main' -f 'source[path]=/'` — enable GitHub Pages so the live demo URL in the listing actually works
- [ ] `git add -A && git commit -m "..." && git push`
- [ ] Follow `etsy-package/seller-only/TODO.md` for the three manual pre-launch items (real product photo, 60s video, LAUNCH10 promo code)

---

## 🔧 Tuning the verify script per product

If `verify-clean.mjs` flags a term that's legitimate for your product
(e.g. "gamepad" for a remote-controller app, "led matrix" for an LED
painter, "sensors" for a sensor-mapping app), add it to
`product.json`:

```json
"ALLOWED_TERMS": ["gamepad", "led matrix"]
```

Re-run the verifier. Flagged rules whose label matches an allowed term
are skipped.