Before/After engine — capture, compress, and ship a case-study tile

Receipts

Proven in production.

• DJ Jackie J — bland WordPress to a three-offer entertainment brand

  Took over a 12-year wedding & event DJ's online presence — a half-built WordPress site, three Instagram handles she manually managed, inquiries that took 24+ hours to answer. Shipped a real marketing site, wired consent-first SMS opt-ins for repeat-booking, and stood up an agent backbone that drafts ads, scrapes local OC event listings, and pushes inquiries to her phone the moment they land. Then the brand outgrew the booth: 2026-07 shipped Jackie J & The Diamonds — a configurable 5–11-piece live show band — plus an Acoustic Duo, turning a DJ site into a three-offer entertainment brand (DJ · live band · acoustic) with a cinematic /band page and a live promo reel, merged and live on both domains.

  • 5★ across The Knot / WeddingWire / Thumbtack preserved through cutover
  • Inquiry → notification latency: 24h → <30s (push)
• Porto Verde — a parked domain to a procurement-grade cannabis-lab site, in one build (plus a zero-downtime domain migration)

  Porto Verde is a licensed Long Beach cannabis & hemp micro-processor — extraction, co-pack, and branding for other people's brands. It had a registered domain and a real lab, and nothing online: no brand, no services, no way for a brand to reach them. This was a greenfield build, not a rebuild — a from-scratch Next.js 15 site with an industrial-premium design system, nine in-house service pages plus equipment / compliance / packaging / facility / about, a 100 MB browser-direct artwork-intake pipeline, and lead email wired straight into the owner's own self-hosted mail server. Built loud and honest: every unverifiable number — throughput, MOQ, the DCC license — ships as a visible TBC instead of an invented fact.

  • 0 pages → 21 routes shipped in one build (11 core pages + 9 service detail pages + 404)
  • 100 MB browser-direct artwork uploads (presigned to object storage, past Vercel's 4.5 MB function cap)
• Opulent Life — an Instagram-only sea-moss brand, given a website that actually sells

  Opulent Life is a Venice Beach boardwalk micro-brand making wildcrafted Irish sea moss gels and cold-pressed juices. Its entire web presence was a single Instagram account with a flyer graphic for a menu and "DM to order" as the whole storefront. This was a greenfield build, not a rebuild: a from-scratch Next.js 15 single-page site with all eleven products given real crawlable pages, an honest nutrient-grounded benefits section, and a full local-SEO surface — built by a fan-out of research + copy agents. Then it was folded into the oglife.app platform: its own subdomain (opulentseamoss.oglife.app), a self-hosted Stalwart inbox (opulentlife@oglife.app), a consumer Web-Push opt-in for drops and boardwalk locations, and a bright design system re-themed straight off the brand's own round logo to match the Instagram feed.

  • 0 websites → a 14-section single-page site on its own oglife.app subdomain
  • 11 products given real pages: 4 gels + 7 cold-pressed juices, real ingredients + prices as crawlable text

When to use it

Trigger phrases.

Any of these in the user's prompt should invoke this skill in Claude Code.

• Add a before/after for this rebuild
• Case-study tile for [site]
• Capture the before and after
• Ship the receipts for this migration
• New portfolio entry

What it needs

Required inputs.

• 01The legacy URL (or an honest 'no before' — brochure, IG profile, parked domain) and the rebuild URL
• 02The real numbers: commits, routes, tables, latency deltas — only what can be evidenced
• 03Client-attribution status — pendingApproval gates public listing until sign-off

The mechanism

Pipeline.

1. 01 · Capture

   Headless Chrome shoots both sites, four crops each.

   Hero crops (~1440×900 desktop + 390-wide mobile) and full-page tall captures (~1440×3000) for both URLs, compressed with cwebp -q82 into the per-slug asset directory. Age gates and consent walls on the AFTER side mean re-shoot past the overlay; on the BEFORE side they're often the most honest capture of the legacy UX there is. Sites whose win is motion get Path B: a Playwright-recorded video pair (AV1 + H.264, ≤500 KB) instead of a static diff.

2. 02 · Verify the URLs

   Prove which site is actually serving before writing a word.

   Check the AFTER host is really the rebuild (framework markers like __next, not a stray project squatting a similar name) and the BEFORE is really still the legacy stack (wp-content, builder markers). A capture of the wrong site poisons the whole case study — the anonymous-media capture run caught exactly this: the plausible-looking Vercel host was an unrelated app.

3. 03 · Write the typed entry

   One BeforeAfterEntry object — receipts-first, no adjectives without evidence.

   slug, summary, 3–4 metric chips, storyBeats (Problem → Insight → Build → Outcome, plus Pending when honest), countMetrics for the numbers that count up, highlights with kind/evidence/before/after, archStrip, oldStack/newStack, liveLinks, beforeUrl/afterUrl for the browser chrome. wakingHours only where autonomous surfaces genuinely exist. Client entries ship pendingApproval: true until sign-off.

4. 04 · Light the renderers

   The same data drives six surfaces with zero extra work.

   Tall pairs drive the index tile's scroll-sim (one tile plays at a time, session-locked, reduced-motion safe). Hero pairs drive the device-mosaic hero, the sticky story stage, the pixel-diff walkthrough, and hotspot pins. countMetrics drive the count-up receipts strip. All pure CSS/WAAPI — no motion library.

5. 05 · Ship gated

   Typecheck, build, preview — never straight to prod.

   pnpm typecheck && pnpm build must pass (noUncheckedIndexedAccess is on), assets stay inside the size budget, and the branch ships to a Vercel preview for the operator's approval. pendingApproval entries render noindex by direct URL only until the client signs off.

What lets it fan out

Connector stack.

With all of these MCP connectors wired, the mechanism runs end-to-end without human handoff. Without them, the handoff is a numbered Chrome checklist.

• Headless Chrome / Playwright (local)

  Available

  Stage 1 — captures and motion recordings, already scripted in the repo skill.

• Vercel MCP

  Available

  Stage 5 — preview deploys + domain checks without leaving the session.

• Wayback Machine API

  Partial

  Stage 1 for dead legacy sites — historical BEFORE captures when the original is already gone.

• GitHub MCP

  Needed

  Stage 5 — programmatic PR open + preview link comment for the approval loop.

Guardrails

Stop conditions.

The skill is predictable because it refuses to expand its own scope.

• stopNever fabricate a metric — a number without a source gets cut, not rounded.
• stopNever ship an AFTER screenshot dominated by an age gate or consent modal — re-capture past it.
• stopNever publish a client-owned entry without pendingApproval until written sign-off.
• stopNever point captures at an unverified host — prove the site is the rebuild first.
• stopPreview-only: the branch never merges itself.