@rubytech/create-sitedesk-code 0.1.340

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

@@ -0,0 +1,75 @@
+---
+name: make-media
+description: Single-entry orchestrator that turns an operator's raw inputs — a folder or zip of photos, an existing website URL, social-media links, and any free-text notes about the business — into a finished marketing micro-site plus a set of share-ready social tiles. Use whenever the deliverable is "a website and social images for this business" from mixed source material. Routes to brand-extract → microsite → socials, and asks the operator targeted questions to fill every field the sources do not supply. Trigger phrases include "make a site for this business", "build a microsite from these photos and their website", "turn this into a landing page and social tiles", "sitedesk media for <business>".
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Glob
+  - Grep
+  - WebFetch
+  - Skill
+  - AskUserQuestion
+---
+
+# make-media
+
+Orchestrates the `brand-extract → microsite → socials` pipeline. The deliverable is a self-contained `site/` directory (a scrollable single-page micro-site, an `llms.txt`, and a `socials/` folder of Open Graph + social tiles with a gallery and captions) plus a zipped copy, built from whatever the operator provides and whatever the orchestrator has to ask for.
+
+This skill is a playbook, not a programmatic dispatcher. It tells you the routing and the gap-filling contract; you execute each step under the underlying skills' own contracts.
+
+## What the operator gives, and what you do with it
+
+| Operator supplies | Used for | If missing |
+|---|---|---|
+| **Images** (folder or zip of photos) | hero rotator, photo grids, founder portrait, testimonial, social tiles | required — the site is image-led. If none, stop and ask. |
+| **Website URL** | brand tokens (palette, accent), logo, company name, contact, services, "about" copy | run `brand-extract`; anything it cannot read becomes a question |
+| **Social links** (Facebook / Instagram / TikTok / LinkedIn) | footer + drawer links, social handles, extra copy/ideas in the operator's own voice | login-walled platforms usually cannot be scraped — say so plainly and ask the operator to paste any posts they want used |
+| **Free-text notes / pasted posts / quotes** | founder section, testimonials, "from the site" updates, service descriptions, taglines | use verbatim where the operator marks a quote; never reword a real client testimonial into marketing prose |
+| **Design tokens** (if supplied directly) | the palette `:root` — use them verbatim, do not re-pick | if absent, `brand-extract` derives them from the site |
+
+## The core rule: ask, never invent
+
+Every `{{ PLACEHOLDER }}` in the templates is a fact about a real business. The brand and the operator's notes fill most of them. **For every placeholder still unfilled after `brand-extract`, ask the operator — do not synthesise a plausible value.** A fabricated phone number, a guessed founding year, an invented testimonial, or a made-up company number is a defect, not a convenience. The reference list of questions is in [`references/intake-and-questions.md`](references/intake-and-questions.md); ask only for what is genuinely missing, grouped so the operator answers in as few turns as possible.
+
+Two facts are load-bearing and frequently wrong if guessed: the **founding/established year** (a business that "trades since 1987" may have incorporated much later — keep the two distinct), and any **company-registration detail** (number, registered office) which must come from the register or the operator, never from the website's marketing line.
+
+## Process — high level
+
+1. **Resolve the workspace.** Default output root is the images directory's parent, or the operator's stated path. The deliverable lands in `<output>/site/`.
+2. **Run `brand-extract`** against the website URL: produces the brand tokens (palette + accent), the logo (placed as `site/images/logo.png`) and icon, the company facts it can read, and a `brand.md` recording what was found and what is still unknown. If the operator supplied design tokens directly, use those verbatim instead of re-deriving.
+3. **Curate the images.** Verify each photo's *content* by eye (never trust filenames), measuring first and previewing any image whose longest edge exceeds 2000px (downscale to `/tmp`, read, delete) so a large photo never breaks the session. Pick the strongest, most varied shots for the hero rotator and the strongest finished result for the testimonial; map the rest to the photo grids. A person's portrait is for the founder section and a portrait-only social tile, never a landscape crop.
+4. **Fill the gaps.** Compare the placeholder inventory ([`microsite/references/placeholders.md`](../microsite/references/placeholders.md)) against what brand-extract found and the operator's notes. Ask the operator for everything still missing, in grouped questions. Wait for answers. Do not proceed with blanks.
+5. **Run `microsite`** to build `site/index.html` + `site/llms.txt` from the templates, substituting every placeholder. No `{{ }}` may survive into the output.
+6. **Run `socials` in `microsite` mode** to render the Open Graph + social tiles into `site/socials/`, plus `site/socials.html` (gallery) and `site/social-posts.md` (captions), and to wire the site's `og:image` to the landscape tile.
+7. **Verify and report.** Confirm no placeholder survived, every referenced asset resolves over a local HTTP server, the site renders at desktop and mobile, and the social tiles are at exact dimensions. Report the path to `site/` and the zip, and list any value you had to ask for.
+
+## Outcome contract
+
+```
+<output>/site/
+  index.html            # the scrollable micro-site
+  llms.txt              # answer-engine summary
+  favicon.png
+  images/               # curated, optimised webp + logo.png + icon.png
+  socials/              # og-{landscape,square,portrait}-{main,interior,build}.png + og-portrait-founder.png
+  socials.html          # tile gallery with download links + OG snippet
+  social-posts.md       # captions per tile and platform
+  og.html               # tile render page (kept for re-runs)
+<output>/<brand-slug>-microsite.zip
+```
+
+## Completion criteria
+
+- `grep "{{" site/index.html site/llms.txt site/socials.html` returns nothing — every placeholder substituted.
+- No invented facts: every value traces to the website, the operator's notes, or an answer the operator gave. Anything still genuinely unknown is shown as a clear gap, not a guess.
+- The site renders at desktop and a 390px mobile viewport with no horizontal overflow and no broken images; the hero rotates; the back-to-top works.
+- Social tiles exist at exact sizes (1200×628 / 1200×1200 / 1080×1350); any person tile is portrait only.
+- The operator-facing report names the site path, the zip path, and every field that had to be asked for.
+
+## When NOT to use this skill
+
+- The operator only wants the micro-site, or only the social tiles → call `microsite` or `socials` directly.
+- The operator only wants brand tokens and a logo from a URL → call `brand-extract` directly.
+- There are no usable photos of the business → the site is image-led; stop and ask for photos before anything else.

package/payload/premium-plugins/sitedesk/plugins/sitedesk-media/skills/make-media/references/intake-and-questions.md

@@ -0,0 +1,74 @@
+# Intake & gap-filling questions
+
+Ask only for what the website and the operator's notes did not already supply.
+Group the questions so the operator answers in as few turns as possible, and
+present sensible candidates from the source material where you have them ("Your
+site says you've traded since 1994 — is that the year to show?").
+
+Never invent a value to avoid asking. A guessed phone number or founding year is
+a defect. If the operator does not know a field (e.g. company number), leave that
+slot out of the output rather than filling it with a placeholder or a guess.
+
+## 1. Identity
+
+- Trading name and full legal name (e.g. "Acme Joinery" / "Acme Joinery Ltd").
+- Short monogram / initials, if any (used as a small brand mark).
+- Tagline / strapline, in their own words.
+- Sector label for the nav and tiles (e.g. "Builders", "Joiners", "Florist").
+- Established year. **Keep "trading since" separate from "company incorporated".**
+- Company registration number + jurisdiction, and registered office — only if the
+  operator wants legal detail in the footer. Take these from the register or the
+  operator, never from a marketing line.
+
+## 2. Contact & place
+
+- Phone (display + dialable), mobile if separate.
+- Email.
+- Website domain and full URL (for canonical + Open Graph).
+- Address: street, post town, county, postcode (only the parts they want shown).
+- Service area / region phrase (e.g. "the South East" or "Greater Manchester").
+- Social profiles: Facebook, Instagram, TikTok, LinkedIn (URLs + handles).
+
+## 3. The story (copy, in their voice)
+
+- One or two paragraphs on who they are and how long they've been going.
+- What they're proudest of / the standard they hold to.
+- A headline sentence that sums the business up.
+- The three or four "by the numbers" facts (established, experience, ownership,
+  coverage, specialism, approach, promise).
+
+## 4. What they do (services)
+
+- Up to six services, each a short name and a one-line description.
+- A one-line lede for the services section.
+
+## 5. The founder / person on site
+
+- Name and role of the person who fronts the business.
+- A short intro in their voice (what they do, how hands-on they are).
+- A quote from them, ideally about a specific job or their approach.
+- 1–3 recent "from the site" updates in their own words (the social-post voice
+  is good here — keep it, just drop the emoji per the plain register).
+- A portrait photo of them (used in the founder section and a portrait social
+  tile — a person is never cropped to landscape).
+
+## 6. Proof (testimonial)
+
+- A real client quote, used verbatim. Note the one phrase to highlight.
+- Who it's from and the context ("on their new kitchen").
+- Which finished-job photo best illustrates it.
+- Any thank-you artefact (a card, a gift photo) that adds a personal touch.
+
+## 7. FAQ (answer-engine targets)
+
+- 3–5 plain questions a customer actually asks, each with a one or two sentence
+  answer. Default set: what they do, how long they've been going, where they're
+  based / areas covered, plus two specific to the trade.
+
+## 8. Images (you curate, but confirm)
+
+- Confirm which photo is the strongest "arrive here" shot (hero / main tile).
+- Confirm the best finished-result shot (testimonial + interior tile).
+- Confirm a strong in-progress / scale shot (build tile, full-bleed).
+- Flag if the photo set is mostly work-in-progress so expectations are set, and
+  ask for any finished-result photos that would strengthen the hero.

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

@@ -0,0 +1,88 @@
+---
+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".
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Glob
+  - Grep
+---
+
+# 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.

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

@@ -0,0 +1,96 @@
+# Placeholder reference
+
+Every `{{ TOKEN }}` in the templates and what fills it. After substitution,
+`grep "{{"` across the output must return nothing. Never invent a value — if a
+token has no source, go back to the operator and ask.
+
+## Brand tokens (palette) — from `brand-extract`
+
+`INK_900` `INK_700` `INK_400` (text: primary / secondary / muted) ·
+`PAPER_100` `PAPER_200` (white surface / page-bg tint) · `RULE_100` (dividers) ·
+`ACCENT` (brand accent) · `ACCENT_TEXT` (accent **deepened** for legible small
+text) · `ACCENT_SOFT` (pale accent wash) · `BRAND_GREY` (logo grey).
+
+## Identity
+
+`COMPANY_NAME` (trading name) · `COMPANY_LEGAL_NAME` · `COMPANY_SHORT` (monogram /
+initials) · `TAGLINE` · `SECTOR_LABEL` (e.g. "Builders") · `ESTABLISHED_YEAR` ·
+`YEARS_TRADING` (e.g. "over 35 years") · `OWNERSHIP` (e.g. "Family-run") ·
+`COMPANY_NUMBER` · `COMPANY_JURISDICTION` · `COPYRIGHT_YEAR`.
+
+## Contact & place
+
+`PHONE_DISPLAY` `PHONE_TEL` `PHONE_INTL` · `MOBILE_DISPLAY` `MOBILE_TEL` ·
+`EMAIL` · `WEBSITE_URL` `WEBSITE_DOMAIN` · `STREET_ADDRESS` `POST_TOWN` `LOCALITY`
+`COUNTY` `POSTCODE` · `REGION` (service-area phrase) `REGION_2` (secondary area) ·
+`FACEBOOK_URL` `INSTAGRAM_URL` `TIKTOK_URL` (+ `*_HANDLE` in social-posts).
+
+## Hero info-card
+
+`HERO_STRAPLINE` · `HERO_META` (the "New builds · Extensions …" line) ·
+`HERO_SPEC_1..4` (four credential cells). Hero image alts are exemplar — rewrite
+to the real photos.
+
+## Story / Build / Craft body blocks
+
+`STORY_HEADLINE` `STORY_PARA_1` `STORY_PARA_2` ·
+`BUILD_HEADLINE` `BUILD_PARA_1..3` (each may open with a `<strong>lead-in.</strong>`) ·
+`CRAFT_HEADLINE` `CRAFT_PARA_1..3`.
+
+## Founder / team-lead section
+
+`FOUNDER_SECTION_LABEL` (eyebrow) · `FOUNDER_NAME` `FOUNDER_FIRST_NAME` ·
+`FOUNDER_HEADLINE` `FOUNDER_INTRO` `FOUNDER_QUOTE` `FOUNDER_ETHOS` ·
+`FEATURE_PROJECT_ALT` `FEATURE_PROJECT_CAPTION` · `GIFT_ALT` `GIFT_CAPTION` ·
+`UPDATES_LABEL` · `UPDATE_1..3_LOC` `UPDATE_1..3_TEXT` ("from the site" cards).
+
+## Testimonial
+
+`TESTIMONIAL_QUOTE` (verbatim; wrap the highlight clause in
+`<span class="hl">…</span>`) · `TESTIMONIAL_ATTRIB` · `TESTIMONIAL_CONTEXT`.
+
+## Services
+
+`SERVICES_HEADLINE` `SERVICES_LEDE` · `SERVICE_1..6_NAME` `SERVICE_1..6_DESC` ·
+`OFFER_CATALOG_NAME` (JSON-LD).
+
+## Why-us / key facts
+
+`WHY_HEADLINE` · `FACT_1..6_KEY` `FACT_1..6_VALUE` · `FACTS_FOOTNOTE`. (The first
+fact row, "Established", uses `ESTABLISHED_YEAR`; Coverage uses `REGION`; Based
+uses `LOCALITY`/`COUNTY`.)
+
+## FAQ (visible + JSON-LD use the same tokens)
+
+`FAQ_1..5_Q` `FAQ_1..5_A`.
+
+## CTA / footer / meta / schema
+
+`CTA_HEADLINE` · `FOOTER_LABEL` `FOOTER_LEGAL` · `META_DESCRIPTION`
+`META_DESCRIPTION_SHORT` · `SCHEMA_TYPE` (e.g. `GeneralContractor`,
+`LocalBusiness`, `HomeAndConstructionBusiness`) `SCHEMA_DESCRIPTION`.
+
+## llms.txt
+
+`LLMS_SUMMARY` (the one-paragraph elevator summary) · `RECENT_PROJECTS`.
+
+## Social tiles (`socials` skill — og.html / socials.html / social-posts.md)
+
+The `socials` skill renders the tiles. In `microsite` mode it resolves the four
+brand themes (`main`, `interior`, `build`, `founder`) as the candidate set; the
+per-hero head/sub no longer live as separate markup tokens — the skill builds them
+into `og.html`'s `CANDIDATES_JSON` object from the brand copy. The remaining scalar
+tokens the templates still carry:
+
+- **og.html:** `TILE_EYEBROW` · `TILE_SPEC_1..4` · `CANDIDATES_JSON` (the
+  `{ key: { img, pos, head, sub } }` set, one entry per theme) · `COMPANY_*` ·
+  `WEBSITE_DOMAIN` · `PHONE_DISPLAY` · the palette tokens.
+- **socials.html (gallery):** repeats one group block per tile key —
+  `TILE_KEY` · `TILE_HEAD` · `TILE_CAPTION`; the OG snippet (microsite only) uses
+  `WEBSITE_URL`.
+- **social-posts.md (captions):** one block per tile key, with
+  `TILE_KEY_INSTAGRAM` `TILE_KEY_LINKEDIN` `TILE_KEY_TIKTOK` `TILE_KEY_FACEBOOK`
+  `TILE_KEY_X` (where `TILE_KEY` is the theme key).
+
+See [`../../socials/references/sources.md`](../../socials/references/sources.md) for
+the full adapter contract.

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

@@ -0,0 +1,48 @@
+# Section catalogue & image map
+
+The single page runs top to bottom in this order. Each section is in the canonical
+`templates/index.html`; this is the map, not a rebuild instruction.
+
+| # | Section | What it is | Images |
+|---|---|---|---|
+| 1 | Top nav | Centred logo, deep links left, utility links right; collapses to a hamburger drawer ≤ 960px | `logo.png` |
+| 2 | Hero | 10-slide JS rotator with a slow Ken-Burns push-in (reduced-motion holds slide 1); floating info-card with tag, name, strapline, tagline, four credential cells, links, CTA | `hero-01..10.webp` |
+| 3 | Sticky sub-nav | Reveals after the hero scrolls past | — |
+| 4 | Story | Eyebrow + headline + two drop-capped paragraphs | grid after: `grid-01..04` |
+| 5 | What they do | Headline + three paragraphs (each a `<strong>` lead-in) | grids: `grid-05..08` |
+| 6 | Craft / process | Headline + three paragraphs | full-bleed `fullbleed-01`; grid `grid-09..12` |
+| 7 | Founder / team-lead | Portrait + intro + quote + ethos; a feature-project image and a thank-you artefact, bottom-aligned; three "from the site" update cards with bottom-aligned quote text | `founder-portrait`, `feature-project`, `gift` |
+| 8 | Testimonial | Dark band: finished-result image + verbatim client quote (highlight clause) + founder avatar | `testimonial`, `founder-avatar` |
+| 9 | Services | 3×2 grid of up to six services (name + one-line description) | — |
+| 10 | Why-us / key facts | 3-column grid of six key/value facts + footnote | — |
+| 11 | FAQ | Answer-first Q/A (matched by `FAQPage` JSON-LD) — answer-engine lift targets | — |
+| 12 | CTA strip | Accent band: tagline eyebrow, headline, phone / mobile / callback | — |
+| 13 | Footer | Contact column + legal paragraph (bottom-aligned) + colophon with the icon | `icon.png` |
+| — | Back-to-top | Fixed button, fades in past the hero | — |
+
+## Image-naming convention
+
+Curate the operator's photos into these names under `site/images/` (webp):
+
+- `hero-01..hero-10` — rotator. Pick varied, strong shots; lead with the best
+  finished "arrive here" image. The rotator cycles however many `.hero-slide`
+  elements exist, so fewer than 10 is fine — just delete the surplus slides.
+- `grid-01..grid-12` — photo grids, in document order.
+- `fullbleed-01` — the one full-width intermission image (a dramatic, wide shot).
+- `founder-portrait` (tall) and `founder-avatar` (square crop) — the person.
+- `feature-project`, `gift` — founder-section feature image and thank-you artefact.
+- `testimonial` — the finished result beside the client quote.
+- `logo.png`, `icon.png` — from brand-extract.
+
+A photo of a **person** belongs only in the founder/testimonial slots and the
+portrait social tile. It is never a hero-rotator landscape crop (the head gets cut).
+
+## Page-count / honesty notes
+
+- The 10-slide hero and the full grid set assume a reasonably deep photo library.
+  With fewer photos, reduce slides and drop grids rather than repeating images.
+- If the set is mostly work-in-progress, lead the hero and testimonial with the
+  few finished results and frame the rest honestly as craft/process. Say so to the
+  operator and ask for finished-result photos that would strengthen the hero.
+- Alts must describe the actual photo. The template alts are exemplar and must be
+  rewritten — verify content by eye, never trust a filename.