@litfamily/lithermes 1.0.29 → 1.0.30

package/assets/lithermes-plugin/skills/frontend-ui-ux/kit/styles/neo-brutalism.json

@@ -0,0 +1,222 @@
+{
+  "schema_id": "litfamily.frontend-style/v1",
+  "id": "neo-brutalism",
+  "name": "Neo-brutalism",
+  "summary": "A loud, friendly register: flat saturated colour blocks on a lavender canvas, 3 px ink outlines on every surface, hard zero-blur offset shadows in ink, sunflower-yellow panel heads and accent with ink text, chunky 900-weight display type and buttons that press down into their shadow. Playful, legible, never soft.",
+  "use_when": [
+    "opt-in only: the brief names neo-brutalism, neo-brutalist, neubrutalism or the Korean 네오브루탈리즘",
+    "consumer, creator, community or education products that want energy and personality",
+    "launch pages, pricing pages and onboarding that should feel bold and hand-made rather than corporate"
+  ],
+  "avoid_when": [
+    "regulated, clinical, financial or enterprise tones",
+    "very dense data screens where outlines on every cell would turn into noise (keep tables quiet inside one outlined wrap)",
+    "the brief asks for brutalism without neo (that is computational-brutalism)"
+  ],
+  "keywords": [
+    "neo-brutalism",
+    "neo-brutalist",
+    "neobrutalism",
+    "neobrutalist",
+    "neo brutalism",
+    "neo brutalist",
+    "neubrutalism",
+    "neu-brutalism",
+    "neo-brutal",
+    "네오브루탈리즘",
+    "네오 브루탈리즘",
+    "네오브루탈",
+    "네오 브루탈",
+    "뉴브루탈리즘",
+    "네오브루탈리스트"
+  ],
+  "signature": [
+    "thick ink outlines: 3 px on surfaces, 2 px on controls, the same ink in light and dark",
+    "hard offset shadows with zero blur (6 px on surfaces, 3 px on controls) in ink; this is the recorded neo-brutalist register CF-403 accepts",
+    "buttons press into their shadow on :active (translate 3 px, shadow to 0)",
+    "flat saturated fills: panel heads are solid yellow bars with ink text; ui-panel--accent, ui-panel--accent-2 (electric blue) and ui-panel--support colour the featured blocks",
+    "chunky type: 900-weight display with tight leading, 800-weight headings and figures, sentence case",
+    "tilted ui-sticker labels as the accent art, never over body text",
+    "bouncy but short motion (overshoot ease, 100–280 ms)"
+  ],
+  "forbid": [
+    "blurred, soft or coloured drop shadows (DS-007: the lock declares offset elevation)",
+    "gradients, glass, glow and translucency",
+    "thin grey borders on surfaces (outlines are ink)",
+    "more than four accent hue families in one view",
+    "rotated body text, or a sticker covering text",
+    "outlines and shadows on every table cell or list row"
+  ],
+  "fonts": {
+    "text": "Pretendard",
+    "display": "Pretendard",
+    "mono": "JetBrains Mono"
+  },
+  "type": {
+    "scale_px": {
+      "xs": 12,
+      "sm": 13,
+      "md": 14,
+      "base": 16,
+      "lg": 18,
+      "xl": 20,
+      "2xl": 24,
+      "3xl": 30,
+      "4xl": 38,
+      "5xl": 48
+    },
+    "display_px": {
+      "min": 40,
+      "max": 88
+    },
+    "moment_px": {
+      "max": 152
+    },
+    "weights": {
+      "text": 400,
+      "medium": 600,
+      "strong": 800,
+      "display": 900
+    },
+    "tracking_em": {
+      "display": -0.03,
+      "label": 0
+    },
+    "leading": {
+      "body": 1.55,
+      "tight": 1.25,
+      "display_latin": 1,
+      "display_korean": 1.15
+    }
+  },
+  "space_px": [
+    4,
+    8,
+    12,
+    16,
+    20,
+    24,
+    32,
+    40,
+    48,
+    64,
+    80,
+    96,
+    128
+  ],
+  "radius_px": {
+    "xs": 4,
+    "sm": 8,
+    "md": 12,
+    "lg": 16,
+    "pill": 999
+  },
+  "shadow": {
+    "raised": "6px 6px 0 0 var(--c-ink)",
+    "overlay": "8px 8px 0 0 var(--c-ink)"
+  },
+  "motion": {
+    "fast_ms": 100,
+    "ui_ms": 160,
+    "enter_ms": 280,
+    "exit_ms": 120,
+    "ease": "cubic-bezier(0.3, 1.4, 0.5, 1)"
+  },
+  "shape": {
+    "border_px": {
+      "rule": 3,
+      "surface": 3,
+      "control": 2
+    },
+    "surface_line": "ink",
+    "control_edge": "ink",
+    "elevation": "offset",
+    "offset_px": {
+      "surface": 6,
+      "control": 3
+    },
+    "press": "shift",
+    "meta_font": "text",
+    "meta_case": "none",
+    "display_case": "none",
+    "canvas_pattern": "none",
+    "heading_font": "display",
+    "panel_head": "accent",
+    "section_marks": "none"
+  },
+  "color": {
+    "light": {
+      "canvas": "#efecff",
+      "surface": "#ffffff",
+      "sunken": "#e2ddff",
+      "ink": "#111111",
+      "ink-2": "#2b2b33",
+      "ink-3": "#4a4a57",
+      "line": "#c9c3ec",
+      "line-strong": "#111111",
+      "control": "#5c5a70",
+      "accent": "#ffd23f",
+      "accent-hover": "#ffc400",
+      "on-accent": "#111111",
+      "accent-wash": "#fff1b8",
+      "accent-ink": "#5a32d6",
+      "accent-2": "#1f6feb",
+      "accent-2-ink": "#1a56b8",
+      "accent-2-wash": "#dce8fd",
+      "on-accent-2": "#ffffff",
+      "support": "#ffb3d1",
+      "support-ink": "#111111",
+      "focus": "#5a32d6",
+      "positive": "#12733a",
+      "positive-wash": "#c9f2d6",
+      "warning": "#7a4f00",
+      "warning-wash": "#ffe7a8",
+      "negative": "#c2121c",
+      "negative-wash": "#ffd3d3",
+      "info": "#1d4fd6",
+      "info-wash": "#d6e2ff",
+      "chart-1": "#5a32d6",
+      "chart-2": "#ffd23f",
+      "chart-3": "#ff6b9d",
+      "chart-4": "#111111",
+      "chart-5": "#2bb673"
+    },
+    "dark": {
+      "canvas": "#17161f",
+      "surface": "#211f2b",
+      "sunken": "#100f16",
+      "ink": "#f7f5ff",
+      "ink-2": "#d2cfe3",
+      "ink-3": "#a9a5c0",
+      "line": "#3a3750",
+      "line-strong": "#f7f5ff",
+      "control": "#8a86a6",
+      "accent": "#ffd23f",
+      "accent-hover": "#ffdf6b",
+      "on-accent": "#111111",
+      "accent-wash": "#3a3110",
+      "accent-ink": "#b9a3ff",
+      "accent-2": "#5b9bff",
+      "accent-2-ink": "#82b3ff",
+      "accent-2-wash": "#132544",
+      "on-accent-2": "#07142a",
+      "support": "#5c2a44",
+      "support-ink": "#ffd6e7",
+      "focus": "#ffd23f",
+      "positive": "#5fe08f",
+      "positive-wash": "#11301d",
+      "warning": "#ffcf5a",
+      "warning-wash": "#33270a",
+      "negative": "#ff8080",
+      "negative-wash": "#3a1414",
+      "info": "#8fb0ff",
+      "info-wash": "#15213d",
+      "chart-1": "#b9a3ff",
+      "chart-2": "#ffd23f",
+      "chart-3": "#ff8fbd",
+      "chart-4": "#f7f5ff",
+      "chart-5": "#5fe08f"
+    }
+  },
+  "accent_art": "sticker"
+}

package/assets/lithermes-plugin/skills/frontend-ui-ux/kit/ui.js

@@ -0,0 +1,226 @@
+// frontend-ui-ux kit: behaviour that every build otherwise re-invents. No dependencies, no
+// network. Colours come from the locked tokens (CSS custom properties), never from literals.
+//   UI.bars(el, { labels, series: [{ name, values, role }], marker, unit, caption })
+//   UI.lines(el, { labels, series: [{ name, values, role }], marker, unit, caption })
+//   <table data-ui-sortable>  header <button class="ui-sort"> cells sort by data-value or text
+//   <div role="tablist" data-ui-tabs>  arrow keys, Home and End move between tabs
+(function () {
+  "use strict";
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = (tag, attrs = {}) => {
+    const node = document.createElementNS(NS, tag);
+    for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+    return node;
+  };
+  const roleColor = (role, index) => `var(--c-${role || `chart-${(index % 5) + 1}`})`;
+  const niceMax = (value) => {
+    if (value <= 0) return 1;
+    const power = 10 ** Math.floor(Math.log10(value));
+    const step = [1, 2, 2.5, 5, 10].find((n) => n * power >= value / 4) * power;
+    return Math.ceil(value / step) * step;
+  };
+  const fmt = (value, unit) => `${Number(value).toLocaleString()}${unit ?? ""}`;
+
+  function frame(el, opts, maxValue) {
+    el.classList.add("ui-chart");
+    el.replaceChildren();
+    const width = Math.max(280, Math.round(el.getBoundingClientRect().width) || 640);
+    const height = opts.height ?? (width < 480 ? 200 : 240);
+    const pad = { top: 16, right: 8, bottom: 28, left: 36 };
+    const plotW = width - pad.left - pad.right;
+    const plotH = height - pad.top - pad.bottom;
+    const root = svg("svg", { viewBox: `0 0 ${width} ${height}`, width, height, role: "img", "aria-label": opts.caption ?? "Chart" });
+    // Whole-number data keeps whole-number ticks: round the top up to a multiple of the four steps.
+    const top = opts.integer ? Math.max(4, Math.ceil(niceMax(maxValue) / 4) * 4) : niceMax(maxValue);
+    const axis = svg("g", { class: "ui-axis" });
+    for (let i = 0; i <= 4; i += 1) {
+      const y = pad.top + plotH - (plotH * i) / 4;
+      root.append(svg("line", { class: i === 0 ? "ui-baseline" : "ui-grid-line", x1: pad.left, x2: width - pad.right, y1: y, y2: y }));
+      const label = svg("text", { x: pad.left - 8, y: y + 4, "text-anchor": "end" });
+      label.textContent = fmt((top * i) / 4, "");
+      axis.append(label);
+    }
+    root.append(axis);
+    return { root, axis, width, height, pad, plotW, plotH, top };
+  }
+
+  function legendAndTable(el, opts) {
+    if (opts.series.length > 1) {
+      const legend = document.createElement("div");
+      legend.className = "ui-legend";
+      opts.series.forEach((series, index) => {
+        const item = document.createElement("span");
+        const swatch = document.createElement("i");
+        swatch.style.setProperty("--swatch", roleColor(series.role, index));
+        item.append(swatch, document.createTextNode(series.name));
+        legend.append(item);
+      });
+      el.prepend(legend);
+    }
+    const details = document.createElement("details");
+    const summary = document.createElement("summary");
+    summary.className = "ui-meta";
+    summary.textContent = opts.tableLabel ?? "Show as table";
+    const table = document.createElement("table");
+    table.className = "ui-table ui-table--compact";
+    const head = document.createElement("tr");
+    for (const text of [opts.indexLabel ?? "", ...opts.series.map((s) => s.name)]) {
+      const th = document.createElement("th");
+      th.textContent = text;
+      head.append(th);
+    }
+    const thead = document.createElement("thead");
+    thead.append(head);
+    const tbody = document.createElement("tbody");
+    opts.labels.forEach((label, row) => {
+      const tr = document.createElement("tr");
+      const th = document.createElement("th");
+      th.scope = "row";
+      th.textContent = label;
+      tr.append(th);
+      for (const series of opts.series) {
+        const td = document.createElement("td");
+        td.className = "is-num";
+        td.textContent = fmt(series.values[row], opts.unit);
+        tr.append(td);
+      }
+      tbody.append(tr);
+    });
+    table.append(thead, tbody);
+    details.append(summary, table);
+    el.append(details);
+  }
+
+  function xLabels(f, labels, step) {
+    const every = Math.max(1, Math.ceil(labels.length / (f.plotW / 44)));
+    labels.forEach((label, index) => {
+      if (index % every) return;
+      const text = svg("text", { x: f.pad.left + step * index + (step / 2) * (f.bandCenter ? 1 : 0), y: f.height - 8, "text-anchor": "middle" });
+      text.textContent = label;
+      f.axis.append(text);
+    });
+  }
+
+  function marker(f, opts, x) {
+    if (!opts.marker) return;
+    f.root.append(svg("line", { class: "ui-marker", x1: x, x2: x, y1: f.pad.top - 4, y2: f.pad.top + f.plotH }));
+    const text = svg("text", { class: "ui-marker-label", x: x + 4, y: f.pad.top + 6 });
+    text.textContent = opts.marker.label;
+    f.root.append(text);
+  }
+
+  const drawn = new Map();
+  let resizeTimer = 0;
+  addEventListener("resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => { for (const [el, draw] of drawn) draw(); }, 150);
+  });
+  const remember = (el, draw) => { drawn.set(el, draw); draw(); };
+
+  function bars(el, opts) { remember(el, () => drawBars(el, opts)); }
+  function lines(el, opts) { remember(el, () => drawLines(el, opts)); }
+
+  function drawBars(el, opts) {
+    const stacked = Boolean(opts.stacked);
+    const totals = opts.labels.map((_, i) => opts.series.reduce((sum, s) => sum + (stacked ? s.values[i] : 0), 0));
+    const max = stacked ? Math.max(...totals) : Math.max(...opts.series.flatMap((s) => s.values));
+    const f = frame(el, { ...opts, integer: opts.series.every((s) => s.values.every(Number.isInteger)) }, max);
+    f.bandCenter = true;
+    const step = f.plotW / opts.labels.length;
+    const groupW = step * 0.64;
+    const barW = stacked ? groupW : groupW / opts.series.length;
+    opts.labels.forEach((label, i) => {
+      let base = 0;
+      opts.series.forEach((series, s) => {
+        const value = series.values[i];
+        const h = (value / f.top) * f.plotH;
+        const x = f.pad.left + step * i + (step - groupW) / 2 + (stacked ? 0 : barW * s);
+        const y = f.pad.top + f.plotH - h - (stacked ? (base / f.top) * f.plotH : 0);
+        const rect = svg("rect", { x, y, width: Math.max(1, barW - (stacked ? 0 : 2)), height: Math.max(0, h), rx: 2, style: `fill: ${roleColor(series.role, s)}` });
+        const title = svg("title");
+        title.textContent = `${label}: ${series.name} ${fmt(value, opts.unit)}`;
+        rect.append(title);
+        f.root.append(rect);
+        base += stacked ? value : 0;
+      });
+    });
+    xLabels(f, opts.labels, step);
+    if (opts.marker) marker(f, opts, f.pad.left + step * opts.marker.index + step / 2);
+    el.append(f.root);
+    legendAndTable(el, opts);
+  }
+
+  function drawLines(el, opts) {
+    const max = Math.max(...opts.series.flatMap((s) => s.values));
+    const f = frame(el, { ...opts, integer: opts.series.every((s) => s.values.every(Number.isInteger)) }, max);
+    const step = f.plotW / Math.max(1, opts.labels.length - 1);
+    opts.series.forEach((series, s) => {
+      const points = series.values.map((value, i) => `${f.pad.left + step * i},${f.pad.top + f.plotH - (value / f.top) * f.plotH}`);
+      f.root.append(svg("polyline", { points: points.join(" "), style: `fill: none; stroke: ${roleColor(series.role, s)}`, "stroke-width": 2, "stroke-linejoin": "round", "stroke-linecap": "round" }));
+    });
+    f.bandCenter = false;
+    xLabels(f, opts.labels, step);
+    if (opts.marker) marker(f, opts, f.pad.left + step * opts.marker.index);
+    el.append(f.root);
+    legendAndTable(el, opts);
+  }
+
+  function sortable(table) {
+    const tbody = table.tBodies[0];
+    table.querySelectorAll("thead th .ui-sort").forEach((button) => {
+      button.type = "button";
+      button.addEventListener("click", () => {
+        const th = button.closest("th");
+        const index = [...th.parentElement.children].indexOf(th);
+        const next = th.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending";
+        table.querySelectorAll("thead th[aria-sort]").forEach((cell) => cell.removeAttribute("aria-sort"));
+        th.setAttribute("aria-sort", next);
+        const key = (row) => {
+          const cell = row.children[index];
+          const raw = cell?.dataset.value ?? cell?.textContent.trim() ?? "";
+          const number = Number(raw);
+          return raw !== "" && !Number.isNaN(number) ? number : raw.toLocaleLowerCase();
+        };
+        const rows = [...tbody.rows].sort((a, b) => {
+          const x = key(a);
+          const y = key(b);
+          const order = typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y));
+          return next === "ascending" ? order : -order;
+        });
+        tbody.append(...rows);
+        table.dispatchEvent(new CustomEvent("ui:sorted", { detail: { index, order: next } }));
+      });
+    });
+  }
+
+  function tabs(list) {
+    const items = [...list.querySelectorAll('[role="tab"]')];
+    const select = (tab) => {
+      for (const item of items) {
+        const on = item === tab;
+        item.setAttribute("aria-selected", String(on));
+        item.tabIndex = on ? 0 : -1;
+        const panel = document.getElementById(item.getAttribute("aria-controls"));
+        if (panel) panel.hidden = !on;
+      }
+    };
+    items.forEach((tab, index) => {
+      tab.addEventListener("click", () => select(tab));
+      tab.addEventListener("keydown", (event) => {
+        const move = { ArrowRight: 1, ArrowLeft: -1, Home: -index, End: items.length - 1 - index }[event.key];
+        if (move === undefined) return;
+        event.preventDefault();
+        const next = items[(index + move + items.length) % items.length];
+        next.focus();
+        select(next);
+      });
+    });
+    select(items.find((tab) => tab.getAttribute("aria-selected") === "true") ?? items[0]);
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll("table[data-ui-sortable]").forEach(sortable);
+    document.querySelectorAll("[data-ui-tabs]").forEach(tabs);
+  });
+  window.UI = { bars, lines, sortable, tabs };
+})();

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/README.md

@@ -23,9 +23,7 @@ This index is the read map for `SKILL.md`. Load the short, task-specific referen
 | [adaptive-layout.md](adaptive-layout.md) | Viewport, container, zoom, locale, or input mode changes layout. |
 | [system-foundations.md](system-foundations.md) | Tokens, primitives, variants, or theme boundaries are changing. |
 | [visual-language.md](visual-language.md) | Type, color, imagery, icons, depth, or chart choices need rules. |
-| [brand-and-imagery.md](brand-and-imagery.md) | Brand authority, reference images, or shipped assets are involved. |
-
-## Interaction, motion, and review
+| [brand-and-imagery.md](brand-and-imagery.md) | Brand authority, reference images, or shipped assets are involved. |## Interaction, motion, and review
 
 | Reference | Use when |
 | --- | --- |
@@ -36,7 +34,7 @@ This index is the read map for `SKILL.md`. Load the short, task-specific referen
 | [evidence-review.md](evidence-review.md) | An independent review, findings, or evidence handoff is requested. |
 | [complete-contract.md](complete-contract.md) | Full Design Contract schemas, field guidance, and evidence helpers are required. |
 | [taste-direction.md](taste-direction.md) | Additional visual direction and variance guidance is needed. |
-| [craft-floor.md](craft-floor.md) | Numbered craft checks, responsive passes, and thresholds guide implementation or review. |
+| [craft-floor.md](craft-floor.md) | Numbered craft checks, responsive passes, and thresholds — including the DS-001..008 design-lock rules — guide implementation or review. |
 | [slop-register.md](slop-register.md) | Detectable generic patterns and reviewer prompts guide the cheaper fix. |
 
 ## Worked-example slot

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/complete-contract.md

@@ -209,7 +209,7 @@ asking; a reference nobody can find does not exist.
 
 ### Rendered probe and mode loop
 
-Use the absolute installed probe command supplied by the route context or SKILL.md after a page is served locally. The driver verifies the pinned browser capability, opens seven isolated viewport passes, saves screenshots, and reports findings in report.json plus a review table. A missing or unverified browser exits 2 with `BLOCKED: browser unavailable`; source checks still run, but every rendered check remains not verified. Never install a browser or fetch a dependency during the session. The probe is product evidence; independent `visual-qa` acceptance remains a separate verdict.
+Use the absolute installed probe command supplied by the route context or SKILL.md after a page is served locally. The driver verifies the pinned browser capability, opens seven isolated viewport passes, saves screenshots, and reports findings in report.json plus a review table. A missing or unverified browser exits 2 with `BLOCKED: browser unavailable`; source checks still run, but every rendered check remains not verified. Never install a browser or fetch a dependency during the session. The probe is product evidence; independent `visual-qa` acceptance remains a separate verdict. For build, lock the look first: `scripts/design-lock.mjs init --family <landing|workspace|settings> --moment <kind> --moment-note "<what>" --dir <project> --scaffold`, then build from the kit layouts with only locked tokens; the probe enforces the lock from the page itself (DS-001/002/003/006/008 in `references/craft-floor.md`).
 
 Select the request's frontend mode before editing. build is the default and may author the requested UI. polish begins with a baseline probe and changes only the value of a flagged spacing, color, type, or motion rule; preserve structure and information architecture. audit runs the probe and reports, with zero source edits. harden tests only cue-backed axes: content length, content shape, quantity, container, state, and environment. For each axis record `Scenario | Observed | Owner`, or `not applicable: <reason>`. Repair only a defect the stress pass found. Explicit video, slides, or unrelated prose requests belong to their own routes.
 
@@ -445,7 +445,7 @@ isolated Hermes home. Use `--hermes-home`; never `--home`.
 
 ```text
 $ node packages/lithermes-installer/bin/lithermes.js install --yes --offline --no-hud --hermes-home "$ISOLATED"
-Installed LitHermes 1.0.29
+Installed LitHermes 1.0.30
 plugin: $ISOLATED/plugins/lithermes
 model config: updated
 
@@ -462,8 +462,8 @@ installed payload: PASS
 enabled config: PASS
 
 $ hermes lithermes doctor
-[OK] plugin.yaml readable (version 1.0.29)
-[OK] skills bundled: 37
+[OK] plugin.yaml readable (version 1.0.30)
+[OK] skills bundled: 40
 [OK] litgoal durable runtime importable
 ```
 

package/assets/lithermes-plugin/skills/frontend-ui-ux/references/craft-floor.md

@@ -72,3 +72,13 @@ The responsive pass runs at 320, 390, 768, and 1440 CSS pixels in light mode; re
 | RS-010 | Horizontal-scroll peek | A scrollable rail with no other visible scroll cue (prev/next controls, pagination dots/tabs, a position counter) reveals 16–32px of the next off-screen item rather than ending flush | DET | LOW |
 | RS-011 | RTL pass gated by content | An RTL/bidi mirror check runs only when the brief's real content or shipped locales include an RTL script; logical CSS properties are used throughout so the gated pass is mostly a dir="rtl" toggle | JUDG (the gate), DET (the logical-property audit once gated in) | MEDIUM if a physical-direction property appears where the gate says RTL applies |
 | RS-012 | Re-check discipline across states | A finding recorded at one viewport/theme/zoom state is re-sampled at a second state before being reported as a stable pass | JUDG (procedural) | downgrades a lone-state pass to not_verified, not a hard fail |
+| DS-001 | Design lock applied | Every page links the locked `ui/tokens.css` before any other stylesheet | DET (static: link scan; live: computed token presence) | HIGH |
+| DS-002 | Font family inside the lock | `font-family` is `var(--font-text)`, `var(--font-display)`, `var(--font-mono)` or a lock-declared variant; token definitions and `@font-face` blocks are exempt | DET (static outside token definitions; live: computed family) | HIGH |
+| DS-003 | Colour inside the locked palette | No literal colour outside the token file and `:root` variable definitions; all paint comes from `var(--c-*)` roles | DET (static literal scan; live: computed channel tolerance) | HIGH |
+| DS-004 | Font size on the locked scale | A computed font size matches a `var(--fs-*)` step within 0.5px, or is the one display title | DET (live computed only) | MEDIUM |
+| DS-005 | Corner radius on the lock | A computed radius matches a `var(--radius-*)` value within 0.5px or is fully round | DET (live computed only) | LOW |
+| DS-006 | No starter slot left behind | No `{{slot}}` marker text remains in the served markup | DET (static pattern; live: rendered text) | HIGH |
+| DS-007 | Elevation inside the lock grammar | Shadows come from `var(--shadow-*)`; a flat lock takes no blurred or offset shadow, an offset lock takes no blurred one | DET (live computed mostly; hairline borders exempt) | MEDIUM |
+| DS-008 | Signature moment present and on content | The lock records one moment kind; exactly its element carries `data-ui-moment="<kind>"` in the first screen on a read-once page | DET (static marker; live: area, viewport share, first-screen) | HIGH |
+
+The probe applies the DS rows wherever a design.lock.json file governs the page tree — it looks for the lock beside or above the page — and skips them where no lock governs the tree. Threshold data lives in `scripts/probe-rules.json` under `designLock`.