astack-skills 0.7.1 → 0.8.0

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "astack",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Skills for Claude Code and Codex that take product work from the thread to a proven, live release.",
   "author": {
     "name": "Andrew Wilkinson",

package/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "astack",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Skills for Claude Code and Codex that take product work from the thread to a proven, live release.",
   "author": {
     "name": "Andrew Wilkinson",

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.8.0
+
+Measured checks for defects a settled screenshot hides, and a harder rule for launch stills. No library was added.
+
+- `shoot.mjs` reads the rendered page and reports inputs under 16px, a viewport that disables zoom, `:hover` rules outside `@media (hover: hover)`, selectable controls on a narrow viewport, and a missing tap-highlight reset. `--shift` compares a loading page with the settled page. It exits 1 when a shared region or the document scroll height moved by more than 1px, and exits 2 when no region was marked and the scroll height did not change. It does not read the performance timeline's layout-shift entries: headless Chrome can report none for a jump that has already painted, and a score of 0 would pass that page.
+- `web-design` states how to build that loading layout, and `mobile.md` says which of those lines a desktop capture can see. `dogfood` and `astack`'s completion checks read them before calling a phone journey done.
+- `deslop` names this season's UI tells with examples (pill tags, italic headline words, dividers, opacity ladders, borders on every box, over-detailed diagrams, decorative breadcrumbs, section numbers). `slop-scan.mjs` flags `section-index` and `opacity-ramp`.
+- `launch` and `web-graphics`: a bento, device or clip may frame a real capture. It may not redraw the screen, and it may not show a number the agreed copy file does not contain.
+- New `shift-and-still` eval fixture, with the planted failures named. The blind comparison was not run. The deterministic `shoot.mjs --shift` run is recorded in `evals/RESULTS.md`.
+
 ## 0.7.1
 
 - Keep coupled work in one agent context and load skills as needed. Independent review now depends on risk, unresolved judgment and repository requirements.

package/README.md

@@ -72,7 +72,7 @@ Each one has a short guide in [docs/skills](docs/skills/).
 
 Most skill packs tell the model to be thorough. These come with small scripts so it can actually check. Node 22, nothing else to install, and every skill carries its own copy.
 
-- `shoot.mjs` screenshots a page on a phone and on desktop, light and dark, and flags stranded words, tiny tap targets and anything spilling sideways.
+- `shoot.mjs` screenshots a page on a phone and on desktop, light and dark, and flags stranded words, tiny tap targets, anything spilling sideways, inputs that will zoom the page, hover that is not gated to a real pointer, and (with `--shift`) a loading state whose boxes do not match the loaded page.
 - `pr-state.mjs` reads every check on the current commit and every unresolved review thread. `--watch` sits in the background and pings you when something changes.
 - `verify-live.mjs` confirms the URL is serving the commit you shipped, not a cached copy of the last one.
 - `slop-scan.mjs` finds the usual suspects, from "seamless" to gradient headlines to emoji bullets, and explains why each one reads as generated. <!-- slop-scan: ignore-line -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astack-skills",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "private": false,
   "description": "Skills for Claude Code and Codex that take product work from the thread to a proven, live release.",
   "license": "MIT",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "astack",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Skills for Claude Code and Codex that take product work from the thread to a proven, live release.",
   "author": {
     "name": "Andrew Wilkinson",

package/skills/astack/references/completion-checks.md

@@ -13,7 +13,8 @@ Run this before writing "done". Every line is either checked, not applicable (sa
 
 - [ ] Captured at 390 and 1440, light and dark, reduced motion on (`node <skill-dir>/scripts/shoot.mjs <url>`), and the screenshots were looked at.
 - [ ] No horizontal overflow, stranded single words in headings, tap targets under 44px or text under 12px that you did not choose on purpose.
-- [ ] Loading, empty, error and success states seen, not assumed.
+- [ ] Phone lines from that capture are clean or chosen on purpose: no input under 16px, no zoom lock, no ungated `:hover`, no selectable control text, tap highlight disabled. Name anything that still needs a phone in the hand.
+- [ ] Loading, empty, error and success states seen, not assumed. Where a screen waits on data, `shoot.mjs <loading> --shift <loaded>` exits 0. Exit 1 is a shift to fix. Exit 2 means the regions were not marked, which is not a pass.
 - [ ] `deslop` scan run on changed copy and UI; every medium/high hit fixed or dismissed with a reason.
 
 ## Measurement (when the change has a success action)

package/skills/astack/scripts/shoot.mjs

@@ -29,23 +29,43 @@ Options:
                        offsets depend on capture speed and are reported)
   --click SELECTOR     Click this element before capturing (e.g. to open a menu)
   --scale N            Device scale factor (default: 2)
+  --shift URL          Load this second page at the same sizes. The first
+                       page is the loading state, this one the settled state.
+                       Reports regions (same id or data-region) whose box
+                       moved by more than 1px, and any change in document
+                       scroll height. Exits 1 when one did. Exits 2 when no
+                       region was marked and the scroll height did not change,
+                       which is not a pass. Settled shots are named with -settled.
   --json               Print a JSON manifest instead of text
 
 Set SHOOT_CHROME_FLAGS for extra browser flags. --no-sandbox is added
 automatically when CI is set or when running as root.
 
-Also reports: horizontal overflow, stranded words in wrapped text, tap
-targets under 44px (widths < 768), text under 12px, console errors, failed
-requests and
-elements wider than the viewport, per capture. Set CHROME_PATH to override
-browser discovery. The temporary browser profile is deleted afterwards.
-Exits 1 if the page fails to load or returns an HTTP error. A bare
+Also reports, per capture: horizontal overflow, elements wider than the
+viewport, stranded words in wrapped text, tap targets under 44px and
+selectable control text (widths < 768), text under 12px, inputs under 16px,
+a viewport that disables zoom, :hover rules outside @media (hover: hover),
+a missing tap-highlight reset when the page has controls, console errors
+and failed requests. Set CHROME_PATH to override browser discovery. The
+temporary browser profile is deleted afterwards. Exits 1 if a page fails
+to load, returns an HTTP error, or --shift finds a moved region or a
+document scroll height change of more than 1px. Exits 2 when --shift could
+not compare a marked region and the scroll height did not change. A bare
 host:port (localhost:3000) is treated as http://.
+The layout-shift entries on the performance timeline are not read. Headless
+Chrome can report none of them for a jump that has already painted, so a
+score of 0 would pass a page that moved. The two-page box compare is the check.
 `;
 
+function resolveTarget(value) {
+  if (/^[a-z]+:\/\//i.test(value)) return value;
+  return !existsSync(value) && /^(?:localhost|[\w-]+(?:\.[\w-]+)+|\d+\.\d+\.\d+\.\d+)(?::\d+)?(?:\/|$)|^[\w.-]+:\d+/.test(value)
+    ? `http://${value}` : pathToFileURL(resolve(value)).href;
+}
+
 function parse(argv) {
-  const o = { target: "", out: "shots", widths: [390, 1440], height: 0, themes: ["light", "dark"],
-    motion: "reduce", full: false, wait: 600, frames: 0, every: 100, click: "", scale: 2, json: false };
+  const o = { target: "", shift: "", out: "shots", widths: [390, 1440], height: 0, themes: ["light", "dark"],
+    motion: "reduce", full: false, wait: 600, frames: 0, every: 100, click: "", scale: 2, shotSuffix: "", json: false };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i], v = () => { const x = argv[++i]; if (x === undefined) throw new Error(`${a} needs a value`); return x; };
     if (a === "--help" || a === "-h") { process.stdout.write(HELP); process.exit(0); }
@@ -60,14 +80,14 @@ function parse(argv) {
     else if (a === "--every") o.every = Number(v());
     else if (a === "--click") o.click = v();
     else if (a === "--scale") o.scale = Number(v());
+    else if (a === "--shift") o.shift = v();
     else if (a === "--json") o.json = true;
     else if (a.startsWith("--")) throw new Error(`Unknown option ${a}`);
     else o.target = a;
   }
   if (!o.target) { process.stdout.write(HELP); process.exit(1); }
-  if (!/^[a-z]+:\/\//i.test(o.target))
-    o.target = !existsSync(o.target) && /^(?:localhost|[\w-]+(?:\.[\w-]+)+|\d+\.\d+\.\d+\.\d+)(?::\d+)?(?:\/|$)|^[\w.-]+:\d+/.test(o.target)
-      ? `http://${o.target}` : pathToFileURL(resolve(o.target)).href;
+  o.target = resolveTarget(o.target);
+  if (o.shift) o.shift = resolveTarget(o.shift);
   if (o.frames) o.motion = "no-preference";
   return o;
 }
@@ -197,7 +217,7 @@ async function capture(cdp, o, width, theme) {
     if (!o.frames) await sleep(o.wait);
   }
   const files = [], frameTimes = [];
-  const base = `${String(width)}-${theme}`;
+  const base = `${String(width)}-${theme}${o.shotSuffix || ""}`;
   if (o.frames) {
     // Capture first, measure the page afterwards, so frame 0 is as close to the trigger as possible.
     for (let f = 0; f < o.frames; f++) {
@@ -277,8 +297,64 @@ async function capture(cdp, o, width, theme) {
       const size = parseFloat(getComputedStyle(el).fontSize);
       if (size < 12) { tinyText.push(label(el) + " " + size + "px"); if (tinyText.length >= 5) break; }
     }
+    const inputsUnder16 = [];
+    for (const el of document.querySelectorAll("input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=image]), textarea, select")) {
+      if (!visible(el)) continue;
+      const size = parseFloat(getComputedStyle(el).fontSize);
+      if (size < 16) { inputsUnder16.push((el.getAttribute("aria-label") || el.id || el.getAttribute("name") || el.getAttribute("placeholder") || el.tagName.toLowerCase()) + " " + (Math.round(size * 10) / 10) + "px"); if (inputsUnder16.length >= 8) break; }
+    }
+    const viewportMeta = document.querySelector('meta[name="viewport" i]')?.getAttribute("content") || "";
+    const zoomLocked = /user-scalable\\s*=\\s*(?:no|0)\\b|maximum-scale\\s*=\\s*1(?:\\.0+)?(?![.\\d])/i.test(viewportMeta);
+    const ungatedHovers = [];
+    let ungatedHoverCount = 0, tapHighlightDisabled = false;
+    const coversRoot = selector => selector.split(",").some(s => /^(?:html|:root|\\*|body)(?:\\s|$)/.test(s.trim()));
+    const visitRules = (rules, media) => {
+      if (!rules) return;
+      for (const rule of rules) {
+        if (rule.type === 4) visitRules(rule.cssRules, (media ? media + " " : "") + (rule.conditionText || ""));
+        else if (rule.type === 3 && rule.styleSheet) { try { visitRules(rule.styleSheet.cssRules, media); } catch (e) { /* unreadable import */ } }
+        else {
+          if (rule.type === 1 && rule.selectorText) {
+            if (/:hover\\b/.test(rule.selectorText) && !/\\(\\s*(?:any-)?hover\\s*:\\s*hover\\s*\\)/.test(media) && !/hover\\s*:\\s*none/.test(media)) {
+              ungatedHoverCount++;
+              if (ungatedHovers.length < 8) ungatedHovers.push(rule.selectorText.slice(0, 100));
+            }
+            const tap = rule.style && rule.style.getPropertyValue("-webkit-tap-highlight-color");
+            if (tap && /transparent|rgba\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/i.test(tap) && coversRoot(rule.selectorText)) tapHighlightDisabled = true;
+          }
+          if (rule.cssRules && rule.type !== 4) visitRules(rule.cssRules, media);
+        }
+      }
+    };
+    const seenSheets = new Set();
+    for (const sheet of [...document.styleSheets, ...(document.adoptedStyleSheets || [])]) {
+      if (seenSheets.has(sheet)) continue;
+      seenSheets.add(sheet);
+      try { visitRules(sheet.cssRules, ""); } catch (e) { /* cross-origin sheet */ }
+    }
+    const inlineTap = document.documentElement.style.getPropertyValue("-webkit-tap-highlight-color");
+    if (inlineTap && /transparent/i.test(inlineTap)) tapHighlightDisabled = true;
+    const hasControls = !!document.querySelector("a[href], button, [role=button], input, select, textarea");
+    const selectableControls = [];
+    if (vw < 768) for (const el of document.querySelectorAll("button, [role=button]")) {
+      if (!visible(el) || !(el.innerText || "").trim()) continue;
+      const cs = getComputedStyle(el);
+      if ((cs.userSelect || cs.webkitUserSelect) !== "none") { selectableControls.push(label(el)); if (selectableControls.length >= 8) break; }
+    }
+    const regions = [], seenKeys = new Set();
+    for (const el of document.querySelectorAll("[id], [data-region]")) {
+      if (!visible(el)) continue;
+      const key = el.id ? "#" + el.id : "region:" + el.getAttribute("data-region");
+      if (seenKeys.has(key)) continue;
+      seenKeys.add(key);
+      const box = el.getBoundingClientRect();
+      regions.push({ key, top: Math.round(box.top), left: Math.round(box.left), width: Math.round(box.width), height: Math.round(box.height) });
+      if (regions.length >= 80) break;
+    }
     return { scrollWidth: document.documentElement.scrollWidth, viewport: vw, overflowing: wide.map(w => w.text), stranded, smallTargets, tinyText,
-      height: document.documentElement.scrollHeight, title: document.title };
+      height: document.documentElement.scrollHeight, title: document.title,
+      inputsUnder16, zoomLocked, ungatedHovers, ungatedHoverCount, tapHighlightDisabled: hasControls ? tapHighlightDisabled : null,
+      selectableControls, regions };
   })()` });
   if (!o.frames) {
     const shot = await cdp.send("Page.captureScreenshot", { format: "png", captureBeyondViewport: o.full });
@@ -287,10 +363,36 @@ async function capture(cdp, o, width, theme) {
   }
   const l = layout.result.value;
   return { width, height, theme, motion: o.motion, files, ...(o.frames ? { frameTimesMs: frameTimes } : {}), title: l.title,
+    scrollHeight: l.height, regions: l.regions,
+    inputsUnder16: l.inputsUnder16, zoomLocked: l.zoomLocked, ungatedHovers: l.ungatedHovers, ungatedHoverCount: l.ungatedHoverCount,
+    tapHighlightDisabled: l.tapHighlightDisabled, selectableControls: l.selectableControls,
     horizontalOverflow: l.scrollWidth > l.viewport ? `${l.scrollWidth - l.viewport}px` : null,
     overflowingElements: l.overflowing, strandedWords: l.stranded, smallTapTargets: l.smallTargets, tinyText: l.tinyText, ...issues };
 }
 
+// Same id or data-region in both pages. A disappearing spinner is not a shift;
+// a card that grows, or a control that moves, is.
+function compareShift(before, after) {
+  const settled = new Map((after.regions || []).map(r => [r.key, r]));
+  const shifts = [];
+  let shared = 0;
+  for (const region of before.regions || []) {
+    const other = settled.get(region.key);
+    if (!other) continue;
+    shared++;
+    const dx = other.left - region.left, dy = other.top - region.top, dw = other.width - region.width, dh = other.height - region.height;
+    if (Math.abs(dx) > 1 || Math.abs(dy) > 1 || Math.abs(dw) > 1 || Math.abs(dh) > 1)
+      shifts.push({ key: region.key, before: region, after: other, dx, dy, dw, dh });
+  }
+  const scrollDelta = (after.scrollHeight ?? 0) - (before.scrollHeight ?? 0);
+  return {
+    scrollBefore: before.scrollHeight ?? null, scrollAfter: after.scrollHeight ?? null,
+    scrollDelta: Math.abs(scrollDelta) > 1 ? scrollDelta : 0, shared, shifts,
+    settledFiles: after.files,
+    ...(shared === 0 ? { note: "no shared id or data-region; only the document scroll height was compared" } : {}),
+  };
+}
+
 async function main() {
   const o = parse(process.argv.slice(2));
   mkdirSync(o.out, { recursive: true });
@@ -300,15 +402,31 @@ async function main() {
     for (const width of o.widths) for (const theme of o.themes) {
       const cdp = await connect(browser.port);
       await cdp.send("Page.enable"); await cdp.send("Runtime.enable"); await cdp.send("Network.enable");
-      results.push(await capture(cdp, o, width, theme));
+      const before = await capture(cdp, o, width, theme);
       cdp.close();
+      if (o.shift) {
+        const settled = await connect(browser.port);
+        await settled.send("Page.enable"); await settled.send("Runtime.enable"); await settled.send("Network.enable");
+        const after = await capture(settled, { ...o, target: o.shift, shotSuffix: "-settled" }, width, theme);
+        settled.close();
+        before.shift = compareShift(before, after);
+        if (after.loadError && !before.loadError) before.loadError = `settled page: ${after.loadError}`;
+      }
+      results.push(before);
     }
   } finally { await browser.close(); }
   const failed = results.some(r => r.loadError);
-  if (failed) process.exitCode = 1;
+  const shifted = results.some(r => r.shift && (r.shift.shifts.length > 0 || r.shift.scrollDelta));
+  // No marked region and no scroll change means the jump was not measured.
+  // Scroll height stays at the viewport when both states fit, so that case must not pass.
+  const unchecked = results.some(r => r.shift && r.shift.shared === 0 && !r.shift.scrollDelta);
+  if (failed || shifted) process.exitCode = 1;
+  else if (unchecked) process.exitCode = 2;
   if (o.json) { process.stdout.write(JSON.stringify({ target: o.target, captures: results }, null, 2) + "\n"); return; }
   for (const r of results) {
-    const flags = [r.loadError, r.horizontalOverflow && `horizontal overflow ${r.horizontalOverflow}`,
+    const shiftFlag = r.shift && (r.shift.shifts.length > 0 || r.shift.scrollDelta) ? "layout shift" : "";
+    const uncheckedFlag = r.shift && r.shift.shared === 0 && !r.shift.scrollDelta ? "shift not checked" : "";
+    const flags = [r.loadError, shiftFlag, uncheckedFlag, r.horizontalOverflow && `horizontal overflow ${r.horizontalOverflow}`,
       r.consoleErrors.length && `${r.consoleErrors.length} console error(s)`,
       r.failedRequests.length && `${r.failedRequests.length} failed request(s)`].filter(Boolean);
     process.stdout.write(`${r.width}px ${r.theme}: ${r.files.join(", ")}${flags.length ? "  !! " + flags.join("; ") : ""}\n`);
@@ -316,6 +434,20 @@ async function main() {
     for (const e of r.strandedWords) process.stdout.write(`    stranded words: ${e}\n`);
     for (const e of r.smallTapTargets) process.stdout.write(`    tap target < 44px: ${e}\n`);
     for (const e of r.tinyText) process.stdout.write(`    text < 12px: ${e}\n`);
+    for (const e of r.inputsUnder16 || []) process.stdout.write(`    input under 16px: ${e}\n`);
+    if (r.zoomLocked) process.stdout.write(`    viewport disables zoom\n`);
+    if (r.ungatedHoverCount) process.stdout.write(`    hover not gated (${r.ungatedHoverCount}): ${(r.ungatedHovers || []).join("; ")}\n`);
+    if (r.tapHighlightDisabled === false) process.stdout.write(`    tap highlight not disabled\n`);
+    for (const e of r.selectableControls || []) process.stdout.write(`    control text selectable: ${e}\n`);
+    if (r.shift) {
+      if (r.shift.note) process.stdout.write(`    shift: ${r.shift.note}\n`);
+      if (r.shift.scrollDelta) process.stdout.write(`    document scroll height ${r.shift.scrollDelta > 0 ? "+" : ""}${r.shift.scrollDelta}px after load\n`);
+      for (const s of r.shift.shifts.slice(0, 12)) {
+        const part = (n, label) => n ? `${label} ${n > 0 ? "+" : ""}${n}px` : "";
+        const bits = [part(s.dy, "top"), part(s.dh, "height"), part(s.dx, "left"), part(s.dw, "width")].filter(Boolean);
+        process.stdout.write(`    layout shift ${s.key}: ${bits.join(", ")}\n`);
+      }
+    }
     for (const e of [...new Set(r.consoleErrors)].slice(0, 5)) process.stdout.write(`    console: ${e}\n`);
     for (const e of [...new Set(r.failedRequests)].slice(0, 5)) process.stdout.write(`    request: ${e}\n`);
   }

package/skills/deslop/SKILL.md

@@ -33,7 +33,11 @@ Work through [prose patterns](references/prose-patterns.md). The ones that matte
 
 ## 3. Fix UI
 
-Run the scan on components and check the rendered page against `web-design`'s anti-patterns if installed. The usual repairs: delete the eyebrow labels and explainer subtitles; replace gradient text with solid ink; remove glass, glows and sparkles; flatten nested cards; give CTAs real verbs; remove emoji from interface copy. Re-shoot and look after removing structure: a deleted container can take a needed grouping with it.
+Run the scan on components and check the rendered page against `web-design`'s anti-patterns if installed. The usual repairs: delete the eyebrow labels and explainer subtitles; replace gradient text with solid ink; remove glass, glows and sparkles; flatten nested cards; give CTAs real verbs; remove emoji from interface copy.
+
+This season's tells, each fine when the brief asks and slop when it shows up anyway: a pill tag above the heading (`New`), one italic word in the headline, a divider under every section, four opacities of the same neutral instead of two inks, a border on every box, a diagram that draws the whole system, a decorative `Home / Settings / Billing`, and `01` `02` `03` on items that are not a sequence. The scan flags the numbered markers (`section-index`) and the opacity ladder (`opacity-ramp`). The rest need the render. Instrument Serif with tight tracking is the current reflex display; it stays only when DESIGN.md names it.
+
+Re-shoot and look after removing structure: a deleted container can take a needed grouping with it.
 
 ## 4. Fix code
 

package/skills/deslop/scripts/slop-scan.mjs

@@ -65,6 +65,7 @@ const RULES = [
   ["caps-eyebrow", "ui", "info", /\buppercase\b[^"'`]*\btracking-(?:widest|\[0\.[1-9]\d*em\])|\btracking-(?:widest|\[0\.[1-9]\d*em\])[^"'`]*\buppercase\b|text-transform:\s*uppercase;\s*letter-spacing:\s*0?\.[12]\d*em/g, "Tracked-out all-caps label; the eyebrow above every heading."],
   ["generic-cta", "ui", "info", />\s*(?:Get Started|Learn More|Start (?:your )?(?:free )?trial|Join the waitlist|Explore (?:now|features))\s*</g, "Generic CTA label; name what happens next ('Create a listing', 'See rates')."],
   ["emoji-in-ui", "ui", "medium", />[^<{]*?(?:🚀|✨|🔥|💡|⚡|🎉|👋|💪|🙌|📈|🎯)[^<]*?</gu, "Emoji in interface copy; usually stands in for an icon system or a point of view."],
+  ["section-index", "ui", "info", />\s*0[1-9]\s*(?:<\/|—|–|-|\/)/g, "Numbered marker (01, 02) on content that is not a sequence. Delete it, or keep it only where order is the point."],
   // Motion and mobile details that make an interface feel slightly off.
   ["transition-all", "ui", "medium", /\btransition-all\b|transition:\s*all\b/g, "Transitions every property, including layout ones nobody meant to animate. Name them: transform, opacity."],
   ["ease-in-ui", "ui", "info", /\bease-in\b(?!-out)|(?:transition|animation)(?:-timing-function)?:[^;]*\bease-in\b(?!-out)/g, "ease-in starts slowly, exactly when the user is watching; UI enters and exits on ease-out."],
@@ -161,6 +162,9 @@ function scanFile(file, o) {
     const acid = hexes.some(([r, g, b]) => (g >= 0xd0 && r >= 0x80 && r <= 0xe0 && b <= 0x60) || (r >= 0xe0 && g <= 0x60 && b <= 0x40)) || /\b(?:text|bg|border)-lime-\d{3}\b/.test(src);
     if (cream && serif) density.push({ rule: "warm-editorial", severity: "medium", detail: `cream background with a serif display${clay ? " and a clay/terracotta accent" : ""}`, why: "Today's most common generated look; fine if the brief asked for it, slop if it arrived by default." });
     if (nearBlack && acid) density.push({ rule: "dark-acid", severity: "info", detail: "near-black background with an acid/vermilion accent", why: "A current generated-design default; check it was a choice." });
+    const opacities = [...src.matchAll(/\b(?:text|bg)-(?:black|white|neutral|zinc|gray|slate|stone)\/(?:[1-9]\d)\b/g)].map(m => m[0].replace(/.*\//, ""));
+    const distinct = [...new Set(opacities)];
+    if (distinct.length >= 4) density.push({ rule: "opacity-ramp", severity: "info", detail: `${distinct.length} opacities of one neutral (${distinct.sort().join(", ")})`, why: "A ladder of opacities standing in for a type scale. Two inks, primary and secondary, are enough unless the brand defines more." });
   }
   const boldLeads = hits.filter(h => h.rule === "bold-lead-list").length;
   if (boldLeads > DENSITY["bold-lead-list"]) density.push({ rule: "bold-lead-density", severity: "medium", detail: `${boldLeads} bold-lead bullets`, why: "Every list as '**Label:** text' reads as generated; use prose or a table where it fits." });

package/skills/dogfood/SKILL.md

@@ -7,6 +7,8 @@ description: "Walk real product journeys, fix authorized problems and replay thr
 
 Tests check what the author thought of. Dogfooding finds what a user hits. The output is fixed journeys, not a list of complaints.
 
+`<skill-dir>` below means this skill's own folder. Run its scripts from the project root so output lands in the project, not in the installed skill.
+
 ## 0. Pick the mode
 
 - **Diff-aware** (default on a branch): start from what the branch changed (`git diff origin/main...HEAD --stat`), map each change to the screens and journeys it touches, and test those first.
@@ -28,6 +30,7 @@ Use the browser session and account the user selected; never sign in as someone
 - Real clicks and typing in a real browser, at real speed. No mocked responses, no seeding past the hard part.
 - Follow through to the outcome: the record exists, the email arrived, the export opens and contains the right rows, the public page shows the change.
 - Look at each screen. Capture the important ones at phone and desktop width with [`scripts/shoot.mjs`](scripts/shoot.mjs) when the URL is reachable without your session; use the browser tool's screenshots for signed-in states.
+- When the journey waits on data, capture the waiting page and the settled page and compare them: `node <skill-dir>/scripts/shoot.mjs <waiting> --shift <settled> --widths 390 --themes light`. Exit 1 is a finding (a marked region or the document moved). Exit 2 means the regions were not marked, so the jump was not measured. Read the phone lines on that capture too: input size, zoom lock, ungated hover, selectable controls, tap highlight. A 390px picture can look aligned and still jump, zoom and stick. The lines that need a physical phone (a hover that stays after a tap, the notch, the keyboard) stay named as unverified.
 - Keep the console and network panel open. A 500 behind a friendly toast is a finding.
 - Note friction as well as failure: a step that needs thinking, a label that misleads, a wait with no feedback.
 

package/skills/dogfood/scripts/shoot.mjs

@@ -29,23 +29,43 @@ Options:
                        offsets depend on capture speed and are reported)
   --click SELECTOR     Click this element before capturing (e.g. to open a menu)
   --scale N            Device scale factor (default: 2)
+  --shift URL          Load this second page at the same sizes. The first
+                       page is the loading state, this one the settled state.
+                       Reports regions (same id or data-region) whose box
+                       moved by more than 1px, and any change in document
+                       scroll height. Exits 1 when one did. Exits 2 when no
+                       region was marked and the scroll height did not change,
+                       which is not a pass. Settled shots are named with -settled.
   --json               Print a JSON manifest instead of text
 
 Set SHOOT_CHROME_FLAGS for extra browser flags. --no-sandbox is added
 automatically when CI is set or when running as root.
 
-Also reports: horizontal overflow, stranded words in wrapped text, tap
-targets under 44px (widths < 768), text under 12px, console errors, failed
-requests and
-elements wider than the viewport, per capture. Set CHROME_PATH to override
-browser discovery. The temporary browser profile is deleted afterwards.
-Exits 1 if the page fails to load or returns an HTTP error. A bare
+Also reports, per capture: horizontal overflow, elements wider than the
+viewport, stranded words in wrapped text, tap targets under 44px and
+selectable control text (widths < 768), text under 12px, inputs under 16px,
+a viewport that disables zoom, :hover rules outside @media (hover: hover),
+a missing tap-highlight reset when the page has controls, console errors
+and failed requests. Set CHROME_PATH to override browser discovery. The
+temporary browser profile is deleted afterwards. Exits 1 if a page fails
+to load, returns an HTTP error, or --shift finds a moved region or a
+document scroll height change of more than 1px. Exits 2 when --shift could
+not compare a marked region and the scroll height did not change. A bare
 host:port (localhost:3000) is treated as http://.
+The layout-shift entries on the performance timeline are not read. Headless
+Chrome can report none of them for a jump that has already painted, so a
+score of 0 would pass a page that moved. The two-page box compare is the check.
 `;
 
+function resolveTarget(value) {
+  if (/^[a-z]+:\/\//i.test(value)) return value;
+  return !existsSync(value) && /^(?:localhost|[\w-]+(?:\.[\w-]+)+|\d+\.\d+\.\d+\.\d+)(?::\d+)?(?:\/|$)|^[\w.-]+:\d+/.test(value)
+    ? `http://${value}` : pathToFileURL(resolve(value)).href;
+}
+
 function parse(argv) {
-  const o = { target: "", out: "shots", widths: [390, 1440], height: 0, themes: ["light", "dark"],
-    motion: "reduce", full: false, wait: 600, frames: 0, every: 100, click: "", scale: 2, json: false };
+  const o = { target: "", shift: "", out: "shots", widths: [390, 1440], height: 0, themes: ["light", "dark"],
+    motion: "reduce", full: false, wait: 600, frames: 0, every: 100, click: "", scale: 2, shotSuffix: "", json: false };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i], v = () => { const x = argv[++i]; if (x === undefined) throw new Error(`${a} needs a value`); return x; };
     if (a === "--help" || a === "-h") { process.stdout.write(HELP); process.exit(0); }
@@ -60,14 +80,14 @@ function parse(argv) {
     else if (a === "--every") o.every = Number(v());
     else if (a === "--click") o.click = v();
     else if (a === "--scale") o.scale = Number(v());
+    else if (a === "--shift") o.shift = v();
     else if (a === "--json") o.json = true;
     else if (a.startsWith("--")) throw new Error(`Unknown option ${a}`);
     else o.target = a;
   }
   if (!o.target) { process.stdout.write(HELP); process.exit(1); }
-  if (!/^[a-z]+:\/\//i.test(o.target))
-    o.target = !existsSync(o.target) && /^(?:localhost|[\w-]+(?:\.[\w-]+)+|\d+\.\d+\.\d+\.\d+)(?::\d+)?(?:\/|$)|^[\w.-]+:\d+/.test(o.target)
-      ? `http://${o.target}` : pathToFileURL(resolve(o.target)).href;
+  o.target = resolveTarget(o.target);
+  if (o.shift) o.shift = resolveTarget(o.shift);
   if (o.frames) o.motion = "no-preference";
   return o;
 }
@@ -197,7 +217,7 @@ async function capture(cdp, o, width, theme) {
     if (!o.frames) await sleep(o.wait);
   }
   const files = [], frameTimes = [];
-  const base = `${String(width)}-${theme}`;
+  const base = `${String(width)}-${theme}${o.shotSuffix || ""}`;
   if (o.frames) {
     // Capture first, measure the page afterwards, so frame 0 is as close to the trigger as possible.
     for (let f = 0; f < o.frames; f++) {
@@ -277,8 +297,64 @@ async function capture(cdp, o, width, theme) {
       const size = parseFloat(getComputedStyle(el).fontSize);
       if (size < 12) { tinyText.push(label(el) + " " + size + "px"); if (tinyText.length >= 5) break; }
     }
+    const inputsUnder16 = [];
+    for (const el of document.querySelectorAll("input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=image]), textarea, select")) {
+      if (!visible(el)) continue;
+      const size = parseFloat(getComputedStyle(el).fontSize);
+      if (size < 16) { inputsUnder16.push((el.getAttribute("aria-label") || el.id || el.getAttribute("name") || el.getAttribute("placeholder") || el.tagName.toLowerCase()) + " " + (Math.round(size * 10) / 10) + "px"); if (inputsUnder16.length >= 8) break; }
+    }
+    const viewportMeta = document.querySelector('meta[name="viewport" i]')?.getAttribute("content") || "";
+    const zoomLocked = /user-scalable\\s*=\\s*(?:no|0)\\b|maximum-scale\\s*=\\s*1(?:\\.0+)?(?![.\\d])/i.test(viewportMeta);
+    const ungatedHovers = [];
+    let ungatedHoverCount = 0, tapHighlightDisabled = false;
+    const coversRoot = selector => selector.split(",").some(s => /^(?:html|:root|\\*|body)(?:\\s|$)/.test(s.trim()));
+    const visitRules = (rules, media) => {
+      if (!rules) return;
+      for (const rule of rules) {
+        if (rule.type === 4) visitRules(rule.cssRules, (media ? media + " " : "") + (rule.conditionText || ""));
+        else if (rule.type === 3 && rule.styleSheet) { try { visitRules(rule.styleSheet.cssRules, media); } catch (e) { /* unreadable import */ } }
+        else {
+          if (rule.type === 1 && rule.selectorText) {
+            if (/:hover\\b/.test(rule.selectorText) && !/\\(\\s*(?:any-)?hover\\s*:\\s*hover\\s*\\)/.test(media) && !/hover\\s*:\\s*none/.test(media)) {
+              ungatedHoverCount++;
+              if (ungatedHovers.length < 8) ungatedHovers.push(rule.selectorText.slice(0, 100));
+            }
+            const tap = rule.style && rule.style.getPropertyValue("-webkit-tap-highlight-color");
+            if (tap && /transparent|rgba\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/i.test(tap) && coversRoot(rule.selectorText)) tapHighlightDisabled = true;
+          }
+          if (rule.cssRules && rule.type !== 4) visitRules(rule.cssRules, media);
+        }
+      }
+    };
+    const seenSheets = new Set();
+    for (const sheet of [...document.styleSheets, ...(document.adoptedStyleSheets || [])]) {
+      if (seenSheets.has(sheet)) continue;
+      seenSheets.add(sheet);
+      try { visitRules(sheet.cssRules, ""); } catch (e) { /* cross-origin sheet */ }
+    }
+    const inlineTap = document.documentElement.style.getPropertyValue("-webkit-tap-highlight-color");
+    if (inlineTap && /transparent/i.test(inlineTap)) tapHighlightDisabled = true;
+    const hasControls = !!document.querySelector("a[href], button, [role=button], input, select, textarea");
+    const selectableControls = [];
+    if (vw < 768) for (const el of document.querySelectorAll("button, [role=button]")) {
+      if (!visible(el) || !(el.innerText || "").trim()) continue;
+      const cs = getComputedStyle(el);
+      if ((cs.userSelect || cs.webkitUserSelect) !== "none") { selectableControls.push(label(el)); if (selectableControls.length >= 8) break; }
+    }
+    const regions = [], seenKeys = new Set();
+    for (const el of document.querySelectorAll("[id], [data-region]")) {
+      if (!visible(el)) continue;
+      const key = el.id ? "#" + el.id : "region:" + el.getAttribute("data-region");
+      if (seenKeys.has(key)) continue;
+      seenKeys.add(key);
+      const box = el.getBoundingClientRect();
+      regions.push({ key, top: Math.round(box.top), left: Math.round(box.left), width: Math.round(box.width), height: Math.round(box.height) });
+      if (regions.length >= 80) break;
+    }
     return { scrollWidth: document.documentElement.scrollWidth, viewport: vw, overflowing: wide.map(w => w.text), stranded, smallTargets, tinyText,
-      height: document.documentElement.scrollHeight, title: document.title };
+      height: document.documentElement.scrollHeight, title: document.title,
+      inputsUnder16, zoomLocked, ungatedHovers, ungatedHoverCount, tapHighlightDisabled: hasControls ? tapHighlightDisabled : null,
+      selectableControls, regions };
   })()` });
   if (!o.frames) {
     const shot = await cdp.send("Page.captureScreenshot", { format: "png", captureBeyondViewport: o.full });
@@ -287,10 +363,36 @@ async function capture(cdp, o, width, theme) {
   }
   const l = layout.result.value;
   return { width, height, theme, motion: o.motion, files, ...(o.frames ? { frameTimesMs: frameTimes } : {}), title: l.title,
+    scrollHeight: l.height, regions: l.regions,
+    inputsUnder16: l.inputsUnder16, zoomLocked: l.zoomLocked, ungatedHovers: l.ungatedHovers, ungatedHoverCount: l.ungatedHoverCount,
+    tapHighlightDisabled: l.tapHighlightDisabled, selectableControls: l.selectableControls,
     horizontalOverflow: l.scrollWidth > l.viewport ? `${l.scrollWidth - l.viewport}px` : null,
     overflowingElements: l.overflowing, strandedWords: l.stranded, smallTapTargets: l.smallTargets, tinyText: l.tinyText, ...issues };
 }
 
+// Same id or data-region in both pages. A disappearing spinner is not a shift;
+// a card that grows, or a control that moves, is.
+function compareShift(before, after) {
+  const settled = new Map((after.regions || []).map(r => [r.key, r]));
+  const shifts = [];
+  let shared = 0;
+  for (const region of before.regions || []) {
+    const other = settled.get(region.key);
+    if (!other) continue;
+    shared++;
+    const dx = other.left - region.left, dy = other.top - region.top, dw = other.width - region.width, dh = other.height - region.height;
+    if (Math.abs(dx) > 1 || Math.abs(dy) > 1 || Math.abs(dw) > 1 || Math.abs(dh) > 1)
+      shifts.push({ key: region.key, before: region, after: other, dx, dy, dw, dh });
+  }
+  const scrollDelta = (after.scrollHeight ?? 0) - (before.scrollHeight ?? 0);
+  return {
+    scrollBefore: before.scrollHeight ?? null, scrollAfter: after.scrollHeight ?? null,
+    scrollDelta: Math.abs(scrollDelta) > 1 ? scrollDelta : 0, shared, shifts,
+    settledFiles: after.files,
+    ...(shared === 0 ? { note: "no shared id or data-region; only the document scroll height was compared" } : {}),
+  };
+}
+
 async function main() {
   const o = parse(process.argv.slice(2));
   mkdirSync(o.out, { recursive: true });
@@ -300,15 +402,31 @@ async function main() {
     for (const width of o.widths) for (const theme of o.themes) {
       const cdp = await connect(browser.port);
       await cdp.send("Page.enable"); await cdp.send("Runtime.enable"); await cdp.send("Network.enable");
-      results.push(await capture(cdp, o, width, theme));
+      const before = await capture(cdp, o, width, theme);
       cdp.close();
+      if (o.shift) {
+        const settled = await connect(browser.port);
+        await settled.send("Page.enable"); await settled.send("Runtime.enable"); await settled.send("Network.enable");
+        const after = await capture(settled, { ...o, target: o.shift, shotSuffix: "-settled" }, width, theme);
+        settled.close();
+        before.shift = compareShift(before, after);
+        if (after.loadError && !before.loadError) before.loadError = `settled page: ${after.loadError}`;
+      }
+      results.push(before);
     }
   } finally { await browser.close(); }
   const failed = results.some(r => r.loadError);
-  if (failed) process.exitCode = 1;
+  const shifted = results.some(r => r.shift && (r.shift.shifts.length > 0 || r.shift.scrollDelta));
+  // No marked region and no scroll change means the jump was not measured.
+  // Scroll height stays at the viewport when both states fit, so that case must not pass.
+  const unchecked = results.some(r => r.shift && r.shift.shared === 0 && !r.shift.scrollDelta);
+  if (failed || shifted) process.exitCode = 1;
+  else if (unchecked) process.exitCode = 2;
   if (o.json) { process.stdout.write(JSON.stringify({ target: o.target, captures: results }, null, 2) + "\n"); return; }
   for (const r of results) {
-    const flags = [r.loadError, r.horizontalOverflow && `horizontal overflow ${r.horizontalOverflow}`,
+    const shiftFlag = r.shift && (r.shift.shifts.length > 0 || r.shift.scrollDelta) ? "layout shift" : "";
+    const uncheckedFlag = r.shift && r.shift.shared === 0 && !r.shift.scrollDelta ? "shift not checked" : "";
+    const flags = [r.loadError, shiftFlag, uncheckedFlag, r.horizontalOverflow && `horizontal overflow ${r.horizontalOverflow}`,
       r.consoleErrors.length && `${r.consoleErrors.length} console error(s)`,
       r.failedRequests.length && `${r.failedRequests.length} failed request(s)`].filter(Boolean);
     process.stdout.write(`${r.width}px ${r.theme}: ${r.files.join(", ")}${flags.length ? "  !! " + flags.join("; ") : ""}\n`);
@@ -316,6 +434,20 @@ async function main() {
     for (const e of r.strandedWords) process.stdout.write(`    stranded words: ${e}\n`);
     for (const e of r.smallTapTargets) process.stdout.write(`    tap target < 44px: ${e}\n`);
     for (const e of r.tinyText) process.stdout.write(`    text < 12px: ${e}\n`);
+    for (const e of r.inputsUnder16 || []) process.stdout.write(`    input under 16px: ${e}\n`);
+    if (r.zoomLocked) process.stdout.write(`    viewport disables zoom\n`);
+    if (r.ungatedHoverCount) process.stdout.write(`    hover not gated (${r.ungatedHoverCount}): ${(r.ungatedHovers || []).join("; ")}\n`);
+    if (r.tapHighlightDisabled === false) process.stdout.write(`    tap highlight not disabled\n`);
+    for (const e of r.selectableControls || []) process.stdout.write(`    control text selectable: ${e}\n`);
+    if (r.shift) {
+      if (r.shift.note) process.stdout.write(`    shift: ${r.shift.note}\n`);
+      if (r.shift.scrollDelta) process.stdout.write(`    document scroll height ${r.shift.scrollDelta > 0 ? "+" : ""}${r.shift.scrollDelta}px after load\n`);
+      for (const s of r.shift.shifts.slice(0, 12)) {
+        const part = (n, label) => n ? `${label} ${n > 0 ? "+" : ""}${n}px` : "";
+        const bits = [part(s.dy, "top"), part(s.dh, "height"), part(s.dx, "left"), part(s.dw, "width")].filter(Boolean);
+        process.stdout.write(`    layout shift ${s.key}: ${bits.join(", ")}\n`);
+      }
+    }
     for (const e of [...new Set(r.consoleErrors)].slice(0, 5)) process.stdout.write(`    console: ${e}\n`);
     for (const e of [...new Set(r.failedRequests)].slice(0, 5)) process.stdout.write(`    request: ${e}\n`);
   }

package/skills/launch/SKILL.md

@@ -32,7 +32,7 @@ Fix before announcing:
 Put it in one folder (`launch/` or `docs/launch/`). Contents and formats in [kit](references/kit.md):
 
 - **Share card** rendered from HTML/SVG source with `render-gate.mjs`, committed with its source. The gate fails a card whose font fell back, whose copy drifted from `copy.md`, or whose text is cropped.
-- **Demo media**: 3 to 5 screenshots at real sizes, and a 6 to 15 second clip of the core action if motion helps. Build the clip as an HTML composition and render it with `film.mjs`, so a fix is an edit and a re-render ([film](references/film.md)). Real product, real-looking data, no fake metrics.
+- **Demo media**: 3 to 5 screenshots at real sizes, and a 6 to 15 second clip of the core action if motion helps. Build the clip as an HTML composition and render it with `film.mjs`, so a fix is an edit and a re-render ([film](references/film.md)). The product in a card, bento, device or clip is a capture from the live product or from `shoot.mjs`, placed as an image. Draw the frame. Do not draw the screen. Every number sits in that capture or in the agreed copy file. A number from a marketing note that is not in the copy file does not appear. Framing rules are in [kit](references/kit.md).
 - **Copy**: one-line description (60 characters or fewer), a short paragraph, a longer description, the X/LinkedIn post, a Show HN or community post if it fits, a changelog entry. Rules in [copy](references/copy.md).
 - **Tracker**: a CSV of where you will post or submit.