---

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.:

// 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>:

<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:

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