Update to Unbounce - Classic Builder

{
  "name": "mcp-modernize",
  "description": "Rewrite an imported (absolutely-positioned) Unbounce page variant as clean responsive HTML through Unbounce MCP. Use when the user asks to modernize a page, make a page responsive, get rid of absolute positioning, make a clean-HTML version of an existing Unbounce page, or edit a page that was built in the Unbounce builder — phrasings like \"modernize this page\", \"make my page responsive\", \"convert my old page\", \"clean HTML version\". Replication-faithful — this is a layout rewrite, never a redesign.",
  "included_files": [
    {
      "relative_path": "rules/color.md",
      "size_in_bytes": 6843
    },
    {
      "relative_path": "rules/failure-catalog.md",
      "size_in_bytes": 5157
    },
    {
      "relative_path": "rules/layout.md",
      "size_in_bytes": 6711
    },
    {
      "relative_path": "rules/replication.md",
      "size_in_bytes": 6429
    },
    {
      "relative_path": "rules/verification.md",
      "size_in_bytes": 5833
    }
  ],
  "skill_md_contents": "---\nname: mcp-modernize\ndescription: Rewrite an imported (absolutely-positioned) Unbounce page variant as clean responsive HTML through Unbounce MCP. Use when the user asks to modernize a page, make a page responsive, get rid of absolute positioning, make a clean-HTML version of an existing Unbounce page, or edit a page that was built in the Unbounce builder — phrasings like \"modernize this page\", \"make my page responsive\", \"convert my old page\", \"clean HTML version\". Replication-faithful — this is a layout rewrite, never a redesign.\nrequires:\n  mcpServers:\n    - unbounce-mcp\n---\n\n# Modernizing an Unbounce page (responsive rewrite)\n\nTurn a page built in the Unbounce builder into clean, responsive flexbox/grid\nHTML — **pixel-faithful to the original on desktop, reflowing sensibly on\nmobile**. This is a REPLICATION task with zero creative latitude: same copy,\nsame images, same fonts, same colors, same element counts. The only thing that\nchanges is the layout model (absolute positioning → flex/grid).\n\nThe pipeline is two deliberate stages:\n\n1. **Import** — `create_variant_from_existing_variant` clones the builder-built\n   source into an MCP-managed variant that renders identically (deterministic;\n   every string, image URL, font, and form field lands in the copy verbatim).\n2. **Rewrite** (this skill) — read that copy, restructure its layout to\n   responsive flex/grid, and write it back **in place** with\n   `update_variant_from_html`.\n\nExtraction fidelity is stage 1's job and it is deterministic — never work from\nthe original builder page directly, and never re-derive content from screenshots\nor memory. Your job is only the layout transformation.\n\n## Language with the user\n\nNever say \"modernize\", \"modernization\", \"replica\", or platform-internal terms\nto the user. Their page is fine; say \"make your page responsive\" and \"an\neditable copy of your page\". The result cannot be edited in the Unbounce\nbuilder — all future edits go through MCP tools; say so at handover, and never\nsuggest the builder.\n\n## Workflow\n\n**Step 1 — Resolve the target.** Identify the page (`list_client_pages`) and\nvariant (`list_page_variants`). If the target variant is builder-built (not\nMCP-managed), tell the user in one line what is about to happen — e.g. _\"I'll\ncreate an editable copy of your page, then make that copy responsive — your\noriginal stays untouched\"_ — then run `create_variant_from_existing_variant`\n(no `target_page` ⇒ new page). No further permission ceremony is needed; the\ncopy is additive and safe. Relay any conversion warnings honestly. A\nfixed-width \"autoscale\" source converts fine — the conversion report notes that\nruntime viewport scaling isn't preserved; that is expected and harmless here,\nbecause you rewrite the page responsive from scratch (Step 4), discarding the\nscaling entirely. If the target is already an MCP-managed imported copy, skip\nstraight to Step 2.\n\n**Step 2 — Read the copy.** `get_variant` on the imported variant. Download the\n`html_ref` / `css_refs` sources and any `scripts` entry's `ref` (via `download`, or\n`download_inband` if you cannot run shell commands). This body is the **sole\nsource of truth** for every value: copy strings, image URLs (with their\n`srcset`), `@font-face` blocks, colors, dimensions, form fields, `<ub:dynamic>`\ntags. Never guess a value, never take one from a screenshot, never reconstruct\nfrom memory. If the copy came from an autoscale source, its CSS wraps lengths in\n`calc(<px> * var(--scale, 1))` and it may carry a viewport scale script —\nignore both: read the plain px value (the `* var(--scale)` is the fixed-width\nscaling you are removing) and never copy the scale script into the rewrite. Your\nresponsive layout comes from the Step 3 rows, not these fixed dimensions.\n\n**Step 3 — Get the layout skeleton and fidelity signals.** `get_layout_hints`\non the same variant. It returns, per section: `rows` (element ids clustered\ninto visual rows, left-to-right), per-element geometry,\n`cross_section_overlays` (elements whose vertical span crosses into later\nsections), and `design_width` (the fixed canvas width). **The rows are your\nflex/grid structure.** Do not derive structure from the absolute coordinates\nyourself, and never translate `top`/`left` values through into the rewrite.\nIt also returns measured fidelity signals — `page_defaults` (the page's real\nbase text color and typography), per-section backgrounds, per-element\ncolors/typography/text/image/link inventories, `palette`, `loaded_fonts`,\n`row_stats`, `content_extent`, `hidden_elements`. Those are ground truth:\nauthor from them per [rules/color.md](rules/color.md), never from assumption.\nIf hints come back empty for a variant that plainly has a positioned tree,\nstop and report it (see [rules/verification.md](rules/verification.md)).\n\n**Step 4 — Audit, in writing, before any HTML.** Post a compact audit into the\nconversation (it must survive context compaction): per section — the row\nstructure from hints, the element **counts** per row, every text string\n(verbatim), every image URL + srcset, fonts, colors, form fields\n(name/type/order/options/submit label), interaction states (`:hover`/`:focus`),\nand every cross-section overlay with its pattern (column vs centered). Every\nvalue in your output must trace back to an audit row.\n\n**Step 5 — Write the responsive HTML.** Follow\n[rules/layout.md](rules/layout.md) (section/inner max-width pattern, flex/grid\nfrom hint rows, overlay handling) and\n[rules/replication.md](rules/replication.md) (verbatim preservation). If the\nuser also asked for a change (\"modernize it and swap the headline\"), use\ntwo-pass authoring: pass 1 is a content-identical rewrite, verified; only then\napply their change (see TWO-PASS in rules/replication.md).\n\n**Step 6 — Self-check before writing back.** Run the checklist in\n[rules/verification.md](rules/verification.md) — text walk, count checks, the\nclosure checks against the extracted signals (image-src, link-href, palette,\nfont sets; the WCAG contrast table from [rules/color.md](rules/color.md)), and\nthe hard stops (`position:absolute` budget, zero authored `cbc-*` references,\nflex/grid present, per-section max-width, overlay columns reserved). Fix\nfailures before delivering; never rationalize past a hard stop.\n\n**Step 7 — Write back in place and hand over.** `update_variant_from_html` on\nthe same variant. It is a TRUE FULL REPLACE: pass the complete artifact set\n(html + all css + all js) every time — anything omitted is dropped. The change\nis staged, never published by you. Hand the user: what you did (one line), the\n`preview_ref` from a fresh `get_variant` (plus the builder preview link from\n`list_page_variants` for the original, so they can compare), the evidence\nsummary from the self-check, and any genuine differences — concrete and\nspecific, or \"none\". Publishing, traffic, and goals are the user's call.\n\n## Hard invariants (the load-bearing rules)\n\n- **No creative changes. No additions.** Same typo, same order, same counts.\n  Nothing added that has no source element — no nav, no sticky header, no hover\n  effects the source lacks. Conversion-optimization defaults from\n  `mcp-page-authoring` do NOT apply to a rewrite — replication trumps\n  landing-page best practices.\n- **Every source text string appears verbatim** in the rewrite (whitespace-\n  insensitive). Element names, ids, and image filenames are NOT content.\n- **Reuse every asset by its exact URL**, keeping `srcset`/`image-set` and\n  `background-position`/`size`/`repeat` verbatim. Copy `@font-face` blocks and\n  `<ub:dynamic>` tags through unchanged.\n- **Forms:** plain `<form>` in your output; preserve field names, types, order,\n  options, and the submit label exactly (the server re-wires submission on\n  write). Preserve the hidden form-confirmation overlay (`cfm-*` markup) and\n  its trigger script verbatim if the copy has one.\n- **Preserve user customizations verbatim**: custom-HTML embeds, tracking\n  scripts, hand-applied CSS classes. Flag (don't rewrite) any script selectors\n  that target old ids.\n- **No subagent delegation.** The source must stay in the same context as the\n  build — a subagent without the verbatim source invents copy.\n- **Stay in your lane at delivery**: staged in-place update, no publish, no\n  traffic, no goal changes.\n\nLong-form rules, worked examples, and the catalog of real past failures:\n[rules/replication.md](rules/replication.md) ·\n[rules/layout.md](rules/layout.md) ·\n[rules/color.md](rules/color.md) ·\n[rules/verification.md](rules/verification.md) ·\n[rules/failure-catalog.md](rules/failure-catalog.md)\n"
}