@bongos/core 1.19.463 → 1.19.464

package/.bongos-core.json

@@ -2,22 +2,22 @@
   "artifact": "bongos-core",
   "manifest_schema": 1,
   "generator": "scripts/gds/package-core.js",
-  "core_version": "1.19.463",
-  "core_contract": "1.19.463",
-  "source_commit": "0dcce51cd7eb0c0853908fce4ba5627b7ab290b2",
+  "core_version": "1.19.464",
+  "core_contract": "1.19.464",
+  "source_commit": "ee6e86603d465d87cccb18bc7a53b4e732dd3ec6",
   "source_ref": "HEAD",
-  "built_at": "2026-09-02T01:01:19.599Z",
+  "built_at": "2026-09-02T01:17:20.251Z",
   "redaction": {
     "model": "docs-redacted+functional-verbatim",
-    "docs_redacted": 400,
+    "docs_redacted": 405,
     "agent_docs_stubbed": 24,
-    "functional_verbatim": 1817,
+    "functional_verbatim": 1821,
     "rules": 3,
     "gate_literals": 3,
     "gate": "passed"
   },
-  "file_count": 2241,
-  "tree_sha256": "be5d78d76396268d4dd0c0a5f0959ba65febbb9a4bbe518abc4a17911d9d5980",
+  "file_count": 2250,
+  "tree_sha256": "0a8510092c669d2326c912c5d43bee468ee9474b55d62c40984bc017f03dcba4",
   "files": [
     {
       "path": ".claude/skills/blocker-review/SKILL.md",
@@ -127,7 +127,7 @@
     {
       "path": ".claude/skills/design/SKILL.md",
       "mode": "0000644",
-      "sha256": "c1ed5d4eaffffde255ac3308490d86f0235b9ab66a9349684652bb3eae82ae57"
+      "sha256": "bbb135d166a4e17b6059506f794c47c27740a063a068f1ea28c62a0aee7728b0"
     },
     {
       "path": ".claude/skills/dev/SKILL.md",
@@ -1614,10 +1614,15 @@
       "mode": "0000644",
       "sha256": "aed01aaa88a3deb1fbf15a1183f07954db0c7867272e7c6bd9dd0b74327c6c34"
     },
+    {
+      "path": "docs/adr/0222-the-image-family-under-the-hero-only-rule.md",
+      "mode": "0000644",
+      "sha256": "29a762aef81944134084fd1c4d36ef3e27fcf8c3ab5a1ef0e724bcb6d8d29a67"
+    },
     {
       "path": "docs/adr/README.md",
       "mode": "0000644",
-      "sha256": "f27631d3aa68cf8855420f62c4de01dd0c817d3b014e738fa1579bf92bfa16a3"
+      "sha256": "f3bf966757af821e04a58fc8f1504bac9d93a055a3160f69bb542b8a6631ef5a"
     },
     {
       "path": "docs/api-reference.md",
@@ -2097,7 +2102,7 @@
     {
       "path": "docs/file-map.md",
       "mode": "0000644",
-      "sha256": "1682c8c32b5cdab0d2a654da9b6e12cf7bbbccc1cf1d791fc6a5fc247268ecc7"
+      "sha256": "8224dda275200da6c94e0096c7dd7f4b88d5e57e76bb602bcf8ff325515ec991"
     },
     {
       "path": "docs/handoff-template.md",
@@ -2107,7 +2112,7 @@
     {
       "path": "docs/module-api-changelog.md",
       "mode": "0000644",
-      "sha256": "9b8886ab2a71a37fc86080c63c2458c1ae14124e1ccfee39d787f066730dfc20"
+      "sha256": "3754b5edbe630ddb0e12f4f5c749eec704aaa7d5dd2be8b04f1680f77df387e8"
     },
     {
       "path": "docs/modules-contract.md",
@@ -6347,7 +6352,7 @@
     {
       "path": "modules/ui-design/module.json",
       "mode": "0000644",
-      "sha256": "1b7e099867d2ecb1f752652a8e765fd421f87786847d0fe39527f2aa320b5167"
+      "sha256": "0f88b29039e01fb908e4351d3fdac8198206782a0afdbf5156da6e02ad312d26"
     },
     {
       "path": "modules/ui-design/scripts/design-sync.js",
@@ -6372,7 +6377,12 @@
     {
       "path": "modules/ui-design/skills/README.md",
       "mode": "0000644",
-      "sha256": "29d570739f8b22fa030631ae623a78c2676d4dcd8f94bbf40674617b8414a7da"
+      "sha256": "084b2a7757d7b6422683ac371f6448c563d2613c4c0061f077d27a335d1df2f0"
+    },
+    {
+      "path": "modules/ui-design/skills/brandkit/SKILL.md",
+      "mode": "0000644",
+      "sha256": "7b5cd9e896dcdb79a4386c863a03c628b6187fe81a0380ac50ea5dabc91fa468"
     },
     {
       "path": "modules/ui-design/skills/design-taste-frontend-v1/SKILL.md",
@@ -6389,6 +6399,21 @@
       "mode": "0000644",
       "sha256": "eeb33e0a2d0a227d23b67c5e6d32c5757d8d5d7249a1a6d0fe3c67d8bd95fc91"
     },
+    {
+      "path": "modules/ui-design/skills/image-to-code/SKILL.md",
+      "mode": "0000644",
+      "sha256": "9c07a2328416874d69897bada333f955a93ef165eb128f073fb3bf40baef2d1e"
+    },
+    {
+      "path": "modules/ui-design/skills/imagegen-frontend-mobile/SKILL.md",
+      "mode": "0000644",
+      "sha256": "664f64d1f16afb10d3027fcd7dc50031e0f090f75cf5ee72258adc78e2e2ff73"
+    },
+    {
+      "path": "modules/ui-design/skills/imagegen-frontend-web/SKILL.md",
+      "mode": "0000644",
+      "sha256": "75586cc997b927c7ca5ef7f3be574f4d81bd9238b01c9b66b1a5f8c587acaa14"
+    },
     {
       "path": "modules/ui-design/skills/impeccable/SKILL.md",
       "mode": "0000644",
@@ -6542,12 +6567,32 @@
     {
       "path": "modules/ui-design/styles/grove/DESIGN.md",
       "mode": "0000644",
-      "sha256": "f88f3ff4b0475767f63d4665bdb07caeb36550e3bd8a6c66aebc7fdc1b657887"
+      "sha256": "85da78fc0333ec15f59c45aa3e07c363832e72924acbf7518661d4cf76e56fc8"
+    },
+    {
+      "path": "modules/ui-design/styles/grove/assets/grove-pod-cut.webp",
+      "mode": "0000644",
+      "sha256": "4479bf93fff0d067e435699b31197eed45aa2ff40effd737c0d0a58810ca64f9"
+    },
+    {
+      "path": "modules/ui-design/styles/grove/assets/grove-pod-cut.webp.json",
+      "mode": "0000644",
+      "sha256": "c529d5fbe89908ac0e273020a3d82fe961c8591d1d2ff5396dd811a90a6f21ac"
+    },
+    {
+      "path": "modules/ui-design/styles/grove/assets/grove-pod.jpg",
+      "mode": "0000644",
+      "sha256": "c1804e737f57b32f2d6e4a8a45e20fc5f3667b9d8082967811f3da153c3c8f78"
+    },
+    {
+      "path": "modules/ui-design/styles/grove/assets/grove-pod.jpg.json",
+      "mode": "0000644",
+      "sha256": "b4dfeca544f49d97425a3a44f8170ce35b35ba1d105f4a5cfd69ea92d0cab67e"
     },
     {
       "path": "modules/ui-design/styles/grove/mock.html",
       "mode": "0000644",
-      "sha256": "ee2fdbe6a16ff00be4986e8c30a3d0fb37a8a077ad83a039610b22f2d20ce835"
+      "sha256": "0cca9a34bc828c30067b1007be0aaa1751e3a6b31ced65dd43e1ecdd1e6bfaf8"
     },
     {
       "path": "modules/ui-design/styles/grove/mock.states.json",
@@ -6562,12 +6607,12 @@
     {
       "path": "package-lock.json",
       "mode": "0000644",
-      "sha256": "7822706326857983b25da07c35e2750870c686b1bcec12f587df6a329c5a589a"
+      "sha256": "732ce8cbd9c2edfa91b96651f2267647929359f7374f36054766c037fcaef5c2"
     },
     {
       "path": "package.json",
       "mode": "0000644",
-      "sha256": "dcc27e26e0975c93c878be3f06c4b4a1ad0c66074ffcef687475aebe1b66277f"
+      "sha256": "a2e4a17551cc6ef235ebbb842898b99b596b006eac1176aafdbedddbc8f96c0b"
     },
     {
       "path": "public-docs/index.html",
@@ -8217,7 +8262,7 @@
     {
       "path": "src/module-api.js",
       "mode": "0000644",
-      "sha256": "1547fb781bcaa6916626669f3b662489da2858d540be6e11d20a9bc0ed20a846"
+      "sha256": "95f84943307e1c1f0062ae9eb0420d5a649c62d9b461fb46e7a4a154bcde6c6d"
     },
     {
       "path": "src/module-loader/catalog.js",
@@ -11137,7 +11182,7 @@
     {
       "path": "tests/ui_design_skills.mjs",
       "mode": "0000644",
-      "sha256": "391f6e8c5ff83e4c3c1e2148aed74c3346200efabc59657ac99820cfcfdac1ac"
+      "sha256": "155aa8b197f52ec73d3654ac8cb15134998e4de81fbbf37e8d7e423efebb94b1"
     },
     {
       "path": "tests/ui_design_styles.mjs",

package/.claude/skills/design/SKILL.md

@@ -61,13 +61,17 @@ Third-party design skills reach a builder only through the module's vendoring po
 
 - *None vendored (2026-08-28).* Both origins scanned for the scoped set — `pbakaus/impeccable`, and the eleven `Leonxlnx/taste-skill` skills (`minimalist-ui`, `industrial-brutalist-ui`, `gpt-taste`, `stitch-design-taste`, `image-to-code`, `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit`, and the four below) — reduced to `dangerous` at the scanner's deterministic floor and landed as rebuild specs (GDS tasks). The roster, the verdicts and the way to land one are in the README; vendoring one anyway is an owner override recorded in an ADR, not a session's call.
 
-**Rebuilt in-house from the specs** ([ADR 0220](../../../docs/adr/<redacted>.md), task 1003325; [ADR 0221](../../../docs/adr/<redacted>.md), task 1003326): first-party skills at `modules/ui-design/skills/<name>/`, each opening with the same preamble, each naming its spec and what changed in translation. They run INSIDE the loop above: the world first, the style library as the palette source for a variant, images as hero plates only, every motion rule inside the Kill Switch, the kit as the pre-flight.
+**Rebuilt in-house from the specs** ([ADR 0220](../../../docs/adr/<redacted>.md), task 1003325; [ADR 0221](../../../docs/adr/<redacted>.md), task 1003326; [ADR 0222](../../../docs/adr/<redacted>.md), task 1003328): first-party skills at `modules/ui-design/skills/<name>/`, each opening with the same preamble, each naming its spec and what changed in translation. They run INSIDE the loop above: the world first, the style library as the palette source for a variant, images as hero plates only, every motion rule inside the Kill Switch, the kit as the pre-flight.
 
 - **design-taste-frontend** — the default taste skill for a landing page, a portfolio or a marketing surface: the brief read in one line, three dials from presets, one world locked for the page, hero and layout discipline, rationed decoration, a pre-flight the kit measures. Declines dashboards, tables, wizards and editors.
 - **design-taste-frontend-v1** — the earlier generation, kept distinct: a fixed baseline triple adapted in conversation, stack conventions for a served surface, the layout bans, full interaction cycles, the named vocabulary of premium patterns and the tile-grid archetypes.
 - **high-end-visual-design** — the agency-build polish pass: one texture archetype (the library's looks) and one layout archetype per project, the nested container anatomy where the world allows a container, the pill with its nested arrow disc, the spatial rhythm, choreography and scroll entry inside the Kill Switch.
 - **redesign-existing-projects** — the in-place upgrade: scan the stack, diagnose against the seven-group audit with the instance's world as the answer key, fix in impact-per-risk order, one group per commit; keeps the stack, never migrates frameworks, `probe.js` green before and after.
 - **impeccable** — the design-craft method as one skill with sub-commands: `impeccable <sub-command> <target>` loads exactly one of eighteen playbooks (shape, critique, audit, polish, harden, onboard, animate, colorize, typeset, layout, adapt, distill, clarify, optimize, document, extract, bolder, quieter); no argument prints a menu from live project signals and never auto-runs; a bare description is routed to the closest playbook; carries the craft floor (loaded right before UI is edited, never recited) and the bounded finish (build, one kit round, one batch of fixes, at most one confirming round, stop; a read-only reviewer that answers with one of four words). No hooks, no bypass agent, no telemetry, no live server: the live loop is the playwright plugin below and the headless loop is the kit; the detector is task 1003329; native mobile declines to this loop.
+- **imagegen-frontend-web** — the plate-making skill under the hero-only rule: text-free hero plates, hero objects, backdrops and orbs for the slots a composition already has (the count is the slot count, committed out loud), a composition anchor per plate that is not text-left image-right, one material / light / lens across the family, the pack as the palette lock, the instance's art pipeline key, and the pair-and-sidecar output contract (a black-ground JPEG for dark, an alpha WebP cutout for light, a `<file>.json` beside each). Never a section image, a comp or a screen; writes no page code.
+- **imagegen-frontend-mobile** — the same, for the 390 and 320 compositions: portrait mastheads and fields clear of the regions a phone reserves, the first view held to one focal point, a scrim under any text over a plate. A screen is the surface's states file rendered by the kit; no phone mockups, no flows of screens; a native app target declines to this loop.
+- **image-to-code** — the analyse-then-implement loop with the owner's references and the instance's world as the source of truth: a structured per-image analysis, the extraction spec, a faithful translation with drift named as the failure mode, the hero and clutter rules, a clarity checklist the kit measures. The only image it may cause is the hero plate, through imagegen-frontend-web.
+- **brandkit** — the identity-system method with the strategy inferred first, the logo standard and the five concept methods; the mark is drawn as inline SVG, the colour system is the pack, the type specimen is the pack's faces on a real page, the applications are the platform's surfaces rendered by the kit, the image direction is a hero-object family, and the nine-panel board is a contact sheet of those real parts. Never a generated logo, board or mockup.
 
 **Prerequisite, not vendored:** the **playwright plugin** (`claude plugin install playwright@claude-plugins-official`) is the LIVE browser-driving loop, where the kit in Step 2 is the headless one. Install it on the machine that runs a design session; the module never installs anything.
 

package/docs/adr/0222-the-image-family-under-the-hero-only-rule.md

@@ -0,0 +1,36 @@
+# ADR 0222 — The image family under the hero-only rule: plates and hero objects, never screens; the mark is drawn; the board is a contact sheet; the pair and the sidecar are the output contract
+
+- **Status:** Accepted (2026-09-02)
+- **Task:** [task 1003328](https://cloudbongos.com/builders#/task/1003328) (goal 1000083 — the ui-design module as a platform capability; the third rebuild-spec task after [ADR 0220](<redacted>.md) and [ADR 0221](<redacted>.md))
+- **Owner intent (2026-08-28):** "a simple port, with ONE rewrite the upstream never had: the owner's rule that image generation is for text-free hero plates and hero objects only; UI is rebuilt from templates and the instance's world, never painted."
+
+## Context
+
+The four image skills of `Leonxlnx/taste-skill` (`image-to-code`, `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit`) scanned `dangerous` with the rest of that origin ([ADR 0198](<redacted>.md)); their REBUILD-SPEC groups sit in the body of task 1003325. All four are built around generating **pictures of interfaces**: one design-reference image per section, one app screen per flow step inside a phone mockup, an identity board with the brand name and labels rendered into the image, and a build loop whose source of truth is the generated image. The panel flagged the eagerness mandate, the "do not be lazy with image count" rule and the must-invoke-any-image-tool directive by name. The owner's rule (2026-08-26, reaffirmed 2026-08-27, recorded in the preamble's item 4 and in the chrome world's materials table) forbids the whole category: an image with letters, a comp, a screen or a frame around one is not a hero plate.
+
+A port that kept the method and changed only the subject had to answer what each skill *makes* when it may not make a picture of a screen.
+
+## Decision
+
+1. **The subject of every skill is the composition's plate slots, and the count is the slot count.** `imagegen-frontend-web` produces hero plates, hero objects, atmosphere backdrops and orbs for slots a surface already has (named by its `DESIGN.md`, a brief or a taste skill), commits to the list out loud, and never exceeds it; "one image per section" becomes "a plate with no slot is the floating blob the audit rejects". The composition-variety rules survive as **anchors** (field, beside-bleeding, masthead, orb, backdrop; the text-left image-right default refused by name), the palette lock becomes the pack, and cross-frame consistency becomes **one family**: one material, one key light, one lens, one ground across a surface.
+2. **A screen is the surface itself.** `imagegen-frontend-mobile` keeps the first-view rule, the mobile realities and the scrim rule, applied to portrait plates for the 390 and 320 compositions; the flow of screens is the states file rendered by the kit, the design bible is the instance's `DESIGN.md`, the phone mockup does not exist, and a native app target declines to `/design` (the same decline as `impeccable adapt`).
+3. **The source of truth for UI is the owner's references and the world, not a generated image.** `image-to-code` keeps its structured analysis, its extraction spec, its faithful-translation rule, its drift bans, its hero and clutter rules and its clarity checklist, reading the references; the one image it may cause is the hero plate, through `imagegen-frontend-web`. The "generate first, then analyse" order becomes read, extract, plate, implement.
+4. **The mark is drawn; the board is a contact sheet.** `brandkit` keeps the strategy inference, the logo standard, the five concept methods, the rhythm and the reference rule; the mark lands as inline SVG with a construction comment, the colour system as the branding pack, the type specimen as the pack's faces on a real page, the applications as the platform's surfaces rendered by the kit, the image direction as a hero-object family, and the nine-panel board as a contact sheet assembled from those real parts, a review artifact under the claim's scratch or `docs/design/`, never a generation and never under a surface's assets.
+5. **The output contract is DESIGN.md's pair and sidecar, and the key is the instance's.** What ships is the black-ground plate as JPEG for dark and the alpha cutout as WebP for light, at production size, with a `<file>.<ext>.json` sidecar beside every file (kind, model, aspect ratio, resolution, generated, round, the exact prompt, source, encoded, use), and `--plate-<name>` / `--plate-<name>-cut` tokens on `body` with root-absolute `url()`. Generation goes through the instance's art pipeline (the builder's own key at the hall's `/builders/settings#art-key` or the instance's shared key), never a credential a skill carries; the spend is logged with `cost.js` under the claim; a white ground (the model's one-in-six case) goes through the pipeline's background remover, and alpha is verified with `ffmpeg alphaextract` before a file is called a cutout. A plate is never a crop of an earlier plate.
+6. **The worked example lives in the style library's specimen, not on the front door.** The grove look's `DESIGN.md` said "this look brings none"; its specimen now carries one hero object (`styles/grove/assets/grove-pod.jpg` + `grove-pod-cut.webp`, sidecars beside them, tokens on the mock's `body`, the masthead anchor) as the proof that the skill, the pair convention and the kit's `--style` path agree, and the sentence now says so. A plate on the live front door would have been either dead weight or a design change to a surface the owner reviews; the specimen is the module's own.
+7. **The pins** (`tests/ui_design_skills.mjs`): the four exist and are declared; each names the sidecar, "text-free" and the art pipeline key in its own rules; none contains the eagerness mandate, an image-count mandate, a one-image-per-section or per-screen rule, or a must-invoke-any-image-tool directive (the ADR 0220 own-skill pins already refuse a step that mandates generating an image); `imagegen-frontend-mobile` and `brandkit` name what they will not generate. The grove specimen's plate is pinned by the existing style-library suite (the mock under the platform rules with `--pack grove`) and by the sidecar's presence beside each raster.
+
+## Consequences
+
+- **Nine in-house skills ship with the module**; `/design`, the README, the module `CLAUDE.md` and `docs/file-map.md` name all nine. The core checkout still does not see them (task 1003330).
+- **The style library now has one look with an asset.** The README's "a look brings no plates" default holds for the other two; a look's plates, where its owner adds them, follow this ADR's contract.
+- **Three credits of the builder's own image key were spent on the worked example** (one 2k generation, one background removal), logged as art cost under the task.
+- **`imagegen-frontend-mobile` is the thinnest skill of the family** by design: most of what its upstream did is the kit at 390. If an instance ever ships a native surface, the native playbooks are a new decision, not a widening of this one.
+
+## Rejected
+
+- **Keeping "one image per section" for reference-only use** ("we will not ship them"): a generated section image is still a painted UI, still costs credits, and still drifts; the owner's objection was to the practice, not to the shipping.
+- **Phone mockups as long as the screen inside is real** (a kit shot composited into a device frame): a frame around a screenshot is decoration the world does not have, and the shot is the evidence already.
+- **A generated logo "as a starting point"**: a raster mark cannot scale, cannot be constructed, and would be reproduced from whatever the model had seen; the standard the upstream itself set (scalable, balanced, constructible) is met by drawing.
+- **Landing the worked-example plate on the front door**: dead weight if unused, an owner-facing design change if used.
+- **A shared `imagegen` base skill with three thin wrappers**: three files that differ only in aspect and slot are not a family; the mobile and web skills differ in what they refuse.

package/docs/adr/README.md

@@ -308,5 +308,6 @@ This keeps the decision history honest and traceable.
 | 0219 | [**A look is a branding pack: the style library ships looks as `theme.ui` overlays, never as sheets** ([task 1003323](https://cloudbongos.com/builders#/task/1003323) · goal 1000083). The owner scoped "varying ui styles" for the ui-design module; the shape was decided by three facts: every served sheet already reads only the contract and is measured by a suite that resolves its own expressions under the pack (ADR 0196), the pack is one-mode (light values; dark is each sheet's black tier), and the world round's candidate token layers were sheets, not packs. Decisions: **D1** a look is `modules/ui-design/styles/<name>/` = `pack.json` (the `theme.ui` overlay, exactly the thirteen colours + the two font stacks and their links) + `DESIGN.md` (the derived recipes in the root DESIGN.md's frontmatter shape, thirteen in lockstep with the pack) + `mock.html` (a specimen with no `:root`, served through the stub with the pack spliced in), never a fork of a sheet; a sixteenth token is a contract change. **D2** `chrome-world` is canonical and pinned byte-for-byte to the neutral pack; its DESIGN.md points at the root one. **D3** the alternates `expedition` (natgeo-editorial) and `grove` (organic-cards) are ported by retuning the thirteen against the three sheets' own pair lists in both modes until every pair clears AA (the grove's sage lifted and its inks deepened for the hub's status vocabulary and the hall's chips); dark under both is the sheets' black. **D4** the picker rides `GDS_BRANDING_FILE`, the fixed knob `src/branding.js` already has: `STYLE=<name>` on the stub, `--style` on render/probe, `--pack <name>` on contrast/check-mock; no core change. **D5** the three token suites take `UI_DESIGN_PACK` and their drift tests keep measuring against the neutral pack; `tests/ui_design_styles.mjs` runs them once per alternate and proves the knob live with a pack that must fail. **D6** an instance adopts a look by copying `theme` into `config/branding.json`; what stays the platform's whichever look is on: the dark ground, the hall's verification vocabulary, every sheet's derived tier, the floors. Rejected: sheets per look beside world.css; a dark tier in the contract; a picker that writes the host boundary.](<redacted>.md) | ui-design / branding contract |
 | 0220 | [**An in-house rebuilt skill is a first-party skill: it lands at `skills/<name>/`, opens with the same preamble, carries a "Rebuilt from" section instead of a sidecar, and is counted** ([task 1003325](https://cloudbongos.com/builders#/task/1003325) · goal 1000083). ADR 0198 landed both scanned origins as rebuild specs and left the roster empty; this is the first rebuild — the taste core: `design-taste-frontend`, `design-taste-frontend-v1`, `high-end-visual-design`, `redesign-existing-projects` — and the policy had not said where a rebuild lives, what replaces `PROVENANCE.md`, whether a preamble written for vendored copies still fits, or whether five byte-identical copies of it trip the doc-entropy ratchet (they would have: baseline 6). Decisions: **D1** a rebuild is `modules/ui-design/skills/<name>/SKILL.md`, declared in `module.json`, materialised by step 1b's own-dir branch (no sidecar gate), first-party and counted by every ratchet — no `rebuilt/` exemption like `vendor/`, because these are our lines. **D2** one preamble worded for both origins ("vendored from a scanned origin, or rebuilt in-house from a spec"), still byte-identical everywhere; a rebuild's provenance is its `## Rebuilt from` section first after the block: the origin the SPEC was derived from (documentation only), the verdict, the spec task, "no upstream bytes consulted or copied", this ADR, and what changed in translation; no `PROVENANCE.md`, no `LICENSE`. **D3** the translation rules for every rebuilt taste skill: the palette is the pack and variants come from the style library (ADR 0219); the design system is the instance's `DESIGN.md`; imagery is hero plates and hero objects by token and never a step; every motion rule lives inside the Kill Switch (springs, magnetic hover, pointer-tracked borders are named *not available*); the upstream's bans are defaults an instance's `DESIGN.md` overrides, and where the world calls for what an audit would flag, the world is the answer key. **D4** `docs-entropy.js` skips a paragraph opening with the preamble marker beside its generated-block skip, calibrated against a plain duplicate that is still flagged. **D5** v1 is a distinct skill differing in content (the fixed triple, the stack conventions, the pattern vocabulary, the tile-grid archetypes), not a version stamp. **D6** the pins in `tests/ui_design_skills.mjs`: frontmatter name = dir, preamble first and once, the section's task link + ADR 0198 + "no upstream bytes", the style library and "hero plates" named, no image mandate, no sidecar, every door lists the four. Rejected: a sidecar with the spec's commit; a second preamble; a `rebuilt/` segment; vendoring anyway (an owner override, not taken); folding v1 into v2; raising the doc baseline.](<redacted>.md) | ui-design / skills |
 | 0221 | [**The impeccable method is one skill with sub-command playbooks: one preamble, one playbook per request, the three homes are the instance's own files, and the origin's mechanisms are dropped rather than disabled** ([task 1003326](https://cloudbongos.com/builders#/task/1003326) · goal 1000083). `pbakaus/impeccable` scanned `dangerous` (ADR 0198: hooks written into five harness configs, a child agent with permissions bypassed, an instruction override, a live-server credential in page source, an unverified remote bundle, default-on telemetry), so its method is rebuilt from the spec. ADR 0220 fixed where a rebuild lives; it had not said how a family of sub-commands lands, what the origin's three persisted homes become, or what to do with the six spec areas whose substance is the condemned mechanism. Decisions: **D1** one skill at `skills/impeccable/`: `SKILL.md` (invocation, the menu from live signals, session setup, the three homes, the routing table, the craft floor, the bounded finish, what is not here) plus `reference/<sub-command>.md`, eighteen playbooks, exactly one loaded per request (the spec's own entry rule); the preamble pinned once in `SKILL.md` and governing every playbook; the materialiser's tree copy ships `reference/` unchanged. **D2** the three homes are the instance's files (product truth = `docs/project-context.template.md` + the pack's identity; the visual system = the root `DESIGN.md` and a look's; the brief = the task's body + a fixed brief block in the ship notes); the skill creates none, `shape` proposes diffs, `document` drafts on the claim's branch with the refresh / overwrite / merge choice. **D3** dropped, not disabled, each with a destination: hooks → none (the ship gate is the sweep, the pre-flight is the kit); the bypass agent → an ordinary read-only subagent via the Agent tool; telemetry, the remote bundle, the credential → none; the live loop → the playwright plugin driving the kit's stub, variants as states, accept = commit, discard = checkout, nothing injected; the detector → task 1003329; the asset producer → the hero-plates rule and task 1003328; native → declines to `/design`; `init`/`doctor`/`pin`/installer → the materialiser is the install. **D4** the finish is the kit in bounded rounds (build, one batched inspection, one batch of fixes, at most one confirming round, stop, one budget) and the reviewer answers with one of `clean` / `recapture` / `defects` / `contradicted` after an evidence check and its own mock inventory. **D5** the craft floor is mechanics loaded late and never recited, translated for a world that may be hairlines by rule. **D6** the pins: sixteen routed playbooks, no orphan, no preamble copy in a playbook, and nothing in the tree directing a bypass, a hook write, a settings edit, telemetry, a remote download, a credential or an override. Rejected: eighteen skills; one inline file; a hooks-lite opt-in; an elevated reviewer; a `doctor`; the native playbooks.](<redacted>.md) | ui-design / skills |
+| 0222 | [**The image family under the hero-only rule: plates and hero objects, never screens; the mark is drawn; the board is a contact sheet; the pair and the sidecar are the output contract** ([task 1003328](https://cloudbongos.com/builders#/task/1003328) · goal 1000083). The four image skills of `Leonxlnx/taste-skill` (scanned `dangerous`, ADR 0198) are built around pictures of interfaces: one reference image per section, one app screen per flow step in a phone mockup, an identity board with the brand name rendered in, and a build loop whose truth is the generated image; the panel flagged the eagerness mandate, the image-count rule and the must-invoke-any-tool directive by name, and the owner's rule (2026-08-26/27) forbids the category. Decisions: **D1** the subject is the composition's plate slots and the count is the slot count; variety survives as anchors (field, beside-bleeding, masthead, orb, backdrop; text-left image-right refused), the palette lock is the pack, cross-frame consistency is one family (material, light, lens, ground). **D2** a screen is the surface itself: the mobile skill makes portrait plates for 390 / 320, the flow is the states file rendered by the kit, the bible is `DESIGN.md`, no phone mockup, native declines to `/design`. **D3** the source of truth for UI is the owner's references and the world; `image-to-code` reads them (analysis, extraction spec, faithful translation, drift as the failure mode, the clarity checklist) and the only image it may cause is the hero plate. **D4** the mark is drawn as inline SVG, the colour system is the pack, the type specimen is the faces on a real page, the applications are the kit's renders, the image direction is a hero-object family, the nine-panel board is a contact sheet of real parts. **D5** the output contract is DESIGN.md's pair and sidecar (JPEG dark plate, WebP alpha cutout, `<file>.<ext>.json` beside each, `--plate-*` tokens on `body`) through the instance's art pipeline key, the spend logged, a white ground through the remover, alpha verified with ffmpeg, never a crop. **D6** the worked example is the grove specimen's hero object, not the front door. **D7** the pins: the four declared, each naming the sidecar, "text-free" and the art key; no eagerness / count / per-section / must-invoke directive. Rejected: per-section images for reference only; phone mockups around real shots; a generated logo as a start; the plate on the front door; a shared base skill with wrappers.](<redacted>.md) | ui-design / skills / imagery |
 
 > ⚠️ **Numbering collisions are now machine-enforced, not narrated.** Twenty numbers are shared by two ADRs each — assigned in parallel sessions before anything checked. The files keep their filenames (renumbering would break every existing citation, and a number once assigned is never reused), and this table disambiguates each pair as `NNNN-a` / `NNNN-b`. The authoritative list is `LEGACY_DUPLICATE_ADRS` in [`scripts/gds/adr-namespace.js`](../../scripts/gds/adr-namespace.js), frozen by exact filename: a **new** collision — or a third file joining a legacy number, or a rename of either half — hard-fails the `unit` CI gate, as does an index row that points at no file or an ADR with no row. The list may only shrink. This paragraph used to narrate the collisions one by one and had fallen eight behind reality; see [ADR 0195](<redacted>.md) for why the check exists and why the pairs are grandfathered rather than renumbered.

package/docs/file-map.md

@@ -130,7 +130,7 @@
 │   ├── hall-ui/                ← CORE-DOMAIN WEB-SURFACE carve (BV1.R85, default-on): the authenticated builders' hall at builders.<apex>, moved from public-builders/ (~13k LOC, the largest). NO routes/db/port — declares contributes.webSurfaces:[{host:"builders.",dir:"public"}] for discovery, but UNLIKE status-ui keeps its DEDICATED serving block in serve-internal (the /builders shim + canonical redirects + citizen/Archon page gates + asset-stamping + hall-widget injection), partitioned out of the generic web-surface loop and served from BUILDERS_DIR. CLAUDE.md, module.json, public/{index.html,builders.js,style.css,work,watch,harbor,gate,pair,settings,ranks,sessions,primer,diagrams,atlas,...}.{html,js},cursors/,chime.wav. Three ARCHETYPE sheets sit beside the per-page ones: `record.css` (the task + idea records, task 1003305), `room.css` (the READING ROOMS — the primer + the diagrams index, task 1003306: the reading measure and rhythm, the table of contents, the progress hairline and the framed figure diagram-viewer.js upgrades on both pages) and `oversight.css` (the OVERSIGHT family — government, watch, harbor, gate, task 1003469: the row, the figure band inside a panel, the group head, the inline form, the grant toggle and the shared confirm modal; named oversight because the vocabulary wall bans "governance" on the government surface). A page sheet then holds only what one page has and the others do not — `primer.css` the acknowledge gate, `diagrams.css` the legend strip, `gate.css` the hold reasons and file chips, `watch.css` the severities, the report reader and the grade trend, `people.css` the directory's identity cell (task 1003470: `/scouting` is the LEGACY DOOR to `/people` and ships the same body and script — `scouting.html` loads `people.js`; there is no `scouting.js`).
 │   ├── lifecycle/               ← CORE-DOMAIN carve (BV1.R86, default-on): the build state machine — tasks · claims · versions · done-when · goals · dependencies · claim→ship→grade→credit · github-push + merge-lock + conflict-resolve + publish-reconciler. The LAST, most-coupled carve; registers the `lifecycle` kernel port (createTask, classifyTaskKind, tallyPeerVotes, work-tracking reads). CLAUDE.md, module.json, routes/{tasks,claims,versions,done-when,goals,dependencies,gate-approvals,analytics}.js, lifecycle.js, github-push.js, merge-lock.js, conflict-resolve.js, publish-reconciler.js, task-visuals.js + task-visual-db.js + routes/visuals.js (the optional ship-time visual, task 1003109 — the route file is NOT named task-*.js on purpose; see the module CLAUDE.md).
 │   ├── copy-desk/               ← CORE-DOMAIN module (task 1003113 / R02 of goal 1000074, default-on): the COPY half of the design contract — ADR 0081 gave design TOKENS a repo-owned source of truth, text had none. Owns the FLAG (anyone in any role marks a string or a whole surface as needing an artist's attention, with a reason required in BOTH the route and a CHECK constraint) and the QUEUE an artist reads it from. READS R01's committed registry (docs/copy-registry.json, generated by scripts/gds/copy-inventory.js) and never writes it. NO LIVE CMS is the hard non-goal: no column here could hold replacement text, and copy_no_cms.mjs pins that. Key is `copy-desk`, not `copy` — the branding contract already owns a `copy` block, so the bare word reds the "core carries no module code" fitness check. CLAUDE.md, module.json, registry.js, flags.js, routes/copy-desk.js, migrations/copy_desk_001_flags.sql, tests/{copy_flags,copy_queue,copy_no_cms}.mjs. Its hall surface lives with hall-ui (public/copy-desk.{html,js,css}), per the one-key-per-web-surface precedent.
-│   ├── ui-design/               ← CORE-DOMAIN module (task 1003324 / ADR 0197, default-on): the design capability every builder on every instance gets — ships METHOD, never a world. Absorbs ADR 0081's layer: adapters/{claude-design,figma}/index.js (moved from src/ui/adapters/), scripts/{design-sync,figma-design-sync,validate-design}.js (moved from scripts/gds/, which keeps thin shims), docs/design-contract.md (moved from docs/). Declaration-only: contributes.skills design (the /design playbook, new) + design-sync + figma-design-sync; no routes/port/migrations, so disabling it touches no served surface. CLAUDE.md separates the platform FLOORS (the Fifteen Rule, the dark twins, no page :root, the 24px floor, AA in both modes, the kill switch) from the instance's WORLD (its packs + DESIGN.md). kit/ (task 1003320) is the look-before-you-ship kit: lib.js (the floors, the states/probes contracts, the action + expectation vocabularies, the WCAG maths, the stub spawner), serve.js (any surface through the doorway's real transforms + fixtures/), render.js (states × 1440/390/320 × dark/light, audited), probe.js (PASS/FAIL contracts), check-mock.js (platform rules + the instance's DESIGN.md taste bans), contrast.js + png.js; a page's <page>.states.json / <page>.probes.json sit BESIDE the surface (modules/public-landing/public/, modules/hall-ui/public/). Recipe: docs/recipes/ui-look-before-you-ship.md. skills/ (task 1003321 / ADR 0198) is the vendoring policy: policy.json (licence allowlist, verdicts that may land, sidecar fields, preamble markers), PREAMBLE.md (the platform preamble every vendored SKILL.md opens with), README.md (the roster — both origins scanned dangerous on 2026-08-28, landed as rebuild specs; nothing vendored — and the landing recipe); a landable copy goes under skills/vendor/<name>/ with PROVENANCE.md + LICENSE and is materialised into an instance's .claude/skills/ by claude-materialize.js step 1b. skills/<name>/ (task 1003325 / ADR 0220) are the in-house rebuilds from the specs, first-party and counted: design-taste-frontend (the default taste skill), design-taste-frontend-v1 (the earlier generation, kept distinct), high-end-visual-design (the polish pass), redesign-existing-projects (the in-place upgrade); each opens with the same preamble and carries a "Rebuilt from" section instead of a sidecar. impeccable/ (task 1003326 / ADR 0221) is the design-craft method as ONE skill with sub-commands: SKILL.md (the router, the menu, the craft floor, the bounded finish) + reference/<sub-command>.md (eighteen playbooks, one loaded per request); no hooks, no bypass agent, no telemetry, no live server. styles/ (task 1003323 / ADR 0219) is the style library: <name>/pack.json (the theme.ui overlay, exactly the fifteen) + DESIGN.md (the look's derived recipes, thirteen in lockstep with the pack) + mock.html (the specimen); chrome-world (pinned to the neutral pack), expedition, grove; STYLE=<name> on the kit lays a look over the instance's pack through GDS_BRANDING_FILE; tests/ui_design_styles.mjs runs the world/cosmos/hall token suites once per alternate (UI_DESIGN_PACK). config/design-tokens.* + design-sources.json STAY in config/ as the host boundary; public-landing keeps its own key (first customer, not owner).
+│   ├── ui-design/               ← CORE-DOMAIN module (task 1003324 / ADR 0197, default-on): the design capability every builder on every instance gets — ships METHOD, never a world. Absorbs ADR 0081's layer: adapters/{claude-design,figma}/index.js (moved from src/ui/adapters/), scripts/{design-sync,figma-design-sync,validate-design}.js (moved from scripts/gds/, which keeps thin shims), docs/design-contract.md (moved from docs/). Declaration-only: contributes.skills design (the /design playbook, new) + design-sync + figma-design-sync; no routes/port/migrations, so disabling it touches no served surface. CLAUDE.md separates the platform FLOORS (the Fifteen Rule, the dark twins, no page :root, the 24px floor, AA in both modes, the kill switch) from the instance's WORLD (its packs + DESIGN.md). kit/ (task 1003320) is the look-before-you-ship kit: lib.js (the floors, the states/probes contracts, the action + expectation vocabularies, the WCAG maths, the stub spawner), serve.js (any surface through the doorway's real transforms + fixtures/), render.js (states × 1440/390/320 × dark/light, audited), probe.js (PASS/FAIL contracts), check-mock.js (platform rules + the instance's DESIGN.md taste bans), contrast.js + png.js; a page's <page>.states.json / <page>.probes.json sit BESIDE the surface (modules/public-landing/public/, modules/hall-ui/public/). Recipe: docs/recipes/ui-look-before-you-ship.md. skills/ (task 1003321 / ADR 0198) is the vendoring policy: policy.json (licence allowlist, verdicts that may land, sidecar fields, preamble markers), PREAMBLE.md (the platform preamble every vendored SKILL.md opens with), README.md (the roster — both origins scanned dangerous on 2026-08-28, landed as rebuild specs; nothing vendored — and the landing recipe); a landable copy goes under skills/vendor/<name>/ with PROVENANCE.md + LICENSE and is materialised into an instance's .claude/skills/ by claude-materialize.js step 1b. skills/<name>/ (task 1003325 / ADR 0220) are the in-house rebuilds from the specs, first-party and counted: design-taste-frontend (the default taste skill), design-taste-frontend-v1 (the earlier generation, kept distinct), high-end-visual-design (the polish pass), redesign-existing-projects (the in-place upgrade); each opens with the same preamble and carries a "Rebuilt from" section instead of a sidecar. impeccable/ (task 1003326 / ADR 0221) is the design-craft method as ONE skill with sub-commands: SKILL.md (the router, the menu, the craft floor, the bounded finish) + reference/<sub-command>.md (eighteen playbooks, one loaded per request); no hooks, no bypass agent, no telemetry, no live server. image-to-code/, imagegen-frontend-web/, imagegen-frontend-mobile/, brandkit/ (task 1003328 / ADR 0222) are the image family under the hero-only rule: plates and hero objects only, the pair (JPEG dark plate + WebP alpha cutout) with a <file>.json sidecar beside each, through the instance's art pipeline key; the grove specimen's styles/grove/assets/ is the worked example. styles/ (task 1003323 / ADR 0219) is the style library: <name>/pack.json (the theme.ui overlay, exactly the fifteen) + DESIGN.md (the look's derived recipes, thirteen in lockstep with the pack) + mock.html (the specimen); chrome-world (pinned to the neutral pack), expedition, grove; STYLE=<name> on the kit lays a look over the instance's pack through GDS_BRANDING_FILE; tests/ui_design_styles.mjs runs the world/cosmos/hall token suites once per alternate (UI_DESIGN_PACK). config/design-tokens.* + design-sources.json STAY in config/ as the host boundary; public-landing keeps its own key (first customer, not owner).
 │   ├── character-anim/          ← consistent-character generative animation (ADR 0088) — graded painterly frame sets + manifest, the otb-character-review skill. CLAUDE.md, module.json.
 │   ├── provisioning/            ← stands up + operates a Cloud Bongos instance's own infra (server/DB/domain/DNS/TLS) via the API (ADR 0111); web-tier request+state only, no cloud tokens — a separate control-plane runner drains the intents. Distinct from the `hosting` module (ADR 0092), which brokers compute workloads. CLAUDE.md, module.json.
 │   └── demo/                    ← BV1.R52 acceptance-proof module: one rank-gated write route + one namespaced migration proving the loader mounts a scaffolded module with zero core edits. CLAUDE.md, module.json.

package/docs/module-api-changelog.md

@@ -1363,5 +1363,7 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.461 with no explicit bump. run 33576366095. (task 1002620)
   1.19.463 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.462 with no explicit bump. run 33577660347. (task 1002620)
+  1.19.464 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.463 with no explicit bump. run 33578746178. (task 1002620)
 ---------------------------------------------------------------------------
 ```

package/modules/ui-design/module.json

@@ -5,7 +5,7 @@
   "coreVersion": "^1.19.0",
   "default": true,
   "maintenance": { "status": "core-maintained" },
-  "contributes": { "skills": ["design", "design-sync", "figma-design-sync", "design-taste-frontend", "design-taste-frontend-v1", "high-end-visual-design", "redesign-existing-projects", "impeccable"] },
+  "contributes": { "skills": ["design", "design-sync", "figma-design-sync", "design-taste-frontend", "design-taste-frontend-v1", "high-end-visual-design", "redesign-existing-projects", "impeccable", "image-to-code", "imagegen-frontend-web", "imagegen-frontend-mobile", "brandkit"] },
   "provides": [],
   "consumes": []
 }

package/modules/ui-design/skills/README.md

@@ -21,7 +21,7 @@ Two origins were scanned for the set scoped with the owner (impeccable; the elev
 | Skill (in-house name) | Upstream | Licence | Verdict | Landing |
 |---|---|---|---|---|
 | `impeccable` | `pbakaus/impeccable` @ `<redacted>` (skill v4.1.x) | Apache-2.0 | **dangerous** — floor: 3 critical (a `bypassPermissions` marker in the skill's own live copy-edit agent; an instruction-override phrase in a test fixture; a same-file credential-store + http-client co-occurrence in a test), 19 high (shipped PostToolUse + Stop hooks, credential-store references), 107 medium, 147 low; panel: hooks written into five harness configs (globally on a global install), a child agent spawned with permissions bypassed from a loopback HTTP route, an autonomy directive that tells the agent to disregard its system prompt, a live-server token embedded in page source, an unverified remote bundle download | rebuild spec → [task 1003326](https://cloudbongos.com/builders#/task/1003326) → rebuilt in-house as `impeccable/` ([ADR 0221](../../../docs/adr/<redacted>.md)) |
-| `design-taste-frontend`, `design-taste-frontend-v1`, `high-end-visual-design`, `minimalist-ui`, `industrial-brutalist-ui`, `redesign-existing-projects`, `gpt-taste`, `stitch-design-taste`, `image-to-code`, `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit` | `Leonxlnx/taste-skill` @ `<redacted>` | MIT | **dangerous** — floor: 1 critical (an injection-phrase hit at `skills/taste-skill/SKILL.md:892`, which the panel identifies as a filename placeholder; the floor is untouchable by design); panel: caution (1 medium: the only documented install path runs an unpinned third-party `npx` CLI; 21 low: mandated invocation of any available image-generation tool, unbounded image counts, remote assets and scripts in generated pages, an auto-loaded cross-agent instruction file) | rebuild spec → GDS task |
+| `design-taste-frontend`, `design-taste-frontend-v1`, `high-end-visual-design`, `minimalist-ui`, `industrial-brutalist-ui`, `redesign-existing-projects`, `gpt-taste`, `stitch-design-taste`, `image-to-code`, `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit` | `Leonxlnx/taste-skill` @ `<redacted>` | MIT | **dangerous** — floor: 1 critical (an injection-phrase hit at `skills/taste-skill/SKILL.md:892`, which the panel identifies as a filename placeholder; the floor is untouchable by design); panel: caution (1 medium: the only documented install path runs an unpinned third-party `npx` CLI; 21 low: mandated invocation of any available image-generation tool, unbounded image counts, remote assets and scripts in generated pages, an auto-loaded cross-agent instruction file) | rebuild spec → [task 1003325](https://cloudbongos.com/builders#/task/1003325) (the taste core, ADR 0220) and [task 1003328](https://cloudbongos.com/builders#/task/1003328) (the image family, ADR 0222) → rebuilt in-house |
 
 The eleven taste skills are single-file prose; the floor's one critical is a false positive in the human sense and a true positive in the scanner's — and the rule that makes the scanner worth having is that a session does not get to tell the difference. Vendoring any of them anyway is an **owner override recorded in an ADR**, not a judgement a task makes.
 
@@ -36,8 +36,12 @@ A rebuild spec becomes a **first-party skill** at `<name>/` — no `vendor/` seg
 | `high-end-visual-design` | `Leonxlnx/taste-skill` `soft-skill` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the agency-build polish pass: one texture archetype (the style library's looks) and one layout archetype per project, the nested container anatomy where the world allows a container, the pill with its nested arrow disc, rhythm, choreography and scroll entry inside the Kill Switch |
 | `redesign-existing-projects` | `Leonxlnx/taste-skill` `redesign-skill` | [task 1003325](https://cloudbongos.com/builders#/task/1003325) | the in-place upgrade: scan the stack, diagnose against the seven-group audit with the instance's world as the answer key, fix in impact-per-risk order, one group per commit; keeps the stack, never migrates frameworks |
 | `impeccable` | `pbakaus/impeccable` @ `<redacted>` (skill v4.1.x) | [task 1003326](https://cloudbongos.com/builders#/task/1003326) | the design-craft method as one skill with sub-commands, one playbook loaded per request from `impeccable/reference/`: shape, critique, audit, polish, harden, onboard, animate, colorize, typeset, layout, adapt, distill, clarify, optimize, document, extract, bolder, quieter; the craft floor and the bounded finish live in its `SKILL.md`; the three persisted homes are the instance's own files; no hooks, no bypass agent, no telemetry, no live server (the playwright plugin and the kit are the loops) |
+| `image-to-code` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | the analyse-then-implement loop with the owner's references and the world as the source of truth; the only image it may cause is the hero plate; a structured per-image analysis, the extraction spec, a faithful translation, drift named as the failure mode, a clarity checklist the kit measures |
+| `imagegen-frontend-web` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | the plate-making skill: text-free hero plates, hero objects, backdrops and orbs for the slots a composition already has, a composition anchor per plate, one family per surface, the pack as the palette lock, the instance's art pipeline key, the pair-and-sidecar output contract; never a section image, a comp or a screen |
+| `imagegen-frontend-mobile` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | portrait plates for the 390 and 320 compositions, clear of the regions a phone reserves, the first view held to one focal point, a scrim under text over a plate; a screen is the states file rendered by the kit; no phone mockups, no flows of screens; native declines |
+| `brandkit` | `Leonxlnx/taste-skill` @ `<redacted>` | [task 1003328](https://cloudbongos.com/builders#/task/1003328) | the identity system with the strategy inferred first and the logo standard kept: the mark drawn as SVG, the colour system as the pack, the type specimen as the faces, the applications as the kit's renders, the image direction as a hero-object family, the board as a contact sheet; never a generated logo, board or mockup |
 
-What every rebuild does with the upstream's opinions, in the same words: the palette is the pack and a variant is a look from [`../styles/`](../styles/README.md); the design system is the instance's `DESIGN.md`; images are hero plates and hero objects by token and never a step; every motion rule lives inside the Kill Switch (springs, magnetic hover, pointer-tracked borders are named *not available*); the upstream's bans are defaults an instance's `DESIGN.md` overrides; the kit's renders are the pre-flight. Still specs, not skills: the image family (task 1003328), the detector (1003329), the four looks (1003327).
+What every rebuild does with the upstream's opinions, in the same words: the palette is the pack and a variant is a look from [`../styles/`](../styles/README.md); the design system is the instance's `DESIGN.md`; images are hero plates and hero objects by token and never a step; every motion rule lives inside the Kill Switch (springs, magnetic hover, pointer-tracked borders are named *not available*); the upstream's bans are defaults an instance's `DESIGN.md` overrides; the kit's renders are the pre-flight. The image family (task 1003328, [ADR 0222](../../../docs/adr/<redacted>.md)) carries the one rewrite the upstream never had: images are for text-free hero plates and hero objects only, so a screen is the surface itself, the mark is drawn, the board is a contact sheet, and what ships is the pair (a black-ground JPEG for dark, an alpha WebP cutout for light) with a provenance sidecar beside every file, through the instance's art pipeline key. Still specs, not skills: the detector (task 1003329), the four looks (1003327).
 
 **The playwright plugin** (`claude-plugins-official`, an MCP plugin) is the LIVE browser-driving loop, where the kit is the headless one. It is a prerequisite, documented — `claude plugin install playwright@claude-plugins-official` — never vendored.
 

package/modules/ui-design/skills/brandkit/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: brandkit
+description: The identity-system method for ANY Cloud Bongos instance, under the owner's hero-only rule: infers the brand strategy before anything is made (category, audience, function, promise, cultural position, the one symbolic metaphor, what to avoid), holds the logo standard and the five concept methods, and lands the system as the instance's own materials: the mark drawn as SVG in code, the colour system as the branding pack, the type specimen as the pack's faces, the applications as the platform's real surfaces rendered by the kit, and the image direction as a text-free hero-object family with a sidecar beside every plate. The nine-panel board becomes a contact sheet composed from those parts, never a generated image with text in it. Triggers on "brand kit", "identity system", "logo system", "brand guidelines board", "the visual world for a new instance", or when cloudbongos init asks what an instance's mark and material are. Never generates a logo, a wordmark, a board with text, or a mockup with UI. Ported in-house from the taste-skill rebuild spec (tasks 1003325 and 1003328, ADR 0198) with the hero-only rewrite the upstream never had.
+---
+
+<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
+> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
+>
+> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
+> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
+> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
+> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
+> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
+> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
+> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
+>
+> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
+<!-- END PLATFORM PREAMBLE -->
+
+## Rebuilt from
+
+This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `brandkit` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the `[brandkit]` group in the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325); the port is [task 1003328](https://cloudbongos.com/builders#/task/1003328); this file implements the requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); the hero-only rewrite this family carries is [ADR 0222](../../../../docs/adr/<redacted>.md).
+
+What changed in translation, on purpose: the upstream delivered **brand identity imagery**: logo systems, nine-panel guideline boards, identity decks and visual-world presentations, all as generated images carrying a brand name, a tagline, labels and interface chips. Under the owner's rule an image with letters in it is not a hero plate, and a mockup of an interface is a screenshot of a screen. So here every panel of the board lands as the thing it depicted: the **mark is drawn** (an inline SVG, the world's one mark, a code asset with a construction comment), the **colour system is the pack** (`config/branding.json`, the fifteen), the **type specimen is the pack's two faces** on a real page, the **applications are the platform's own surfaces** (the front door, the hall, a look's specimen) rendered by the kit, and the **image direction is a hero-object family**: one object in the world's materials, text-free, in pairs with sidecars. The board itself is a **contact sheet** assembled from the kit's shots and the plates, a review artifact rather than a generation. The strategy inference, the logo standard, the five concept methods, the rhythm, the colour discipline and the reference rule survive unchanged.
+
+## Scope: when this skill fires, and when it declines
+
+**Fires** when an instance needs an identity system or its existing one needs to be written down: a new instance at `cloudbongos init`, a rebrand the owner has decided (an ADR, never a session's taste), a look for the style library that needs its metaphor and mark settled.
+
+**Declines, and says so:** a generated logo or wordmark, a board or deck as a single image, a mockup with UI drawn into it, a reproduction of a supplied logo or slogan. The nearest thing it does instead is the system below, in code and plates.
+
+## Step 1: infer the strategy before making anything
+
+Write it down, one line each, from `docs/project-context.template.md` and a round of at most three questions where the file is silent: **category**; **audience**; **what the product does**; the **emotional promise**; the **cultural position** (what it stands beside, what it stands against); the **one symbolic metaphor** (the chrome world's is a sculpture in a void; a garden of sculpted paper is the grove's); and **what the brand should avoid**. Symbols are chosen for meaning, never at random, and every later decision cites this block. An instance's answers live in its `DESIGN.md` Overview; this skill proposes the paragraph and the owner keeps it.
+
+## Step 2: the mark, drawn
+
+The logo standard: simple, memorable, symbolic, scalable and balanced; usable as an icon, a wordmark companion, a badge, an interface mark and a pattern; refused by name: generic bolts, random animals, fake crests, clipart, and inconsistent variants. Five concept methods, at most two combined in one mark: the **meaningful monogram**, the **product action**, the **metaphor fusion**, **negative space**, and **construction geometry**. Propose two or three directions as sketches in words, get the owner's pick, then **draw the mark as an inline SVG** on the world's construction grid, with its geometry stated in a comment (the chrome world's bongo-pair glyph, drawn on the mark ramp, is the worked example). The mark's ramp is derived from the pack; a mark is never a raster and never a generated logo.
+
+## Step 3: the colour system is the pack
+
+One base, one primary accent, one secondary accent and a neutral scale: that is the branding contract's thirteen colours, written into `config/branding.json` (or proposed as a look under `modules/ui-design/styles/` when the instance wants a library entry). Accents repeat across every surface; no rainbow spread, no generic glow palette. Every pairing is measured with the kit's `contrast.js` in both modes before it is called a system.
+
+## Step 4: the type specimen is the two faces
+
+The pack's display and body stacks, shown on a real page as the hierarchy the world names (display, headline, title, body, label, caption, data), not on a generated board. Text discipline for anything the identity carries in public: the brand name, one short specific tagline, one address or command, a few section labels, short interface chips; no paragraphs of filler, no tiny fake body copy, no dense menus; the voice is the copy desk's.
+
+## Step 5: the applications are the surfaces
+
+The physical and digital applications of an identity are rendered, not painted: the front door, the hall's chrome, a look's specimen through `node modules/ui-design/kit/render.js --page <path>` (`--style <name>` for a library look). A browser frame is the real browser; a terminal frame is the real CLI's output; a badge, a label or a card is the world's component. A data-heavy fake dashboard is refused in the same breath as a fake screenshot. Any motion an application carries lives inside the Kill Switch like everything else on the platform, so the identity's rest frame is the composition the sheet shows.
+
+## Step 6: the image direction is a hero-object family
+
+The atmosphere the identity carries is a **family of hero plates and hero objects**: one object (the metaphor made physical) in the world's materials, whole, text-free, in the family's one light and one lens, in pairs with a sidecar beside every file, produced through `imagegen-frontend-web` under the pair-and-sidecar convention and the instance's art pipeline key. The chrome world's chrome, frost and gold renders of one bongo pair are the worked example of a family. Nothing in the family carries letters, UI, or a frame.
+
+## Step 7: the board is a contact sheet
+
+The nine panels the upstream generated (logo cover, construction logic, digital application, essence tagline, colour system, typography specimen, physical application, image direction, system detail) become a **contact sheet** assembled from real parts: the drawn mark at three sizes, its construction comment, a kit shot of a surface, the pack's swatches from a specimen page, the type hierarchy from that page, a second surface, one plate from the family, and a detail crop of a real component. Rhythm across the sheet is kept as the upstream asked: quiet, then functional, then emotional, then technical, then atmospheric, then detailed, never every panel shouting at once. The sheet is a review artifact for the owner and lives under the claim's scratch or `docs/design/`, never under a surface's assets.
+
+## The reference rule
+
+When references are supplied, extract only layout rhythm, grid, spacing, type scale, density, placement and accent logic, and **never reproduce a supplied logo, brand name, slogan, composition or unique asset**. Every board must be able to answer, in one line each: what the brand represents, what its core metaphor is, how the mark expresses that, how the system scales across surfaces, and why the whole thing is ownable. A system that cannot answer the last one is not finished.

package/modules/ui-design/skills/image-to-code/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: image-to-code
+description: The analyse-then-implement loop for visually important web work on ANY Cloud Bongos instance, under the owner's hero-only rule: the design source of truth for the UI is the owner's reference images and the instance's world, read with a structured per-image analysis and extracted into a full spec before a line is written; the only image this skill generates is the hero plate the composition has a slot for, and the sections are built from the world's templates. Implements as a faithful translation rather than an interpretation, names design drift as the failure mode, holds the hero and clutter rules, and ends on a clarity checklist the kit measures. Triggers on "build this from the reference", "recreate these images in code", "implement the mock faithfully", "the owner sent screenshots to build from", or when a claimed ui task carries reference images. Never generates a section, a comp or a screen. Ported in-house from the taste-skill rebuild spec (tasks 1003325 and 1003328, ADR 0198) with the hero-only rewrite the upstream never had.
+---
+
+<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
+> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
+>
+> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
+> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
+> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
+> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
+> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
+> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
+> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
+>
+> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
+<!-- END PLATFORM PREAMBLE -->
+
+## Rebuilt from
+
+This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `image-to-code` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the `[image-to-code]` group in the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325); the port is [task 1003328](https://cloudbongos.com/builders#/task/1003328); this file implements the requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); the hero-only rewrite this family carries is [ADR 0222](../../../../docs/adr/<redacted>.md).
+
+What changed in translation, on purpose: the upstream's mandatory order was **generate the design images, analyse them, implement**, with the generated image as the source of truth, one large render per section, and a ban on freeform coding whenever a generator was available. The owner's rule is the opposite for UI: image generation is for text-free hero plates and hero objects only, and an image model re-rendering a template costs credits and drifts, so **the owner's reference images and the instance's world are the source of truth**, the sections are rebuilt from the world's templates, and the one generated image is the hero plate the composition has a slot for (through `imagegen-frontend-web`). The analysis discipline, the extraction spec, the faithful-copy rule, the drift bans, the hero rules, the clutter bans and the clarity checklist all survive; they now read the references instead of a generated set. The eagerness mandate and the image-count rule are gone.
+
+## Scope: when this skill fires, and when it declines
+
+**Fires** when a ui task comes with reference images (the owner's templates under `docs/design/references/<date>/`, a designer's export, a mock from the kit's `docs/` route) and the deliverable is code: a page, a band, a component built to match them.
+
+**Declines, and says so:** a request to generate the design first ("make me an image of the page, then build it"), a request to render a section or a comp, a native surface. The nearest thing it does instead is Step 1 with what exists, and, where the composition has a slot, one plate.
+
+## Step 1: the order is read, extract, plate, implement
+
+1. **Read** the world (the preamble's order) and every reference image, with the analysis below, before any opinion.
+2. **Extract** the full spec from the references (Step 3).
+3. **Plate**: if the composition has a hero slot and the references show one, the plate is produced by `imagegen-frontend-web` under the pair-and-sidecar convention, through the instance's art pipeline key (the builder's own at the hall's settings or the instance's shared one), never a credential this skill carries; if the references show a section image, a screenshot or a comp, that element is rebuilt in code from the world's templates and the image is not generated.
+4. **Implement** as a faithful translation (Step 4), then prove it (Step 6).
+
+A reference is never cropped or zoomed to get a detail: a crop destroys the spacing, the proportion and the type scale the analysis needs. Ask for a larger export, or measure what is there and say what stayed unclear.
+
+## Step 2: the structured per-image analysis
+
+For every reference, in this order, written down before coding: **what the section is**; its **visual priority** on the page; the **readable text** (verbatim, so copy is never invented); the **type relationships** (how many sizes, their ratio, the weights, the tracking, the case); the **spacing** (gutters, band air, group tightness, in the world's scale); the **controls** (their shape, height, the radius tier, the hover the reference implies); the **card logic** (whether things are contained at all, and how); the **dominant colours** mapped onto the pack's roles, never as hexes; the **rhythm** (what repeats and what varies); and **what remains unclear**. A vibe read is not an analysis.
+
+## Step 3: the extraction spec
+
+One document in the ship notes before the first edit: visible copy; the type scale and weights as roles on the pack's two faces; spacing and gutters on the world's scale; radii on the world's tier; the button hierarchy and padding; the palette and accents as pack roles; the background and image treatment (a field, an object, a plate slot, or none); the grid logic; the section order. Where the reference shows something the world bans (a gradient text, an eyebrow above the h1, a three-equal-card row, an em dash), the spec records it as *reference: yes, world: no* and the world wins.
+
+## Step 4: implement as a faithful translation
+
+The layout logic, the spacing rhythm, the section order, the typographic mood and the component style of the reference are preserved; only the substance changes (the pack's colours and faces, the world's rules, real copy). **Drift is the failure mode**, named in the notes when it happens: simplifying into a template, compressing the reference's generous spacing, flattening its type hierarchy, or reintroducing a container nesting the analysis removed. Stack conventions are the platform's: static markup, one sheet, the pack spliced by the instance, live DOM by `createElement` and `textContent`, the design system is the instance's `DESIGN.md`, a variant of the look is one from `modules/ui-design/styles/` rendered with `--style <name>` on the kit.
+
+## Step 5: the hero and clutter rules
+
+The hero holds one focal point (the plate or the headline), a one to three line headline, restrained support copy, and no badge, stat or pill stuffing; the first view stays readable and uncrowded on a small laptop (1440 by 900 is the kit's first shot; 1280 by 720 is the one to imagine). No nested box-in-box section wrappers. No micro-UI clutter: filler chips, pseudo-system markers, fake technical labels, meaningless metadata rows. Where a reference carries them, the spec records them and the build leaves them out, saying so.
+
+## Step 6: the clarity checklist, measured
+
+- [ ] **Honest image count**: exactly the plate slots the composition has, each a text-free hero plate or hero object with its sidecar, and no other image was generated.
+- [ ] **Text readability**: every string in the build is readable at 1440, 390 and 320, and every string came from the reference or the copy desk, never invented.
+- [ ] **Extraction completeness**: the spec has no "unclear" left that the build guessed at; each was asked, measured, or recorded as an open decision.
+- [ ] **Hero cleanliness**: one focal point, the line count held, the primary action above the fold in the first shot.
+- [ ] **No generated tells**: no gradient text, no purple-blue, no glass for its own sake, no fake screenshot, no filler.
+- [ ] **Cross-image coherence**: the bands built from different references read as one page under one world.
+- [ ] **The kit**: `node modules/ui-design/kit/render.js --page <path>` ALL CLEAN in every mode the page serves, `probe.js` PASS, contrast measured over any plate; the reduced-motion pass dead under the Kill Switch.
+- [ ] **The notes**: the spec, the drift list, and which shots were looked at in which modes.

package/modules/ui-design/skills/imagegen-frontend-mobile/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: imagegen-frontend-mobile
+description: The plate-making skill for the narrow end of a web surface on ANY Cloud Bongos instance, under the owner's hero-only rule: it produces text-free portrait plates and hero objects for the 390 and 320 compositions the kit renders, the masthead above the words and the field behind them, sized for the fold and clear of the regions a phone reserves. Never a screen, never a phone mockup, never a flow of screens as images, and never code: a screen concept is the surface's states file rendered by the kit at 390, and a native app target declines to /design. Locks one material, light and camera across the family from the world's DESIGN.md, keeps the first view to one focal point, puts a scrim under any text that sits over a plate, and lands the pair convention with a sidecar beside every file. Triggers on "a plate for the mobile hero", "the masthead at 390", "the hero object for the phone collapse", "a portrait plate", or when adapt or design-taste-frontend names a narrow-width slot with no plate. Ported in-house from the taste-skill rebuild spec (tasks 1003325 and 1003328, ADR 0198) with the hero-only rewrite the upstream never had.
+---
+
+<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
+> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
+>
+> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
+> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
+> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
+> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
+> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
+> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
+> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
+>
+> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
+<!-- END PLATFORM PREAMBLE -->
+
+## Rebuilt from
+
+This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `imagegen-frontend-mobile` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the `[imagegen-frontend-mobile]` group in the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325); the port is [task 1003328](https://cloudbongos.com/builders#/task/1003328); this file implements the requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); the hero-only rewrite this family carries is [ADR 0222](../../../../docs/adr/<redacted>.md).
+
+What changed in translation, on purpose, and it is the largest change in the family: the upstream produced **premium mobile app screen images**, one per screen, inside a phone mockup, as an ordered flow with an internal design bible. A screen image is a screenshot of a screen, which the preamble bans on every instance, and a phone mockup is a frame around one. So here the **screen is the surface itself**, rendered by the kit at 390 and 320 from its states file; the **flow** is the states file's order; the **design bible** is the instance's `DESIGN.md` and its pack; and what this skill generates is only what the narrow composition has a slot for: a portrait masthead, a field behind the fold, a small object in a row. The platform-mode choice (one mobile operating system or the other) becomes a decline: every surface here is a served web page, and a native app target routes to `/design`. The first-screen rule, the mobile realities, the scrim rule and the slop bans survive, applied to plates.
+
+## Scope: when this skill fires, and when it declines
+
+**Fires** when the narrow composition of a surface has a plate slot: the masthead the world names above the words below its breakpoint (the chrome world's big blob becomes one at 900 and under), a field behind a 390 fold, an orb in a collapsed row, a closing figure on a phone-height band.
+
+**Declines, and says so:** a screen image, a phone or device mockup, a flow of screens, an app icon, a splash screen with a wordmark, a native app for either mobile platform or cross-platform (that is `/design`, with one line: a browser capture is not evidence for a native surface). A request for "the onboarding screens as images" gets the states-file answer below and the reason.
+
+## Step 1: the screen is the states file, the bible is the world
+
+Read the surface's states file (`<page>.states.json`) and the world's `DESIGN.md`; both exist before a plate does. A first run, an empty state or a sign-in step is a **state** the kit renders at 390 and 320, not an image; where the states file lacks one, add it (the `impeccable onboard` and `harden` playbooks own that work) and render, then look at the shots to see where a plate slot actually is. The bible the upstream asked for is already written: the pack's fifteen, the faces, the radius tier, the shadow language, the motion grammar. A plate that needs a rule the world does not have is a gap for the owner, not a rule this skill adds.
+
+## Step 2: commit to the narrow plate list out loud
+
+```
+Narrow plates: <slot> · <aspect: 4:5 | 9:16 | 1:1> · <mode pair> · <material, from the family>
+```
+
+One line per slot, never more; usually one. Say it, and put it in the ship notes. The family (material, key light, lens, ground) is the one the surface's wide plates already use; a narrow plate that reads as another studio is regenerated.
+
+## Step 3: the first view and the mobile realities
+
+The first view at 390 by 844 holds **one focal point** (the masthead or the field, never both), a one to three line statement, concise support copy and one clear next action, and no chip, stat or pill stuffing; the plate is sized so all of that fits above the fold with the primary action visible. The plate keeps clear of what a phone reserves: the top system region, the bottom gesture region and the home indicator, the docked sheet zone; a masthead sits under the bar, not behind it. **Any text over a plate sits behind a scrim** mixed from black or white with alpha, and the pair is measured at 4.5:1 with the plate in place, in both modes.
+
+## Step 4: the prompt, the key, the run
+
+A narrow plate is a text-free hero plate or hero object like any other, and the same rule holds: text-free hero plates and hero objects only. The prompt is the family's sentence plus the object, whole and centred, then the refusals every time: **no text, no letters, no logo, no watermark, no UI, no phone**. A portrait plate is generated at its portrait aspect, never cropped down from a landscape one, because the crop destroys the proportion the slot was sized for. Generation goes through the instance's art pipeline (the builder's own image key at the hall's settings, `/builders/settings#art-key`, or the instance's shared key); preflight the cost, generate at 2k, log the spend with `node scripts/gds/cost.js <usd> art --task-id <id>`; a white ground goes through the pipeline's background remover and the alpha is verified with `ffmpeg -vf alphaextract` before anything is called a cutout.
+
+## Step 5: the output contract
+
+The same pair-and-sidecar convention as the wide plates: the black-ground plate as JPEG for dark, the alpha cutout as WebP for light, at production size and at least twice the display size, a `<file>.<ext>.json` sidecar beside every file (kind, model, aspect ratio, resolution, generated, round, the exact prompt, source, encoded, use), and `--plate-<name>` / `--plate-<name>-cut` tokens on `body` with root-absolute `url()`. A narrow plate that only serves the breakpoint is still a token on `body`, switched in the world's `@media` block, never a second sheet. The style library at `modules/ui-design/styles/` holds a look's derived recipes and brings no plates of its own until its owner asks; a surface's plates are the surface's.
+
+## Step 6: the bans, applied to plates
+
+Refused by name: the purple-blue gradient look, purposeless glass and floating blobs with no slot, a fake chart or dashboard rendered into a plate, cloned plates across states, a phone-shaped anything, a plate with motivational copy or a brand name in it. A plate carries an object or an atmosphere and nothing that reads.
+
+## Step 7: the pre-flight
+
+`node modules/ui-design/kit/render.js --page <path> --sizes 390,320` with the plates in place: ALL CLEAN in every mode the page serves, the fold checked in the first shot of each state, nothing scrolling sideways, the 24px floor holding on every control the plate sits near, the reduced-motion pass dead (the Kill Switch keeps the rest frame the composition you judged). A weak plate goes back for regeneration, not for a crop. The ship notes carry the plate list, the spend, and the shots looked at.

package/modules/ui-design/skills/imagegen-frontend-web/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: imagegen-frontend-web
+description: The plate-making skill for a web surface on ANY Cloud Bongos instance, under the owner's hero-only rule: it produces text-free hero plates, hero objects and atmosphere backdrops for the slots a composition already has, never one image per section, never a screen, never a UI comp, and it writes no page code. Commits to the plate list out loud, chooses a composition anchor per plate that is not the text-left image-right default, locks one material, one light and one camera across the family, matches every plate tonally to the instance's pack, runs the generation through the instance's art pipeline key, and lands each plate as the pair convention (a black-ground plate for dark, an alpha cutout for light) with a provenance sidecar beside every file. Triggers on "make a hero plate", "we need a hero object for", "an atmosphere backdrop for the landing", "the project orbs need a new material", or when design-taste-frontend or /design names a plate slot with no plate. Ported in-house from the taste-skill rebuild spec (tasks 1003325 and 1003328, ADR 0198) with the hero-only rewrite the upstream never had.
+---
+
+<!-- BEGIN PLATFORM PREAMBLE · ui-design module · one block, byte-identical in every skill the module ships (vendored or rebuilt in-house) so an upstream refresh is a three-way merge; the source is modules/ui-design/skills/PREAMBLE.md and tests/ui_design_skills.mjs fails on drift -->
+> **Platform preamble — read before any rule below.** This skill ships with the `ui-design` module (vendored from a scanned origin, or rebuilt in-house from a spec) and runs INSIDE an instance's world, which it reads first and never overrides.
+>
+> 1. **Load the world before any taste rule.** `config/branding.json` over `config/branding.neutral.json` (`theme.ui` is the fifteen tokens: <redacted> colours and two font stacks), `config/design-tokens.json` over `config/design-tokens.neutral.json`, and `DESIGN.md` at the repo root: the instance's palette and derived tiers, faces, materials, motion grammar, components, and its Do's and Don'ts. Where an instance has no `DESIGN.md`, the neutral pack is the world and the platform floors in item 6 are the whole rulebook; say so and build to them. Never invent a palette.
+> 2. **The fifteen-token contract is the only colour source.** Every colour is a `var()` or a `color-mix()` of the fifteen; the only legal literal is pure black or white with alpha as a scrim, mask or halo. No page `:root` (page tokens live on `body`), and every dark rule is written twice: `:root[data-mode="dark"]` and its `prefers-color-scheme` twin.
+> 3. **A style skill produces variants INSIDE that world, never a second world.** The look this skill carries (its palette, faces, materials, mood boards) is a reference for composition and craft; the instance's tokens and faces replace it. Changing the world is the owner's decision and an ADR, not a session's taste.
+> 4. **Images are for hero plates and hero objects only.** UI is built from templates and the instance's world, not painted; any image-generation step below applies to text-free plates and hero objects, never to controls, cards, text, or a screenshot of a screen.
+> 5. **The instance's taste bans apply and win.** Read them from its `DESIGN.md`. Cloud Bongos's own (no em dash or en dash in visible copy, no emoji, no gradient text, no three-equal-card row, no fake screenshot built from divs) are that instance's, not the module's; where this skill's rules conflict with an instance's bans, the instance wins.
+> 6. **The platform floors hold on every instance** and a `DESIGN.md` may tighten them, never loosen them: every control clears 24px on both sides (primary pills 46–48px); AA in both modes (4.5:1 body text, 3:1 large text and non-text) measured from the real stylesheet; and the Kill Switch, `@media (prefers-reduced-motion: reduce)` at the foot of the token layer killing every animation and transition, no motion authored in JavaScript, and a rest frame that is a complete composition on its own.
+> 7. **Look before you ship.** Render the real surface through the module's kit before and after (`/design` Step 2 and `docs/recipes/ui-look-before-you-ship.md`: every state at 1440 / 390 / 320 in dark and light, audited against the floors); a page with no states file gets one first, and new interactive code ships with a pin in the page's own test file.
+>
+> The rules below are the skill's own. A vendored copy carries a `PROVENANCE.md` beside this file naming the origin, the pinned commit, the licence and the scan verdict it was vendored under; an in-house rebuild names its rebuild spec and its ADR in the section right after this block.
+<!-- END PLATFORM PREAMBLE -->
+
+## Rebuilt from
+
+This skill is an **in-house rebuild**, not a vendored copy. Its documented functionality comes from `Leonxlnx/taste-skill` @ `<redacted>` (MIT; the `imagegen-frontend-web` entry), which `/scan-before-install` reduced to `dangerous` at the default tier on 2026-08-28, so under [ADR 0198](../../../../docs/adr/<redacted>.md) it could land only as a REBUILD-SPEC. The spec is the `[imagegen-frontend-web]` group in the body of [task 1003325](https://cloudbongos.com/builders#/task/1003325); the port is [task 1003328](https://cloudbongos.com/builders#/task/1003328); this file implements the requirements from scratch, **no upstream bytes consulted or copied**. The landing shape is [ADR 0220](../../../../docs/adr/<redacted>.md); the hero-only rewrite this family carries is [ADR 0222](../../../../docs/adr/<redacted>.md).
+
+What changed in translation, on purpose: the upstream produced **one horizontal design-reference image per section**, scaled the image count with the section count, refused to stop early, and treated imagery as a material several sections had to carry. The owner's rule (2026-08-26, reaffirmed 2026-08-27) is that image generation is for **text-free hero plates and hero objects only**; UI is rebuilt from templates and the instance's world, never painted. So here the count is the number of plate slots the composition already has (usually one to three), a plate never carries a section, a headline, a control or a screen, and the panel's eagerness mandate, its image-count mandate and its must-invoke-any-tool directive are gone. The composition-variety rules, the palette lock and the cross-frame consistency survive and now govern a family of plates rather than a set of frames. The palette lock is the pack; the key is the instance's art pipeline; the output contract is DESIGN.md's pair-and-sidecar convention.
+
+## Scope: when this skill fires, and when it declines
+
+**Fires** when a surface's composition has a plate slot: a hero field behind the type, a hero object beside or above the words, an atmosphere backdrop, a project orb, a closing figure. The slot exists first (named by the surface's `DESIGN.md`, a brief, or a taste skill); this skill fills it.
+
+**Declines, and says so:** a section image, a product screenshot, a UI comp or mock, a phone frame, a logo or wordmark, a chart, a card, anything with letters in it, and any request whose real need is a layout (that is `design-taste-frontend` or `/design`). A brief that asks for "an image for every section" gets the plate list below and the reason, not the images.
+
+## Step 1: read the materials, then commit to the plate list out loud
+
+Read the instance's `DESIGN.md` Materials section (the chrome world's plates table is the worked example: a token per plate, shipped in pairs, a sidecar beside every file) and the surface's own sheet for its `--plate-*` tokens. Then write the list before generating anything:
+
+```
+Plates: <slot> · <aspect> · <mode pair: plate+cutout | cutout only> · <material>
+```
+
+One line per slot, never more lines than slots. Say it to the person you are working with, and put it in the ship notes. A plate with no slot is the floating blob the audit rejects.
+
+## Step 2: the composition anchor, per plate
+
+The text-left image-right hero is the most overused default and is refused by name. Choose one of these anchors for each plate, and do not repeat one more than twice in a row across a surface:
+
+| Anchor | What it is | Where the type sits |
+|---|---|---|
+| **Field** | a full-bleed plate under the whole hero | over the plate, behind a scrim where it needs one |
+| **Beside, bleeding** | a whole object past the container by a gutter or more | in the remaining measure |
+| **Masthead** | the object above the words, offset from centre | under it; at 390 this is what every anchor collapses to |
+| **Orb** | a small whole object in a row or a ledger | beside it, in the row's own type |
+| **Backdrop** | atmosphere with no object, far behind the content | anywhere; the backdrop never competes |
+
+Choose **one hero scale for the whole surface** (giant statement, mid editorial, mini minimalist) and let the plates below the hero vary in ambition so the scroll reads as rhythm, not as slabs of the same size.
+
+## Step 3: art direction from the brief, and one family across the surface
+
+Map the brief's words to direction: a **minimalist** brief suspends the field and the backdrop and keeps one small object; an **editorial** brief raises the contrast between the object and the ground and allows an off-grid offset; a **cinematic** brief favours a graded field with the object low in it. Then **lock the family**: one material, one key light, one lens, one ground, stated in one sentence and repeated in every prompt (the chrome world's is "mirror-polished liquid chrome, a soft top-left key, a slightly long lens, pure black"). Variation is allowed only in the object, the anchor and the size. A plate that reads as a different studio is regenerated, not shipped.
+
+## Step 4: the palette lock is the pack
+
+Every plate is tonally matched to the instance's fifteen: the object's own hues sit inside the pack's accent and second voice, the ground is the pack's dark (pure black where the world's dark is black) or is removed for the cutout, and nothing in the plate invents a colour the page will have to answer. Text over a plate sits behind a scrim mixed from black or white with alpha, never a coloured overlay. Gradients inside a plate may be tonal, single-hue or noise-textured; the rainbow mesh, the purple-to-blue, the pink-to-orange and the glow halo are banned in the prompt as they are in the sheet, and gradient text does not exist here because text does not exist here.
+
+## Step 5: the prompt discipline
+
+One prompt per plate, written in this order: the object, whole and centred; the material; the light; the lens; the ground ("pure black everywhere the object is not", which is what makes the lighten-blend composite and the cutout both work); then the refusals, every time: **no text, no letters, no logo, no watermark, no UI**. A supplied reference is read for material, light and composition and never reproduced; a plate is never a crop or a zoom of an earlier plate, because a crop destroys the proportion the slot was sized for. Regenerate instead.
+
+## Step 6: the run, through the instance's key
+
+Generation goes through the instance's art pipeline: the builder's own image key at the hall's settings (`/builders/settings#art-key`) or the instance's shared key, never a credential this skill carries or a service it installs. Preflight the cost, generate at 2k, and log the spend with `node scripts/gds/cost.js <usd> art --task-id <id>` under the claim. The model ignores the black-ground instruction about one time in six and returns a white ground; a plate that must sit on a non-black ground goes through the pipeline's background remover for a real-alpha cutout, and the alpha is verified with `ffmpeg -vf alphaextract` (a `signalstats` YAVG strictly between 0 and 255 is real alpha; an image viewer that drops alpha makes a good cutout look opaque).
+
+## Step 7: the output contract (the pair and the sidecar)
+
+- **Sources** stay in the working directory (`.impeccable/mocks/<surface>-assets/` or the claim's scratch), never shipped.
+- **What ships** goes under the surface's assets (`modules/<key>/public/assets/<world>/` on this tree; `assets/ui/<surface>/` under the contract's layout): the black-ground plate as **JPEG** (`ffmpeg -q:v 3`) for dark, and the cutout as **WebP with alpha** (`ffmpeg -c:v libwebp -quality 88 -pix_fmt yuva420p`) at 1600px for light, at production size and at least twice the display size, never at a mockup's crop size.
+- **A sidecar beside every file**, named with the extension (`<name>.jpg.json`, `<name>-cut.webp.json`): `kind` (plate or cutout), `model`, `aspect_ratio`, `resolution`, `generated`, `round`, the exact `prompt`, `source`, `encoded`, and `use` (which mode and slot it serves). A raster with no sidecar does not ship.
+- **Tokens, not paths, in the sheet**: `--plate-<name>` and `--plate-<name>-cut` on `body`, root-absolute `url(/assets/…)` because a custom property's `url()` resolves against the document; dark takes the plate, light the cutout, written in the dark twins like every other dark rule.
+
+This skill lands the assets, the sidecars and the token names, and stops. Wiring the slot is the surface's taste skill or `/design`; the style library at `modules/ui-design/styles/` is where a plate family for a *look* would live, and a look brings none until its owner asks.
+
+## Step 8: the variety audit and the pre-flight
+
+Lay the family out as a contact sheet and reject the set when: the same anchor repeats more than twice in a row; the same ground mode repeats across every plate; a plate count exceeds the slot count; a plate carries text, a control or a screen; the material drifts between plates. Then the kit: `node modules/ui-design/kit/render.js --page <path>` with the plates in place, ALL CLEAN in every mode the page serves, and the contrast of any text over a plate measured at every phase where the plate moves (the Kill Switch keeps the rest frame the composition you judged). The ship notes carry the plate list, the anchors chosen, the spend, and the shots looked at.

package/modules/ui-design/styles/grove/DESIGN.md

@@ -115,7 +115,7 @@ Everything in this look is cut from soft paper and set down in a garden. Contain
 
 - **Tinted shadows.** `0 10px 26px -14px shade, 0 2px 6px shade-soft`, where `shade` is the ink at 16% and `shade-soft` the ink at 7%; in dark, black at 60% and 35%. Grey shadows are banned: a shadow is the ground's own colour, deepened.
 - **The slab.** A deep-green panel (the sea mixed 62% into black, the same in both modes) with cream type and a 20%-white hairline inside it.
-- **Plates** (when a surface adds them): photographic leaf plates over the paper, a real-alpha hero object. A surface's plates are its own; this look brings none.
+- **Plates** (when a surface adds them): photographic leaf plates over the paper, a real-alpha hero object. A surface's plates are its own. This look's specimen carries one, as the worked example of the pair convention (task 1003328, `imagegen-frontend-web`): `assets/grove-pod.jpg` (the black-ground plate, dark) and `assets/grove-pod-cut.webp` (the alpha cutout, light), a sculpted paper seed pod in sage and tan, each with a `<file>.json` provenance sidecar; the tokens are `--plate-pod` / `--plate-pod-cut` on the mock's `body`.
 
 ## Motion
 

package/modules/ui-design/styles/grove/assets/grove-pod-cut.webp.json

@@ -0,0 +1,12 @@
+{
+  "kind": "cutout",
+  "model": "nano_banana_pro",
+  "aspect_ratio": "1:1",
+  "resolution": "2k",
+  "generated": "2026-09-02T00:57Z",
+  "round": 1,
+  "prompt": "Background removed (the art pipeline's image background remover) from the grove-pod generation: a single sculpted paper seed pod, hand-folded from thick pale sage and warm tan paper, soft rounded forms, matte fibrous paper texture, two curled paper leaves at its base, lit softly from the upper left with soft tinted shadows, studio still life, centred, no text, no letters, no logo, no watermark.",
+  "source": "the remover's PNG (2048px, real alpha verified with ffmpeg alphaextract, YAVG 118)",
+  "encoded": "ffmpeg libwebp quality 88, alpha kept (yuva420p), 1600px (task 1003328)",
+  "use": "light mode: the specimen's hero object as an alpha cutout on the pale sage paper"
+}

package/modules/ui-design/styles/grove/assets/grove-pod.jpg.json

@@ -0,0 +1,12 @@
+{
+  "kind": "plate",
+  "model": "nano_banana_pro",
+  "aspect_ratio": "1:1",
+  "resolution": "2k",
+  "generated": "2026-09-02T00:55Z",
+  "round": 1,
+  "prompt": "A single sculpted paper seed pod, hand-folded from thick pale sage and warm tan paper, soft rounded forms, matte fibrous paper texture, two curled paper leaves at its base, lit softly from the upper left with soft tinted shadows, studio still life, centred, pure black everywhere the object is not, no text, no letters, no logo, no watermark.",
+  "source": "the generation returned a white ground (the one-in-six case); this plate is the real-alpha cutout (grove-pod-cut.webp's source) composited on pure black with ffmpeg, then scaled to 1600px",
+  "encoded": "ffmpeg overlay on color=black, scale=1600, JPEG -q:v 3 (task 1003328)",
+  "use": "dark mode: the specimen's hero object as a masthead on the black ground"
+}

package/modules/ui-design/styles/grove/mock.html

@@ -39,6 +39,10 @@ body {
   --radius: 22px;
   --radius-sm: 12px;
   --radius-pill: 999px;
+  --plate-pod: url(/assets/grove-pod.jpg);
+  --plate-pod-cut: url(/assets/grove-pod-cut.webp);
+  --plate-pod-hero: var(--plate-pod-cut);
+  --pod-shade: drop-shadow(0 18px 22px var(--shade));
   --top-h: 64px;
   --gutter: clamp(16px, 4vw, 26px);
   --band: clamp(40px, 7vh, 72px);
@@ -73,6 +77,8 @@ body {
   --label-face: var(--font-body);
   --label-size: 11.5px;
   --label-space: .06em;
+  --plate-pod-hero: var(--plate-pod);
+  --pod-shade: none;
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-mode="light"]) body {
@@ -98,6 +104,8 @@ body {
   --label-face: var(--font-body);
   --label-size: 11.5px;
   --label-space: .06em;
+  --plate-pod-hero: var(--plate-pod);
+  --pod-shade: none;
   }
 }
 
@@ -125,6 +133,11 @@ body[data-state="signed-in"] .who { display: inline-flex; }
 
 /* the bands */
 .band { padding: var(--band) 0; }
+/* the hero object: the specimen's one plate, a sculpted paper seed pod, as a masthead above the
+   words, offset right and bleeding past the wrap by a gutter (the masthead anchor of
+   imagegen-frontend-web; never text-left image-right). Light takes the alpha cutout on the paper
+   under a tinted lift; dark takes the black-ground plate on the black. Decorative: aria-hidden. */
+.pod { width: min(360px, 58vw); aspect-ratio: 1; margin: calc(-1 * var(--band) / 2) calc(-1 * var(--gutter)) 6px auto; background: var(--plate-pod-hero) center / contain no-repeat; filter: var(--pod-shade); }
 h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6.4vw, 84px); line-height: .96; letter-spacing: -.03em; margin: 0 0 18px; max-width: 12ch; }
 h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 38px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; }
 .lede { color: var(--ink-soft); max-width: 56ch; margin: 0; }
@@ -189,7 +202,7 @@ footer a { color: var(--accent-ink); display: inline-block; padding: 3px 0; font
 </style>
 </head>
 <body>
-<!-- THESIS: the grove as a specimen sheet. The thirteen colours and the two faces the pack carries, laid through this look's own derived recipes (its DESIGN.md frontmatter): a bar that floats as a soft card, a rounded heavy display voice, tiles under tinted shadows mixed from the ink, the sea green as a slab a whole band sits on, door pills with the primary in tan, a rail of soft tiles with one lit, ledger rows inside a sculpted panel. This page declares no :root and no colour of its own: the pack is spliced by the stub (STYLE=grove) and every value is a var() or a color-mix() of it. Dark restates the platform's black tier on body, since a mock links no sheet; the candidate's green dark ground cannot travel in a pack, so dark is the black under the tan and the sea. STATES: rest (signed out), signed-in. MODES: ?mode=dark|light. -->
+<!-- THESIS: the grove as a specimen sheet. The thirteen colours and the two faces the pack carries, laid through this look's own derived recipes (its DESIGN.md frontmatter): a bar that floats as a soft card, a rounded heavy display voice, tiles under tinted shadows mixed from the ink, the sea green as a slab a whole band sits on, door pills with the primary in tan, a rail of soft tiles with one lit, ledger rows inside a sculpted panel, and one hero object (a sculpted paper seed pod, the pair convention: the alpha cutout on the paper in light, the black-ground plate in dark, each with a provenance sidecar under assets/). This page declares no :root and no colour of its own: the pack is spliced by the stub (STYLE=grove) and every value is a var() or a color-mix() of it. Dark restates the platform's black tier on body, since a mock links no sheet; the candidate's green dark ground cannot travel in a pack, so dark is the black under the tan and the sea. STATES: rest (signed out), signed-in. MODES: ?mode=dark|light. -->
 <a class="skip" href="#main">Skip to content</a>
 <header class="bar">
   <div class="wrap">
@@ -207,6 +220,7 @@ footer a { color: var(--accent-ink); display: inline-block; padding: 3px 0; font
 <main id="main" tabindex="-1">
   <section class="band">
     <div class="wrap">
+      <div class="pod" aria-hidden="true"></div>
       <p class="label badge">A look from the style library</p>
       <h1>The grove</h1>
       <p class="lede">A sculpted paper garden. Pale sage paper, soft corners on everything that holds content, shadows tinted from the ink and never grey, the sea green as a second voice, and one lit tan on everything you can press.</p>

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.19.463",
+  "version": "1.19.464",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.19.463",
+      "version": "1.19.464",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.19.463",
+  "version": "1.19.464",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/src/module-api.js

@@ -33,7 +33,7 @@ const { validateOrRespond, LIMITS, parseId, asyncHandler, corsPublicGet, parsePa
 // there. scripts/gds/bump-version.js still rewrites the literal below; it appends
 // the entry to that file. Look for a version's history there, not here.
 // ---------------------------------------------------------------------------
-const CORE_VERSION = '1.19.463'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.19.464'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('dev-box'); log.info('mounted');

package/tests/ui_design_skills.mjs

@@ -148,6 +148,58 @@ test('impeccable carries none of the behaviour that made its origin dangerous: n
   assert.match(skill, /1003329/, 'the detector is named as its own task, not shipped here');
 });
 
+// ── the image family (task 1003328, ADR 0222): plates and hero objects only, never screens ──
+const IMAGE_FAMILY = ['image-to-code', 'imagegen-frontend-web', 'imagegen-frontend-mobile', 'brandkit'];
+
+test('the image family of task 1003328 exists as four in-house skills, declared, each naming the sidecar, "text-free" and the art pipeline key in its own rules', () => {
+  const pre = read(path.join(SKILLS, 'PREAMBLE.md')).trimEnd();
+  for (const name of IMAGE_FAMILY) {
+    assert.ok(ownDirs.includes(name), `${name}: skills/${name}/SKILL.md exists`);
+    assert.ok(manifest.contributes.skills.includes(name), `${name}: declared in contributes.skills`);
+    const text = read(path.join(SKILLS, name, 'SKILL.md'));
+    const own = text.slice(text.indexOf(pre) + pre.length);
+    assert.match(own, /sidecar/i, `${name}: names the provenance sidecar beside every plate (DESIGN.md's materials contract)`);
+    assert.match(own, /text-free/i, `${name}: restates that a plate carries no text`);
+    assert.match(own, /art[- ]key|art pipeline/i, `${name}: generation goes through the instance's art pipeline key, never a credential of its own`);
+    assert.match(own, /1003328/, `${name}: names the port task`);
+  }
+});
+
+test('no image-family skill carries the directives the panel flagged: no eagerness, no image-count mandate, no one-image-per-section or per-screen rule, no must-invoke-any-image-tool', () => {
+  const pre = read(path.join(SKILLS, 'PREAMBLE.md')).trimEnd();
+  for (const name of IMAGE_FAMILY) {
+    const text = read(path.join(SKILLS, name, 'SKILL.md'));
+    const own = text.slice(text.indexOf(pre) + pre.length);
+    assert.doesNotMatch(own, /IMAGE_GENERATION_EAGERNESS|eagerness\s*[:=]/i, `${name}: no eagerness setting`);
+    assert.doesNotMatch(own, /do not be lazy|don't be lazy/i, `${name}: no image-count goad`);
+    assert.doesNotMatch(own, /\b(exactly|generate|produce|render)\s+one\s+(image|frame|render)\s+per\s+(section|screen)\b/i, `${name}: no one-image-per-section or per-screen rule as a directive (naming the upstream's rule in the Rebuilt-from is fine)`);
+    assert.doesNotMatch(own, /\b(must|always)\s+(invoke|call|use)\s+(any|every|an?|the)\s+(available\s+)?image[- ]generat/i, `${name}: no must-invoke-any-image-tool directive`);
+    assert.doesNotMatch(own, /scale[s]?\s+(the\s+)?image\s+count\s+with/i, `${name}: no count scaled with sections (naming it as the upstream's is fine; directing it is not)`);
+  }
+  for (const name of ['imagegen-frontend-mobile', 'brandkit']) {
+    const own = read(path.join(SKILLS, name, 'SKILL.md'));
+    assert.match(own, /never (a|an) (screen|phone mockup|generated logo)|no phone mockups?/i, `${name}: says what it will not generate`);
+  }
+});
+
+test('the worked example of the image family is the grove specimen: the pair with a sidecar beside every raster, referenced as tokens on the mock body', () => {
+  const grove = path.join(MODULE, 'styles', 'grove');
+  for (const f of ['grove-pod.jpg', 'grove-pod-cut.webp']) {
+    assert.ok(fs.existsSync(path.join(grove, 'assets', f)), `styles/grove/assets/${f} exists`);
+    const side = path.join(grove, 'assets', `${f}.json`);
+    assert.ok(fs.existsSync(side), `${f}.json sidecar beside it (named WITH the extension)`);
+    const meta = readJson(side);
+    for (const k of ['kind', 'model', 'prompt', 'encoded', 'use']) assert.ok(meta[k], `${f}.json carries ${k}`);
+    assert.match(meta.prompt, /no text/i, 'the prompt carries the text-free refusal');
+  }
+  const mock = read(path.join(grove, 'mock.html'));
+  assert.match(mock, /--plate-pod:\s*url\(\/assets\/grove-pod\.jpg\)/, 'the dark plate is a token on body, root-absolute');
+  assert.match(mock, /--plate-pod-cut:\s*url\(\/assets\/grove-pod-cut\.webp\)/, 'the light cutout is a token on body, root-absolute');
+  assert.ok(!/<img\b/i.test(mock), 'the plate is a token, not an <img>');
+  const design = read(path.join(grove, 'DESIGN.md'));
+  assert.match(design, /grove-pod\.jpg/, 'the look\'s DESIGN.md names its specimen\'s plate instead of claiming it brings none');
+});
+
 test('every in-house SKILL.md opens with the PLATFORM PREAMBLE, byte-identical to PREAMBLE.md, exactly once, right after its frontmatter', () => {
   const pre = read(path.join(SKILLS, 'PREAMBLE.md')).trimEnd();
   for (const name of ownDirs) {