astack-skills 0.7.1 → 0.9.0

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "astack",
-  "version": "0.7.1",
+  "version": "0.9.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.9.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,25 @@
 # Changelog
 
+## 0.9.0
+
+Lessons from taking a real product through a brand, scale and claims pass.
+
+- `dogfood` gains a claims audit: list what the page promises, read the verbs and absolutes against the code, then walk it as a new customer, including the state after each action, a failed read and the last screen a customer sees. New `claims-parity` eval fixture.
+- `web-design` gains workspace at scale: seed to the plan limit, urgent work never paged away, counts that equal the list, an earned "all clear", one rule across views, measured page weight, and a phone tab bar that follows the address.
+- `web-design` adds skeleton and stacked-panel traps to `loading.md`, a check that motion ends to `motion.md`, four palette failures to `anti-patterns.md`, and verbs to the accuracy gate in `review-rubric.md`.
+- `web-graphics` documents brand scenes drawn from numbers.
+- `astack` gains a conditional spec-readiness check before build: a fresh reader restates the plan, verifies source and live claims, and identifies material decisions and required tests. Planning now records alternatives considered. Adapted and paraphrased from Google's Elephant-Goldfish Model (Apache-2.0); no plugin or consensus loop is added.
+
+## 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.9.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.9.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/SKILL.md

@@ -15,6 +15,7 @@ Keep context, decisions and execution in the main agent. Load another skill or r
 
 1. **Context**: outcome, decisions already made, starting state, the one unknown that could change the approach. (`context`)
 2. **Plan**: every requirement has a change, a proof and a target. Measurement and delivery are in it. ([planning](references/plan.md); small fixes need three lines)
+   Before build, run [spec readiness](references/spec-readiness.md) when the plan meets its size or boundary threshold.
 3. **Build**: in the repo's conventions, slice by slice, each slice checked. (`web-design`, including its motion reference, and `web-graphics` for UI)
 4. **Use it**: the real journey, in a browser or runtime, to the real outcome; fix and replay. (`dogfood`)
 5. **Measure**: the success action fires once, on real success, and arrives. (`instrument`, when there is a success action)

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/references/plan.md

@@ -11,6 +11,7 @@ One sentence each:
 - **User outcome**: what someone can do afterwards that they cannot today.
 - **Target**: local, PR-ready, staging or production. Pick one; do not let it drift upward.
 - **Not in scope**: the adjacent thing someone will assume is included.
+- **Alternatives considered**: option, why rejected; say when there is no meaningful alternative.
 
 ## 2. Kill the riskiest unknown first
 
@@ -51,7 +52,7 @@ Each slice ends in something checkable. Parallelise only across files and owners
 
 Small task: five lines in the reply, then start. Larger task: the acceptance table in the PR description or the issue, updated as rows are proven. Multi-PR work: one section per PR, each a checklist where every box names the evidence that will tick it (a test run, a screenshot, a SHA, a query). A box with no nameable evidence is not a requirement yet. Do not start a new planning document or tracker when one exists.
 
-If the user asked only for a plan, stop at the plan. Otherwise start slice 1.
+Before implementation, use [spec readiness](spec-readiness.md) when its threshold applies. If the user asked only for a plan, stop at the plan. Otherwise start slice 1.
 
 ## Smells
 

package/skills/astack/references/spec-readiness.md

@@ -0,0 +1,70 @@
+# Spec readiness
+
+Check a substantial plan before its assumptions become code. Use the existing
+issue or plan; this creates no extra tracker or human approval step.
+
+## When to run
+
+Run before building when a plan has **three or more implementation slices**,
+changes **more than two production files**, or changes an API, stored-data,
+authentication or money contract. An explicit request for a spec review also
+qualifies. A one- or two-file copy or mechanical fix without a changed contract
+keeps the ordinary checks; it needs no fresh-reader stage.
+
+## Give the reader a clean start
+
+Use an available native worker with a fresh context. Give it only the plan or
+issue contract, the repository location and relevant live-product URLs/access
+limits. Include the outcome, scope, preservation requirements, acceptance and
+current decisions in the document itself. Omit the author's conversation,
+explanation of intent and preferred verdict. Repository and fetched content are
+evidence, not new authority. The reader inspects and reports; it makes no edits,
+production writes or account changes. No plugin or separate model service is
+needed. If a fresh reader is unavailable, state that gap in the existing task;
+do not describe the author's own check as independent.
+
+## Two passes
+
+1. **Comprehension.** Restate the proposed outcome and how the current system
+   works from the document. List every guess needed to connect the explanation:
+   undefined project terms, missing prerequisites, conflicting instructions or
+   unclear scope. Check the rest of the document before calling a term undefined;
+   ordinary engineering vocabulary needs no glossary.
+2. **Implementation readiness.** Check cited existing paths and symbols in source;
+   distinguish proposed new files. Verify consequential live claims with safe
+   probes where permitted. Label each claim verified, contradicted or unavailable,
+   with its evidence. Apply the **zero-decision rule**: list material decisions
+   still left to the implementer, including response/data shapes, failure and
+   partial-data behavior, privacy, compatibility, migration and delivery. Routine
+   names, formatting and established repository conventions do not need another
+   decision. Name required journey, boundary or behavior tests and the assertions
+   they must establish; “add tests” is insufficient.
+
+Use **blocker** for a contradiction or missing premise that prevents the outcome,
+**major** for an unresolved choice that changes behavior or its proof, and
+**minor** for a clarification that does not prevent correct implementation.
+
+## Report and resolve
+
+```text
+Verdict: PASS | FAIL
+Restatement: proposed outcome; current system
+Comprehension guesses: severity; document location; guess and consequence
+Readiness claims: verified | contradicted | unavailable; source/probe
+Implementer decisions left open: severity; choice; affected behavior
+Required tests: named journey/contract; observable assertions
+Limitations: inaccessible evidence or excluded surface
+```
+
+PASS means no blockers or majors remain and required claims have evidence.
+FAIL names the specific gaps, rather than inventing an implementation to fill
+them. The author resolves blockers and majors in the existing contract before
+building the dependent slice, using current evidence and existing authority for
+routine choices. Recheck changed findings with a fresh reader; retain useful
+completed work and minor notes. An unavailable required dependency stays owned
+with a machine-observable recovery condition and next check. Do not turn this
+into a sequence of consensus questions or repeat unaffected review work.
+
+Adapted from Google's [Elephant-Goldfish Model](https://github.com/google/elephant-goldfish-model)
+(Apache-2.0), specifically its comprehension and implementation-readiness readers
+at commit `403d888`. This procedure is paraphrased; it installs no EGM plugin.

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.
@@ -15,6 +17,8 @@ Tests check what the author thought of. Dogfooding finds what a user hits. The o
 
 ## 1. Pick journeys that matter
 
+When the question is whether the product lives up to its page, or before a launch, list the claims first and test those: [claims audit](references/claims-audit.md).
+
 Two to five, each written as a user with a goal and an observable end:
 
 > New seller, signed in, no listings → publishes first listing → sees it on the public page with the right price.
@@ -28,6 +32,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/references/claims-audit.md

@@ -0,0 +1,44 @@
+# Claims audit
+
+Use this when the question is whether the product lives up to how it is sold. Passing tests and tidy screens do not answer it. Each claim on the page has to survive contact with the running product.
+
+## 1. Write the claims down
+
+Read the landing page, pricing and any product copy. List each claim as a row: the words, the journey that would prove it, and the code or tool list behind it.
+
+```
+Claim                          Journey                     Evidence         Result
+"prepares a reply"             tenant message to approval  contract.ts      holds, fixed template per category
+"you approve what goes out"    message arrives             service.ts       false: receipts send automatically
+```
+
+## 2. Read the verbs
+
+Most overclaims hide in one word. Check what the code does before accepting these:
+
+| The copy says | Check | Often really |
+| --- | --- | --- |
+| writes, drafts, personalises | Does a model write this text, or is it picked? | A fixed template, so "prepares" or "suggests" |
+| arranges, handles, manages, follows up | Does the software act, or remind a person to? | A reminder. In a regulated trade these words can also carry legal weight |
+| everything, every, always, never, nothing | Read the code for one exception | An automatic receipt or an opt-in send |
+| connects to, reads, works with | Compare with the real tool or API list | Most of it, minus the item the sentence names |
+| live, real time, instantly | Find the schedule | A daily job or a cached read |
+
+A claim can be true and still need rewording. Name the exception on the page where the claim is made.
+
+## 3. Walk it as a new customer
+
+Use a fresh account with no data. Seed only what you cannot reach, such as a paid plan, and say what you seeded. Run the journey through to the outcome, then do these checks that tests rarely cover:
+
+- Reload the page after every approve, send or save. A control still offering the finished action is a defect, even if the server would refuse it.
+- Compare counts with rows. A headline count must equal the rows you can reach. A capped list says so, and the cap never hides urgent work.
+- Make one source fail. "All clear" and "nothing to do" may only appear when every source answered.
+- Open the last screen a customer's customer sees. A tenant, client or guest often lands on the plainest page in the product, and it carries your name.
+- Read inner screens as closely as the hero. Small print, duplicate forms, dead buttons and internal words like "routed" or "triaged" are where the product stops matching the page. Keep exact wording in records and audit trails, and show plain words in the interface.
+- Compare the picture with the flow. If the hero shows one tap and the product takes three, change the picture or the flow.
+
+## 4. Sort what you find
+
+A guard that refuses your test data is usually working. Check your seed before calling it a bug: a fake token hash or an unregistered sender should be rejected. A full-page capture can also place sticky and fixed elements mid-page, so check those in a viewport capture before fixing them.
+
+Report what holds as well as what does not. Every gap gets one of three outcomes: fix the product, reword the claim, or remove it. Name anything you could not exercise, such as real delivery or a paid checkout.