@rubytech/create-sitedesk-code 0.1.402 → 0.1.405

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

@@ -635,9 +635,9 @@
     <span></span><span></span><span></span>
   </button>
   <div class="left">
-    <a href="#story">About</a>
-    <a href="#offer">What we do</a>
-    <a href="#how">How we work</a>
+    <a href="#story">{{ NAV_STORY_LABEL }}</a>
+    <a href="#{{ OFFER_SECTION_ID }}">{{ NAV_OFFER_LABEL }}</a>
+    <a href="#{{ HOW_SECTION_ID }}">{{ NAV_HOW_LABEL }}</a>
     <a href="#founder">{{ FOUNDER_SECTION_LABEL }}</a>
   </div>
   <div class="center">
@@ -654,9 +654,9 @@
 <div class="drawer" id="drawer" aria-hidden="true">
   <button class="drawer-close" aria-label="Close menu">&times;</button>
   <nav class="drawer-nav">
-    <a href="#story">About</a>
-    <a href="#offer">What we do</a>
-    <a href="#how">How we work</a>
+    <a href="#story">{{ NAV_STORY_LABEL }}</a>
+    <a href="#{{ OFFER_SECTION_ID }}">{{ NAV_OFFER_LABEL }}</a>
+    <a href="#{{ HOW_SECTION_ID }}">{{ NAV_HOW_LABEL }}</a>
     <a href="#founder">{{ FOUNDER_SECTION_LABEL }}</a>
     <a href="#words">Reviews</a>
     <a href="#services">Services</a>
@@ -679,7 +679,7 @@
     <span class="price">{{ SECTOR_LABEL }} · Est. {{ ESTABLISHED_YEAR }}</span>
   </div>
   <div class="right">
-    <a href="#how">How we work</a>
+    <a href="#{{ HOW_SECTION_ID }}">{{ NAV_HOW_LABEL }}</a>
     <a href="#services">Services</a>
     <a href="#words">Reviews</a>
     <a href="mailto:{{ EMAIL }}?subject=Project%20enquiry" class="cta">Get in touch</a>
@@ -713,7 +713,7 @@
       <span>{{ HERO_SPEC_4 }}</span>
     </div>
     <div class="links">
-      <a href="#offer">Our work</a>
+      <a href="#{{ OFFER_SECTION_ID }}">Our work</a>
       <a href="#words">Reviews</a>
       <a href="#services">Services</a>
     </div>
@@ -741,8 +741,8 @@
   </div>
 
   <!-- WHAT WE DO -->
-  <article class="body-block" id="offer">
-    <div class="section-eyebrow">What we do</div>
+  <article class="body-block" id="{{ OFFER_SECTION_ID }}">
+    <div class="section-eyebrow">{{ OFFER_EYEBROW }}</div>
     <h2>{{ BUILD_HEADLINE }}</h2>
     <p>{{ BUILD_PARA_1 }}</p>
     <p>{{ BUILD_PARA_2 }}</p>
@@ -758,8 +758,8 @@
   </div>
 
   <!-- HOW WE WORK -->
-  <article class="body-block" id="how">
-    <div class="section-eyebrow">Start to finish</div>
+  <article class="body-block" id="{{ HOW_SECTION_ID }}">
+    <div class="section-eyebrow">{{ HOW_EYEBROW }}</div>
     <h2>{{ CRAFT_HEADLINE }}</h2>
     <p>{{ CRAFT_PARA_1 }}</p>
     <p>{{ CRAFT_PARA_2 }}</p>

package/payload/platform/scripts/check-no-esm-require.mjs

@@ -50,6 +50,9 @@ const ALLOWLIST = new Set([
   // Same vi.hoisted pattern: Task 576's claude-auth refresh-lock test
   // builds a tmpdir + creds path before the module's `../paths` mock fires.
   'platform/ui/app/lib/__tests__/claude-auth-refresh-lock.test.ts',
+  // Same vi.hoisted pattern: Task 1410's claude-auth atomic-write test
+  // builds a tmpdir + creds path before the module's `../paths` mock fires.
+  'platform/ui/app/lib/__tests__/claude-auth-atomic-write.test.ts',
   // Task 666: the module under test is a pure .cjs preload
   // (server-init-line-stamper.cjs); the test loads it via the sanctioned
   // createRequire(import.meta.url) ESM→CJS bridge, not a raw require.

package/payload/premium-plugins/sitedesk/BUNDLE.md

@@ -1,6 +1,6 @@
 ---
 name: sitedesk
-description: "SiteDesk premium bundle for independent service businesses. Two sub-plugins: sitedesk-media turns an operator's photos, website, social links and notes into a marketing micro-site plus share-ready social tiles; sitedesk-job captures the operator's own pricing/quotation method and applies it to produce the live quote, and issues recurring interim valuations (progress claims) from carried job state with a deterministic roll-up, and rolls up field workers' daily check-ins into per-worker timesheets and CIS invoices. Brand-agnostic — no client content ships in the templates or the pricing/job tree. 7 skills, 0 MCP tools."
+description: "SiteDesk premium bundle for independent service businesses. Two sub-plugins: sitedesk-media turns an operator's photos, website, social links and notes into a marketing micro-site plus share-ready social tiles; sitedesk-job captures the operator's own pricing/quotation method and applies it to produce the live quote, and issues recurring interim valuations (progress claims) from carried job state with a deterministic roll-up, and rolls up field workers' daily check-ins into per-worker timesheets and CIS invoices. Brand-agnostic — no client content ships in the templates or the pricing/job tree. 5 skills, 0 MCP tools."
 plugins:
   - sitedesk-media
   - sitedesk-job
@@ -27,12 +27,14 @@ as `plugin:sitedesk:<name>` — so it contributes four `installedPremiumSpeciali
 entries on any brand that ships `sitedesk`. Each owns one deliverable and the
 skill(s) that produce it: `quoter` owns `quotation`, `valuer` owns `valuation`,
 `payroll-clerk` owns `timesheet` (the three `sitedesk-job` skills), and
-`media-producer` owns the four `sitedesk-media` skills. The admin agent dispatches
-the one whose deliverable matches the brief via `subagent_type`.
+`media-producer` owns the two `sitedesk-media` skills — the construction `microsite`
+wrapper and the `job`/`valuation` `socials` adapter — over the shared `web-designer`
+builder. The admin agent dispatches the one whose deliverable matches the brief via
+`subagent_type`.
 
 ## Sub-Plugins
 
 | Sub-Plugin | Skills | MCP Tools | Focus |
 |---|---|---|---|
-| `sitedesk-media` | 4 | — | Marketing collateral pipeline — brand extract, single-page micro-site, Open Graph + social tiles with gallery and captions. From an operator's photos + website + social links + notes, asking questions to fill every gap. |
+| `sitedesk-media` | 2 | — | Marketing collateral over the shared `web-designer` builder — a construction `microsite` wrapper (web-designer's site with construction framing as input) and a `socials` job/valuation adapter (renders job progress through web-designer's tile core under the money boundary). Generic brand-extract, build, and rendering are web-designer's. |
 | `sitedesk-job` | 3 | — | Job-centric workflows — `quotation` captures the operator's own pricing method (items, quantity rules, pricing rules, roll-up, documents) and applies it to produce the live quote; `valuation` sets up a job and issues its recurring interim valuations (progress claims) from carried state and a per-cycle delta, with a deterministic roll-up that reconciles to the penny; `timesheet` rolls up field workers' daily check-ins into per-worker timesheets and CIS invoices for a period, reconciled to the penny. No business content ships; everything is the operator's data. |

package/payload/premium-plugins/sitedesk/PLUGIN.md

@@ -11,8 +11,8 @@ they appear in the native Claude Code subagent registry as
 `plugin:sitedesk:<name>`. Each owns one deliverable and the skill(s) that
 produce it: `quoter` the `quotation` skill, `valuer` the `valuation` skill,
 `payroll-clerk` the `timesheet` skill (all three in `sitedesk-job`), and
-`media-producer` the `sitedesk-media` skills (`make-media`, `brand-extract`,
-`microsite`, `socials`).
+`media-producer` the two `sitedesk-media` skills (`microsite`, `socials`) over the
+shared `web-designer` builder.
 
 No tools, hooks, or commands are declared at this layer — the sub-plugins under
 `plugins/` register via their own `PLUGIN.md` and carry the skills and commands.

package/payload/premium-plugins/sitedesk/agents/sitedesk--media-producer.md

@@ -1,6 +1,6 @@
 ---
 name: media-producer
-description: "SiteDesk media producer. Delegate when the deliverable is marketing collateral — turning an operator's photos, website, social links and notes into a marketing micro-site plus share-ready social tiles. Owns the whole media pipeline: brand extract, single-page micro-site, and Open Graph plus social tiles with gallery and captions. Not for job pricing, valuations or timesheets (those are the quoter, valuer and payroll-clerk)."
+description: "SiteDesk media producer. Delegate when the deliverable is marketing collateral — turning an operator's photos, website, social links and notes into a construction micro-site plus share-ready social tiles. Owns the media deliverable end to end, built on the shared web-designer builder: brand extract, single-page micro-site with construction framing, and Open Graph plus social tiles with gallery and captions. Not for job pricing, valuations or timesheets (those are the quoter, valuer and payroll-clerk)."
 summary: "Your media producer — turns an operator's photos, website and notes into a marketing micro-site and social tiles."
 model: claude-sonnet-5
 tools: Skill, Read, Write, Edit, Bash, Glob, Grep, WebFetch, mcp__plugin_browser_browser__browser-navigate, mcp__plugin_browser_browser__browser-evaluate, mcp__plugin_browser_browser__browser-render, mcp__plugin_browser_browser__browser-resize, mcp__plugin_browser_browser__browser-screenshot, mcp__plugin_browser_browser__browser-wait-for
@@ -18,16 +18,27 @@ You never invent the operator's business content. Brand facts, copy and the sour
 
 ## What you own
 
-Load each skill on demand with the `Skill` tool; it carries its own method.
+You own two SiteDesk skills — the construction `microsite` wrapper and the
+`socials` job/valuation adapter. The shared builder underneath them is the
+`web-designer` plugin; you drive its skills directly. Load each skill on demand with
+the `Skill` tool; it carries its own method.
 
 | Skill | Sub-plugin | What it does |
 |-------|------------|--------------|
-| `make-media` | `sitedesk-media` | Single-entry orchestrator: intake → ask the gaps → `brand-extract` → `microsite` → `socials`. Use when the deliverable is "a website and social images for this business" from mixed source material. |
-| `brand-extract` | `sitedesk-media` | Turn an existing website into a brand pack — tokenized palette, logo/icon image files, and a `brand.md` of company facts plus an explicit "still unknown" list. |
-| `microsite` | `sitedesk-media` | Build the scrollable single-page micro-site (`site/` directory: `index.html` + `llms.txt`, with JSON-LD) from the placeholder template, brand pack, photos and copy. |
-| `socials` | `sitedesk-media` | Render exact-size Open Graph and social tiles (1200×628, 1200×1200, 1080×1350) as PNG for a named subject, with a PII gate for any client-data source, a gallery with download links, captions for all five platforms, and a redaction report; wires the site's `og:image` for micro-sites. Drives the on-device `browser` plugin to screenshot each tile at its exact viewport. |
+| `microsite` | `sitedesk-media` | Build the construction micro-site by driving `web-designer:web-design` with the construction framing (schema, UK geography, the trade-shaped section labels) as inputs. Owns no template. |
+| `socials` | `sitedesk-media` | Render social tiles for a SiteDesk subject. `microsite`/`bespoke` delegate to `web-designer:socials`; `job`/`valuation` read the job's progress under the money boundary and render through `web-designer:socials` bespoke mode. |
 
-When the operator asks for the full marketing deliverable, run `make-media` — it orchestrates the other three. Run the individual media skills directly only when the upstream output already exists.
+The generic builder underneath is web-designer's, dispatched directly:
+
+| Skill | Plugin | What it does |
+|-------|--------|--------------|
+| `brand-extract` | `web-designer` | Turn an existing website into a brand pack — tokenized palette, logo/icon files, and a `brand.md` of company facts plus a "still unknown" list. |
+| `web-design` | `web-designer` | The single canonical single-page site template, substitution contract, image convention, and page-state verification. `microsite` supplies the construction inputs. |
+| `socials` | `web-designer` | The tile render core (exact-size PNG tiles, gallery, captions, PII gate, og:image wiring). SiteDesk's `socials` delegates here. |
+
+For the full marketing deliverable — a site and its social tiles — orchestrate the
+steps yourself: `web-designer:brand-extract` → `microsite` → `socials`. Run any one
+skill directly when the upstream output already exists.
 
 ## Output contract
 

package/payload/premium-plugins/sitedesk/plugins/sitedesk-media/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "sitedesk-media",
-  "description": "Turn an operator's raw inputs (a folder or zip of photos, an existing website URL, social-media links, and any notes about the business) into a finished marketing micro-site plus a set of share-ready Open Graph and social tiles. A single-entry orchestrator extracts the brand, asks the operator targeted questions to fill every gap, builds a scrollable single-page site (hero rotator, story, founder section, testimonial, services, FAQ, AEO/JSON-LD), then renders the social tiles with a gallery and captions. Brand-agnostic: all copy and tokens live as placeholders in the templates.",
+  "description": "Turn an operator's raw inputs (a folder or zip of photos, an existing website URL, social-media links, and any notes about the business) into a finished construction micro-site plus a set of share-ready Open Graph and social tiles. Built on the shared web-designer builder: web-designer extracts the brand, builds the single-page site, and renders the tiles; SiteDesk supplies the construction framing and the job/valuation social subjects. Brand-agnostic: no client content ships here, and no builder template is copied.",
   "version": "0.1.0",
   "author": {
     "name": "Rubytech LLC"

package/payload/premium-plugins/sitedesk/plugins/sitedesk-media/PLUGIN.md

@@ -1,49 +1,53 @@
 ---
 name: sitedesk-media
-description: "Turn an operator's raw inputs (a folder or zip of photos, an existing website URL, social-media links, and any notes about the business) into a finished marketing micro-site plus a set of share-ready Open Graph and social tiles. A single-entry orchestrator extracts the brand, asks the operator targeted questions to fill every gap, builds a scrollable single-page site (hero rotator, story, founder section, testimonial, services, FAQ, AEO/JSON-LD), then renders the social tiles with a gallery and captions. Brand-agnostic: all copy and tokens live as placeholders in the templates."
+description: "Turn an operator's raw inputs (a folder or zip of photos, an existing website URL, social-media links, and any notes about the business) into a finished construction micro-site plus a set of share-ready Open Graph and social tiles. Built on the shared web-designer builder: web-designer extracts the brand, builds the single-page site, and renders the tiles; SiteDesk supplies the construction framing and the job/valuation social subjects. Brand-agnostic: no client content ships here, and no builder template is copied."
 tools: []
 metadata: {"platform":{"optional":true,"embed":["admin"]}}
 ---
 
 # SiteDesk — Media
 
-End-to-end marketing-collateral pipeline. From an operator's photos, their
-existing website, social links and any notes, the skills produce a self-contained
-`site/` directory — a scrollable single-page micro-site (`index.html` + `llms.txt`)
-plus a `socials/` folder of Open Graph and social tiles with a gallery and
-captions. The agent extracts the brand, then asks the operator to fill every gap;
-it never invents a fact.
+Marketing collateral for an independent building contractor, built on the shared
+`web-designer` plugin. From an operator's photos, their existing website, social
+links and any notes, the pipeline produces a self-contained `site/` directory — a
+scrollable single-page micro-site (`index.html` + `llms.txt`) plus a `socials/`
+folder of Open Graph and social tiles with a gallery and captions. web-designer owns
+the brand extraction, the site template, and the tile render core; SiteDesk owns the
+construction framing and the job/valuation social subjects. The agent never invents a
+fact — it extracts and asks.
 
 ## When to Activate
 
-The operator wants a website and social images for a service business, built from
-mixed source material (photos + a site + social links + notes).
+The operator wants a construction micro-site and social images for a building firm,
+built from mixed source material (photos + a site + social links + notes), or social
+tiles for a live job's progress.
 
 ## Skills
 
 | Skill | Purpose |
 |-------|---------|
-| `make-media` | Single-entry orchestrator — intake → ask the gaps → brand-extract → microsite → socials |
-| `brand-extract` | Pull a tokenized palette, logo/icon, and company facts (plus an explicit "still unknown" list) from an existing website |
-| `microsite` | Build the scrollable single-page site from the placeholder template + brand + photos + answers |
-| `socials` | Render exact-size Open Graph + social tiles (PNG) and captions for a named subject — micro-site, job, valuation, or bespoke — with a PII gate for client-data sources; gallery + redaction report; wires og:image for micro-sites |
+| `microsite` | Build the construction micro-site by driving `web-designer:web-design` with the construction framing (schema, UK geography, trade-shaped section labels) as inputs. Owns no template. |
+| `socials` | Render social tiles for a SiteDesk subject. `microsite`/`bespoke` delegate to `web-designer:socials`; `job`/`valuation` read the job's progress under the money boundary and render through `web-designer:socials` bespoke mode. |
+
+The generic builder — `brand-extract`, the `web-design` template and substitution
+contract, and the `socials` tile render core — is the `web-designer` plugin's, used
+as-is.
 
 ## Commands
 
-`/make-media <images-dir-or-zip> [website-url] [social-links] [notes…]` — run the full pipeline.
+`/make-media <images-dir-or-zip> [website-url] [social-links] [notes…]` — orchestrate
+the full pipeline (`web-designer:brand-extract` → `microsite` → `socials`).
 
 ## Tools Used
 
 No MCP server of its own. Skills operate via existing platform tools (Bash, Read,
-Write, Edit, Glob, Grep, WebFetch). Tile rendering uses the on-device `browser`
-plugin (Chrome DevTools Protocol): it sets the viewport and screenshots each tile at
-its exact size against the device's running Chromium — no Playwright ships on a Pi.
-The image encoder for site photos is `cwebp` (libwebp); the browser plugin writes
-tiles as PNG.
-
-## Templates
-
-All copy and colour are placeholders — no client data ships in the templates.
-The token dictionary is in `skills/microsite/references/placeholders.md`; the
-section + image map is in `skills/microsite/references/sections.md`; the operator
-question set is in `skills/make-media/references/intake-and-questions.md`.
+Write, Edit, Glob, Grep, WebFetch) and the `Skill` tool to drive the web-designer
+skills. Tile rendering is web-designer's, which drives the on-device `browser` plugin
+to screenshot each tile at its exact size.
+
+## No templates ship here
+
+The site template, the placeholder dictionary, the section + image map, and the tile
+render templates all live in `web-designer`. SiteDesk's `microsite` supplies the
+construction values as inputs; SiteDesk's `socials` keeps only the `job`/`valuation`
+source contract in `skills/socials/references/sources.md`.

package/payload/premium-plugins/sitedesk/plugins/sitedesk-media/README.md

@@ -1,19 +1,19 @@
 # sitedesk-media
 
 Turn an operator's raw inputs — a folder of photos, an existing website, social
-links, and any notes about the business — into a finished marketing **micro-site**
-plus a set of **share-ready social tiles**. The agent extracts the brand, asks the
-operator targeted questions to fill every gap, then builds the site and the social
-collateral. All copy and colour live as placeholders in the templates, so the
-pipeline is brand-agnostic.
+links, and any notes about the business — into a finished construction **micro-site**
+plus a set of **share-ready social tiles**. Built on the shared `web-designer`
+plugin: web-designer extracts the brand, builds the single-page site, and renders the
+tiles; SiteDesk adds the construction framing and the job/valuation social subjects.
+No client content and no builder template ship here.
 
 ## Pipeline
 
 ```
-make-media  (orchestrator: intake → ask the gaps → route the steps)
-  ├─ brand-extract   website → palette tokens + logo/icon + company facts (+ gaps)
-  ├─ microsite       templates + brand + photos + answers → site/index.html + llms.txt
-  └─ socials         resolved subject → og/social tiles (PNG) + gallery + captions
+/make-media  (media-producer orchestrates the steps)
+  ├─ web-designer:brand-extract   website → palette tokens + logo/icon + company facts (+ gaps)
+  ├─ microsite                    drives web-designer:web-design with construction framing → site/index.html + llms.txt
+  └─ socials                      microsite/bespoke → web-designer:socials; job/valuation → staged brief → web-designer:socials bespoke
 ```
 
 Run it with the command:
@@ -22,9 +22,8 @@ Run it with the command:
 /make-media <images-dir-or-zip> [website-url] [social-links] [notes…]
 ```
 
-or invoke the `make-media` skill directly. Each sub-skill is also usable on its
-own (`brand-extract` for just tokens + logo; `microsite` for just the page;
-`socials` for just the tiles).
+Each step is also usable on its own (`web-designer:brand-extract` for just tokens +
+logo; `microsite` for just the page; `socials` for just the tiles).
 
 ## What you get
 
@@ -36,35 +35,26 @@ own (`brand-extract` for just tokens + logo; `microsite` for just the page;
   socials.html    # tile gallery + OG meta snippet
   social-posts.md # captions per tile and platform
   og.html         # tile render page (kept for re-runs)
-<output>/<brand-slug>-microsite.zip
 ```
 
 ## Principles
 
-- **Ask, never invent.** Every placeholder is a fact about a real business. What
-  the website and the operator's notes don't supply, the agent asks for. A guessed
-  year, phone number, or testimonial is a defect.
-- **Keep claims as claims.** "Trading since 1987" is not an incorporation date;
-  "over 35 years" is not a company age. Company-registration facts come from the
-  register or the operator, never a marketing line.
-- **Verify images by eye, name by convention.** Photos are matched to slots by
-  content (never filename), optimised to webp, and a person is only ever shown in
-  the founder slots and a portrait-only tile.
+- **Ask, never invent.** Every fact is about a real business. What the website and
+  the operator's notes don't supply, the agent asks for. A guessed year, phone
+  number, or testimonial is a defect.
+- **Keep claims as claims.** "Trading since 1987" is not an incorporation date.
+  Company-registration facts come from the register or the operator, never a
+  marketing line.
+- **The money boundary is absolute.** A job or valuation tile carries the progress,
+  never a figure: no contract, valuation, or payment amount, no `pctComplete` value,
+  no client identifier. The read never touches the money fields.
 - **Plain register for all copy.** No em-dashes, no inflation vocabulary, no
   AI-marketing cadence. Real testimonials are used verbatim.
-- **Built for answer engines.** The site ships `JSON-LD` (business + FAQ),
-  Open Graph tiles, and an `llms.txt`.
 
-## Templates (all placeholder, no client data)
+## What lives where
 
-```
-skills/microsite/templates/index.html     # the single-page site
-skills/microsite/templates/llms.txt
-skills/socials/templates/og.html           # tile render page
-skills/socials/templates/socials.html
-skills/socials/templates/social-posts.md
-```
-
-The full token dictionary is in `skills/microsite/references/placeholders.md`; the
-section + image map is in `skills/microsite/references/sections.md`; the operator
-question set is in `skills/make-media/references/intake-and-questions.md`.
+SiteDesk owns two thin skills — `skills/microsite/SKILL.md` (the construction
+wrapper) and `skills/socials/SKILL.md` plus `skills/socials/references/sources.md`
+(the job/valuation source contract and the money boundary). Everything else — the
+site template, the placeholder dictionary, the section + image map, and the tile
+render templates — is `web-designer`'s.

package/payload/premium-plugins/sitedesk/plugins/sitedesk-media/commands/make-media.md

@@ -4,10 +4,10 @@ argument-hint: <images-dir-or-zip> [website-url] [social-links] [notes…]
 allowed-tools: Bash, Read, Write, Edit, Glob, Grep, WebFetch, Skill, AskUserQuestion
 ---
 
-Run the `make-media` skill end-to-end on the inputs below.
+Build the media deliverable end-to-end on the inputs below, orchestrating the steps yourself.
 
 Inputs: $ARGUMENTS
 
-Follow the orchestrator's routing: `brand-extract` (website + logo + tokens + company facts) → ask the operator the intake questions for every field still missing → `microsite` (build the single-page site into `<output>/site/`) → `socials` in `microsite` mode (render the Open Graph + social tiles, gallery and captions into `<output>/site/socials/`).
+Route: `web-designer:brand-extract` (website + logo + tokens + company facts) → ask the operator for every field still missing → `microsite` (drives `web-designer:web-design` with the construction framing to build the single-page site into `<output>/site/`) → `socials` in `microsite` mode (renders the Open Graph + social tiles, gallery and captions into `<output>/site/socials/` via `web-designer:socials`).
 
 Never invent a fact. Where the website and the operator's notes do not supply a value, ask for it before building. Stop at the finished site + social bundle and report the paths.

package/payload/premium-plugins/sitedesk/plugins/sitedesk-media/skills/microsite/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: microsite
-description: Build a finished, scrollable single-page marketing micro-site for a small business from the placeholder template, the brand pack, and the operator's curated photos and copy. Produces a self-contained site/ directory — index.html (hero rotator, story, services, founder section, testimonial, "by the numbers", FAQ, CTA, footer, back-to-top) plus an llms.txt — with structured data (JSON-LD) for answer engines. Use after brand-extract, or directly when the brand pack and copy already exist. Trigger phrases include "build the microsite", "lay out the landing page", "turn this brand + photos into a one-page site".
+description: Build SiteDesk's construction micro-site by driving the shared web-designer builder with construction framing. Runs web-designer:web-design against the brand pack, the operator's copy and their curated photos, supplying the construction schema, UK geography, and the trade-shaped section labels as inputs. Owns no template — the single source is web-designer's. Use after brand-extract, or directly when the brand pack and copy already exist. Trigger phrases include "build the microsite", "lay out the landing page", "turn this brand + photos into a one-page site".
 allowed-tools:
+  - Skill
   - Bash
   - Read
   - Write
@@ -12,77 +13,53 @@ allowed-tools:
 
 # microsite
 
-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.
-- Copy tokens are written in the plain register (the `plainly` skill): no
-  em-dashes in body text, no inflation vocabulary, no AI-marketing cadence. A
-  real client testimonial is used **verbatim**; never reword it.
-- Never invent a fact to fill a token. If `make-media` 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 a fixed convention so the operator can tell
-what each slot is from the filename:
-
-- `hero-01.webp … hero-10.webp` — the 10-slide hero rotator (configurable down;
-  the JS cycles however many `.hero-slide` elements exist).
-- `grid-01.webp … grid-12.webp` — the photo grids.
-- `fullbleed-01.webp` — the full-width intermission image.
-- `founder-portrait.webp`, `founder-avatar.webp` — the person who fronts the firm.
-- `feature-project.webp`, `gift.webp` — the founder section's feature image and
-  any thank-you artefact.
-- `testimonial.webp` — the finished-result image beside the client quote.
-- `logo.png`, `icon.png` — from brand-extract.
-
-Curate by **content, verified by eye**, never by filename. Build a labelled
-contact sheet (≤ 2000px) and look: match each photo to its slot. Lead the hero
-with the strongest finished "arrive here" shot; put the best finished result in
-the testimonial; distribute the rest. A person's photo is founder-only; it never
-goes in the rotator as a landscape crop. Rewrite every `alt` to describe the
-actual photo — the template's alts are exemplar and must not survive as-is if they
-don't match the picture.
-
-### 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 founder 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.
-- JSON-LD (`GeneralContractor`/`LocalBusiness`/the right `SCHEMA_TYPE`, plus
-  `FAQPage`) parses and matches the visible copy.
+SiteDesk's construction micro-site is the shared `web-designer` site with
+construction framing supplied as input. This skill owns **no template**: it drives
+`web-designer:web-design`, which holds the one canonical template, substitution
+contract, image convention, and page-state verification. Do not copy or hand-build
+any HTML here.
+
+## Method
+
+Run `web-designer:web-design` (after `web-designer:brand-extract` has produced the
+brand pack) against the curated photos and the operator's copy. Fill web-design's
+tokens as it specifies, with these SiteDesk construction values for the framing
+tokens it exposes:
+
+**Schema and geography**
+- `SCHEMA_TYPE` — `GeneralContractor`, or `HomeAndConstructionBusiness` for a
+  broader building firm; a narrower schema.org construction subtype when one fits.
+- `COUNTRY_CODE` — `GB`.
+- `PAGE_LANG` — `en-GB`.
+- `COMPANY_NUMBER_LABEL` — `UK company number`.
+
+**Section framing (the seven web-design label tokens)**
+- `NAV_STORY_LABEL` — `Our story`
+- `NAV_OFFER_LABEL` — `What we build`
+- `NAV_HOW_LABEL` — `Our craft`
+- `OFFER_EYEBROW` — `What we build`
+- `HOW_EYEBROW` — `Ground to finish`
+- `OFFER_SECTION_ID` — `build`
+- `HOW_SECTION_ID` — `craft`
+
+**Copy framing** — write the offer block (`BUILD_*`) as what the firm builds, and
+the process block (`CRAFT_*`) as how a job runs ground to finish. The founder
+section and its "latest update" cards read in the trade's voice — a real job, a
+site the firm is on — never invented. Every copy and photo fact is the operator's;
+a fact you cannot source is a gap you flag, not one you make up.
+
+## Verify and report
+
+`web-designer:web-design` owns the completion checks (zero surviving `{{ }}`, every
+image resolves, desktop + mobile render, hero/drawer/sub-nav/back-to-top work, both
+JSON-LD blocks parse). Confirm the built site shows the construction framing — the
+nav reads `Our story` / `What we build` / `Our craft`, and the JSON-LD `@type` is
+the construction schema — then report the built `site/` path and any gaps.
+
+## What this does not do
+
+- It ships no template and no placeholder or section reference — those live in
+  `web-designer:web-design`.
+- It runs no brand extraction or intake of its own — `web-designer:brand-extract`
+  produces the brand pack and the pipeline gathers the copy.
+- It does not deploy, and it does not render social tiles — that is `socials`.