html

clone:html — capture session → verified static routes

In: a session folder — pages.json + one folder per page holding ref.png, source.html, computed.json, meta.json. Out: <slug>/page.html per route, sharing shared/*.css and one glyph set, where every route's check exits 0 against its own ref.png.

Work in place in the session folder (copy it under apps/<name>/ first if it isn't already there). Everything the loop needs lives on disk, so any phase can be re-run and any cycle handed to a fresh subagent.

Read references/pipeline.md first — the CLI, the phases, the loop discipline and the four hard nevers are there and are not repeated here. This file is only what differs for static HTML.

clone prep <session> --target html
clone extract | resolve | cluster | check

Why static HTML, and when not to

A route is a file. No toolchain, no server, no build — the loop is edit and recheck with nothing in between, and the output is something anyone can open. That is the whole appeal, and for a landing page or a marketing site it is the right answer.

It is the wrong answer when the thing you are cloning has behaviour. A screenshot is the resting frame of components that do things: a command palette cloned as HTML is a div with a fake list. Hover, focus rings, disabled states and keyboard nav are real parts of the original and none of them are in ref.png. When the deliverable needs those, use clone:react.

Authoring

One page.html per route, plus shared/shell.css (and shared/components.css if it earns its own file), linked relatively — base.css first, always:

<link rel="stylesheet" href="../shared/base.css">
<link rel="stylesheet" href="../shared/shell.css">

• Author in CSS px. Every number in layout.md is CSS px and goes straight into the HTML. check renders at the capture's device pixel ratio and scales for you — never double numbers for a retina reference.
• margin:0, exact canvas size, no responsive units. One width, one page.
• Flow layout, not absolute coordinates. layout.md gives you display:flex, gap, padding, align-items — the page was built that way and reproducing it that way is what makes the output worth keeping. Reach for position:absolute only where the capture says so.
• A repeated recipe becomes a class. Same six properties on thirty rows is one .row class; inline style= is for the single value that differs per instance. This is what lets a fix subagent change one thing in one place.
• Icons are <img>, never inline SVG. <img class="ico" src="../shared/icons/ready/search-444342.svg"> — resolve has already produced that file at that colour. An <img> renders identically to inline SVG (measured: same ink, same bounding box) and keeps a route free of SVG source, which is most of a page's bulk: on the Tailscale clone it took two routes from 59 KB to 35 KB. Every one of those bytes is context an author and a fix subagent would otherwise carry for markup they never edit.
  • Size icons in whole pixels. An <img> rasterises at its device size, so 1.25em (17.5px) rounds up where an inline SVG drew 17.
  • The colour is baked in, so color: no longer reaches an icon — pick the file whose suffix matches the colour layout.md shows for that box.
  • Author from shared/icons.md rather than swapping icons in afterwards.
• Hover/active go in shell.css, on the class. Where layout.md shows hover{background-color:#f7f7f8} those are the source's own rules, read out of its stylesheets. Only changed properties are listed, so each one is a real difference. check screenshots the resting state and drives each hover separately — copy what is listed and invent nothing beyond it.
• Fonts local or not at all. If shared/fonts.json lists files, @font-face them with a relative url() — a CDN <link> silently no-ops in headless Chromium and every text run drifts 7–30% wide, so check refuses to run when the declared family didn't load. A system stack needs nothing.
• Nothing is a slice of ref.png. Charts are SVG, banners are HTML/CSS, gradients are CSS. A photograph you cannot rebuild becomes a neutral placeholder block in a palette colour. If the render is only right because it contains the reference, the clone is worth nothing.