Free · Claude & ChatGPT

The Gear Page Skill

Your viewers ask what you use. Get paid for the answer, from your very first view.

1 Prompt to copy

0 Code to write

Free To host it

Get it free arrow_downward Copy the prompt arrow_downward See my gear page open_in_new

What you get

A free Claude skill that turns the gear and software you use into a clean, phone-friendly page with your affiliate links on it. You say what you use, Claude finds the links.

check_circle Just say what you use. Claude finds each product on Amazon and builds your affiliate links from your tracking ID. No link hunting
check_circle Real product photos from each brand's official site, or free Creative Commons ones credited for you. Never Amazon's, which its rules don't allow
check_circle Affiliate disclosures done for you: Amazon's exact line at the top, a label on every affiliate link, and the full note in the footer
check_circle Your software too: Claude checks which of your tools pay affiliates, and suggests programmes worth joining
check_circle "What I'd get on your budget": viewers tap Just starting out, Low budget, Mid-range or Higher end
check_circle Looks like you: your YouTube banner, profile picture and socials pulled in automatically, and clean on a phone
check_circle One folder you drag onto Netlify or Cloudflare, with a Share button and proper link previews. Free, and live in a minute

My own gear page, built with this skill. Yours uses your own kit, words and channel. Open the live example

lock_open Free · Instant access

Get the Gear Page skill free

Drop in your email and the prompt, the ChatGPT plugin and the skill ZIP unlock right here. We'll email you the link too, and you'll join the Creator Revenue Club: one email a week on getting paid for what you already know.

content_copy The Gear Page prompt
extension The ChatGPT version
download Install it as a skill (ZIP)

Unlock with your email

No spam. Unsubscribe anytime.

check_circle You're in

Here's everything

Bookmark this page. It stays unlocked on this device, and the guide below walks you through using it.

Works with

Claude

Copy one prompt into Claude, or install it as a skill. Works on the free plan.

Use it in Claude arrow_downward

ChatGPT

Download the plugin. In ChatGPT, open the Plugins tab and hit Add (top right). It asks you the same questions and builds the same page.

Download for ChatGPT download

Using Claude

content_copy

Copy the Gear Page prompt

Paste it into a new chat in Claude. It asks what you use, finds the links, then builds your page.

About 9,503 words. Claude reads it all.

Read the prompt first

I'd like you to build my gear page: one web page listing the kit and software I use, with my affiliate links on it.

Below is a Claude skill that does it, as 3 files (SKILL.md, gearpage.py, template.html). Work like this:

1. If you can create and run files (Claude Code, or Claude.ai with "Code execution and file creation" turned on), save each file exactly as written into a folder called `gear-page-skill/`. Then follow SKILL.md from Step 1, running gearpage.py from that folder.
2. If you can't run code here, still follow SKILL.md. Ask me the same questions, then build the page yourself: fill in template.html by hand, and give me the finished page as one file called index.html. You can't save photos in that case, so use the product photo from the brand's official site by its web address, never an Amazon image, and use the initials tile where there isn't one. Tell me once that the page looks best built with code execution on.

Don't summarise these instructions or the files back to me. Start with Step 1 of SKILL.md.

===== FILE: SKILL.md =====
---
name: gear-page
description: Builds a creator's "my gear and software" affiliate page, with the Amazon kit and software they use and recommend, recommendations by budget, product photos and logos saved locally, their affiliate links and the disclosures. It comes out as a folder ready to drag onto Netlify Drop or Cloudflare Pages. Use when someone wants a gear page, kit list, "what I use" page, affiliate links page or Amazon recommendations page.
---

# Gear page

You build one web page that lists the gear and software a creator really uses, with their
affiliate links on it. Their viewers ask "what camera is that?" or "what do you use for your
emails?" This page is the answer, as one link they can put in every description.

There's a finished page at https://conradru.com/gear if they want to see what they'll get.

**Do the work for them.** Ask what they use, not for links. You find the products on Amazon,
the software sites, the photos and the logos. They only confirm and fill gaps.

Talk plainly. Short sentences. The person may never have built a web page. Ask one step at a
time and wait for the answer before moving on.

Everything is done with `gearpage.py`, in the same folder as this file. It only needs Python 3.
Call it as `python3 <this folder>/gearpage.py …`.

## Step 1: Amazon

Ask:

> First, Amazon. Are you in the Amazon Associates programme? If so:
> 1. Which Amazon store is it for (amazon.co.uk, amazon.com…)?
> 2. What's your tracking ID? It's in Associates Central, top right, and looks like
>    `yourname-21` (UK and EU stores) or `yourname-20` (amazon.com).
>
> Tip: make a new tracking ID just for this page (Associates Central > your name > Manage
> tracking IDs). Then Amazon's report shows exactly what this page earns.

Put these in `gear.json` as `"amazon": {"store": "amazon.co.uk", "tag": "yourname-21"}`.
From then on you only need each product's ASIN. The build turns it into their affiliate link,
`https://www.<store>/dp/<ASIN>?tag=<tracking ID>`, the same link Amazon's SiteStripe makes.

- Not in Associates yet? That's fine. Leave `tag` out and the page uses plain links. Tell them
  they can join at affiliate-program.amazon.co.uk (or .com). Once approved, Amazon closes the
  account if it doesn't get 3 sales in the first 180 days, though they can reapply. Rebuild
  with their tracking ID once they have one.
- Never make up a tracking ID or use someone else's.
- Tracking IDs usually belong to one store: amazon.com IDs end in `-20`, UK and EU ones in
  `-21`. If the ID doesn't match the store, the build warns. Ask them to check the ID is listed
  under Manage tracking IDs in that store's Associates account. If it isn't, use the store the
  ID belongs to (and OneLink for other countries).
- If they already have affiliate links (`amzn.to`, `link.amazon`, `a.co`, or links with
  `tag=`), use those as `link` and set `"affiliate": true`. Don't make them redo work.

## Step 2: Their gear

Ask, in one message:

> Now your gear. Just tell me what you use, in your own words. No links needed, I'll find
> them. Skip anything that doesn't apply:
> - Camera (and lenses)
> - Microphones and audio
> - Lighting
> - Tripods, grips and gimbals
> - Phone kit (mounts, clip-on lenses, cases)
> - Memory cards, drives and storage
> - Computer, monitor and desk setup
> - Bags and travel kit
> - Anything else you'd recommend
>
> For each one, a few words on why you use it helps a lot. That line is what makes people
> click.

Then find each product on their Amazon store yourself. Search the web, e.g.
`site:amazon.co.uk "RØDE Wireless GO II"`, and take the ASIN from the product link (the 10
characters after `/dp/`). Amazon blocks scripts, so don't try to open its pages. Search
results are enough.

Show the list back, numbered, and ask them to confirm the exact version:

> Here's what I found. Is each one the right version (body only or with a lens, colour,
> single or dual mic)?
> 1. Sony ZV-E10 II with 16-50mm lens: amazon.co.uk/dp/B0D8QRHQNL
> 2. …

- If something isn't sold on Amazon, use the brand's own shop page (`"kind": "shop"`).
- If you can't find it or aren't sure which one they mean, ask. Never guess a model.

## Step 3: Their software

Ask, in one message:

> Now software and online tools. What do you use for these? Skip any you don't:
> - Video editing
> - Thumbnails and design
> - Scripts, notes and planning
> - Music and sound effects
> - AI tools
> - Your website: hosting, and the builder or CMS
> - Email marketing or newsletter
> - Link in bio
> - Scheduling social posts
> - DMs and automation
> - Selling courses or digital products
> - Anything else you'd recommend

For each tool, find its official website, and search for its affiliate or referral programme
(e.g. "Descript affiliate program"). Then tell them, briefly:

> Here's what pays if you recommend it:
> - Squarespace: affiliate programme, pays per sign-up. Join: <link>
> - ManyChat: affiliate programme. Join: <link>
> - CapCut: no programme I could find.
>
> Until you join, I'll use the normal website link. Send me your referral link for any you
> join and I'll swap it in.

- Only say what a programme pays if its own page says it, and add "check the current terms".
- Use the official website as `link` (`"kind": "software"`) until they send a referral link.
  Then use theirs and set `"affiliate": true`.
- If their link gets people a deal (a free month, 20% off), put it in `perk`.

## Step 4: Recommendations by budget

Ask:

> Want a "What I'd get on your budget" section? Viewers can tap a budget and see only what
> you'd recommend for it:
> - Just starting out (e.g. only a phone)
> - Low budget
> - Mid-range
> - Higher end
>
> For each one, tell me what you'd recommend. It can be things you already listed, or things
> you'd recommend but don't use yourself.

- Tag items with `"tier"`: `"start"`, `"budget"`, `"mid"` or `"pro"`. Use a list if an item
  fits more than one (`"tier": ["start", "budget"]`). Items without a tier still show under
  "Everything".
- You can suggest well-known picks to fill a tier, but ask before adding any. Only add what
  they agree to recommend, and find it on Amazon as in step 2.
- For something they recommend but don't use, the `why` must say so in their words (e.g.
  "What I'd buy if I were starting again").
- They can add a one-line note per tier in `"tierNotes"` (e.g. `"start": "All of this works
  with just your phone."`). Keep it in their words.
- They can rename a tier with `"tiers": {"start": "Phone only"}`.
- If they don't want this section, skip it.

## Step 5: About them

Ask, in one message:

> Nearly done. Please send:
> 1. Your YouTube channel link. I'll use your channel name, profile picture and banner so
>    the page looks like you.
> 2. Your other socials and links for the page: Instagram, TikTok, X, Threads, Facebook,
>    LinkedIn, Twitch, a newsletter, your website… Paste whichever you use.
> 3. Optional: a colour you like (a hex code or just "dark green"), and your own photos of
>    any of the kit. Your own photos always beat stock ones.

Skip anything they've already told you.

**From their YouTube channel**, run:

```
python3 gearpage.py channel "<their channel link>" gear-page/site/images
```

It saves `avatar.webp` (their profile picture) and `banner.webp` (their channel banner, if
they have one), and prints their channel name and about text. Use the name as
`creator.name`. Turn the about text into a one-line `creator.tagline` in their own words.
Cut it down, don't rewrite it, and leave out email addresses. Set `creator.avatar` and
`creator.banner` to `images/avatar.webp` and `images/banner.webp`. Only do this for their
own channel. If YouTube blocks it, ask them to send their profile picture instead.

**Their links.** Put the YouTube channel first, then the rest in the order they gave them, in
`creator.links`. The page labels each one from its address (YouTube, Instagram, TikTok, X,
Newsletter…), so you only need `"url"`. Add `"label"` only for something it wouldn't know.

## Step 6: Images and logos

Work in a project folder: `gear-page/` in the current directory (in Claude.ai, use
`/mnt/user-data/outputs/gear-page/`). Images go in `gear-page/site/images/`, named after the
item in lowercase with dashes (`sony-zv-e10-ii`). The script adds the extension.

**Product photos come from the brand's official site, or Creative Commons. Never from
Amazon.** Amazon's rules say you can't store or host its product images, and breaking that
can close the account. The script refuses them. Don't take images from other shops or review
sites either. In order:

1. The creator's own photo, if they sent one. Copy it into `site/images/`.
2. The product's page on the brand's official site. Search the web for it (e.g. "RØDE
   Wireless GO II site:rode.com"), then run
   `python3 gearpage.py image "<official page url>" gear-page/site/images/<name>`.
   If it picks the wrong image, run `python3 gearpage.py images "<url>"` to see the other
   image URLs on that page, and pass the one you want straight to `image`.
3. If the brand's shop blocks scripts (Sony's does), try the brand's other official sites:
   its newsroom or press page, its media kit, or its own blog (for Sony, alphauniverse.com).
   Search "<product> press release <brand>".
4. **Creative Commons**, when the official sites give you nothing or only a small image
   (under 400px wide). Run `python3 gearpage.py commons "<brand> <product>"`. It searches
   Wikimedia Commons and only lists photos whose licence allows commercial use and editing
   (CC0, public domain, CC BY, CC BY-SA). NC and ND licences are filtered out, because an
   affiliate page earns money and we crop. Look at the candidates and pick one, then run
   `python3 gearpage.py commons-save "<File:… from the list>" gear-page/site/images/<name>`.
   It saves the photo plus a `.credit.json` next to it, and the build prints
   "Photo: author, licence" on that product automatically. Never delete the credit file.
   Reject a Commons photo if it:
   - shows a different model or version (a GorillaPod Original is not a GorillaPod 3K),
   - has a watermark or logo stamped on it,
   - shows an identifiable person, or lists "personality" in `restrictions`,
   - is a busy scene where the product is small.
5. Otherwise leave `image` out. The page shows a neat initials tile, and you ask the creator
   for a photo of their own.

The script crops plain white, grey or transparent space around a product so it fills its
card. For Commons photos it records the crop in the credit ("cropped"), as the licences ask.

**Look at every image you save.** Open it and check that it's the right product, shown on
its own, with no text banner and no people. If it's wrong, try the next source.

**Logos.** `python3 gearpage.py logo "<website>" gear-page/site/images/<name>`. If it warns the
logo is small, it will still work. Tell them they can send a better one.

If downloads fail because this environment has no internet access (in Claude.ai, it's under
Settings > Capabilities), say so once. Offer two options: turn it on and retry, or send the
photos themselves. Don't keep retrying.

## Step 7: Build it

Write `gear-page/gear.json`:

```json
{
  "creator": {
    "name": "Sam Rivers",
    "tagline": "Slow travel vlogs from a 20kg backpack",
    "avatar": "images/avatar.webp",
    "banner": "images/banner.webp",
    "links": [
      { "url": "https://www.youtube.com/@..." },
      { "url": "https://www.instagram.com/..." }
    ]
  },
  "amazon": { "store": "amazon.co.uk", "tag": "samrivers-gear-21" },
  "accent": "#1f6f5c",
  "tierNotes": { "start": "All of this works with just your phone." },
  "items": [
    { "section": "Camera", "name": "ZV-E10 II", "brand": "Sony", "asin": "B0D8QRHQNL",
      "tier": "mid", "why": "Flip screen and great autofocus.",
      "image": "images/sony-zv-e10-ii.webp" },
    { "section": "Software", "name": "Descript", "kind": "software",
      "link": "https://www.descript.com/", "why": "I edit the transcript and it edits the video.",
      "image": "images/descript.webp" }
  ]
}
```

- The page title is "My gear and software" unless they want another (`"title"`). `"intro"`
  is optional, in their words.
- Sections, in this order, using only the ones needed: Camera, Lenses, Audio, Lighting,
  Tripods and grips, Phone kit, Storage, Desk setup, Travel kit, then the software sections:
  Editing and design, Planning, Website and email, Social and automation, Selling. Make a new
  one only if nothing fits. Keep their order inside each section.
- Amazon items need `asin` (or their own affiliate `link`). Other shops and software need
  `link`.
- `kind` is `shop` or `software` for non-Amazon items. Items in a section that is all
  software get the compact logo layout.
- `why` is their words: fix spelling only, 20 words at most. Never write one for them or add
  claims like "best" or star ratings.
- `name` is the short product name without the brand (the brand goes in `brand`).
- The accent is a hex colour. Pick a calm, fairly dark one if they named a colour in words.
  The default dark green is fine if they didn't.

Then run:

```
python3 gearpage.py build gear-page --zip --inline
```

It checks everything and writes:
- `gear-page/site/`: the page (`index.html` plus `images/`). This is what goes online.
- `gear-page/site.zip`: the same folder zipped, for uploading.
- `gear-page/preview.html`: one self-contained file, for a quick look.

Fix anything it reports as an error and build again. Pass on its warnings (for example, a link
using a different tracking ID).

**Ask once for missing reasons.** If the summary's `items_without_why` isn't empty, say:

> A short reason is what gets people to click. Want to add one for these? Skip any you like.
> - Neewer TP77 tripod
> - Squarespace

**Check the disclosure before you show them the page.** If any links earn them money, the
summary's `disclosure` list must not be empty, and it must include "As an Amazon Associate I
earn from qualifying purchases." when any of those are Amazon links. If it's missing, set
`"affiliate": true` on those items (or add their tracking ID) and build again. Never hand over
a page with affiliate links and no disclosure.

**Affiliate disclosures. The build adds these for them. Don't remove any of it:**
- An "Affiliate disclosure" box at the top, above every link, whenever any link is an
  affiliate link: "Some links on this page are affiliate links. If you buy through them, I
  earn a commission at no extra cost to you." (US FTC and UK ASA/CMA both want it plain and
  before the click.) They can reword it with `"disclosureText"`, but it must still say they
  earn from the links.
- "As an Amazon Associate I earn from qualifying purchases." in the same box, word for word,
  when any Amazon link has their tag. Amazon requires it.
- A small "Affiliate link" label under each affiliate button, and an "About the links on
  this page" note in the footer.
- No prices and no "in stock" (Amazon only allows prices it serves itself).
- Every Amazon button says "See it on Amazon", with no shortener hiding where it goes.
- Affiliate links get `rel="sponsored"`.

## Step 8: Show it, then hand it over

Show them the page. In Claude Code, open `gear-page/site/index.html` in their browser
(`open` on a Mac). In Claude.ai, share `preview.html` and `site.zip` from the outputs
folder. Then say, briefly:

- The page is ready, and what's on it (sections, item count, budget tiers).
- Which items still use plain links (no affiliate tag yet), and which have no photo.
- To change anything, just tell you ("move the mic to the top", "change the colour", "add my
  tripod"). You'll edit `gear.json` and rebuild. Keep doing this until they're happy.

When they're happy, tell them how to put it online. It's free and takes a minute either way:

- **Netlify Drop:** go to app.netlify.com/drop and drag the `site` folder onto the page.
  Make a free account so the page stays up, then rename the site to get a nicer address.
- **Cloudflare Pages:** in the Cloudflare dashboard, go to Workers & Pages > Create >
  Pages > "Use direct upload". Name the project, then upload the `site` folder or `site.zip`.

Then ask for the page's address, set `"url"` in `gear.json`, rebuild and upload again. That
gives the link a proper preview (their banner, title and description) when it's shared on
WhatsApp, X or iMessage. The page also has a "Share this page" button.

Then give them this checklist:

1. **Tell Amazon where the links live:** add the page's address in Associates Central
   (Account settings > Edit your website and mobile app list).
2. **Earn from viewers in other countries (OneLink):** their links go to one Amazon store,
   so a viewer in another country usually can't buy through them. Amazon OneLink sends each
   visitor to their own country's store and pays them. To set it up, join the Associates
   programme in the other countries they want (the US is usually the big one), then connect
   those accounts under OneLink in their home Associates Central. Their links stay the same.
3. **Put the link everywhere:** every video description, their channel links, their
   link in bio.
4. **Optional, see visits:** Cloudflare Web Analytics is free and needs no cookie banner. Add a
   site in the Cloudflare dashboard (Analytics & Logs > Web Analytics), copy the token, and
   you'll add it as `"analytics": {"cloudflare": "<token>"}` and rebuild.
5. **Affiliate programmes to join:** the list from step 3.
6. **Worth trying:** suggest 2 to 4 tools or programmes that fit what they make and that pay
   affiliates (for example, if they have no email tool, one with a good affiliate
   programme). Say plainly: try it first, and only add it to the page once you use it and
   would recommend it. Never put these on the page yourself.
7. **Rules:** check their country's rules for labelling affiliate links (in the UK, the ASA
   and CMA want it clear before someone clicks).

It's a web page, not a PDF, on purpose. Amazon's rules ban its links in "printed material"
and "ebooks". PDFs aren't named, so they're a grey area. A page also opens on any phone.

The footer has a small "Page built with the free Gear Page skill" line. If they'd rather not
have it, set `"credit": false` in `gear.json` and rebuild.

## Coming back later

The page stores its own data. If they come back to add items or swap in links and you don't
have their `gear.json`, ask them to upload their `site.zip` (or the `site` folder), then run:

```
python3 gearpage.py restore <site.zip or site folder> gear-page
```

That brings back `gear.json` and the images. Change it, rebuild, and have them upload the new
`site` folder to the same Netlify or Cloudflare project so the link stays the same.
===== END FILE: SKILL.md =====

===== FILE: gearpage.py =====
#!/usr/bin/env python3
"""Gear page helper. Standard library only; uses Pillow to shrink images when it's installed.

  python3 gearpage.py amazon <amazon-url>                    what an Amazon link points at (JSON)
  python3 gearpage.py image  <page-or-image-url> <out-file>  save a product image from the brand's own site
  python3 gearpage.py images <page-url>                      list the image URLs a page offers (JSON)
  python3 gearpage.py logo   <website-url> <out-file>        save a software logo
  python3 gearpage.py channel <youtube-channel-url> <images-dir>  the creator's own name, about text,
                                                             profile picture and banner (JSON)
  python3 gearpage.py commons <search words>                 Creative Commons photos on Wikimedia Commons
                                                             that allow commercial use and cropping (JSON)
  python3 gearpage.py commons-save <"File:…"> <out-file>     save one, with its credit next to it
  python3 gearpage.py build  <project-dir> [--zip] [--inline] [--out=<site-dir>]
  python3 gearpage.py restore <index.html | site-dir | site.zip> <project-dir>
                                                             get gear.json back from a built page

The project dir holds gear.json and gets a site/ folder: index.html plus images/. That folder
is what goes on Netlify Drop or Cloudflare Pages. --zip also writes site.zip, --inline writes
preview.html with the images baked in (one file, for previews where folders don't work).
"""

import base64
import html
import json
import mimetypes
import re
import sys
import urllib.parse
import urllib.request
import zipfile
from datetime import date
from html.parser import HTMLParser
from pathlib import Path

HERE = Path(__file__).resolve().parent
UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0 Safari/537.36"
# Amazon stores (amazon.co.uk, amazon.com…), Amazon's own .amazon domain (link.amazon) and its
# short links. Short links are made by SiteStripe with the Associate's tag inside, so they count
# as affiliate links even though the tag isn't visible (Amazon blocks scripts from following them).
AMAZON_HOST = re.compile(r"(^|\.)(amazon\.[a-z.]+|amazon|amzn\.(to|eu|asia)|a\.co)$", re.I)
AMAZON_SHORT_HOST = re.compile(r"(^|\.)(amzn\.(to|eu|asia)|a\.co|link\.amazon)$", re.I)
AMAZON_IMAGE_HOST = re.compile(r"(media-amazon\.com|ssl-images-amazon\.com|images-amazon\.com)$", re.I)
# Amazon requires its sentence word for word. The plain-English line covers the FTC (US) and
# the ASA/CMA (UK): say you earn, before the links, where people will see it.
AMAZON_DISCLOSURE = "As an Amazon Associate I earn from qualifying purchases."
GENERAL_DISCLOSURE = "Some links on this page are affiliate links. If you buy through them, I earn a commission at no extra cost to you."
FOOTER_DISCLOSURE = ("Links marked “Affiliate link” pay me a commission if you buy through them. The price you pay is the same. "
                     "Prices and availability are whatever the shop shows when you buy.")
CREDIT_URL = "https://conradru.com/get/gear-skill"
MAX_IMAGE_PX = 900
TIERS = [("start", "Just starting out"), ("budget", "Low budget"), ("mid", "Mid-range"), ("pro", "Higher end")]
ASIN = re.compile(r"^[A-Z0-9]{10}$")


def fail(msg):
    print(f"error: {msg}", file=sys.stderr)
    sys.exit(1)


def fetch(url, timeout=20):
    req = urllib.request.Request(url, headers={"User-Agent": UA, "Accept-Language": "en-GB,en;q=0.9"})
    with urllib.request.urlopen(req, timeout=timeout) as res:
        return res.geturl(), res.headers.get("Content-Type", ""), res.read()


def host(url):
    return (urllib.parse.urlparse(url).hostname or "").lower()


def is_amazon(url):
    return bool(AMAZON_HOST.search(host(url)))


# ---------------------------------------------------------------- amazon


def amazon_info(url):
    """Follow short links, then pull the ASIN and a rough name out of the URL. Amazon often blocks
    scripts, so the page title is a bonus, not something to rely on."""
    info = {"input": url, "url": url, "asin": None, "name_from_url": None, "title": None, "affiliate": False}
    try:
        final, _, body = fetch(url)
        info["url"] = final
        m = re.search(rb'id="productTitle"[^>]*>\s*([^<]+?)\s*<', body)
        if m:
            info["title"] = html.unescape(m.group(1).decode("utf-8", "ignore")).strip()
    except Exception as e:  # noqa: BLE001 - blocked or offline is normal here
        info["fetch_error"] = str(e)
    parsed = urllib.parse.urlparse(info["url"])
    m = re.search(r"/(?:dp|gp/product|gp/aw/d)/([A-Z0-9]{10})", parsed.path)
    info["asin"] = m.group(1) if m else None
    m = re.search(r"^/([^/]+)/dp/", parsed.path)
    if m and m.group(1) != "-":
        info["name_from_url"] = urllib.parse.unquote(m.group(1)).replace("-", " ")
    info["store"] = host(info["url"]).removeprefix("www.") if is_amazon(info["url"]) else None
    info["affiliate"] = is_affiliate_amazon(url) or is_affiliate_amazon(info["url"])
    print(json.dumps(info, indent=2))


def is_affiliate_amazon(url):
    h = host(url)
    if AMAZON_SHORT_HOST.search(h):
        return True
    return "tag" in urllib.parse.parse_qs(urllib.parse.urlparse(url).query)


# ---------------------------------------------------------------- images and logos


class HeadParser(HTMLParser):
    def __init__(self):
        super().__init__()
        self.meta, self.links, self.jsonld, self._in_ld = {}, [], [], False

    def handle_starttag(self, tag, attrs):
        a = {k.lower(): (v or "") for k, v in attrs}
        if tag == "meta":
            key = (a.get("property") or a.get("name") or "").lower()
            if key and "content" in a:
                self.meta.setdefault(key, a["content"])
        elif tag == "link":
            self.links.append(a)
        elif tag == "script" and a.get("type", "").lower() == "application/ld+json":
            self._in_ld = True

    def handle_endtag(self, tag):
        if tag == "script":
            self._in_ld = False

    def handle_data(self, data):
        if self._in_ld:
            self.jsonld.append(data)


def parse_page(url):
    final, ctype, body = fetch(url)
    if ctype.startswith("image/"):
        return final, None, body, ctype
    p = HeadParser()
    p.feed(body.decode("utf-8", "ignore"))
    return final, p, None, ctype


def jsonld_images(chunks):
    found = []

    def walk(node):
        if isinstance(node, dict):
            if str(node.get("@type", "")).lower() == "product" or "image" in node:
                img = node.get("image")
                for item in img if isinstance(img, list) else [img]:
                    if isinstance(item, str):
                        found.append(item)
                    elif isinstance(item, dict) and item.get("url"):
                        found.append(item["url"])
            for v in node.values():
                walk(v)
        elif isinstance(node, list):
            for v in node:
                walk(v)

    for chunk in chunks:
        try:
            walk(json.loads(chunk))
        except ValueError:
            pass
    return found


def refuse_amazon_image(url):
    if AMAZON_IMAGE_HOST.search(host(url)) or is_amazon(url):
        fail("that image is Amazon's. Amazon's rules say you can't store their product images, so use the "
             "brand's official site (e.g. sony.com) or the creator's own photo instead.")


def pixel_width(data, ctype):
    """Width in pixels, or None when unknown. SVGs count as big: they scale."""
    if "svg" in (ctype or ""):
        return 10_000
    try:
        from io import BytesIO

        from PIL import Image

        return Image.open(BytesIO(data)).width
    except Exception:  # noqa: BLE001 - no Pillow, or not an image
        return None


def trim_margins(img, pad=0.06, tolerance=18):
    """Crop plain white, flat-colour or transparent space around a product shot so the product
    fills its card. Leaves photos with busy backgrounds alone."""
    from PIL import Image, ImageChops

    if img.mode == "RGBA" and img.getextrema()[3][0] < 250:
        box = img.getchannel("A").point(lambda a: 255 if a > 8 else 0).getbbox()
    else:
        # Studio backdrops are often a top-to-bottom gradient, so compare each row with its own
        # edge colour. If the left and right edges don't match, it isn't a plain backdrop.
        rgb = img.convert("RGB")
        left = rgb.crop((0, 0, 1, rgb.height))
        right = rgb.crop((rgb.width - 1, 0, rgb.width, rgb.height))
        if ImageChops.difference(left, right).convert("L").getextrema()[1] > tolerance * 2:
            return img
        edge = ImageChops.blend(left, right, 0.5).resize(rgb.size, Image.NEAREST)
        diff = ImageChops.difference(rgb, edge).convert("L").point(lambda v: 255 if v > tolerance else 0)
        box = diff.getbbox()
    if not box:
        return img
    x0, y0, x1, y1 = box
    if (x1 - x0) * (y1 - y0) > 0.9 * img.width * img.height:
        return img  # already tight
    m = int(max(x1 - x0, y1 - y0) * pad)
    return img.crop((max(0, x0 - m), max(0, y0 - m), min(img.width, x1 + m), min(img.height, y1 + m)))


def save_image(data, ctype, source_url, out, max_px=MAX_IMAGE_PX, trim=False):
    """Write the image, shrinking it to webp with Pillow when available. Returns the path
    written (the extension depends on the format)."""
    out = Path(out)
    out.parent.mkdir(parents=True, exist_ok=True)
    ext = mimetypes.guess_extension((ctype or "").split(";")[0].strip()) or Path(urllib.parse.urlparse(source_url).path).suffix or ".img"
    ext = {".jpe": ".jpg", ".jpeg": ".jpg"}.get(ext, ext)
    if ext == ".svg" or "svg" in (ctype or ""):
        dest = out.with_suffix(".svg")
        dest.write_bytes(data)
        return dest
    try:
        from io import BytesIO

        from PIL import Image

        img = Image.open(BytesIO(data))
        img.load()
        img = img.convert("RGBA" if img.mode in ("P", "LA", "L", "RGBA") else "RGB")
        if trim:
            img = trim_margins(img)
        img.thumbnail((max_px, max_px))
        dest = out.with_suffix(".webp")
        img.save(dest, "WEBP", quality=82, method=6)
        return dest
    except ImportError:
        dest = out.with_suffix(ext)
        dest.write_bytes(data)
        return dest


def download(url, referer=None):
    headers = {"User-Agent": UA}
    if referer:
        headers["Referer"] = referer
    req = urllib.request.Request(url, headers=headers)
    with urllib.request.urlopen(req, timeout=30) as res:
        return res.read(), res.headers.get("Content-Type", "")


def best_of(candidates, referer, good_enough, min_bytes, tries=6):
    """Download candidates in order and keep the widest. Stops early at the first one that is
    good_enough px wide. Returns (url, data, ctype, width) or None."""
    best = None
    for c in list(dict.fromkeys(candidates))[:tries]:
        if AMAZON_IMAGE_HOST.search(host(c)):
            continue
        try:
            data, ct = download(c, referer=referer)
        except Exception:  # noqa: BLE001
            continue
        if not (ct.startswith("image/") or c.split("?")[0].endswith(".svg")) or len(data) < min_bytes:
            continue
        if c.split("?")[0].endswith(".svg") and "svg" not in ct:
            ct = "image/svg+xml"
        width = pixel_width(data, ct)
        if best is None or (width or 0) > (best[3] or 0):
            best = (c, data, ct, width)
        if width and width >= good_enough:
            break
    return best


def report(dest, source, width, small_below, **extra):
    info = {"saved": str(dest), "from": source, "width_px": width if width != 10_000 else "svg", **extra}
    if width and width < small_below:
        info["warning"] = f"only {width}px wide, so it may look soft. A bigger image from the brand, or the creator's own photo, would be sharper."
    print(json.dumps(info))


def image_candidates(final, parser):
    """Product photos from the page's structured data come first: og:image is often a social
    banner with text on it."""
    found = jsonld_images(parser.jsonld)
    found += [parser.meta.get(k) for k in ("og:image:secure_url", "og:image", "twitter:image", "twitter:image:src")]
    found += [l.get("href") for l in parser.links if l.get("rel", "").lower() == "image_src"]
    return list(dict.fromkeys(urllib.parse.urljoin(final, c) for c in found if c))


def list_images(url):
    try:
        final, parser, body, _ = parse_page(url)
    except Exception as e:  # noqa: BLE001
        fail(f"couldn't open {url} ({e}).")
    if body is not None:
        print(json.dumps([final]))
        return
    print(json.dumps([c for c in image_candidates(final, parser) if not AMAZON_IMAGE_HOST.search(host(c))], indent=2))


def product_image(url, out):
    refuse_amazon_image(url)
    try:
        final, parser, body, ctype = parse_page(url)
    except Exception as e:  # noqa: BLE001
        fail(f"couldn't open {url} ({e}). Check the link, or find the product on the brand's own site.")
    if body is not None:
        dest = save_image(body, ctype, final, out, trim=True)
        report(dest, final, pixel_width(body, ctype), 500)
        return
    best = best_of(image_candidates(final, parser), final, good_enough=800, min_bytes=2000)
    if not best:
        fail("no product image found on that page. Try the product's own page on the brand's site, or pass a direct image URL.")
    c, data, ct, width = best
    dest = save_image(data, ct, c, out, trim=True)
    report(dest, c, width, 500, page=final)


def icon_size(link):
    sizes = link.get("sizes", "")
    m = re.match(r"(\d+)x\d+", sizes)
    if "svg" in link.get("type", "") or link.get("href", "").lower().split("?")[0].endswith(".svg"):
        return 10_000
    if m:
        return int(m.group(1))
    return 180 if "apple-touch-icon" in link.get("rel", "") else 32


def logo(url, out):
    if not re.match(r"https?://", url):
        url = "https://" + url
    candidates = []
    try:
        final, parser, _, _ = parse_page(url)
        rels = ("icon", "apple-touch-icon", "apple-touch-icon-precomposed")  # not mask-icon: one-colour silhouettes
        icons = [l for l in parser.links if any(r in l.get("rel", "").lower().split() for r in rels) and l.get("href")]
        icons.sort(key=icon_size, reverse=True)
        candidates += [urllib.parse.urljoin(final, l["href"]) for l in icons if icon_size(l) >= 64]
    except Exception as e:  # noqa: BLE001
        final = url
        print(f"note: couldn't read {url} ({e}), trying fallbacks", file=sys.stderr)
    domain = host(final).removeprefix("www.")
    candidates.append(urllib.parse.urljoin(final, "/apple-touch-icon.png"))
    candidates.append(f"https://www.google.com/s2/favicons?domain={domain}&sz=256")
    best = best_of(candidates, final, good_enough=128, min_bytes=300, tries=8)
    if not best or (best[3] is not None and best[3] < 48):
        fail("couldn't find a logo big enough. Ask the creator for one, or leave the item without a logo.")
    c, data, ct, width = best
    dest = save_image(data, ct, c, out, max_px=256)
    report(dest, c, width, 112)


# ---------------------------------------------------------------- youtube channel


def channel(url, images_dir):
    """Save the creator's own YouTube profile picture and banner, and print their name and about text."""
    url = url.strip()
    if url.startswith("@"):
        url = "https://www.youtube.com/" + url
    if not re.match(r"https?://", url):
        url = "https://" + url
    if not re.search(r"(^|\.)youtube\.com$", host(url)):
        fail("that isn't a youtube.com channel link (e.g. https://www.youtube.com/@yourname).")
    # The consent cookies skip the EU cookie wall, which would otherwise replace the page.
    req = urllib.request.Request(url, headers={"User-Agent": UA, "Accept-Language": "en-GB,en;q=0.9", "Cookie": "SOCS=CAI; CONSENT=YES+1"})
    try:
        with urllib.request.urlopen(req, timeout=30) as res:
            final, page = res.geturl(), res.read().decode("utf-8", "ignore")
    except Exception as e:  # noqa: BLE001
        fail(f"couldn't open {url} ({e}). Check the link, or ask them for their profile picture.")

    def meta(prop):
        m = re.search(rf'<meta property="{prop}" content="([^"]*)"', page)
        return html.unescape(m.group(1)) if m else None

    info = {"url": final.split("?")[0], "name": meta("og:title"), "about": meta("og:description"), "avatar": None, "banner": None}
    m = re.search(r'<link rel="canonical" href="([^"]+)"', page)
    handle = re.search(r'"canonicalBaseUrl":"/(@[^"]+)"', page)
    info["url"] = f"https://www.youtube.com/{handle.group(1)}" if handle else (m.group(1) if m else info["url"])
    images_dir = Path(images_dir)

    avatar = meta("og:image")
    if avatar:
        try:
            data, ct = download(avatar)
            info["avatar"] = str(save_image(data, ct, avatar, images_dir / "avatar", max_px=400))
        except Exception as e:  # noqa: BLE001
            info["avatar_error"] = str(e)

    m = re.search(r'"imageBannerViewModel":\{"image":\{"sources":(\[[^\]]*\])', page) or re.search(r'"banner":\{"thumbnails":(\[[^\]]*\])', page)
    if m:
        try:
            sources = json.loads(m.group(1))
            best = max(sources, key=lambda x: x.get("width", 0))["url"]
            best = best if best.startswith("http") else "https:" + best
            data, ct = download(best)
            info["banner"] = str(save_image(data, ct, best, images_dir / "banner", max_px=2400))
        except Exception as e:  # noqa: BLE001
            info["banner_error"] = str(e)
    if not info["name"] and not info["avatar"]:
        fail("YouTube didn't return the channel details (it sometimes blocks scripts). Ask them for their profile picture instead.")
    print(json.dumps(info, indent=2))


# ---------------------------------------------------------------- creative commons

COMMONS_API = "https://commons.wikimedia.org/w/api.php"
# Wikimedia asks scripts to say who they are.
COMMONS_UA = "GearPageSkill/1.0 (https://conradru.com/get/gear-skill) python-urllib"


def strip_tags(value):
    return re.sub(r"\s+", " ", html.unescape(re.sub(r"<[^>]+>", "", value or ""))).strip()


def licence_ok(short_name):
    """Only licences that allow commercial use (an affiliate page earns) and edits (we crop).
    Returns (ok, reason)."""
    name = (short_name or "").strip()
    low = name.lower()
    if not name:
        return False, "no licence listed"
    if re.search(r"\bnc\b|non-?commercial", low):
        return False, "non-commercial only"
    if re.search(r"\bnd\b|no-?deriv", low):
        return False, "no edits allowed"
    if "fair use" in low or "non-free" in low:
        return False, "not a free licence"
    if low.startswith("cc0") or "public domain" in low or low.startswith("pd"):
        return True, ""
    if re.match(r"cc[ -]by(-sa)?[ -]\d", low) or re.match(r"cc[ -]by(-sa)?$", low):
        return True, ""
    return False, f"licence not on the allowed list ({name})"


def commons_query(params):
    url = COMMONS_API + "?" + urllib.parse.urlencode({"format": "json", "formatversion": "2", **params})
    req = urllib.request.Request(url, headers={"User-Agent": COMMONS_UA})
    with urllib.request.urlopen(req, timeout=30) as res:
        return json.loads(res.read())


def commons_info(page):
    info = (page.get("imageinfo") or [{}])[0]
    meta = info.get("extmetadata") or {}
    field = lambda k: strip_tags((meta.get(k) or {}).get("value", ""))
    licence = field("LicenseShortName")
    ok, reason = licence_ok(licence)
    author = field("Artist") or field("Credit")
    needs_credit = field("AttributionRequired").lower() != "false"
    if ok and needs_credit and not author:
        ok, reason = False, "needs a credit but no author is listed"
    return {
        "file": page.get("title"),
        "ok": ok,
        "why_not": reason or None,
        "licence": licence,
        "licence_url": field("LicenseUrl") or None,
        "author": author or None,
        "needs_credit": needs_credit,
        "restrictions": field("Restrictions") or None,
        "description": field("ImageDescription")[:160] or None,
        "width": info.get("width"),
        "height": info.get("height"),
        "page": info.get("descriptionurl"),
        "image_url": info.get("thumburl") or info.get("url"),
    }


IMAGEINFO = {"prop": "imageinfo", "iiprop": "url|size|mime|extmetadata", "iiurlwidth": "1400", "iiextmetadatalanguage": "en"}


def commons_search(query):
    try:
        data = commons_query({"action": "query", "generator": "search", "gsrsearch": f"{query} filetype:bitmap",
                              "gsrnamespace": "6", "gsrlimit": "20", **IMAGEINFO})
    except Exception as e:  # noqa: BLE001
        fail(f"couldn't reach Wikimedia Commons ({e}).")
    pages = sorted((data.get("query") or {}).get("pages", []), key=lambda p: p.get("index", 0))
    results = [commons_info(p) for p in pages]
    usable = [r for r in results if r["ok"]]
    print(json.dumps({"usable": usable, "skipped": [{"file": r["file"], "why_not": r["why_not"]} for r in results if not r["ok"]]}, indent=2))


def commons_save(file_title, out):
    if not file_title.startswith("File:"):
        file_title = "File:" + file_title
    try:
        data = commons_query({"action": "query", "titles": file_title, **IMAGEINFO})
    except Exception as e:  # noqa: BLE001
        fail(f"couldn't reach Wikimedia Commons ({e}).")
    pages = (data.get("query") or {}).get("pages", [])
    if not pages or pages[0].get("missing"):
        fail(f"{file_title} isn't on Wikimedia Commons.")
    info = commons_info(pages[0])
    if not info["ok"]:
        fail(f"can't use {file_title}: {info['why_not']}.")
    req = urllib.request.Request(info["image_url"], headers={"User-Agent": COMMONS_UA})
    with urllib.request.urlopen(req, timeout=60) as res:
        body, ctype = res.read(), res.headers.get("Content-Type", "")
    cropped = False
    try:
        from io import BytesIO

        from PIL import Image

        img = Image.open(BytesIO(body))
        img = img.convert("RGBA" if img.mode in ("P", "LA", "L", "RGBA") else "RGB")
        cropped = trim_margins(img).size != img.size
    except ImportError:
        pass
    dest = save_image(body, ctype, info["image_url"], out, trim=True)
    credit = {k: info[k] for k in ("file", "author", "licence", "licence_url", "page", "needs_credit")}
    credit["changes"] = "cropped" if cropped else None
    credit_path = Path(str(dest) + ".credit.json")
    credit_path.write_text(json.dumps(credit, indent=2))
    report(dest, info["page"], pixel_width(body, ctype), 500, credit=str(credit_path), restrictions=info["restrictions"])


def load_credit(site_dir, item):
    """The credit saved by commons-save, or one written into gear.json as imageCredit."""
    if item.get("imageCredit"):
        return item["imageCredit"]
    image = item.get("image")
    path = site_dir / f"{image}.credit.json" if image else None
    if path and path.exists():
        return json.loads(path.read_text())
    return None


def credit_html(credit):
    author = esc(credit.get("author") or "Unknown")
    if credit.get("page"):
        author = f'<a href="{esc(credit["page"])}" target="_blank" rel="noopener">{author}</a>'
    licence = esc(credit.get("licence") or "")
    if credit.get("licence_url"):
        licence = f'<a href="{esc(credit["licence_url"])}" target="_blank" rel="noopener license">{licence}</a>'
    changes = f', {esc(credit["changes"])}' if credit.get("changes") else ""
    return f'<p class="photo-credit">Photo: {author}, {licence}{changes}</p>'


# ---------------------------------------------------------------- build


SOCIAL_LABELS = [
    (r"youtube\.com|youtu\.be", "YouTube"), (r"instagram\.com", "Instagram"), (r"tiktok\.com", "TikTok"),
    (r"(^|\.)(x|twitter)\.com", "X"), (r"threads\.(net|com)", "Threads"), (r"facebook\.com", "Facebook"),
    (r"linkedin\.com", "LinkedIn"), (r"twitch\.tv", "Twitch"), (r"pinterest\.", "Pinterest"),
    (r"bsky\.app", "Bluesky"), (r"snapchat\.com", "Snapchat"), (r"patreon\.com", "Patreon"),
    (r"substack\.com|beehiiv\.com|kit\.com|convertkit\.com", "Newsletter"), (r"github\.com", "GitHub"),
]


def social_label(link):
    if link.get("label"):
        return link["label"]
    h = host(link["url"])
    for pattern, label in SOCIAL_LABELS:
        if re.search(pattern, h):
            return label
    return h.removeprefix("www.") or "Website"


def esc(s):
    return html.escape(str(s or ""), quote=True)


def slugify(s):
    return re.sub(r"[^a-z0-9]+", "-", str(s).lower()).strip("-") or "section"


def hex_rgb(h):
    h = h.lstrip("#")
    if len(h) == 3:
        h = "".join(c * 2 for c in h)
    return tuple(int(h[i : i + 2], 16) for i in (0, 2, 4))


def on_colour(accent):
    def lin(c):
        c /= 255
        return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4

    r, g, b = (lin(c) for c in hex_rgb(accent))
    lum = 0.2126 * r + 0.7152 * g + 0.0722 * b
    return "#111111" if lum > 0.4 else "#ffffff"


def initials(name):
    words = [w for w in re.split(r"\s+", name.strip()) if w]
    return "".join(w[0] for w in words[:2]).upper() or "?"


def link_kind(item):
    return "amazon" if is_amazon(item["link"]) else item.get("kind", "shop")


def button_text(item):
    if item.get("button"):
        return item["button"]
    if link_kind(item) == "amazon":
        return "See it on Amazon"
    if item.get("kind") == "software":
        return f"Try {item['name']}"
    return f"See it at {host(item['link']).removeprefix('www.')}"


def is_affiliate(item):
    if link_kind(item) == "amazon":
        # A tag or short link proves it; the creator saying so is enough too. An extra disclosure
        # is harmless, a missing one isn't.
        return is_affiliate_amazon(item["link"]) or bool(item.get("affiliate"))
    return bool(item.get("affiliate"))


def item_tiers(item):
    t = item.get("tier") or []
    return [t] if isinstance(t, str) else list(t)


def tier_badges(item, labels):
    return "".join(f'<span class="tier">{esc(labels[t])}</span>' for t in item_tiers(item))


ARROW = '<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M5 11 11 5M6 5h5v5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'


def render_item(item, site_dir, labels):
    image = item.get("image")
    if image and not (site_dir / image).exists():
        print(f"warning: {item['name']}: image {image} is missing, showing initials instead", file=sys.stderr)
        image = None
    brand = f'<p class="brand">{esc(item["brand"])}</p>' if item.get("brand") else ""
    why = f'<p class="why">{esc(item["why"])}</p>' if item.get("why") else ""
    perk = f'<span class="perk">{esc(item["perk"])}</span>' if item.get("perk") else ""
    tiers = item_tiers(item)
    data_tiers = f' data-tiers="{esc(" ".join(tiers))}"' if tiers else ""
    badges = tier_badges(item, labels)
    rel = "sponsored noopener" if is_affiliate(item) else "noopener"
    btn = f'<a class="btn" href="{esc(item["link"])}" target="_blank" rel="{rel}">{esc(button_text(item))}{ARROW}</a>'
    if is_affiliate(item):
        btn += '<p class="aff">Affiliate link</p>'
    if item.get("kind") == "software":
        mark = f'<img src="{esc(image)}" alt="" width="56" height="56" loading="lazy">' if image else f'<span class="mono">{esc(initials(item["name"]))}</span>'
        return f"""
      <article class="app"{data_tiers}>
        <div class="logo">{mark}</div>
        <div class="app-body">
          <div class="title-row"><h3>{esc(item["name"])}</h3>{perk}{badges}</div>
          {why}
        </div>
        <div class="cta">{btn}</div>
      </article>"""
    credit = load_credit(site_dir, item) if image else None
    photo_credit = credit_html(credit) if credit else ""
    alt = esc(item.get("alt") or item["name"])
    media = f'<img src="{esc(image)}" alt="{alt}" loading="lazy">' if image else f'<span class="mono">{esc(initials(item["name"]))}</span>'
    return f"""
      <article class="card"{data_tiers}>
        <div class="shot">{media}{photo_credit}</div>
        <div class="card-body">
          {f'<div class="tiers">{badges}</div>' if badges else ""}
          {brand}
          <h3>{esc(item["name"])}</h3>{perk}
          {why}
          <div class="cta">{btn}</div>
        </div>
      </article>"""


def build(project, want_zip=False, inline=False, out=None):
    project = Path(project)
    cfg_path = project / "gear.json"
    if not cfg_path.exists():
        fail(f"{cfg_path} not found")
    cfg = json.loads(cfg_path.read_text())
    original = json.loads(cfg_path.read_text())  # saved into the page as written, before links are filled in
    site = Path(out) if out else project / "site"
    site.mkdir(parents=True, exist_ok=True)
    creator = cfg.get("creator", {})
    items = cfg.get("items", [])
    if not items:
        fail("gear.json has no items")

    amazon_cfg = cfg.get("amazon") or {}
    store = (amazon_cfg.get("store") or "amazon.co.uk").removeprefix("https://").removeprefix("www.").strip("/")
    tag = (amazon_cfg.get("tag") or "").strip()
    labels = {**dict(TIERS), **(cfg.get("tiers") or {})}
    problems, warnings = [], []
    if tag and not re.fullmatch(r"[A-Za-z0-9-]+-\d{2}", tag):
        warnings.append(f"amazon.tag '{tag}' doesn't look like an Amazon tracking ID (they end in -21, -20…).")
    # Tracking IDs are usually per store (amazon.com and .ca end in -20, UK and EU in -21), and a
    # tag from another store may earn nothing. Some accounts show one ID across stores, so warn.
    store_suffix = {"amazon.com": "-20", "amazon.ca": "-20", "amazon.co.uk": "-21", "amazon.de": "-21",
                    "amazon.fr": "-21", "amazon.it": "-21", "amazon.es": "-21"}.get(store)
    if tag and store_suffix and not tag.endswith(store_suffix):
        warnings.append(f"amazon.tag '{tag}' looks like it's from a different Amazon store: {store} tracking IDs "
                        f"usually end in '{store_suffix}'. Check it's listed under Manage tracking IDs in their "
                        f"{store} Associates account, or those links may earn nothing.")
    for it in items:
        if it.get("asin") and not it.get("link"):
            # Amazon affiliate links are the product page plus ?tag=<tracking ID>, the same link
            # SiteStripe makes. Without a tag it's a plain product link.
            if not ASIN.match(it["asin"]):
                problems.append(f"{it.get('name')}: '{it['asin']}' isn't an ASIN (10 letters and numbers, e.g. B08XFQ6KP9)")
            it["link"] = f"https://www.{store}/dp/{it['asin']}" + (f"?tag={urllib.parse.quote(tag)}" if tag else "")
            it.setdefault("kind", "amazon")
        for t in item_tiers(it):
            if t not in labels:
                problems.append(f"{it.get('name')}: tier '{t}' isn't one of {', '.join(labels)}")
        for key in ("name", "section", "link"):
            if not it.get(key):
                problems.append(f"an item is missing '{key}': {it}")
        link = it.get("link", "")
        if link and not re.match(r"https://", link):
            problems.append(f"{it.get('name')}: link must start with https:// ({link})")
        if it.get("kind") != "software" and it.get("image") and AMAZON_IMAGE_HOST.search(host(it["image"])):
            problems.append(f"{it.get('name')}: image is hosted by Amazon. Amazon's rules don't allow that.")
        if link and not is_amazon(link) and re.search(r"amazon|amzn", host(link)):
            problems.append(f"{it.get('name')}: {host(link)} looks like an Amazon link but isn't one this script knows. "
                            "Use the full amazon.<store>/dp/… link or an amzn.to / link.amazon short link.")
        if re.search(r"(^|\.)(bit\.ly|tinyurl\.com|t\.co|linktr\.ee|rebrand\.ly|shorturl\.at)$", host(link)) and it.get("kind") != "software":
            problems.append(f"{it.get('name')}: {host(link)} hides where the link goes. Use the full link (Amazon's own amzn.to is fine).")
        found_tag = urllib.parse.parse_qs(urllib.parse.urlparse(link).query).get("tag", [None])[0]
        if tag and found_tag and found_tag != tag and is_amazon(link):
            warnings.append(f"{it.get('name')}: link uses tracking ID '{found_tag}', not this page's '{tag}'. "
                            "Its sales will show under the other ID in your Amazon report.")
    if problems:
        fail("\n  ".join(["fix these in gear.json first:"] + problems))
    for w in warnings:
        print(f"warning: {w}", file=sys.stderr)

    accent = cfg.get("accent") or "#1f6f5c"
    if not re.fullmatch(r"#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?", accent):
        fail(f"accent must be a hex colour like #1f6f5c, got {accent}")

    sections = {}
    for it in items:
        sections.setdefault(it["section"], []).append(it)

    amazon_aff = any(link_kind(i) == "amazon" and is_affiliate(i) for i in items)
    other_aff = any(link_kind(i) != "amazon" and is_affiliate(i) for i in items)
    untagged = [i["name"] for i in items if link_kind(i) == "amazon" and not is_affiliate(i)]
    amazon_items = [i for i in items if link_kind(i) == "amazon"]
    if amazon_items and not amazon_aff:
        print("WARNING: no Amazon disclosure was added, because none of the Amazon links look like affiliate links "
              "(no tag=, not an amzn.to / link.amazon short link). If any of them are affiliate links, set "
              '"affiliate": true on those items and build again.', file=sys.stderr)
    disclosure_lines = []
    if amazon_aff or other_aff:
        disclosure_lines.append(cfg.get("disclosureText") or GENERAL_DISCLOSURE)
    if amazon_aff:
        disclosure_lines.append(AMAZON_DISCLOSURE)
    disclosure = ""
    if disclosure_lines:
        disclosure = ('<aside class="disclosure" aria-labelledby="disclosure-title"><svg aria-hidden="true" viewBox="0 0 20 20" width="18" height="18"><circle cx="10" cy="10" r="8.25" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M10 9v5M10 6.2v.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg><div>'
                      '<p class="disclosure-title" id="disclosure-title">Affiliate disclosure</p>' + "".join(f"<p>{esc(l)}</p>" for l in disclosure_lines) + "</div></aside>")

    name = creator.get("name") or "My gear"
    title = cfg.get("title") or "My gear and software"
    intro = cfg.get("intro") or "The kit and software I actually use, and why I picked each one."
    avatar = creator.get("avatar")
    avatar_html = f'<img class="avatar" src="{esc(avatar)}" alt="{esc(name)}" width="72" height="72">' if avatar and (site / avatar).exists() else f'<span class="avatar mono">{esc(initials(name))}</span>'
    socials = "".join(f'<a href="{esc(l["url"])}" target="_blank" rel="noopener me">{esc(social_label(l))}</a>' for l in creator.get("links", []) if l.get("url"))
    banner_src = creator.get("banner")
    cover = f'<div class="cover"><img src="{esc(banner_src)}" alt="" width="1600" height="265"></div>' if banner_src and (site / banner_src).exists() else ""
    share = ('<button type="button" class="share" data-share><svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M8 10V2M5 5l3-3 3 3M3 9v4h10V9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'
             '<span data-share-label>Share this page</span></button>')
    socials_html = f'<nav class="socials" aria-label="My channels">{socials}{share}</nav>'
    tagline = f'<p class="tagline">{esc(creator["tagline"])}</p>' if creator.get("tagline") else ""

    nav = ""
    if len(sections) > 1:
        nav = '<nav class="jump" aria-label="Sections"><div class="wrap">' + "".join(f'<a href="#{slugify(s)}">{esc(s)}</a>' for s in sections) + "</div></nav>"

    used_tiers = [k for k in labels if any(k in item_tiers(i) for i in items)]
    budget = ""
    if used_tiers:
        notes = cfg.get("tierNotes") or {}
        buttons = '<button type="button" aria-pressed="true" data-tier="all">Everything</button>' + "".join(
            f'<button type="button" aria-pressed="false" data-tier="{k}">{esc(labels[k])}</button>' for k in used_tiers)
        note_html = "".join(f'<p class="tier-note" data-note="{k}" hidden>{esc(notes[k])}</p>' for k in used_tiers if notes.get(k))
        budget = (f'<div class="budget"><p class="budget-title">What I\'d get on your budget</p>'
                  f'<div class="budget-buttons" role="group" aria-label="Filter by budget">{buttons}</div>{note_html}</div>')

    body = [budget] if budget else []
    for s, its in sections.items():
        software = all(i.get("kind") == "software" for i in its)
        cls = "apps" if software else "grid"
        body.append(f'<section id="{slugify(s)}"><h2>{esc(s)} <span class="count">{len(its)}</span></h2><div class="{cls}">' + "".join(render_item(i, site, labels) for i in its) + "</div></section>")

    updated = cfg.get("updated") or date.today().isoformat()
    try:
        updated_label = date.fromisoformat(updated).strftime("%B %Y")
    except ValueError:
        updated_label = updated
    credit = f'<p class="credit">Page built with the free <a href="{CREDIT_URL}" target="_blank" rel="noopener">Gear Page skill</a></p>' if cfg.get("credit", True) else ""
    foot_disc = ""
    if disclosure_lines:
        foot_disc = ('<section class="about-links" aria-label="About the links on this page"><h2>About the links on this page</h2>'
                     + "".join(f"<p>{esc(l)}</p>" for l in disclosure_lines) + f"<p>{esc(FOOTER_DISCLOSURE)}</p></section>")

    description = cfg.get("description") or f"The gear and software {name} uses and recommends, in one place."
    # Link previews (WhatsApp, X, iMessage…) want an absolute image URL, so this is best once
    # "url" is set to where the page lives.
    og_image = cfg.get("ogImage") or (banner_src if cover else None) or (avatar if avatar and (site / avatar).exists() else None)
    og = ""
    if og_image:
        og_abs = urllib.parse.urljoin(cfg["url"], og_image) if cfg.get("url") else og_image
        og = f'<meta property="og:image" content="{esc(og_abs)}"><meta name="twitter:image" content="{esc(og_abs)}">'
    og += f'<meta name="twitter:card" content="{"summary_large_image" if cover else "summary"}">'
    canonical = f'<link rel="canonical" href="{esc(cfg["url"])}"><meta property="og:url" content="{esc(cfg["url"])}">' if cfg.get("url") else ""
    token = ((cfg.get("analytics") or {}).get("cloudflare") or "").strip()
    analytics = (f'<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon=\'{{"token": "{esc(token)}"}}\'></script>'
                 if token else "")
    # The page carries its own data, so it can be rebuilt later from just the page (see restore).
    data = json.dumps(original, ensure_ascii=False, indent=1).replace("</", "<\\/")

    tpl = (HERE / "template.html").read_text()
    out = (
        tpl.replace("{{TITLE}}", esc(title))
        .replace("{{DESCRIPTION}}", esc(description))
        .replace("{{META}}", og + canonical)
        .replace("{{ACCENT}}", accent)
        .replace("{{ON_ACCENT}}", on_colour(accent))
        .replace("{{COVER}}", cover)
        .replace("{{HEADER_CLASS}}", "wrap has-cover" if cover else "wrap")
        .replace("{{AVATAR}}", avatar_html)
        .replace("{{NAME}}", esc(name))
        .replace("{{TAGLINE}}", tagline)
        .replace("{{INTRO}}", esc(intro))
        .replace("{{SOCIALS}}", socials_html)
        .replace("{{DISCLOSURE}}", disclosure)
        .replace("{{NAV}}", nav)
        .replace("{{SECTIONS}}", "\n".join(body))
        .replace("{{FOOTER_DISCLOSURE}}", foot_disc)
        .replace("{{UPDATED}}", esc(updated_label))
        .replace("{{CREDIT}}", credit)
        .replace("{{ANALYTICS}}", analytics)
        .replace("{{DATA}}", data)
    )
    index = site / "index.html"
    index.write_text(out)
    written = [str(index)]

    if inline:
        def embed(m):
            src = m.group(2)
            path = site / html.unescape(src)
            if src.startswith(("http:", "https:", "data:")) or not path.exists():
                return m.group(0)
            mime = mimetypes.guess_type(path.name)[0] or "image/webp"
            return f'{m.group(1)}data:{mime};base64,{base64.b64encode(path.read_bytes()).decode()}"'

        preview = project / "preview.html"
        preview.write_text(re.sub(r'(<img[^>]*?src=")([^"]+)"', embed, out))
        written.append(str(preview))

    if want_zip:
        zpath = project / "site.zip"
        with zipfile.ZipFile(zpath, "w", zipfile.ZIP_DEFLATED) as z:
            for f in sorted(site.rglob("*")):
                if f.is_file() and not f.name.startswith("."):
                    z.write(f, f.relative_to(site))
        written.append(str(zpath))

    used = {i.get("image") for i in items} | {avatar, banner_src}
    unused = [str(p.relative_to(site)) for p in (site / "images").glob("*") if not p.name.endswith(".credit.json") and str(p.relative_to(site)) not in used] if (site / "images").exists() else []

    print(json.dumps({
        "written": written,
        "items": len(items),
        "sections": list(sections),
        "disclosure": disclosure_lines,
        "amazon_links_without_affiliate_tag": untagged,
        "items_without_image": [i["name"] for i in items if not i.get("image")],
        "items_without_why": [i["name"] for i in items if not i.get("why")],
        "budget_tiers": {labels[k]: sum(k in item_tiers(i) for i in items) for k in used_tiers},
        "unused_images": unused,
    }, indent=2))


def restore(source, project):
    """Rebuild a project folder (gear.json + site/) from a page this script built."""
    source, project = Path(source), Path(project)
    site = project / "site"
    if source.suffix == ".zip":
        with zipfile.ZipFile(source) as z:
            z.extractall(site)
        page = site / "index.html"
    elif source.is_dir():
        page = source / "index.html"
        if source.resolve() != site.resolve():
            import shutil

            shutil.copytree(source, site, dirs_exist_ok=True)
    else:
        page = source
    if not page.exists():
        fail(f"{page} not found")
    m = re.search(r'<script type="application/json" id="gear-data">(.*?)</script>', page.read_text(), re.S)
    if not m:
        fail("that page has no saved data. It was built before this feature, so rebuild it from its gear.json, "
             "or recreate the list from what's on the page.")
    cfg = json.loads(m.group(1))
    project.mkdir(parents=True, exist_ok=True)
    (project / "gear.json").write_text(json.dumps(cfg, ensure_ascii=False, indent=2) + "\n")
    missing = [i.get("image") for i in cfg.get("items", []) if i.get("image") and not (site / i["image"]).exists()]
    print(json.dumps({"gear_json": str(project / "gear.json"), "items": len(cfg.get("items", [])), "missing_images": missing}, indent=2))


def main(argv):
    if len(argv) < 2:
        fail(__doc__)
    cmd, args = argv[1], argv[2:]
    flags = {a for a in args if a.startswith("--")}
    args = [a for a in args if not a.startswith("--")]
    if cmd == "amazon" and len(args) == 1:
        amazon_info(args[0])
    elif cmd == "images" and len(args) == 1:
        list_images(args[0])
    elif cmd == "image" and len(args) == 2:
        product_image(args[0], args[1])
    elif cmd == "channel" and len(args) == 2:
        channel(args[0], args[1])
    elif cmd == "commons" and args:
        commons_search(" ".join(args))
    elif cmd == "commons-save" and len(args) == 2:
        commons_save(args[0], args[1])
    elif cmd == "logo" and len(args) == 2:
        logo(args[0], args[1])
    elif cmd == "restore" and len(args) == 2:
        restore(args[0], args[1])
    elif cmd == "build" and len(args) == 1:
        out = next((f.split("=", 1)[1] for f in flags if f.startswith("--out=")), None)
        build(args[0], want_zip="--zip" in flags, inline="--inline" in flags, out=out)
    else:
        fail(__doc__)


if __name__ == "__main__":
    main(sys.argv)
===== END FILE: gearpage.py =====

===== FILE: template.html =====
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{TITLE}}</title>
<meta name="description" content="{{DESCRIPTION}}">
<meta property="og:type" content="website">
<meta property="og:title" content="{{TITLE}}">
<meta property="og:description" content="{{DESCRIPTION}}">
{{META}}
<meta name="theme-color" content="{{ACCENT}}">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%23111'/><circle cx='16' cy='16' r='7' fill='none' stroke='white' stroke-width='3'/></svg>">
<style>
  :root {
    --accent: {{ACCENT}};
    --on-accent: {{ON_ACCENT}};
    --bg: #fafaf8;
    --surface: #ffffff;
    --shot: #f3f3f0;
    --text: #17181a;
    --muted: #5d6068;
    --line: #e7e6e1;
    --tint: color-mix(in srgb, var(--accent) 9%, var(--surface));
    --radius: 18px;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111214;
      --surface: #1a1b1e;
      --shot: #ecebe7;
      --text: #f1f1ef;
      --muted: #a3a6ad;
      --line: #2a2c30;
      --tint: color-mix(in srgb, var(--accent) 16%, var(--surface));
    }
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  .wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

  /* Header */
  header.wrap { padding-top: 56px; padding-bottom: 28px; }
  .who { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
  .avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
  .mono { display: grid; place-items: center; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: var(--tint); }
  .avatar.mono { font-size: 24px; }
  header.wrap.has-cover { padding-top: 20px; }
  .cover { aspect-ratio: 6.05 / 1; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
  .cover img { width: 100%; height: 100%; object-fit: cover; }
  /* Only the avatar rises over the banner; the name and tagline start below its edge, so a long
     name or a wrapping tagline grows downward instead of into the banner. */
  .has-cover .who { position: relative; align-items: flex-start; padding-left: 16px; }
  .has-cover .avatar { width: 96px; height: 96px; margin-top: -40px; box-shadow: 0 0 0 4px var(--bg); }
  .has-cover .who > div { padding-top: 10px; min-width: 0; }
  /* Phones show the whole banner, like YouTube's app: cropping it would cut off whatever the
     creator put at the sides. */
  @media (max-width: 640px) {
    .cover { border-radius: 12px; }
    .has-cover .who { padding-left: 10px; gap: 12px; }
    .has-cover .avatar { width: 76px; height: 76px; margin-top: -26px; }
    .has-cover .who > div { padding-top: 6px; }
  }
  .name { margin: 0; font-size: 15px; font-weight: 600; }
  .tagline { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
  h1 { margin: 0 0 12px; font-size: clamp(34px, 6vw, 54px); line-height: 1.04; letter-spacing: -.025em; font-weight: 750; max-width: 16ch; }
  .intro { margin: 0; max-width: 56ch; color: var(--muted); font-size: 17px; }
  .socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .socials a { font-size: 14px; font-weight: 600; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
  .socials a:hover, .share:hover { border-color: var(--accent); }
  .share { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; }

  /* Budget filter */
  .budget { margin-top: 32px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .budget-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
  .budget-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  .budget-buttons button { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
  .budget-buttons button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .tier-note { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
  .tiers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .tier { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line); }
  .title-row .tier { margin: 0; }
  [data-filtered-out], section[data-empty] { display: none !important; }

  .disclosure { overflow-wrap: anywhere; display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--tint); color: var(--text); font-size: 15px; }
  .disclosure svg { flex: none; margin-top: 3px; color: var(--accent); }
  .disclosure p { margin: 0; }
  .disclosure p + p { margin-top: 4px; }
  .disclosure .disclosure-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
  @media (prefers-color-scheme: dark) { .disclosure .disclosure-title { color: color-mix(in srgb, var(--accent) 45%, white); } }

  /* Section jump bar */
  .jump { position: sticky; top: 0; z-index: 5; margin-top: 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
  .jump .wrap { display: flex; gap: 6px; overflow-x: auto; padding: 10px 8px; scrollbar-width: none; }
  .jump .wrap::-webkit-scrollbar { display: none; }
  .jump a { flex: none; font-size: 14px; font-weight: 600; text-decoration: none; padding: 7px 12px; border-radius: 999px; color: var(--muted); }
  .jump a:hover { color: var(--text); background: var(--surface); }

  /* Sections */
  main section { padding-top: 36px; padding-bottom: 8px; }
  h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; font-size: 22px; letter-spacing: -.01em; }
  .count { font-size: 13px; font-weight: 600; color: var(--muted); }
  .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

  .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
  .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
  .shot { position: relative; aspect-ratio: 4 / 3; background: var(--shot); }
  .shot img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; mix-blend-mode: multiply; }
  .shot .mono { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 20px; font-size: 26px; }
  .card-body { min-width: 0; display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
  .shot:has(.photo-credit) img { top: 16px; bottom: 44px; height: calc(100% - 60px); }
  .photo-credit { position: absolute; left: 12px; right: 12px; bottom: 7px; margin: 0; font-size: 10.5px; line-height: 1.35; text-align: center; color: #5d6068; }
  .photo-credit a { color: inherit; text-underline-offset: 2px; }
  .brand { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  h3 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.005em; }
  .why { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
  .perk { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--accent); background: var(--tint); }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding: 11px 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 650; text-decoration: none; transition: filter .15s; }
  .cta { margin-top: auto; padding-top: 16px; }
  .cta .btn { margin-top: 0; width: 100%; }
  .aff { margin: 6px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
  .btn:hover { filter: brightness(1.08); }
  .btn:focus-visible, .jump a:focus-visible, .socials a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

  /* Software */
  .apps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
  .app { min-width: 0; display: grid; grid-template-columns: 56px 1fr; gap: 14px 16px; align-items: start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .logo { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
  .logo img { width: 100%; height: 100%; object-fit: contain; }
  .logo .mono { width: 100%; height: 100%; font-size: 20px; }
  .app-body .why { margin-top: 4px; }
  .title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .app .perk { margin: 0; }
  .app .cta { grid-column: 1 / -1; padding-top: 0; }
  .app .btn { margin-top: 0; width: 100%; }
  @media (min-width: 640px) {
    .app { grid-template-columns: 56px 1fr auto; align-items: center; }
    .app .cta { grid-column: auto; }
  }

  footer.wrap { margin-top: 56px; padding-top: 28px; padding-bottom: 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
  footer p { margin: 0 0 6px; }
  .about-links { max-width: 64ch; margin-bottom: 20px; }
  .about-links h2 { display: block; margin: 0 0 8px; font-size: 15px; color: var(--text); }
  .credit { margin-top: 14px; font-size: 13px; }
  .credit a { text-underline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card, .card:hover { transition: none; transform: none; }
  }
</style>
</head>
<body>
  <header class="{{HEADER_CLASS}}">
    {{COVER}}
    <div class="who">
      {{AVATAR}}
      <div>
        <p class="name">{{NAME}}</p>
        {{TAGLINE}}
      </div>
    </div>
    <h1>{{TITLE}}</h1>
    <p class="intro">{{INTRO}}</p>
    {{SOCIALS}}
  </header>

  <div class="wrap">{{DISCLOSURE}}</div>

  {{NAV}}

  <main class="wrap">
    {{SECTIONS}}
  </main>

  <footer class="wrap">
    {{FOOTER_DISCLOSURE}}
    <p>Last updated {{UPDATED}}.</p>
    {{CREDIT}}
  </footer>
  <script type="application/json" id="gear-data">{{DATA}}</script>
  <script>
  (function () {
    // Budget filter: show only items tagged with the chosen tier. Without JS everything shows.
    var buttons = document.querySelectorAll(".budget-buttons button");
    function pick(tier) {
      buttons.forEach(function (b) { b.setAttribute("aria-pressed", String(b.dataset.tier === tier)); });
      document.querySelectorAll(".card, .app").forEach(function (el) {
        var tiers = (el.dataset.tiers || "").split(" ");
        el.toggleAttribute("data-filtered-out", tier !== "all" && tiers.indexOf(tier) < 0);
      });
      document.querySelectorAll("main section[id]").forEach(function (sec) {
        var shown = sec.querySelectorAll(".card:not([data-filtered-out]), .app:not([data-filtered-out])").length;
        sec.toggleAttribute("data-empty", shown === 0);
        var count = sec.querySelector(".count");
        if (count) count.textContent = shown;
        var jump = document.querySelector('.jump a[href="#' + sec.id + '"]');
        if (jump) jump.hidden = shown === 0;
      });
      document.querySelectorAll(".tier-note").forEach(function (n) { n.hidden = n.dataset.note !== tier; });
    }
    buttons.forEach(function (b) { b.addEventListener("click", function () { pick(b.dataset.tier); }); });

    // Share: the phone's share sheet where there is one, otherwise copy the link.
    var share = document.querySelector("[data-share]");
    if (share) share.addEventListener("click", function () {
      var label = share.querySelector("[data-share-label]");
      var data = { title: document.title, url: location.href.split("#")[0] };
      if (navigator.share) { navigator.share(data).catch(function () {}); return; }
      navigator.clipboard.writeText(data.url).then(function () {
        label.textContent = "Link copied";
        setTimeout(function () { label.textContent = "Share this page"; }, 2000);
      });
    });
  })();
  </script>
  {{ANALYTICS}}
</body>
</html>
===== END FILE: template.html =====

download

Download

Or install it as a skill (ZIP)

Use it again and again without pasting. Upload it in Claude.ai under Customize > Skills, or unzip it into ~/.claude/skills/ for Claude Code.

Download the ZIP download

The guide

How to use it

Someone watches your video and asks what camera that is.

Most creators just answer. For free. Every time.

This page is how you get paid for the answer instead.

Why a gear page works from view one

You don’t need 1,000 subscribers or YouTube’s permission. Amazon pays you when someone buys through your link, so the first viewer who clicks counts.

One page beats pasting links into every description. You update it once and every old video points at the new list.

Step 1: Add it to Claude or ChatGPT

In Claude.ai, go to Settings > Capabilities and turn on Code execution and file creation. It works on the free plan. This lets Claude save your product photos into the page.
Hit Copy the prompt above, start a new chat, and paste it in. It’s long, so Claude may show it as an attachment. That’s fine.
Press enter. Claude asks for your Amazon links.

It works in Claude Code too: paste the prompt into a session.

If you’ll build more than one page, or update yours often, install the ZIP as a skill instead. Then you only have to say “Build my gear page.”

Using ChatGPT instead:

Hit Download for ChatGPT at the top of this page.
In ChatGPT, open the Plugins tab and hit Add in the top right. Upload the ZIP you just downloaded. Don’t unzip it.
Start a new chat and say: “Build my gear and software page.”

It asks the same questions as the Claude version and builds the same page.

Step 2: Give it your Amazon tracking ID

If you’re in Amazon Associates, Claude asks for your store and tracking ID once. That’s the yourname-21 in the top right of Associates Central. It builds every affiliate link from it, so you never touch SiteStripe.

Tip: make a new tracking ID just for this page. Then Amazon’s report shows exactly what the page earns.

Not in Associates yet? Skip it. The page uses normal links, and you add the ID later.

Step 3: Say what you use

Claude asks about your gear one category at a time: camera, mic, lighting, tripods, storage, bags. Just answer in your own words, like “a Sony ZV-E10 and a Rode Wireless GO”. It finds each product on Amazon and checks it has the right version.

Then it asks about your software: editing, design, email, website, hosting, scheduling. It looks up which of those pay affiliates and tells you where to join.

Add a few words on why you use each thing. That line is what makes people click.

Step 4: Pick your budget recommendations

Say what you’d recommend for someone just starting out, on a low budget, mid-range and higher end. Viewers tap their budget and see only those picks.

Step 5: Check it, change it, put it online

Claude finds a clean product photo on each brand’s official site, crops it to fit, and grabs the app logos. If a brand’s photo is missing or too small, it uses a free Creative Commons photo and adds the photographer’s credit for you. Then it builds the page. It opens it for you to look at. Here’s mine to show what comes out.

Ask for changes in plain words: “move the mic to the top”, “make it navy”. When you’re happy:

Netlify: go to app.netlify.com/drop and drag the site folder onto the page.
Cloudflare: Workers & Pages > Create > Pages > Use direct upload, then drop the folder in.

Both are free.

The Amazon rules it follows for you

An Affiliate disclosure box at the top, in plain English, before anyone can click
Amazon’s exact line, “As an Amazon Associate I earn from qualifying purchases.”, above your first link
A small “Affiliate link” label under every affiliate button, and the full disclosure again in the footer
No prices, because Amazon only allows prices it serves itself
No Amazon product photos, because you’re not allowed to store them. Photos come from the brands’ official sites, or Creative Commons with the credit the licence asks for
Every button says “See it on Amazon”, with no shortener hiding where it goes

Check your own country’s rules too. The FTC in the US and the ASA in the UK both want it clear that you earn, before someone clicks. The page does that, but it’s your name on it.

It’s a web page, not a PDF, on purpose. Amazon’s rules ban its links in printed material and ebooks. PDFs aren’t named, so they’re a grey area. A page also opens on any phone, with no file to find first.

What to do right now

Write down five things you film with and one line on why. That’s your first draft, and it’s all the skill needs.

Then add the page’s address to your Amazon Associates account, and put the link in your next video’s description.

lock Unlock the full guide

Beyond Amazon

Affiliate programmes worth knowing

Amazon is just the start. The software you use often pays far better, and many programmes pay you a share every month the customer stays.

The skill checks the tools you tell it about. Here are the ones that pay creators best. Only recommend what you actually use: try it first, then add it to your page.

34 programmes, checked on 26 September 2026 against each one's own affiliate page. Recurring means you're paid every month the customer keeps paying. Rates change, so check the programme's page before you join.

Email and newsletters

Programme What it pays Join

Kit

Email marketing for creators

50% for 12 months, then up to 20% recurring
Join open_in_new
beehiiv

Newsletter platform

Up to 60% for 12 months, from its Bronze tier
Join open_in_new
MailerLite

Budget-friendly email marketing

30% recurring
Join open_in_new
ActiveCampaign

Email and marketing automation

20–30%
Join open_in_new

Courses and communities

Programme What it pays Join

Systeme.io

All-in-one: courses, funnels and email

60% recurring
Join open_in_new
Skool

Paid communities with courses

40% recurring
Join open_in_new
Mighty Networks

Community, courses and your own app

30% recurring
Join open_in_new
Thinkific

Online course platform

30% recurring
Join open_in_new
LearnWorlds

Course platform for serious course sellers

Up to 30% recurring
Join open_in_new
Circle

Community platform

$100, then 10–20% recurring
Join open_in_new
Teachable

Online course platform

30% for 12 months
Join open_in_new
Podia

Courses and digital downloads

30% for 12 months
Join open_in_new
Kartra

Funnels, courses and email

Up to 40% for 12 months
Join open_in_new

Selling and storefronts

Programme What it pays Join

ThriveCart

Checkout pages and carts

20%, rising to 55% with volume
Join open_in_new
Sellfy

Store for digital products

25–40% recurring
Join open_in_new
Beacons

Link in bio and store

25% recurring
Join open_in_new
Stan Store

Link in bio store

20% recurring (needs your own Stan plan)
Join open_in_new

Websites and hosting

Programme What it pays Join

Squarespace

Website builder

$100–200 per sale
Join open_in_new
Framer

Website builder

50% for 12 months
Join open_in_new
Shopify

Online stores

Up to $150 per sale
Join open_in_new
Hostinger

Web hosting

40%+ per sale
Join open_in_new
SiteGround

Web hosting

£30–65 per sale
Join open_in_new

Video, audio and AI

Programme What it pays Join

Submagic

AI captions for short videos

30% recurring
Join open_in_new
Opus Clip

AI clips from long videos

25% for 12 months
Join open_in_new
ElevenLabs

AI voice

22% for 12 months
Join open_in_new
CapCut

Video editing

Up to 35%
Join open_in_new
Descript

Edit video by editing the transcript

$25 per sale
Join open_in_new
Epidemic Sound

Music for videos

50% for 12 months, after 12 referrals
Join open_in_new
vidIQ

YouTube growth tools

15–25% recurring
Join open_in_new

Social and automation

Programme What it pays Join

ManyChat

DM automation

30–50% for 12 months
Join open_in_new
Make

Automation between your apps

35% for 12 months
Join open_in_new
Pabbly Connect

Automation between your apps

30% recurring
Join open_in_new
Buffer

Social media scheduling

25% for 12 months
Join open_in_new
Metricool

Social media scheduling and analytics

25%, up to $100 per customer
Join open_in_new

Not taking new affiliates: Canva, Notion and TubeBuddy. No affiliate programme: Zapier and Loom.

More free resources

Already unlocked if you've subscribed.

See all arrow_forward

Free · Worksheet + Claude prompts Start here

person_search

Find Your One Person

Know exactly who you're talking to in four steps. Then let Claude turn it into your bio, your next ten videos and your first product idea.

Get it free Open it arrow_forward