@typeroll/mcp-server 0.42.2 → 0.43.1

package/skills/tr-header-footer.md

@@ -1,182 +1,118 @@
 ---
 name: tr-header-footer
-description: Vetted, robust header and footer presets to drop into the header/footer partials. Use when building or restyling a site's site-wide header or footer — start from a preset and restyle it instead of hand-rolling layout + overflow (the usual source of clipped logos and broken mobile menus).
+description: Build accessible native header and footer partials with the site logo, semantic navigation, responsive disclosure, and optional native cookie consent.
 ---
 
-# Header & footer presets
-
-> **The buffer model (draft writes).** Every content write in this recipe
-> (pages, blocks, partials, collection items) lands in an unsaved per-doc
-> DRAFT — deploys and plain previews only see SAVED content. For recipe-style
-> build work, pass `save: true` on write calls (the work is pre-approved by
-> the task itself), or run `commit_working_copy` per doc before any
-> `trigger_deploy`. Preview your drafts with `include_working_copy: true`.
-
-
-Headers and footers are the two partials every page shows, and hand-rolling them
-is where logos get clipped and mobile menus break. **Start from a preset below,
-fill the placeholders, restyle with the site's colours — don't build the layout
-from scratch.** Each preset is deliberately robust; the "why" notes call out the
-traps it avoids.
-
-## How to use
-
-1. `read_site_settings` — grab `logo`, `site_name`, `tagline`, `contact.email`,
-   and the colour palette.
-2. `read_partial partial_id="header"` (and `footer`) — see what's already there;
-   don't blow away a working one without reason.
-3. Pick a preset, replace every `{{PLACEHOLDER}}`, adjust colours to the palette
-   (the presets already read `--color-*` / `--font-heading` with fallbacks).
-4. `update_partial partial_id="header" patch={ html_content: "…" } version="…"`.
-5. **Preview and self-review in context** (see `tr-redesign-branch` step 6):
-   the logo must be FULLY VISIBLE (not clipped), legible against its background,
-   and the mobile layout must work at 390px. Screenshot the header region in
-   context — never the logo element in isolation (that hides clipping).
-
-Placeholders: `{{SITE_NAME}}`, `{{LOGO_URL}}`, `{{TAGLINE}}`, `{{EMAIL}}`, `{{YEAR}}`.
-
----
-
-## Header A — Centered logo (minimal; landing pages)
-
-```html
-<header class="tr-hdr tr-hdr--center">
-  <a class="tr-hdr-logo" href="/" aria-label="{{SITE_NAME}} — till startsidan">
-    <img src="{{LOGO_URL}}" alt="{{SITE_NAME}}" />
-  </a>
-</header>
-<style>
-.tr-hdr--center{background:var(--color-surface,#fff);display:flex;justify-content:center;padding:clamp(1rem,2.5vw,1.6rem) 1.5rem}
-.tr-hdr-logo{display:inline-block;line-height:0;transition:transform .15s ease}
-.tr-hdr-logo:hover{transform:translateY(-1px)}
-.tr-hdr-logo img{height:clamp(40px,6vw,58px);width:auto;display:block}
-</style>
+# Native header and footer compositions
+
+Use block-mode partials for new work. Core 0.1.8 / capability contract 0.43.0
+ships `template/site_logo`, `core/navigation`, layout primitives, and a
+revision-safe partial mode operation. HTML partials remain supported for
+legacy markup, but generic navigation and responsive layout no longer require
+tenant HTML, CSS, or JavaScript.
+
+## Preconditions
+
+1. Read `get_site_capabilities`, `read_site_settings`, `list_partials`, and
+   `list_block_types`.
+2. Require `supports_native_navigation`, `supports_partial_mode_switching`,
+   `supports_responsive_data_fields`, and
+   `supports_versioned_block_type_inheritance`.
+3. Read the existing header/footer before replacing anything. Work in a branch
+   for redesigns and preview at desktop, 390 px, keyboard-only, and 200% zoom.
+
+## Header tree
+
+Stage this tree with `update_partial partial_id="header" patch={blocks:[...]}
+save=true`, then call `set_partial_mode partial_id="header" to="blocks"` and
+read it back. Localize both accessible labels and every link label.
+
+```json
+[
+  {
+    "type": "core/section",
+    "data": { "width": "wide", "padding_y": "sm" },
+    "children": [{
+      "type": "core/container",
+      "data": {
+        "direction": { "mobile": "column", "tablet": "row" },
+        "align_main": "space-between",
+        "align_cross": "center",
+        "gap": "md",
+        "width": "wide",
+        "padding_y": "none",
+        "padding_x": "none"
+      },
+      "children": [
+        { "type": "template/site_logo", "data": { "height": "md", "link_to_home": true } },
+        {
+          "type": "core/navigation",
+          "data": {
+            "aria_label": "Main navigation",
+            "menu_label": "Menu",
+            "links": [
+              { "label": "Home", "href": "/" },
+              { "label": "About", "href": "/about/" },
+              { "label": "Contact", "href": "/contact/" }
+            ]
+          }
+        }
+      ]
+    }]
+  }
+]
 ```
 
-**Why it's robust:** no `overflow:hidden` anywhere near the logo (the #1 cause of a
-clipped wordmark); the logo sizes by `height` with `width:auto` so it never
-distorts and never gets cropped; symmetric padding so it can't collide with the
-section below. If you want a tinted header, set a solid `background` — don't add a
-glow that has to be clipped.
-
-## Header B — Logo left + links right (no-JS responsive menu)
-
-```html
-<header class="tr-hdr tr-hdr--nav">
-  <div class="tr-hdr-inner">
-    <a class="tr-hdr-logo" href="/" aria-label="{{SITE_NAME}} — till startsidan">
-      <img src="{{LOGO_URL}}" alt="{{SITE_NAME}}" />
-    </a>
-    <input type="checkbox" id="tr-nav-toggle" class="tr-nav-toggle" aria-hidden="true" />
-    <label for="tr-nav-toggle" class="tr-nav-burger" aria-label="Meny"><span></span><span></span><span></span></label>
-    <nav class="tr-hdr-nav" aria-label="Huvudmeny">
-      <a href="/">Start</a>
-      <a href="#">Sidan ett</a>
-      <a href="#">Sidan två</a>
-      <a class="tr-hdr-cta" href="#kontakt">Kontakta oss</a>
-    </nav>
-  </div>
-</header>
-<style>
-.tr-hdr--nav{background:var(--color-surface,#fff);border-bottom:1px solid rgba(0,0,0,.06)}
-.tr-hdr-inner{max-width:1160px;margin:0 auto;padding:.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
-.tr-hdr-logo{line-height:0}
-.tr-hdr-logo img{height:clamp(36px,4.6vw,50px);width:auto;display:block}
-.tr-hdr-nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);font-family:var(--font-heading),sans-serif;font-weight:600}
-.tr-hdr-nav a{color:var(--color-text,#1a1a1a);text-decoration:none}
-.tr-hdr-nav a:hover{color:var(--color-primary,#1F4FB8)}
-.tr-hdr-cta{background:var(--color-primary,#1F4FB8);color:var(--color-primary-fg,#fff);padding:.6rem 1.2rem;border-radius:999px}
-.tr-hdr-cta:hover{filter:brightness(1.05);color:var(--color-primary-fg,#fff)}
-.tr-nav-toggle{display:none}
-.tr-nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem}
-.tr-nav-burger span{width:24px;height:2px;background:var(--color-text,#1a1a1a);border-radius:2px}
-@media(max-width:760px){
-  .tr-nav-burger{display:flex}
-  .tr-hdr-nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:.2rem;max-height:0;overflow:hidden;transition:max-height .25s ease}
-  .tr-hdr-nav a{padding:.7rem .2rem}
-  .tr-nav-toggle:checked ~ .tr-hdr-nav{max-height:60vh}
+`core/navigation` emits a real `nav` and list in initial HTML, marks the
+matching page with `aria-current="page"`, and progressively enhances to a
+button-controlled mobile menu. Verify Tab and Shift-Tab order, Enter/Space,
+Escape returning focus to the disclosure, visible focus, long translated
+labels, and no horizontal overflow. Without JavaScript the links remain
+visible and usable.
+
+## Footer tree and consent
+
+Use the same tree for `footer`, normally with `padding_y: "lg"`, a small site
+logo, localized footer navigation, and optional contact/prose blocks. The
+footer navigation gets its own accessible label; it is not the main
+navigation landmark.
+
+Cookie consent is a site feature, not a footer widget. Configure it separately:
+
+```json
+{
+  "cookie_consent": {
+    "enabled": true,
+    "text": "We use optional cookies. <a href=\"/privacy/\">Privacy policy</a>",
+    "privacy_policy_url": "/privacy/",
+    "reload_after_consent": false
+  }
 }
-</style>
-```
-
-**Why it's robust:** the mobile menu is a pure-CSS checkbox toggle — no JS to break,
-no library. The `overflow:hidden` is ONLY on the collapsing nav list (never on the
-header or the logo), so the logo is always fully visible. Links use site colour
-variables so it matches the brand automatically. The header wraps (`flex-wrap`) so
-nothing overflows the viewport on narrow screens.
-
----
-
-## Footer A — Centered minimal
-
-```html
-<footer class="tr-ftr tr-ftr--center">
-  <div class="tr-ftr-inner">
-    <div class="tr-ftr-brand">{{SITE_NAME}}</div>
-    <p class="tr-ftr-tag">{{TAGLINE}}</p>
-    <p class="tr-ftr-contact"><a href="mailto:{{EMAIL}}">{{EMAIL}}</a></p>
-    <p class="tr-ftr-copy">© {{YEAR}} {{SITE_NAME}}</p>
-  </div>
-</footer>
-<style>
-.tr-ftr--center{background:var(--color-primary,#163C8C);color:rgba(255,255,255,.78)}
-.tr-ftr--center .tr-ftr-inner{max-width:1120px;margin:0 auto;padding:2.6rem 1.5rem;text-align:center;display:grid;gap:.45rem}
-.tr-ftr-brand{font-family:var(--font-heading),sans-serif;font-weight:800;font-size:1.35rem;color:#fff}
-.tr-ftr-tag{margin:0;font-size:1rem;color:rgba(255,255,255,.85)}
-.tr-ftr-contact{margin:.15rem 0 0}
-.tr-ftr-contact a{color:#fff;text-decoration:none;font-weight:600}
-.tr-ftr-contact a:hover{text-decoration:underline}
-.tr-ftr-copy{margin:.8rem 0 0;font-size:.85rem;color:rgba(255,255,255,.55)}
-</style>
-```
-
-## Footer B — Three columns (brand · links · contact)
-
-```html
-<footer class="tr-ftr tr-ftr--cols">
-  <div class="tr-ftr-grid">
-    <div class="tr-ftr-col">
-      <div class="tr-ftr-brand">{{SITE_NAME}}</div>
-      <p class="tr-ftr-tag">{{TAGLINE}}</p>
-    </div>
-    <nav class="tr-ftr-col" aria-label="Sidfot">
-      <a href="/">Start</a>
-      <a href="#">Sidan ett</a>
-      <a href="#">Sidan två</a>
-    </nav>
-    <div class="tr-ftr-col">
-      <p class="tr-ftr-contact"><a href="mailto:{{EMAIL}}">{{EMAIL}}</a></p>
-    </div>
-  </div>
-  <p class="tr-ftr-copy">© {{YEAR}} {{SITE_NAME}}</p>
-</footer>
-<style>
-.tr-ftr--cols{background:var(--color-primary,#163C8C);color:rgba(255,255,255,.78)}
-.tr-ftr--cols .tr-ftr-grid{max-width:1120px;margin:0 auto;padding:3rem 1.5rem 1.4rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
-.tr-ftr--cols .tr-ftr-brand{font-family:var(--font-heading),sans-serif;font-weight:800;font-size:1.35rem;color:#fff;margin-bottom:.4rem}
-.tr-ftr--cols .tr-ftr-tag{margin:0;color:rgba(255,255,255,.8);max-width:34ch}
-.tr-ftr--cols .tr-ftr-col{display:grid;gap:.5rem;align-content:start}
-.tr-ftr--cols nav a{color:rgba(255,255,255,.85);text-decoration:none}
-.tr-ftr--cols nav a:hover{color:#fff;text-decoration:underline}
-.tr-ftr-contact a{color:#fff;text-decoration:none;font-weight:600}
-.tr-ftr--cols .tr-ftr-copy{max-width:1120px;margin:0 auto;padding:0 1.5rem 2.4rem;font-size:.85rem;color:rgba(255,255,255,.55)}
-@media(max-width:680px){.tr-ftr--cols .tr-ftr-grid{grid-template-columns:1fr;gap:1.4rem}}
-</style>
 ```
 
-**Why these footers are robust:** the columns collapse to one at 680px (no
-horizontal scroll); all colours come from `--color-*` with fallbacks; the contact
-is a real `mailto:` link; nothing relies on fixed heights. Swap `--color-primary`
-for a custom dark if the brand's primary is too light for white text.
-
----
-
-## Restyling notes
-
-- The logo always comes from `read_site_settings → logo`. If it's `null`, set it
-  first (upload + `update_site_settings`) — don't hard-code a path.
-- For a **shaped transition** from the header/footer into the page, don't build a
-  wave band by hand — that belongs to the adjacent `core/section` via its
-  `divider_top` / `divider_bottom` (see `tr-redesign-branch`).
-- Keep the brand mark + a way home. Even a dramatic redesign keeps the logo
-  linking to `/`.
+Use `update_site_settings`, then read settings back. `scripts_necessary` and
+`scripts_optional` execute in visitors' browsers and must be reviewed like
+other API-key-authorized script surfaces. Verify accept/necessary/reject,
+optional-script gating, and keyboard focus in preview and the actual build.
+The signed hosted preview runs at an opaque origin. Consent choices therefore
+use in-memory state for the current preview document; they are intentionally
+not persisted as portal cookies across a reload or page navigation. Accepting
+all must still activate optional scripts immediately, which is enough to test
+the gate without weakening the preview sandbox.
+
+## Version and dependency rules
+
+Child versions inherit installed, custom, and third-party block types from
+their base chain. If preview reports a missing type, stop and inspect
+`list_block_types` for that exact version; do not duplicate an Extension or
+installation. A type missing after capability 0.43.0 is a dependency error to
+report, not a reason to let the block silently disappear.
+
+## Final checks
+
+- Header and footer landmarks exist exactly once around their content.
+- Logo is fully visible, keeps its aspect ratio, has useful alt text, and links home.
+- Current-page state and localized navigation labels are correct.
+- Mobile disclosure is keyboard accessible and does not trap focus.
+- No tenant CSS is required for spacing, focus, wrapping, or the narrow layout.
+- Preview and a hosted static build match before promotion.

package/skills/tr-migrate-multisite.md

@@ -311,31 +311,36 @@ blocker. Redirect builds cover both source spellings and send internal targets
 to the site's configured trailing-slash style.
 
 Note what the check does NOT catch: it verifies that a URL *resolves*, not
-that the page at the other end is the right content. Spot-check the top
-`gsc_clicks` URLs by eye.
+that the page at the other end is the right content. Review content and SEO
+parity, then record the exact dataset and result with
+`record_migration_seo_acceptance`.
 
 Iterate until `missing` and `broken_redirect` are both zero **on every site**.
 Then, per site:
 
-1. `add_domain` / follow the DNS instructions the platform returns
-2. Point DNS
-3. `poll_domain` until verified → `activate_domain`
+1. `add_domain` with the intended apex/www canonical; leave `auto_deploy` on
+2. Wait for that canonical/sitemap deploy to succeed, then point DNS
+3. `poll_domain` until verified — there is no separate activation step
 4. Re-run `verify_migration_urls target_origin="https://example.de"` against
    the real domain, to confirm the cutover kept what the pre-check proved
 5. Submit the new sitemap in Search Console; keep the old property open for
    a few weeks and watch the 404 report
+6. Rerun the complete, unfiltered URL check and SEO review, then require
+   `get_migration_launch_report` to return `launch_ready: true`
 
 ## Definition of done (per site)
 
 - [ ] `get_migration_readiness source_url=<this market's old site>` → `ready: true`, warnings reviewed
 - [ ] `list_migration_urls status="unhandled"` → 0
-- [ ] `verify_migration_urls` → 0 `missing`, 0 `broken_redirect`
+- [ ] Complete `verify_migration_urls` → 0 `missing`, 0 `broken_redirect`, 0 `error`, 0 untested variants
+- [ ] `record_migration_seo_acceptance` is accepted for the latest deploy
+- [ ] `get_migration_launch_report` → `launch_ready: true`
 - [ ] hreflang cluster written on both/all sides, absolute, final domains
 - [ ] `language` set on the site; `<html lang>` correct in the deployed HTML
 - [ ] Internal links rewritten (no lingering absolute links to the old domain)
 - [ ] Forms rebuilt, recipient address correct for THIS market, test submission sent and received
 - [ ] Media uploaded to this site's own library (no cross-site `cdn_url`), alt text in this market's language
-- [ ] Domain verified + activated; sitemap submitted
+- [ ] Domain declared, canonical deploy succeeded, DNS verified; sitemap submitted
 
 ## Pitfalls specific to this job
 

package/skills/tr-migrate-wp.md

@@ -26,6 +26,14 @@ agency) reviews each step in their terminal.
 get_migration_readiness source_url="https://oldsite.com"
 ```
 
+When the migration includes reusable page/item layouts, include each proposed
+block composition and its collection fields in this same call. A
+`waiting_for_native_support` result means leave that template intact and do
+not replace the gap with generic custom blocks, raw HTML, or corrective site
+CSS. Independent content and SEO work may continue. Rerun the review after the
+required Core version is deployed, then verify preview and a fresh hosted
+build.
+
 Pass `source_url` — that adds the checks on the site you're migrating FROM.
 An old host that answers 403/429 to server-side requests is a **blocker**: the
 import would produce empty pages, or pages containing the host's block page,
@@ -110,26 +118,25 @@ c. Migrate referenced images:
      text (existing WP `alt` attribute or `aria-label`; fall back to
      filename only as a last resort).
 
-d. Reconstruct in the target's design. The cleaned HTML is rarely
-   ready to ship — typical fixes: replace WP `wp-block-*` classes
-   with the target's CSS variables; turn Elementor sections into
-   plain `<section>` with the target's spacing; fix headings so the
-   page has exactly one `<h1>`. If you're confident, batch these
-   through `bulk_replace_text` with `dry_run: true` first.
+d. Reconstruct in the target's design with native blocks first. Read the
+   available block types and map headings, prose, images, buttons and layout
+   into their typed fields. Use HTML mode only for source-specific markup that
+   has no native representation and has passed the composition preflight.
 
 e. Write the page as a draft:
 
    ```
-   create_page title="..." slug="<preserved-from-wp>"
-               html_content="<reconstructed>"
+   create_page title="..." slug="<last-path-segment>"
+               path="/<preserved-wordpress/path/>"
+               blocks=[<native block tree>]
                status="draft" kind="article" author="..."
                seo_title="..." seo_description="..."
    ```
 
    **Preserve the source URL.** WP post URLs like
-   `/2024/01/foo-bar/` go in as `slug: "2024/01/foo-bar"`. The
-   slug supports slashes; encode the WP permalink structure verbatim
-   when the customer wants existing links to keep working.
+   `/2024/01/foo-bar/` uses `slug: "foo-bar"` and
+   `path: "/2024/01/foo-bar/"`. Slug is one segment; `path` preserves the
+   complete nested URL.
 
 ### 4. Redirects
 
@@ -183,6 +190,8 @@ import_gsc_performance property="https://old.example.com/" months=6
 # Or paste a Search Console Pages CSV via csv="..." and source_origin.
 check_internal_links         # database preflight before deploy
 verify_migration_urls        # after trigger_deploy; compact exceptions by default
+record_migration_seo_acceptance  # after reviewing this exact deployment
+get_migration_launch_report      # final fail-closed launch gate
 ```
 
 The inventory merges slash-equivalent URLs into one work item but preserves

package/skills/tr-new-site.md

@@ -57,9 +57,9 @@ Common requirements that are easy to misclassify:
 | Responsive icon/card grid | `core/grid` + `core/icon_box`, or `core/feature_grid`; set responsive fields with `set_block_responsive` |
 | Custom cards backed by a collection | `core/repeater` / `core/collection_list` with a site-authored `item_compatible` block type as `item_block` |
 | Grouped collection listing | `core/repeater` with `group_by`; array-valued fields place an item in every matching group |
-| Breadcrumbs in a page template | `template/page_breadcrumbs` (verify that the relevant route supplies a breadcrumb trail) |
-| Generated heading index | `core/table_of_contents`; choose `h2`, `h2-h3`, or `h2-h4` |
-| Previous/next collection item links | `template/item_navigation` in the collection's block template; ordering follows `sort_field` / `sort_dir` |
+| Breadcrumbs in a page template | `template/page_breadcrumbs`; page and item routes supply a server-rendered trail |
+| Generated heading index | `core/table_of_contents`; choose heading levels and set `source_field` for collection content |
+| Previous/next collection item links | `template/item_navigation`; defaults to collection order and can bind explicit neighbor fields |
 | Download CTA that disappears without a file | `template/show_if` around a context-bound `core/button`; a dedicated download block is only editor convenience |
 | Sticky/custom header and multi-column footer | Block-mode header/footer partials plus layout blocks, or one reusable custom block type |
 | Cookie notice | `settings.cookie_consent`, not a page block |
@@ -115,40 +115,22 @@ an iframe cannot be represented.
 
 ### 3. Header + footer partials
 
-**Start from a vetted preset — don't hand-roll the layout.** `read_skill
-tr-header-footer` has robust header + footer presets (centered logo, logo+nav
-with a no-JS mobile menu, centered + 3-column footers) that avoid the usual
-traps: clipped logos (no `overflow:hidden` near the logo), distorted logos
-(`height` + `width:auto`), and broken mobile menus. Fill the placeholders and
-restyle to the palette.
-
-Partials can use either mode. Use HTML for a compact hand-authored nav, or
-block mode when editors need per-field control or an installed Extension must
-be placed there. Partials receive the same `{{site.*}}` render context as page
-blocks, so literal brand data is optional rather than required:
-
-```html
-<header class="site-header">
-  <div class="header-inner">
-    <a class="header-logo" href="/"><img src="LOGO_MEDIA_URL" alt="Acme Studio" height="40" /></a>
-    <nav class="header-nav">
-      <a href="/om-oss">Om oss</a>
-      <a href="/kontakt">Kontakt</a>
-    </nav>
-  </div>
-</header>
-<style>
-.site-header{background:var(--color-background);padding:1rem 2rem}
-.header-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
-.header-nav{display:flex;gap:2rem}
-.header-nav a{color:var(--color-text);text-decoration:none}
-</style>
-```
+**Start from the native preset — don't hand-roll navigation.** Read
+`tr-header-footer` and use its `template/site_logo` + `core/navigation`
+composition. The server-rendered landmark, current-page state, no-JS links,
+mobile disclosure, focus treatment, and responsive behavior are Core
+contracts rather than tenant CSS/JavaScript.
+
+Stage the complete tree with `update_partial partial_id="header"
+patch={blocks:[...]} save=true`, then call `set_partial_mode partial_id="header"
+to="blocks"`. Repeat for the footer and read both partials back. The inactive
+HTML representation is retained for rollback; changing `content_mode` through
+ordinary PATCH/PUT is rejected intentionally.
 
-`replace_partial partial_id="header" html_content="..."` — same pattern
-for the footer. Design notes: **no border-bottom on the header if the
-first page section should meet it seamlessly** — let background color
-changes do the separating. Anchor links in nav (`/#section`) are fine.
+Use HTML mode only when preserving legacy authored markup that cannot yet be
+represented natively. Partials receive the same `{{site.*}}` render context as
+page blocks. Keep the first section and header backgrounds intentional; do not
+add a decorative border merely to compensate for mismatched spacing.
 
 ### 4. Homepage — block tree
 
@@ -181,7 +163,7 @@ on a block *inside* the section instead):
   ] },
   { "type": "core/section", "data": { "padding_y": "lg" }, "children": [
     { "type": "core/heading", "data": { "text": "Så funkar det", "level": "h2", "align": "center" } },
-    { "type": "core/grid", "data": { "cols": 3, "gap": "lg" }, "children": [
+    { "type": "core/grid", "data": { "cols": { "mobile": 1, "tablet": 2, "desktop": 3 }, "gap": "lg" }, "children": [
       { "type": "core/step_card", "data": { "number": "1", "title": "…", "text": "<p>…</p>" } },
       { "type": "core/step_card", "data": { "number": "2", "title": "…", "text": "<p>…</p>" } },
       { "type": "core/step_card", "data": { "number": "3", "title": "…", "text": "<p>…</p>" } }

package/skills/tr-responsive.md

@@ -23,6 +23,11 @@ Use `set_block_responsive` (or pass the object form directly in `add_block` /
 `update_block` data). `read_block_type <id>` tells you which fields are
 `responsive`.
 
+The breakpoint object belongs on the responsive field inside `block.data`,
+for example `data.cols`. Do not add a top-level `block.responsive` object: it
+is not a rendered field, and page, partial and collection-template writes
+reject it instead of silently storing an inert value.
+
 ```
 # 4 columns on desktop, 2 on tablet, 1 on mobile:
 set_block_responsive target={kind:page,id:home} block_id=<grid-id>
@@ -104,9 +109,7 @@ breakpoints needed.
   that didn't collapse) and fix THAT element's width / clip it with
   `overflow:hidden` on its own section. Verify with
   `document.documentElement.scrollWidth === clientWidth` at 360–390px.
-- **`core/grid` `stack_at` may not collapse on mobile** (a known platform bug):
-  the block writes `style="--cols:N"` inline, and an inline custom property beats
-  the media query that tries to set `--cols:1`, so the grid stays N-up and text
-  wraps a letter per line. Workaround until fixed: in page-scoped CSS override the
-  real property, e.g. `@media(max-width:640px){.my-section [data-block="grid"]{grid-template-columns:1fr!important}}`.
+- `core/grid` `stack_at` and responsive `data.cols` both compile overrides
+  that beat the inline mobile baseline. Verify the computed column count at
+  the actual breakpoint; no page CSS workaround should be necessary.
 - Background design reference: `docs/responsive-blocks.md` in the platform repo.