@rubytech/create-maxy-code 0.1.398 → 0.1.400

package/payload/platform/plugins/web-designer/skills/socials/SKILL.md

@@ -0,0 +1,139 @@
+---
+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.

package/payload/platform/plugins/web-designer/skills/socials/references/pii-strip.md

@@ -0,0 +1,64 @@
+# socials — PII gate
+
+The gate runs for every `piiBearing` subject ([`sources.md`](sources.md)): `bespoke`
+unless the operator declares the material brand-safe. It runs **before** anything
+reaches a template — over every candidate image and every copy fact. `microsite`
+skips it (the site is already published copy).
+
+Detection is the agent's own visual and textual review against the taxonomy below
+plus operator confirmation. No computer-vision model ships; the operator-approval
+gate is the backstop. The skill **never posts** — the bundle is for review.
+
+## Text never emitted
+
+"Rendered-tile copy" means **every** text field that reaches a tile or a caption:
+the headline and sub (from the candidate set), the eyebrow, the four spec tags
+(`copyFacts.specs[]`), and every platform caption. The gate reviews all of them.
+
+No caption and no rendered-tile copy may contain:
+
+- the **client name** (person or company),
+- the **site address or postcode** (or any fragment that identifies the address),
+- any **contract, invoice, or payment figure** — any currency amount, any
+  percentage that reveals a financial position,
+- any **named individual** (worker, client, neighbour, surveyor),
+- any **email sender** address or name lifted from an instruction email.
+
+The work is the story. "New studio open on the high street" is publishable.
+"Invoice 3 for the Smiths at 14 Mill Lane, £42,310 due" is not.
+
+## Photos that are rejected
+
+Reject a candidate image (do not crop around it — reject the whole photo) if it
+shows:
+
+- a recognizable **face**,
+- a **vehicle number plate**,
+- a **house number, street sign, or nameplate**,
+- **visible client paperwork** — a letter, an invoice, a drawing with a title block,
+  a screen showing client data.
+
+A photo of the work itself — a finished space, a product, a completed project —
+with none of the above is usable.
+
+## The redaction report
+
+Every `piiBearing` run writes `redaction-report.md` to the output. It reconciles
+**every** source photo and **every** source text field to one disposition:
+
+- **used** — appears in the bundle (which tile / caption),
+- **redacted** — the source carried PII that was removed before use (name the field
+  and what was stripped),
+- **rejected** — not used at all (name the reason: which photo category, which text
+  rule).
+
+The report is the standing reconciliation that makes a silent leak visible: a source
+PII field that appears in an output but is absent from the report's redacted/rejected
+list is the failure signature. A **missing or empty report is itself a failure** —
+the skill refuses to present a bundle without it.
+
+## When every photo is rejected
+
+If vetting rejects every candidate image, stop and ask the operator for a usable
+photo. Never emit an imageless bundle, and never fall back to a stock or invented
+image — the report shows all photos *rejected* and no tile is written.

package/payload/platform/plugins/web-designer/skills/socials/references/sources.md

@@ -0,0 +1,66 @@
+# socials — source adapters
+
+The `socials` skill resolves a named **subject** to a normalized intermediate that
+the shared render core consumes. One adapter per subject kind. This file is the
+contract and the **extension point**: a future subject (a testimonial, a launch, an
+event) is a new row here, not a new skill.
+
+## The normalized intermediate
+
+Every adapter resolves its subject to this shape:
+
+```
+{
+  topic,              // one short phrase naming what the tiles are about
+  headlineCandidates, // [string] — lead lines, strongest first
+  subCandidates,      // [string] — supporting lines, paired to headlines
+  copyFacts,          // { eyebrow, specs[], domain, phone } — overlay scalars
+  candidateImages,    // [{ key, path, isPerson }] — vetted backgrounds
+  piiBearing          // boolean — does this source carry client data?
+}
+```
+
+`candidateImages[].key` becomes the tile `hero` and the filename suffix
+(`og-<format>-<key>.png`). `isPerson: true` marks a hero that must render
+**portrait only** (a landscape or square crop cuts off the head). `piiBearing`
+decides whether the PII gate in [`pii-strip.md`](pii-strip.md) runs before any of
+this reaches a template.
+
+## Adapters
+
+### `microsite` — `piiBearing: false`
+
+Reads a built `site/` directory (the output of `web-design`): the brand pack
+(`brand.md` tokens, `images/logo.png`) and the curated hero photos at the fixed
+paths the site uses:
+
+| key | image | leads with |
+|---|---|---|
+| `main` | `images/hero-01.webp` | the business's lead line |
+| `detail` | `images/hero-03.webp` | a quality / detail line |
+| `work` | `images/hero-06.webp` | a what-we-do line |
+| `founder` | `images/founder-portrait.webp` | "meet the…" — **`isPerson: true`, portrait only** |
+
+`copyFacts` for `microsite` is the brand pack's own credential cells (sector,
+services, areas, years) plus `domain`, `phone`, and the site's full `WEBSITE_URL`
+(the microsite-only og:image wiring needs the absolute URL, not just the domain).
+
+Brand-safe by nature (the site is already published copy), so the PII gate is
+skipped. This is the path `web-intake` calls as its final stage; it also wires the
+site's `og:image`/`twitter:image` to the landscape `main` tile. If the site has no
+figurehead, drop the `founder` key.
+
+### `bespoke` — `piiBearing: true` (operator may waive)
+
+An operator-chosen topic with the operator's own photos and notes. The operator
+supplies the topic, the headline/sub ideas, and the candidate images. The PII gate
+runs by default; the operator may declare the material brand-safe (their own
+marketing photos, no client identifiable) to skip it — that declaration is the only
+way the gate is waived for a bespoke subject.
+
+## Adding a subject later
+
+A new subject kind (testimonial, launch, event, …) is a new adapter section here:
+name what it reads, how it maps to the normalized intermediate, and its `piiBearing`
+value. No new skill, no new render core, no new caption register. If the source can
+carry client data, set `piiBearing: true` and the existing gate covers it.

package/payload/platform/plugins/web-designer/skills/socials/templates/og.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+<meta charset="UTF-8">
+<title>{{ COMPANY_SHORT }} social tile renderer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Lora:ital,wght@0,400;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  /* Brand tokens — substituted per subject by the resolving adapter. */
+  :root{
+    --ink:{{ INK_900 }}; --ink-2:{{ INK_700 }}; --paper:{{ PAPER_100 }}; --paper-2:{{ PAPER_200 }};
+    --copper:{{ ACCENT }}; --copper-soft:{{ ACCENT_SOFT }}; --brand-grey:{{ BRAND_GREY }};
+    --serif:'Cormorant Garamond',Garamond,serif; --body:'Lora',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
+  }
+  *{margin:0;padding:0;box-sizing:border-box;}
+  html,body{background:var(--ink);}
+  body{display:flex;align-items:flex-start;justify-content:flex-start;}
+  .stage{position:relative;overflow:hidden;background:var(--ink);color:#fff;}
+  .stage.landscape{width:1200px;min-width:1200px;max-width:1200px;height:628px;min-height:628px;max-height:628px;}
+  .stage.square{width:1200px;min-width:1200px;max-width:1200px;height:1200px;min-height:1200px;max-height:1200px;}
+  .stage.portrait{width:1080px;min-width:1080px;max-width:1080px;height:1350px;min-height:1350px;max-height:1350px;}
+  .hero{position:absolute;inset:0;background-size:cover;background-position:center;}
+  .scrim{position:absolute;inset:0;
+    background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.10) 32%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.84) 100%);}
+  /* real brand logo on a white chip so it reads on any photo */
+  .logo-chip{position:absolute;top:48px;left:64px;background:#fff;padding:16px 22px;
+    box-shadow:0 6px 22px rgba(0,0,0,.30);border-top:3px solid var(--copper);}
+  .logo-chip img{display:block;height:84px;width:auto;}
+  .copy{position:absolute;left:64px;right:64px;bottom:60px;}
+  .eyebrow{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.30em;text-transform:uppercase;color:var(--copper);margin-bottom:18px;}
+  .headline{font-family:var(--serif);font-style:italic;font-weight:500;font-size:72px;line-height:1.02;color:#fff;}
+  .sub{font-family:var(--body);font-style:italic;font-size:26px;color:#fff;opacity:.94;margin-top:14px;}
+  .rule{width:64px;height:2px;background:var(--copper);margin:24px 0 20px;}
+  .specs{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.10em;text-transform:uppercase;color:#fff;opacity:.92;}
+  .specs span+span::before{content:"·";color:var(--copper);margin:0 9px;}
+  .foot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:18px;
+    border-top:1px solid rgba(255,255,255,.28);
+    font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#fff;}
+  .foot .r{color:var(--copper);}
+  .stage.square .headline,.stage.portrait .headline{font-size:84px;}
+  .stage.square .sub,.stage.portrait .sub{font-size:30px;}
+  .stage.square .eyebrow,.stage.portrait .eyebrow{font-size:19px;}
+  .stage.square .logo-chip img,.stage.portrait .logo-chip img{height:62px;}
+  .stage.portrait .copy{bottom:78px;}
+  .stage.square .copy{bottom:72px;}
+</style>
+</head>
+<body>
+  <div class="stage" id="stage">
+    <div class="hero" id="hero"></div>
+    <div class="scrim"></div>
+    <div class="logo-chip"><img src="images/logo.png" alt="{{ COMPANY_NAME }}"></div>
+    <div class="copy">
+      <div class="eyebrow">{{ TILE_EYEBROW }}</div>
+      <h1 class="headline" id="headline"></h1>
+      <div class="sub" id="sub"></div>
+      <div class="rule"></div>
+      <div class="specs"><span>{{ TILE_SPEC_1 }}</span><span>{{ TILE_SPEC_2 }}</span><span>{{ TILE_SPEC_3 }}</span><span>{{ TILE_SPEC_4 }}</span></div>
+      <div class="foot"><span>{{ WEBSITE_DOMAIN }}</span><span class="r">{{ PHONE_DISPLAY }}</span></div>
+    </div>
+  </div>
+<script>
+  // CANDIDATES is substituted by the socials skill AFTER the PII gate. It is an
+  // object keyed by hero name; each entry names a background image (a path that
+  // resolves from this file's directory) and the headline/sub it leads with:
+  //   { main: { img:'images/hero-01.webp', pos:'center', head:'…', sub:'…' }, … }
+  // For a built site the adapter supplies the brand themes; for a bespoke
+  // subject it supplies the vetted candidate images and the copy facts that
+  // survived redaction. No client PII ever reaches this object — the gate strips
+  // it upstream.
+  //
+  // A person hero (a founder portrait, a person) must be rendered
+  // PORTRAIT ONLY: a landscape or square crop cuts off the head. The socials
+  // skill enforces this by only emitting the portrait format for a person hero.
+  const CANDIDATES = {{ CANDIDATES_JSON }};
+  // ?format=landscape|square|portrait  &  ?hero=<key from CANDIDATES>
+  const q = new URLSearchParams(location.search);
+  const keys = Object.keys(CANDIDATES);
+  const fmt = q.get('format') || 'landscape';
+  const hero = q.get('hero') || keys[0];
+  const h = CANDIDATES[hero] || CANDIDATES[keys[0]];
+  const stage = document.getElementById('stage');
+  stage.classList.add(fmt);
+  const heroEl = document.getElementById('hero');
+  heroEl.style.backgroundImage = "url('" + h.img + "')";
+  heroEl.style.backgroundPosition = h.pos || 'center';
+  document.getElementById('headline').textContent = h.head;
+  document.getElementById('sub').textContent = h.sub;
+</script>
+</body>
+</html>

package/payload/platform/plugins/web-designer/skills/socials/templates/social-posts.md

@@ -0,0 +1,46 @@
+# {{ COMPANY_NAME }} — social captions
+
+Paste-ready copy for each tile. Phone {{ PHONE_DISPLAY }} · {{ WEBSITE_DOMAIN }}
+{{ FACEBOOK_HANDLE }} · {{ INSTAGRAM_HANDLE }} · {{ TIKTOK_HANDLE }}
+
+Write every caption in the plain register (the `plainly` skill): no em-dashes, no
+inflation words (discover, unlock, nestled, stunning, boasts, bespoke-where-it-
+isn't), no "it's not X, it's Y", no rhetorical openers, no emoji used to fake
+enthusiasm. Read each one aloud; if it sounds like a marketing bot, rewrite it.
+
+For a PII-bearing (bespoke) subject no caption may name the client, the address
+or postcode, any contract / invoice / payment figure, any named individual, or
+any email sender. The work is the story; the people and the money are not.
+
+Repeat the block below once per rendered tile. `{{ TILE_KEY }}` matches the tile
+filename (`og-*-{{ TILE_KEY }}.png`); a person tile is portrait only, so its block
+references the portrait image alone.
+
+## Per-platform shape (a cap, not a target)
+
+- **Instagram (feed + portrait)** — name first, then what is visible, then "link in
+  bio" if there is a site, then 4–6 hashtags. The portrait line leads with what is
+  in that specific hero.
+- **LinkedIn** — three short paragraphs, professional, plain.
+- **TikTok** — one short hook line plus 3–5 hashtags.
+- **Facebook** — three short paragraphs, warmer than LinkedIn.
+- **X** — under 280 characters, one clear line.
+
+---
+
+## {{ TILE_HEAD }} — `og-*-{{ TILE_KEY }}.png`
+
+**Instagram (feed + portrait)**
+{{ TILE_KEY_INSTAGRAM }}
+
+**LinkedIn**
+{{ TILE_KEY_LINKEDIN }}
+
+**TikTok**
+{{ TILE_KEY_TIKTOK }}
+
+**Facebook**
+{{ TILE_KEY_FACEBOOK }}
+
+**X**
+{{ TILE_KEY_X }}

package/payload/platform/plugins/web-designer/skills/socials/templates/socials.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ COMPANY_NAME }} · Social collateral</title>
+<link rel="icon" href="favicon.png" type="image/png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Lora:ital,wght@0,400;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  /* Brand tokens — substituted per subject by the resolving adapter. */
+  :root{
+    --ink:{{ INK_900 }}; --ink-2:{{ INK_700 }}; --slate:{{ INK_400 }}; --paper:{{ PAPER_100 }}; --paper-2:{{ PAPER_200 }};
+    --rule:{{ RULE_100 }}; --gold:{{ ACCENT_TEXT }}; --copper:{{ ACCENT }}; --brand-grey:{{ BRAND_GREY }};
+    --serif:'Cormorant Garamond',Garamond,serif; --body:'Lora',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
+  }
+  *{margin:0;padding:0;box-sizing:border-box;}
+  body{font-family:var(--body);background:var(--paper-2);color:var(--ink);line-height:1.6;}
+  img{display:block;max-width:100%;height:auto;}
+  a{color:inherit;}
+  header{background:var(--paper);border-bottom:1px solid var(--rule);padding:22px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
+  header img{height:64px;width:auto;}
+  header .t{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brand-grey);}
+  .wrap{max-width:1100px;margin:0 auto;padding:48px 32px 64px;}
+  .lede{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--ink);margin-bottom:8px;}
+  .lede::after{content:'';display:block;width:40px;height:2px;background:var(--copper);margin-top:16px;}
+  .intro{font-size:15px;color:var(--ink-2);max-width:680px;margin-bottom:14px;}
+  .snippet{background:var(--ink);color:#fff;border-radius:2px;padding:20px 22px;margin:22px 0 40px;overflow-x:auto;}
+  .snippet .h{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);margin-bottom:12px;}
+  .snippet pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;color:#e9e6df;white-space:pre;}
+  .group{margin-top:48px;}
+  .group h2{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink);margin-bottom:4px;}
+  .group h2 .role{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);margin-left:12px;vertical-align:middle;}
+  .group .cap{font-size:13.5px;color:var(--ink-2);max-width:680px;margin:8px 0 20px;border-left:3px solid var(--copper);padding-left:14px;}
+  .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;align-items:end;}
+  .tile{background:var(--paper);border:1px solid var(--rule);padding:12px;}
+  .tile img{width:100%;border:1px solid var(--rule);}
+  .tile .meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
+  .tile .fmt{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);}
+  .tile .dl{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:var(--ink);text-decoration:none;padding:7px 12px;}
+  .tile .dl:hover{background:var(--copper);}
+  footer{border-top:1px solid var(--rule);padding:28px 32px;text-align:center;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);}
+</style>
+</head>
+<body>
+<header>
+  <img src="images/logo.png" alt="{{ COMPANY_NAME }}">
+  <span class="t">Social collateral</span>
+</header>
+<div class="wrap">
+  <div class="lede">{{ GALLERY_LEDE }}</div>
+  <p class="intro">{{ GALLERY_INTRO }} Landscape (1200×628) for Facebook, LinkedIn and link previews; square (1200×1200) for the Instagram feed; portrait (1080×1350) for Instagram and Reels covers. Captions for every tile are in <a href="social-posts.md" style="text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);">social-posts.md</a>.</p>
+
+  <!--
+    OG SNIPPET — microsite mode only. A bespoke bundle has no site to wire, so
+    omit this whole block for a bespoke subject. When present, it points at the
+    landscape main tile (PNG).
+  -->
+  <div class="snippet">
+    <div class="h">Paste into the page &lt;head&gt; for link previews</div>
+<pre>&lt;meta property="og:image" content="{{ WEBSITE_URL }}socials/og-landscape-main.png"&gt;
+&lt;meta property="og:image:width" content="1200"&gt;
+&lt;meta property="og:image:height" content="628"&gt;
+&lt;meta name="twitter:card" content="summary_large_image"&gt;
+&lt;meta name="twitter:image" content="{{ WEBSITE_URL }}socials/og-landscape-main.png"&gt;</pre>
+  </div>
+
+  <!--
+    GROUP BLOCK — repeat once per resolved tile key. {{ TILE_KEY }} matches the
+    filename suffix; {{ TILE_HEAD }} / {{ TILE_CAPTION }} are the subject's copy.
+    A standard tile has all three formats. A PERSON tile is portrait only: emit
+    just the portrait cell for it (drop the landscape and square cells).
+  -->
+  <div class="group">
+    <h2>{{ TILE_HEAD }} <span class="role">{{ TILE_KEY }}</span></h2>
+    <p class="cap">{{ TILE_CAPTION }}</p>
+    <div class="tiles">
+      <div class="tile"><img src="socials/og-landscape-{{ TILE_KEY }}.png" alt="{{ TILE_HEAD }}, landscape tile"><div class="meta"><span class="fmt">Landscape · 1200×628</span><a class="dl" href="socials/og-landscape-{{ TILE_KEY }}.png" download>Download</a></div></div>
+      <div class="tile"><img src="socials/og-square-{{ TILE_KEY }}.png" alt="{{ TILE_HEAD }}, square tile"><div class="meta"><span class="fmt">Square · 1200×1200</span><a class="dl" href="socials/og-square-{{ TILE_KEY }}.png" download>Download</a></div></div>
+      <div class="tile"><img src="socials/og-portrait-{{ TILE_KEY }}.png" alt="{{ TILE_HEAD }}, portrait tile"><div class="meta"><span class="fmt">Portrait · 1080×1350</span><a class="dl" href="socials/og-portrait-{{ TILE_KEY }}.png" download>Download</a></div></div>
+    </div>
+  </div>
+</div>
+<footer>© {{ COPYRIGHT_YEAR }} {{ COMPANY_LEGAL_NAME }} · {{ TAGLINE }}</footer>
+</body>
+</html>

package/payload/platform/plugins/web-designer/skills/web-design/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: web-design
+description: Build a finished, scrollable single-page website for any business from the placeholder template, a brand pack, and the operator's curated photos and copy. Produces a self-contained site/ directory — index.html (hero rotator, about, what-we-do, how-we-work, optional founder section, testimonial, services, key facts, FAQ, CTA, footer, back-to-top) plus an llms.txt — with structured data (JSON-LD) whose type is operator-supplied. Domain-neutral, so no business category is baked in. Use after brand-extract, or directly when the brand pack and copy already exist. Trigger phrases include "build the site", "lay out the landing page", "turn this brand plus photos into a one-page site".
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Glob
+  - Grep
+---
+
+# web-design
+
+Renders the canonical single-page site from `templates/index.html` and
+`templates/llms.txt` by substituting every `{{ PLACEHOLDER }}`. The template is
+the spec: copy it, fill it, never rebuild it from scratch from this prose.
+
+## Canonical template — the only starting point
+
+`templates/index.html` ships with this skill. It encodes the entire site —
+structure, CSS, the JS hero rotator + drawer + sticky sub-nav + back-to-top, the
+responsive rules, and the JSON-LD — with every business-specific value as a
+`{{ TOKEN }}`. Copy it to `<output>/site/index.html` and substitute. Do the same
+with `templates/llms.txt`. The full token list and what fills each is in
+[`references/placeholders.md`](references/placeholders.md); the section catalogue
+and the image-naming convention are in [`references/sections.md`](references/sections.md).
+
+A run that hand-builds the HTML from this prose, or starts from a previous
+client's rendered `index.html`, is a defect — it drifts every cycle. Copy the
+canonical and substitute.
+
+## Substitution contract
+
+- After substitution, `grep "{{" site/index.html site/llms.txt` returns **zero**
+  matches. Any surviving `{{ }}` is a bug.
+- Palette tokens come from the brand pack's ten values. `ACCENT_TEXT` is the
+  deepened, legible form of `ACCENT` — not the same value.
+- `SCHEMA_TYPE` is operator-supplied. Default to `LocalBusiness`; use
+  `Organization` for a business with no premises, or a more specific schema.org
+  subtype when one fits. Never fall back to a trade or industry type.
+- Copy tokens are written in the plain register: no em-dashes in body text, no
+  inflation vocabulary, no marketing cadence. A real client testimonial is used
+  **verbatim**; never reword it.
+- Never invent a fact to fill a token. If intake did not collect it, go back and
+  ask. An empty contact detail or a guessed year is a defect.
+
+## Images — curate by content, name by convention
+
+The template references images by the fixed convention in
+[`references/sections.md`](references/sections.md) so the operator can tell what
+each slot is from the filename. Curate by **content, verified by eye**, never by
+filename: lead the hero with the strongest "arrive here" shot, put the best
+result in the testimonial, distribute the rest. A person's photo is founder-only;
+it never goes in the rotator as a landscape crop. Every `alt` token is filled
+from the real photo it sits on.
+
+### The 2000px rule
+
+Never `Read` an image whose longest edge exceeds 2000px — measure first, preview a
+downscaled `/tmp` copy if larger, delete it. Optimise to webp: body tier ~1300px
+q82; hero tier source-resolution q88; the portrait kept tall.
+
+## Verify every page state
+
+Serve `site/` over a local HTTP server and check, at a 1280px desktop and a 390px
+mobile viewport: no horizontal overflow, no broken images, the hero rotates, the
+drawer opens with every link, the sticky sub-nav reveals on scroll, the
+back-to-top appears and works, and both JSON-LD blocks are valid JSON once
+substituted. Bottom-align paired images and equal-height cards where the layout
+calls for it.
+
+## Completion criteria
+
+- `site/index.html` and `site/llms.txt` exist with zero surviving `{{ }}`.
+- Every referenced image resolves; alts describe the real photos.
+- Desktop + mobile verified; hero, drawer, sub-nav, back-to-top all work.
+- Both JSON-LD blocks (the business, typed by the operator's `SCHEMA_TYPE`, and
+  `FAQPage`) parse and match the visible copy.
+
+## Deploy hand-off
+
+The build ends at a self-contained `site/` tree. To go live, the tree becomes the
+canonical Cloudflare Pages source at `<root>/pages/<project>/`, where `<root>`
+comes from the resolver — never hardcode it:
+
+```bash
+ROOT=$(sh "$(dirname "$0")/../../bin/resolve-cf.sh" site-root)   # from the skill dir
+# assemble <ROOT>/pages/<project>/ with the built site as its output dir
+```
+
+Then follow [`references/deploy.md`](references/deploy.md) to publish, attach the
+custom domain, wire any form to D1, and gate "done" on a live `200`. For a page or
+document that must sit behind a login, follow [`references/gating.md`](references/gating.md).
+For a document that must be signed, follow [`references/e-sign.md`](references/e-sign.md).
+
+This skill runs in the admin/main session. It dispatches no specialist worker and
+writes to no graph or memory store.

package/payload/platform/plugins/web-designer/skills/web-design/references/deploy.md

@@ -0,0 +1,59 @@
+# Deploy hand-off
+
+The build produces one canonical source tree at `<root>/pages/<project>/`, where
+`<root>` is `bin/resolve-cf.sh site-root` and `<project>` is the site slug. That
+tree holds the built output directory, `wrangler.toml`, and
+`functions/api/<name>.ts` for any form the site captures. There is exactly one
+tree per site; never deploy from a `.bak` clone or a stale sibling.
+
+This reference composes existing deploy mechanics. It does not fork them.
+
+## Inside maxy-code: hand off to `cloudflare:site-deploy`
+
+When the host carries the `cloudflare` plugin, hand the canonical tree to the
+`cloudflare:site-deploy` skill and let it run unchanged. It resolves its own
+account Pages-and-D1 token, runs `wrangler pages deploy` to the production alias,
+attaches the custom domain, wires a contact or waitlist form to D1, checks Open
+Graph correctness, and gates "done" on a cache-busted live `200` on the custom
+domain. Do not re-implement any of that here — `site-deploy` is the deploy
+authority; this skill only produces the tree it consumes.
+
+## Standalone: the generic Cloudflare Pages sequence
+
+When `cloudflare:site-deploy` is not present (the marketplace edition), publish
+with `wrangler` directly, following the public mechanics in the Cloudflare
+references. Resolve the token through the seam — the resolver prints the **key
+name**, never the value:
+
+```bash
+KEY=$(sh bin/resolve-cf.sh token-key)      # -> CLOUDFLARE_API_TOKEN, standalone
+eval "export CLOUDFLARE_API_TOKEN=\"\$$KEY\""
+cd "$(sh bin/resolve-cf.sh site-root)/pages/<project>"
+wrangler pages deploy <output-dir> --project-name <project> --branch=main
+```
+
+Then attach the custom domain to the Pages project and confirm a DNS record points
+the hostname at `<project>.pages.dev` (a subdomain needs a `CNAME`; an apex needs
+a proxied flattened `CNAME` plus a `www` `CNAME`). The token that carries
+**Account · Cloudflare Pages · Edit** and **Account · D1 · Edit** is the one the
+form work below also needs.
+
+## Forms and buckets: D1
+
+A form on the site POSTs to a Pages Function (`functions/api/<name>.ts`) that
+`INSERT`s into a D1 table bound in `wrangler.toml` as `[[d1_databases]]`. The token
+must carry **both** Pages Edit and D1 Edit — a Pages-only token cannot touch D1,
+and even a `SELECT` needs D1 Edit. One form is one table; additional form "buckets"
+(a waitlist, a callback request, a survey) are additional tables and additional
+`functions/api/<name>.ts` handlers on the same pattern. The full mechanics — table
+schema, the `swept` read-cursor, the token discipline, and the D1 round-trip
+proof — are in the host's `cloudflare/references/d1-data-capture.md`; follow it
+rather than restating it.
+
+## Done-gate
+
+"Done" is a live behavioural signal on the production custom domain, surfaced in
+chat: a cache-busted `HTTP/2 200`, a content marker for this site (not a stale one
+from a previous brand), brand-correct `og:*` tags, and — for a form-bearing site —
+a test POST that appears in D1 unswept. Inside maxy-code this gate is
+`site-deploy`'s; standalone it is the same curl-plus-D1-SELECT check.