---
name: socials
description: Render share-ready Open Graph and social tiles plus per-platform captions for a named subject — a built site or a bespoke topic — with a PII gate for any source that can carry client data. Resolves the subject through a source adapter into candidate images and copy, overlays brand typography, screenshots landscape (1200×628), square (1200×1200) and portrait (1080×1350) PNG tiles via the on-device browser, assembles a gallery and a captions file for all five platforms, and emits a redaction report reconciling every source item. For a built site it also wires the site's og:image. Never posts — the bundle is for operator review. Trigger phrases include "og images for the site", "Instagram tiles + captions for <subject>", "social collateral for <business>".
allowed-tools:
  - Bash
  - Read
  - Write
  - Edit
  - Glob
  - Grep
  - mcp__plugin_browser_browser__browser-render
  - mcp__plugin_browser_browser__browser-navigate
  - mcp__plugin_browser_browser__browser-evaluate
  - mcp__plugin_browser_browser__browser-resize
  - mcp__plugin_browser_browser__browser-screenshot
  - mcp__plugin_browser_browser__browser-wait-for
---

# socials

One skill, one subject at a time. You take a named **subject**, resolve it through a
source adapter, and emit a publication bundle: exact-size PNG social tiles, captions
for all five platforms, a gallery, and — for a subject that can carry client data —
a redaction report. You **never post**. The bundle is for the operator to review
and sign off. You ship no business content; every fact is the operator's own data,
read from the resolved source.

## Inputs

- **subject** — a name (the business, the topic).
- **mode** — one of `microsite`, `bespoke`.
- **material** — the path the adapter reads (a built `site/`, or the operator's own
  photos and notes).
- **output** — where the bundle lands (for `microsite`, the site's own `site/`).

## 1. Resolve the subject, and echo it

Resolve the subject through its adapter in [`references/sources.md`](references/sources.md)
to the normalized intermediate (`topic`, headline/sub candidates, copy facts,
candidate images, `piiBearing`). **Before you render anything, state the resolved
subject and the source mode back** — e.g. "Resolving Meridian Advisory in
`microsite` mode from its built site." A mis-resolution must be visible here, not
discovered in a finished tile.

## 2. PII gate (if `piiBearing`)

If the adapter's `piiBearing` is true (`bespoke`, unless the operator declared the
material brand-safe), run the gate in [`references/pii-strip.md`](references/pii-strip.md)
over **every** candidate image and **every** copy fact — before any of it reaches a
template. Write `redaction-report.md` reconciling every source photo and text field
as *used / redacted / rejected*. If every photo is rejected, stop and ask for a
usable image; never emit an imageless bundle. **Do not present a bundle without the
report.** `microsite` skips this step (the site is already published copy).

## 3. Render the tiles (browser plugin, PNG)

1. Build the resolved render page: copy [`templates/og.html`](templates/og.html) to
   `<output>/og.html` and substitute `{{ CANDIDATES_JSON }}` with the vetted
   candidate set (`{ key: { img, pos, head, sub }, … }`) plus the scalar tokens
   (palette, eyebrow, specs, domain, phone). The logo and hero images resolve from
   the output dir's `images/`.
2. Serve `<output>/` over a local HTTP server so relative paths and webfonts load
   (`cd <output> && python3 -m http.server <port>` via `Bash`; `file://` will not
   load the fonts).
3. For each tile, drive the on-device browser:
   - `browser-navigate` to `http://localhost:<port>/og.html?format=F&hero=H`,
   - `browser-resize` to the exact size — landscape `1200×628`, square `1200×1200`,
     portrait `1080×1350`,
   - `browser-evaluate` `document.fonts.ready.then(() => true)` (and a short settle)
     so the webfonts have landed before capture,
   - `browser-screenshot` to `<output>/socials/og-F-H.png`.
   A **person** hero (`isPerson: true`) renders **portrait only** — a landscape or
   square crop cuts off the head.
4. `Read` each finished PNG to confirm it rendered: logo legible, copy readable,
   scrim adequate. A **sub-20KB** file is a blank page (server not running, wrong
   port, or the page threw) — diagnose before re-running, never ship it.

## 4. Captions — all five platforms, plain register

Build `<output>/social-posts.md` from [`templates/social-posts.md`](templates/social-posts.md):
one block per tile, with copy for **Instagram, LinkedIn, TikTok, Facebook, and X**.
Write every line in the plain register (the `plainly` skill): no em-dashes, no
inflation vocabulary, no "it's not X, it's Y", no rhetorical openers, no emoji faking
enthusiasm. For a `piiBearing` subject, no caption names the client, the address or
postcode, any figure, any individual, or any email sender.

## 5. Gallery, and (microsite only) the og:image

Build `<output>/socials.html` from [`templates/socials.html`](templates/socials.html):
repeat the group block once per tile key. For a **person** hero (`isPerson: true`),
write only the portrait `<div class="tile">` cell for that key — delete the landscape
and square cells, since those files are never rendered for a person.

The OG snippet (`<div class="snippet">…</div>`) is **microsite only**. In `microsite`
mode, keep it, render the tiles into the site's `site/socials/`, and set the site's
`og:image`/`twitter:image` to `<WEBSITE_URL>socials/og-landscape-main.png` (a true
1200×628 card beats a raw hero for link previews; `WEBSITE_URL` is the site's absolute
URL from the brand pack). For a **bespoke** bundle there is no site to wire —
**delete the whole `<div class="snippet">` block** from the copied template before
substituting, so no `WEBSITE_URL` token survives.

## Output contract

```
<output>/
  og.html                         # the resolved render page (kept for re-runs)
  socials/
    og-landscape-<key>.png  og-square-<key>.png  og-portrait-<key>.png   # per tile
    og-portrait-<person-key>.png  # a person hero: portrait only
  socials.html                    # gallery: each tile at size, download links
  social-posts.md                 # captions per tile, all five platforms
  redaction-report.md             # piiBearing (bespoke) subjects only
```

## Completion criteria

- Every tile exists at its exact pixel size; a person tile is portrait only.
- Captions cover all five platforms; `socials.html` previews each tile with a working
  download link.
- For a `piiBearing` subject, `redaction-report.md` is present and accounts for
  **every** source photo and text field; no output names the client, the address, a
  figure, an individual, or an email sender.
- In `microsite` mode, the site's `og:image`/`twitter:image` point at the landscape
  main tile.
- `Read` each finished PNG — file size alone is not proof.

## When NOT to use

- The operator wants to **post** — this skill never posts; it produces a reviewable
  bundle and stops.
- The deliverable is the site itself → `web-design`. The full run (site + tiles) →
  `web-intake`, which calls this skill in `microsite` mode.

## Editions

Tile rendering drives the on-device `browser` plugin. Inside maxy-code that plugin is
present. A standalone (marketplace) install needs a browser MCP to render tiles; this
is a stated host dependency for the `socials` skill, not a silent gap. The `web-design`
build and its deploy do not depend on it.