---
name: brand-mock
description: Generates branded order-tracking page and email HTML mocks from a brand URL. Use when the user provides a website URL and asks for an order tracking mock, tracking email mock, or "make a mock for {brand/URL}". Scrapes logo, product images, promo imagery, fonts, and brand colors from the live site, then fills the two order-tracking templates with that content.
license: Proprietary
allowed-tools: Read, Write, Edit, Bash, Grep, Glob, WebFetch
---

# Brand Mock Skill

Given a brand URL, produce two filled HTML files (an order tracking **page** and an order tracking **email**) customized with that brand's logo, product images, typography, and colors.

## When to use

Trigger this skill when the user:
- Gives a URL and asks for an order tracking mock/email
- Says "mock this brand", "make tracking pages for {brand}", "fill the templates for {url}"

## Inputs

- **Required:** a brand URL (homepage, PDP, or collection page)
- **Optional:** brand name override, accent color override, specific product URL to feature in the "Items in package" block

## Outputs

Two files written to `<cwd>/output/<brand-slug>/` where `<cwd>` is the **consumer's current working directory** (never inside the skill directory — skills are read-only):
- `<brand-slug>-order-tracking-page.html`
- `<brand-slug>-order-tracking-email.html`

`<brand-slug>` is the lowercase, hyphenated brand name (e.g. `madhappy`, `allbirds`). Infer it from the URL's domain or the site's `<title>` / og:site_name, whichever is cleaner.

## Templates

Two source templates live in `templates/`:
- `templates/order-tracking-page.html` — 7×9 CSS grid page
- `templates/order-tracking-email.html` — 600px table-based email

Each template has a comment block at the top listing every `{{TOKEN}}`. **Read that comment block first** — it is the contract. Do not invent tokens; do not skip required ones.

## Workflow

### 1. Open the site and gather assets

Use the Chrome browser tools (the MCP server `claude-in-chrome` is assumed available; if not, fall back to `WebFetch`). Before any `mcp__claude-in-chrome__*` call, load it via `ToolSearch` with `select:mcp__claude-in-chrome__<tool_name>`.

Steps:
1. `mcp__claude-in-chrome__tabs_context_mcp` — check existing tabs.
2. `mcp__claude-in-chrome__tabs_create_mcp` with the brand URL.
3. Wait for load, then extract:
   - **Logo** — check `<link rel="icon">`, `<img>` in header, og:logo, og:image. Prefer a transparent PNG/SVG from the header. Save the absolute URL.
   - **Product images** — scan PDP thumbnails, collection grid, or og:image. Need 3–5 absolute URLs. Prefer square or 4:5 product shots with clean backgrounds.
   - **Promo/lifestyle images** — hero banners, homepage editorial imagery. Need 3 absolute URLs for the page template's right-column promo tiles.
   - **Fonts** — read `<link href="fonts.googleapis.com/…">`, `@font-face` declarations in stylesheets, or computed `font-family` on `body` / `h1`. Capture the primary font stack (e.g. `"Neue Haas Grotesk", Helvetica, sans-serif`).
   - **Brand accent color** — computed color of the primary CTA button on the page. If none found, use the dominant non-neutral color from the logo.
   - **Brand text color** — computed color on `body`, or `#111111` if near-black.
   - **Company name** — og:site_name → `<title>` → domain.

Use `mcp__claude-in-chrome__javascript_tool` to run small snippets in the page context, e.g.:
```js
// primary button color
(() => {
  const btn = document.querySelector('button, a[class*=btn], a[class*=button]');
  return btn ? getComputedStyle(btn).backgroundColor : null;
})()
```

If any asset isn't found on the landing page, navigate to `/products`, `/shop`, or a PDP and retry. If still missing after two attempts, fall back to sensible defaults (see §4).

### 2. Pick which assets go where

- **Page template:**
  - `{{LOGO_IMAGE_URL}}` → header logo
  - `{{PRODUCT_IMAGE_URL}}` → the one "in package" product (pick the most hero-worthy product)
  - `{{UPSELL_1_IMAGE_URL}}`, `{{UPSELL_2_IMAGE_URL}}` → two *other* products
  - `{{PROMO_1/2/3_IMAGE_URL}}` → lifestyle/editorial images (not plain product cutouts — these tiles have text overlays, so pick imagery with room to breathe)

- **Email template:**
  - `{{LOGO_IMAGE_URL}}` → header logo
  - `{{UPSELL_1_IMAGE_URL}}`, `{{UPSELL_2_IMAGE_URL}}` → two products

### 3. Write reasonable copy

Copy tokens (`{{DELIVERY_STATUS}}`, `{{UPSELL_TITLE}}`, etc.) should match the brand's voice. Look at the site's microcopy for tone. Sensible defaults:
- `{{DELIVERY_STATUS}}` → "On the way" (page) / "Your order is on the way" (email)
- `{{ESTIMATED_DAY_OF_WEEK}}` / `{{ESTIMATED_MONTH}}` / `{{ESTIMATED_DAY_NUMBER}}` → pick a date ~3 days out
- Timeline steps 1–4: "Order placed" / "Shipped" / "Out for delivery" / "Delivered"
- `{{UPSELL_TITLE}}` → "You may also like"
- `{{SIGNUP_TITLE}}` → "Get updates about your delivery."
- `{{SIGNUP_BUTTON_TEXT}}` → "Sign up"
- `{{TRACKING_BUTTON_TEXT}}` → "Track package" (page) / "Track your package" (email)
- `{{PROMO_N_TEXT}}` → short punchy copy (2–5 words) reflecting the promo image. Leave blank if imagery speaks for itself.

### 4. Defaults when scraping fails

| Token | Default |
|---|---|
| `{{BRAND_TEXT_COLOR}}` | `#111111` |
| `{{BRAND_ACCENT_COLOR}}` | `#111111` |
| `{{PAGE_BG_COLOR}}` | `#f5f5f5` |
| `{{EMAIL_BG_COLOR}}` | `#f5f5f5` |
| `{{CARD_BG_COLOR}}` | `#ffffff` |
| Font | `Arial, Helvetica, sans-serif` (page template already does this — only override if brand has a distinctive font) |

### 5. Apply the brand font (optional but nice)

If the brand uses a Google Font, inject a `<link>` into the `<head>` of the **page** template and add `font-family` to the `body` rule. Don't touch the email template's fonts — email clients strip most web fonts; keep `Arial, Helvetica, sans-serif` there.

Example injection into the page template `<head>`:
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
```
And in the `<style>` block, update:
```css
body { font-family: "Inter", -apple-system, sans-serif; }
```

### 6. Fill and write

1. Read `templates/order-tracking-page.html` and `templates/order-tracking-email.html`.
2. Replace every `{{TOKEN}}` with the gathered value. **Every token must be replaced** — if a placeholder remains, the file is broken. If you have no value, use the default from §4 or drop the element (e.g. omit the `{{UPSELL_SUBTITLE}}` line rather than leaving the token).
3. Create `<cwd>/output/<brand-slug>/` (in the consumer's project root) if missing.
4. Write both files as `<brand-slug>-order-tracking-page.html` and `<brand-slug>-order-tracking-email.html`.

### 7. Report back

Give the user:
- The two absolute output paths
- The brand slug used
- A short summary of scraped assets (logo URL, # of product images, accent color, font)
- Any fallbacks applied

## Verification checklist

Before reporting done:
- [ ] No `{{` remains in either output file (grep for `{{`)
- [ ] All image URLs are absolute and begin with `https://`
- [ ] Accent color is a valid hex
- [ ] Files open in a browser without broken images (spot-check by fetching one image URL with curl / `WebFetch`)

## Edge cases

- **Site blocks headless access:** fall back to `WebFetch` on the raw HTML and parse with string ops. You'll get less info but usually enough for logo + og:image.
- **Brand has no product catalog on the URL given:** try `{root}/products`, `{root}/shop`, or `{root}/collections/all`.
- **Only one good product image:** duplicate it across upsell slots rather than leaving placeholders. Note the duplication in the report.
- **All promo imagery is the same as product imagery:** acceptable; the overlay text still differentiates the tiles.

## Files in this skill

```
brand-mock/                                # skill root (read-only)
├── SKILL.md                               # this file
└── templates/
    ├── order-tracking-page.html           # source template (do not edit)
    └── order-tracking-email.html          # source template (do not edit)
```

Generated artifacts are written to the **consumer's project**, not the skill directory:

```
<consumer-project>/
└── output/
    └── <brand-slug>/
        ├── <brand-slug>-order-tracking-page.html
        └── <brand-slug>-order-tracking-email.html
```