@litfamily/litopencode 1.0.30 → 1.0.32

package/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/skills/frontend-ui-ux/references/brand-and-imagery.md

@@ -13,7 +13,7 @@ Use only what the user owns or supplied; everything else is unlicensed until pro
 Say so, then pick a neutral system a brand can replace in one token pass.
 
 - Build on semantic tokens only, so a later palette swap touches no component.
-- One neutral ramp, one accent, no logotype; set the product name in the body face as the wordmark.
+- One neutral ramp, one accent role and a second accent role that the lock's tokens name (`--accent`, `--accent-2`), no logotype; set the product name in the body face as the wordmark.
 - Record an omission id naming what is missing: mark, palette, typeface, imagery, voice.
 - Never invent a logo, tagline, or brand story and present it as the user's.
 
@@ -23,7 +23,7 @@ Convert each adjective into three or more numeric commitments, or drop it.
 
 - Precise: tabular figures, 4 px grid, 1 px hairline borders, 120 ms transitions.
 - Warm: radii 12 px or greater, body line-height 1.6, photography over iconography.
-- Serious: one accent hue, elevation capped at two levels, motion under 200 ms.
+- Serious: one accent hue (a calm lock), elevation capped at two levels, motion under 200 ms.
 
 ## Specifying a generated reference image
 

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

@@ -151,7 +151,7 @@ Useful evidence is falsifiable: an exact file hash, an exact command, an explici
 
 For corpus verification, resolve the helper from the selected installed skill, never from the project cwd: set `FRONTEND_SKILL_FILE` to its absolute `SKILL.md` path, set `FRONTEND_SKILL_ROOT` to the physical directory containing that file, then run `node "$FRONTEND_SKILL_ROOT/scripts/verify-canonical-corpus.mjs" --json`. Beta2 and `litfamily.design-contract/v1beta1` remain evidence-eligible; alpha returns `LEGACY_SCHEMA_V1ALPHA1`. Keep the dataset separate from the canonical library and imported scripts inert.
 
-Eighteen authored reference documents ship inside this skill under `skills/frontend-ui-ux/references/`. Each is hash-pinned in the managed manifest and installed with the skill. Open by question, not by curiosity: a reference nobody can find is a reference that does not exist.
+Nineteen authored reference documents ship inside this skill under `skills/frontend-ui-ux/references/`. Each is hash-pinned in the managed manifest and installed with the skill. Open by question, not by curiosity: a reference nobody can find is a reference that does not exist.
 
 | Reference | Question it answers |
 | --- | --- |
@@ -173,6 +173,7 @@ Eighteen authored reference documents ship inside this skill under `skills/front
 | [evidence-review.md](references/evidence-review.md) | How is the independent review pass coupled through the contract hash and evidence schema rather than shared assumptions? |
 | [craft-floor.md](references/craft-floor.md) | Which CF and RS values should the live probe measure, and what remains review-only? |
 | [slop-register.md](references/slop-register.md) | Which numbered visual/functional signatures does the probe or reviewer need to inspect? |
+| [house-styles.md](references/house-styles.md) | Which house style, layout family and signature moment does a new build lock, which kit classes may it use, and which DS rules and LOOK questions does the probe apply? |
 
 Supporting shipped assets: [design-contract-v1beta2.json](schemas/design-contract-v1beta2.json) is the canonical evidence-eligible shape; [design-contract-v1beta1.json](schemas/design-contract-v1beta1.json) remains the compatible evidence-eligible shape; [design-contract-v1alpha1.json](schemas/design-contract-v1alpha1.json) is retained for migration diagnostics. `scripts/uiux.mjs` provides the validator and retrieval entry point, `scripts/design-contract.mjs` owns executable rules, and `data/` contains the packaged offline records with their license, provenance, and notice.
 

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

@@ -2,6 +2,10 @@
 
 This is the authored rule sheet for the interface probe. `scripts/probe-thresholds.json` is the executable value register. Keep a changed number in that one file, then update this explanation and its fixture; never adjust a value after reading an A/B judge result. DET means the browser can inspect a signal. JUDG needs a reviewer, even when the browser offers a count. The probe records `not_verified` for a signal it cannot observe. A clean source search is never a rendered PASS.
 
+## Design lock rules
+
+When `design.lock.json` sits beside the page (or `--lock` names one), the probe also runs the DS-* lock rules, listed with their severities in `references/house-styles.md` and registered in `scripts/probe-lock.mjs`, records the lock under `manifest.design_lock`, and prints LOOK-1 to LOOK-6 with the 1440, 390 and 320 screenshots. Answer the LOOK questions by eye, fix the two worst answers and probe again; two look rounds at most. Without a lock the probe records DS-001 in `not_verified`.
+
 ## Typography
 
 | Rule | Working decision |
@@ -24,7 +28,7 @@ This is the authored rule sheet for the interface probe. `scripts/probe-threshol
 | CF-202 | Focused and unfocused styles must differ. Native `outline-style: auto` passes. A custom ring needs 2px and 3:1; an inadequate indicator is MEDIUM, no change is HIGH. The probe focuses a control without clicking or pressing it. |
 | CF-203 | APCA is advisory alongside the WCAG pair: body Lc 75/90, other text 60/75, large text 45/60, UI 30. It cannot block alone. |
 | CF-204 | Sample imagery or gradients behind glyphs when same-origin pixels are available. Cross-origin paint remains `not_verified`. |
-| CF-205 | At most one high-saturation interactive accent cluster per view. Count filled emphasis surfaces of at least 24×24px, not every coloured border. Review decides whether separate status hues are justified. |
+| CF-205 | At most four high-saturation hue clusters per view (the rich default: an accent, a second accent and status hues); one when the lock records calm density. Count filled emphasis surfaces of at least 24×24px, not every coloured border. Review decides whether separate status hues are justified. |
 | CF-206 | Hues within 15 degrees serve one semantic colour. |
 | CF-207 | Status has text, icon or pattern as well as colour; absence of a second channel is HIGH. |
 | CF-301 | Spacing values at least 4px sit within 1px of a 4px multiple. One to three distinct off-scale values are LOW; more than three are MEDIUM. Skip auto margins. |
@@ -41,7 +45,7 @@ This is the authored rule sheet for the interface probe. `scripts/probe-threshol
 | CF-401 | For a rounded child that traces its parent's content box, compare each corner with outer radius minus padding; allow the rule register's tolerance. Skip icon-sized children and heavily padded parents. |
 | CF-402 | A border plus a near-zero-blur edge shadow redraws the same edge. A soft ambient shadow is acceptable. |
 | CF-403 | A hard offset shadow needs a recorded visual register; otherwise flag it for review. |
-| CF-404 | A primary action should not carry a chromatic, large-blur halo. Parse blur, colour and offset rather than banning all shadows. |
+| CF-404 | A primary action should not carry a chromatic, large-blur halo. A glow on a decorative `ui-glow` surface is not a control halo; three or more recurring glows fall under SLOP-010. Parse blur, colour and offset rather than banning all shadows. |
 | CF-405 | Photo outlines should be thin and low saturation, not a loud accent border. |
 | CF-406 | Modal scrims use a solid or near-solid veil, not backdrop blur by reflex. |
 | CF-407 | Grids, radial halos, marquees and stripe pseudo-elements are reviewer cues unless tied to content. |

package/skills/frontend-ui-ux/references/default-editorial-pixel.json

@@ -3,6 +3,9 @@
   "origin": "authored defaults; not measurements of an external design",
   "spacing": {"base": 8, "micro": 4, "sectionDesktop": [80,128], "sectionMobile": [40,64]},
   "type": {"displayDesktop": [56,104], "displayMobile": [36,56], "latinLeading": [0.95,1.05], "koreanLeading": [1.12,1.25], "bodyLeading": [1.5,1.7]},
+  "density": {"default": "rich", "calm_only_when": "the request asks for a minimal, calm, quiet or restrained page, or scripts/design-lock.mjs init --density calm; calm restores 64 to 128 px sections, a flat canvas and no glow"},
+  "palette": {"paper": "#f5f3eb", "ink": "#18272b", "accent": "#c64d2e", "accent_2": "#1d6b68", "mist": "#b7d8c7"},
+  "work_surfaces": {"applies_to": "screens people work in repeatedly (admin consoles, analytics views, settings, internal tools) rather than pages read once", "first_viewport": "the working content and primary controls; no hero headline, tagline or illustration block above them", "pixel_art": "a small accent at most, never the primary visual anchor", "lock": "these screens lock the graphite house style, not this palette"},
   "composition": ["deliberate line breaks", "compact display leading", "terminal micro-labels", "thin boundaries", "atmospheric fields", "intentional asymmetry"],
   "pixel_illustration": {
     "default_when_brief_unspecified": true,

package/skills/frontend-ui-ux/references/house-styles.md

@@ -0,0 +1,236 @@
+# House styles, the kit and the design lock
+
+Read this before writing markup for a new page or screen. A script writes the look into the project
+(typeface, palette, scale, radii, component anatomy, page skeleton) from a small closed set, and the
+interface probe checks the rendered page against it, so the same brief lands in the same register
+whichever run builds it. Content, composition inside the skeleton and accent art stay open. Every
+page also gets one place where it may be bold, its signature moment (section 6), declared in the
+lock and checked like the rest.
+
+## 1. Lock the look first
+
+Run every command from the directory OpenCode's native skill tool returned for this skill (the one
+holding `SKILL.md`), with an absolute `--dir`.
+
+```bash
+node scripts/design-lock.mjs list
+node scripts/design-lock.mjs match "<the request>"
+node scripts/design-lock.mjs init --family <family> [--style <id>] [--brief "<the request>"] [--density calm] --dir <project> --scaffold \
+  --moment <kind> --moment-note "<what it shows>" [--moment-place "<where it sits>"]
+node scripts/design-lock.mjs moment --dir <project> --kind <kind> --note "<what it shows>"
+```
+
+`init` writes into the project:
+
+| File | What it is |
+|---|---|
+| `design.lock.json` | The declaration the probe reads: style id, family, density, fonts, type scale, display range and moment ceiling, radii, spacing, light and dark palette, elevation, and the signature moment (scale, kind, note, place) |
+| `ui/tokens.css` | Generated custom properties (`--c-*`, `--fs-*`, `--fw-*`, `--sp-*`, `--radius-*`, `--shadow-*`, `--dur-*`) with dark mode and the `@font-face` rules |
+| `ui/components.css` | The shared `ui-*` component sheet; it reads only tokens |
+| `ui/ui.js` | Charts with a table fallback, sortable tables, keyboard tabs |
+| `ui/fonts/` | Pretendard (Latin and Hangul) and JetBrains Mono with their OFL texts, copied from the sibling skills `lit-diagram-drawer` and `lit-typographic-motion` after a sha256 check (`kit/fonts.json`); nothing is fetched. Pretendard is the unmodified official file, never subset |
+| `index.html` | Only with `--scaffold` and no existing page: the starter for the family |
+
+**Density.** Every lock records `density: rich` unless the request asks for a calm page. Rich is
+the default because the user wants pages that feel made, not emptied: a tighter section rhythm
+(48, 72 and 96 px), the style's texture (field-notes notebook dots), a second accent family
+(`--c-accent-2`, `-ink`, `-wash`, `on-accent-2`), colour bands (`ui-band`, `ui-band--accent-2`,
+`ui-band--support`), a two-accent wash (`ui-wash`) and an atmosphere glow (`ui-glow`, a soft
+glow token that is `none` on flat and offset locks). `density: calm` is opt-in: `--density calm`,
+or a brief that says minimal, calm, quiet, restrained, understated, 미니멀, 차분, 절제, 담백 or 간결
+(`match` prints the density it reads). Calm restores the broad 64, 96 and 128 px sections, a flat
+canvas, no glow, and holds the probe to one accent hue (CF-205). Contrast, focus, overflow,
+reduced motion and every other floor are the same in both.
+
+Choose in this order and stop at the first rule that decides:
+
+1. **Existing product or brand tokens** (brownfield, a design system in the repo, colours or type the
+   user named): do not lock a kit style over them. Either write a style file in the same schema as
+   `kit/styles/*.json` with the brand's values and lock it with `--from <file>` (a new id), or skip
+   the lock and say the DS rules did not run.
+2. **The brief names a register.** A style keyword in the request picks it: pass the request as
+   `--brief` (or run `match`) and `init` locks the style whose keyword it contains, the longest
+   keyword winning, so "neo-brutalism" never lands on `computational-brutalism`. Brutalist,
+   brutalism, retro-futurist, CRT, 브루탈리즘 and 레트로퓨처 pick `computational-brutalism`;
+   neo-brutalism, neubrutalism and 네오브루탈리즘 pick `neo-brutalism`; `list` prints every
+   keyword. A register named in other words matches a style's `use_when` line: lock that style.
+3. **Competing directions left open** by the brief: ask, as `references/production.md`
+   says, before locking.
+4. **No visual direction at all:** the family decides, and `init` without `--style` applies it.
+   A `landing` page (read once: landing, docs, report) locks `field-notes`, the authored default
+   profile (`references/default-editorial-pixel.json`) made complete: same palette, spacing, type
+   ranges and pixel-art rule, plus the fonts, radii, elevation and component anatomy the profile
+   left open. A `workspace` or `settings` screen (dashboards, settings, forms, admin and data-dense
+   screens) locks `graphite`. `meadow` is never a default; it needs a brief that asks for its
+   register. The same holds for `computational-brutalism` and `neo-brutalism`: opt-in only.
+
+| Style | Register | Accent art |
+|---|---|---|
+| `field-notes` | Default for `landing`. Warm paper with notebook dots, deep ink, a terracotta accent with a deep-teal second accent, mist as the tint, thin rules instead of shadows, large editorial title, small lowercase mono labels | An original pixel motif on read-once pages (section 5) |
+| `graphite` | Default for `workspace` and `settings`. Cool greys, white surfaces, a blue accent with a rose second accent, 6–8 px radii, soft two-layer elevation | None |
+| `meadow` | Opt-in only. Near-white, deep teal accent, coral second accent, sand tint, 12–18 px radii, soft elevation | None |
+| `computational-brutalism` | Opt-in only. Retro-futurist instrument with its structure on show: drafting-film grey on a 32 px plotting grid with a stronger line every 160 px, monospaced text and mono headings and figures at real size, square corners, 3 px section rules carrying `data-coord` labels, 2 px compartments with inverse ink header bars, uppercase mono meta, heavy uppercase display, a hazard-orange signal with a plotter-blue second accent; dark mode is a phosphor CRT with an amber signal. Flat elevation | Instrument parts (section 5) |
+| `neo-brutalism` | Opt-in only. Lavender canvas, white surfaces, 3 px ink outlines on surfaces and 2 px on controls, zero-blur ink offset shadows (6 px surfaces, 3 px controls), solid sunflower-yellow panel heads and accent with ink text, an electric-blue second accent, pink support block, chunky 900-weight display and 800-weight headings, buttons that press into their shadow. Offset elevation | Stickers and colour blocks (section 5) |
+
+Each style file also carries `signature` (what must show for the register to read) and `forbid`
+(what breaks it); `design-lock.mjs list` prints both. The two brutalist registers differ on
+purpose: computational brutalism is flat, square and monospaced, neo-brutalism is outlined, offset
+and loud. Never mix their signatures on one page.
+
+Families decide the skeleton, not the look:
+
+| Family | Use for | Starter |
+|---|---|---|
+| `landing` | Pages read once: landing, product, launch, portfolio, docs home | Site bar, split hero, steps, feature split with a real kit view, quote, three plans, FAQ, footer |
+| `workspace` | Screens worked in: dashboards, consoles, admin, tables | App shell (side nav, top bar), headline figures, 8 + 4 panel row, full-width table with filter and search |
+| `settings` | Guided forms: settings, account, onboarding, checkout | Section index plus one column capped near 720 px, labelled fields with hints and errors, save bar with status, danger zone with a typed confirmation dialog |
+
+A starter is a skeleton: keep its order unless the brief says otherwise, delete what the brief does
+not ask for, add sections by reusing its parts. Replace every `{{slot}}`; the probe fails a page
+that still shows one (DS-006). Mixed products use one style and the family of each screen.
+
+## 2. Build only with the kit
+
+- Link `ui/tokens.css` first, then `ui/components.css`, then page rules. Load `ui/ui.js` with
+  `defer` when a chart, sortable table or tab set is on the page.
+- Page rules may set layout (grid areas, widths, order, `gap`) and may only use `var(--…)` for
+  colour, type size, weight, radius, shadow, spacing and duration. A literal colour, font family or
+  off-scale size is drift; the probe reports it (DS-002 to DS-005).
+- Something the kit lacks is built from tokens in a page rule, in the kit's idiom. It is not a reason
+  to import a framework, a second icon set or another font.
+- Copy is still the work: product names, numbers and sentences specific to the brief. Mark invented
+  figures as examples where a reader could take them as real.
+
+### Class catalogue
+
+| Area | Classes |
+|---|---|
+| Type | `ui-display` (the one display title), `ui-h1` `ui-h2` `ui-h3` `ui-h4`, `ui-lead`, `ui-body`, `ui-muted`, `ui-small`, `ui-meta`, `ui-label` (mono, lowercase, short), `ui-num` (tabular), `ui-code` |
+| Layout | `ui-container` (`--narrow`, `--wide`), `ui-section` (`--sunken`), `ui-band` (`--accent-2`, `--support`: a full-bleed colour band whose text takes the band's ink), `ui-section-head`, `ui-stack` (`--tight`, `--loose`), `ui-cluster`, `ui-split` (`--even`, `--top`), `ui-grid` with `--cols` |
+| Actions | `ui-btn` with `--primary`, `--ink`, `--quiet`, `--danger`, `--sm`; one primary per view |
+| Forms | `ui-field` with `__label`, `__hint`, `__error`; `ui-input`, `ui-select`, `ui-textarea`; `ui-input-group` with `__addon`; `ui-check`; `ui-switch` (a checkbox with `role="switch"`); `ui-segmented` (buttons with `aria-pressed`); `ui-form-actions` |
+| Surfaces | `ui-panel` (`--flush`, `--accent-2`) with `__head` and `__title`; `ui-wash` (the two-accent wash); `ui-glow` (the lock's glow, for one surface such as the moment); `ui-rule`; `ui-callout` (`--info`, `--positive`, `--warning`, `--negative`) |
+| Status | `ui-status` (`--positive`, `--warning`, `--negative`, `--info`) always with words; `ui-tag` with the same variants, `--accent` and `--accent-2` |
+| Figures | `ui-stat-row` of `ui-stat` with `__label`, `__value` (a `div`), `__note`; `ui-meter` with an inner `span` width |
+| Tables | `ui-table-wrap` around every `ui-table` (`--compact`, `--stack` for phones with `data-label` on each cell); numeric cells `is-num`; sortable headers `<th><button class="ui-sort">` inside `table[data-ui-sortable]` |
+| Lists | `ui-list`, `ui-steps` (an `ol` of real steps), `ui-checklist` |
+| Disclosure | `details.ui-disclosure`, `ui-tabs` with `role="tablist"` and `data-ui-tabs`, `dialog.ui-dialog` with `__body` and `__actions`, `ui-toast-region` and `ui-toast` |
+| Site | `ui-skip`, `ui-sitebar` with `__inner`, `ui-brand`, `ui-sitenav`, `details.ui-menu` with `__panel`, `ui-hero` (`--stage`: the art takes the larger column and the height) with `__copy` and `__art`, `ui-quote`, `ui-plans` of `ui-plan` (`--featured`) with `__price`, `ui-cta-band`, `ui-footer`, `ui-pixel` |
+| App | `ui-app` with `__nav` and `__main`, `ui-navgroup` with `__label`, `ui-navlist` with `aria-current`, `ui-topbar`, `ui-page` with `__head` and `__title`, `ui-workgrid` with `ui-span-12/8/7/6/5/4/3`, `ui-scroll`, `ui-toolbar`, `ui-search`, `ui-empty` |
+| Settings | `ui-settings` with `__nav` and `__body`, `ui-setting-section` (`--danger`) with `__head`, `ui-savebar` |
+| Moment | `ui-setpiece` (display type at the lock's moment size), `ui-bignum` (one figure at moment size, heading font, tabular); both only inside `[data-ui-moment]` (section 6) |
+| Signature | `ui-coord` (bracketed mono coordinate or measurement label), `ui-prompt` (a `>` prefix; `--cursor` adds a static block cursor), `data-coord="…"` on a `ui-section` or `ui-hero` (a label on the section rule where the lock shows section marks), `ui-ruler` (tick bar), `ui-frame` (a ruled box with registration crosses), `ui-scan` (static scanlines), `ui-readout` (mono value well), `ui-panel--accent` and `ui-panel--support` (colour blocks), `ui-sticker` (tilted tag) |
+| Charts | `UI.bars(el, { labels, series: [{ name, values, role: "chart-1" }], marker: { index, label }, caption, indexLabel, unit, stacked })` and `UI.lines(…)`; roles are `chart-1` to `chart-5`; each chart gets a legend when it has two series and a "Show as table" fallback |
+
+## 3. What the probe checks against the lock
+
+`scripts/probe.mjs` finds `design.lock.json` beside the page it serves (or takes `--lock <path>`)
+and runs these rules at every matrix row. Without a lock they are listed under Not verified.
+
+| Id | Rule | Severity |
+|---|---|---|
+| DS-001 | `ui/tokens.css` is not applied: `--ui-lock` on `:root` is missing or names another style | HIGH |
+| DS-002 | Visible text set in a family the lock does not name | HIGH |
+| DS-003 | Text, background, border or SVG colour more than 8 per channel from every palette role (light and dark); four or more distinct colours is HIGH, fewer is MEDIUM | HIGH / MEDIUM |
+| DS-004 | Font size neither on the scale (±0.5 px) nor inside the display range | MEDIUM |
+| DS-005 | Corner radius not in the lock and not fully round | LOW |
+| DS-006 | A `{{slot}}` from a starter left in text, a title or a labelling attribute (the static fallback reads `.html` files only, since framework templates use braces) | HIGH |
+| DS-007 | A shadow outside the lock's elevation grammar: a `flat` lock (computational-brutalism) takes only rings, no blur and no offset past a hairline; an `offset` lock (neo-brutalism) takes zero-blur offsets but no blur. Inset shadows never count; a `soft` lock is not shadow-checked by DS-007 | MEDIUM |
+| DS-008 | The signature moment: the lock declares none (a lock written before signature moments counts; add one with `design-lock.mjs moment`); no visible `[data-ui-moment]`; the marked kind differs from the lock; it is smaller than 40 000 px² (bold) or 4 800 px² (small); a read-once page's moment starts below the first screen at 1024 px and wider (more than 120 px short of the fold) or past 1.5 screens on narrower viewports; it lacks what its kind needs (section 6); or it is a generic gradient-and-centred-text hero. Two marked moments, and a work-surface moment over half the screen at 1024 px and wider, are MEDIUM. Fold and size-share checks run on the base rows | HIGH |
+
+A lock with `offset` elevation is the recorded neo-brutalist register: DS-007 allows zero-blur ink
+offsets there and on no other lock. A `soft` lock leaves shadows to the craft floor.
+
+Media, `img`, `video`, `canvas`, `iframe` and anything inside `[data-lock-exempt]` are skipped. Use
+the exemption only for third-party embeds and real brand marks, and say so in the reply.
+
+The DS rule table (severity, tolerance, fix line) lives in `scripts/probe-lock.mjs`; every other
+threshold stays in `scripts/probe-thresholds.json`. Never widen a tolerance or add an exemption to
+make a page pass; change the page.
+
+## 4. Look, then fix
+
+After the findings, a rendered probe run prints the paths (and writes them under "Look" in `review.md`) of the 1440, 390 and 320 screenshots
+and six fixed questions (LOOK-1 to LOOK-6: one focal point, shared edges, grouping by space, kit not
+costume, composed mobile, specific content). Open the screenshots, answer each question in one line,
+fix the two worst answers, and run the probe again. Stop after two look rounds; keep the better
+version if a round made it worse. The questions are concrete on purpose: a reviewer, human or
+model, agrees with itself on "do the sections share a left edge" far more often than on "is it
+beautiful".
+
+## 5. Accent art by style
+
+The landing starter's art slot takes the locked style's art; work surfaces keep at most a small mark.
+
+| Style | Accent art |
+|---|---|
+| `field-notes` | The pixel motif below |
+| `graphite`, `meadow` | A real product view set on a `ui-wash` or between `ui-band` sections, with the second accent on the featured panel |
+| `computational-brutalism` | Instrument parts on real content: a `ui-frame` around the product view or a key figure, `ui-coord` labels that name real positions, sizes or revisions, one `ui-ruler`, `data-coord` on each section (sheet, grid reference or revision, not 01/02/03), a `ui-prompt--cursor` line, and `ui-readout ui-scan` wells on the readouts that carry real values. No made-up telemetry: every number labels something on the page |
+| `neo-brutalism` | `ui-sticker` labels with real facts (price, launch date, a count), never over body text, and colour blocks in all three fills (`ui-panel--accent`, `ui-panel--accent-2`, `ui-panel--support`) |
+
+### Pixel motif (field-notes)
+
+On read-once pages the field-notes hero carries an original pixel motif of the product's subject.
+Draw it as a character grid and convert it, rather than hand-placing rectangles:
+
+```bash
+node scripts/pixel-art.mjs motif.txt --label "<what it shows>" --cell 12
+```
+
+Characters map to palette roles (`i` ink, `a` accent, `b` second accent, `m` support, `s` sunken, `p` surface,
+`c` canvas, `l` line-strong, `2` ink-2, `.` empty), so the motif follows dark mode and stays inside
+the lock. Keep it recognisable: a scene of the product's subject, 20 to 64 cells wide, hard edges, as
+many roles as the subject needs, the accent on the one detail that matters. Cells render at 6 px or more. On a
+work surface the motif is at most a small mark beside the product name.
+
+## 6. Signature moment
+
+The lock makes runs agree on the look. The signature moment is the one place a page is allowed to be
+bold, so a locked page still has something that makes a person stop. Choose it from the content before
+writing markup, record it in the lock, mark it in the page, and let the probe check it (DS-008).
+
+1. Record it: `init … --moment <kind> --moment-note "<what it shows>" [--moment-place "<where>"]`, or
+   later `design-lock.mjs moment --dir <project> --kind <kind> --note "<what it shows>"`. Until a kind
+   is recorded the probe fails every render.
+2. Mark the one element that carries it: `data-ui-moment="<kind>"`.
+3. Build it from this page's content, inside the lock: palette roles, the kit's type, radii and
+   elevation. The moment may use `--fs-moment` (`ui-setpiece`, `ui-bignum`) up to the lock's moment
+   ceiling; DS-004 accepts that size only inside `[data-ui-moment]`.
+
+| Family | Scale | Kinds | Where |
+|---|---|---|---|
+| `landing` (landing, product, launch, portfolio, docs home, report) | bold | `hero-composition`, `type-set-piece`, `data-moment`, `diagram`, `motion-detail`, `interactive-object` | Starts in the first screen at 1024 px and wider, within 1.5 screens on phones |
+| `workspace`, `settings` | small | `chart`, `empty-state`, `header-detail` | Anywhere; under half the screen at desktop widths. The data stays the focus |
+
+| Kind | What it is | DS-008 needs inside it |
+|---|---|---|
+| `hero-composition` | The hero arranged around the product's one concrete object: the invoice, the truck, the score, drawn or built from kit parts at a size that dominates the first screen (`ui-hero--stage`) | An image, drawing, figure, frame or product view |
+| `type-set-piece` | The pitch set as type: a short line at moment size with the accent on the one word that matters, aligned to the grid, never centred over a gradient | Text at display size or above |
+| `data-moment` | One real number or small dataset made big: a `ui-bignum` with its unit and source, a chart that answers the page's question | A chart, table, figure or readout |
+| `diagram` | The product's process or structure drawn once, clearly: inputs, the step the product does, the result | An image, drawing or figure |
+| `motion-detail` | One movement that explains something (a figure counting up to its real value, a step sequence), short, in the style's durations, stopped under reduced motion (RS-003) | An animation or transition (not checked on the reduced-motion row) |
+| `interactive-object` | Something to try on the page: a fee calculator, a toggle between before and after, a slider on a real variable | A control a reader can operate |
+| `chart` | The work surface's main chart, with one annotated marker that names the event a person acts on | A chart, table or readout |
+| `empty-state` | The empty state drawn with care: a small mark from the style, one sentence, the next action | Nothing beyond presence |
+| `header-detail` | The page header's one detail: the product mark, a live status, the plan or period, set with care | Nothing beyond presence |
+
+Choose the kind from the content in this order: the one object or number the reader cares about
+(`data-moment`, `hero-composition`); a process they must grasp (`diagram`); words that carry the
+pitch (`type-set-piece`); something worth trying (`interactive-object`); `motion-detail` only when
+movement is the point. State the choice and the note in the reply.
+
+Moments by style:
+
+| Style | A moment that belongs to it |
+|---|---|
+| `field-notes` | A pixel scene of the product's subject filling the art column (`ui-hero--stage`, cells of 10 to 16 px, the accent on the one detail that matters), or a `ui-setpiece` line in the editorial display with a small pixel mark |
+| `graphite`, `meadow` | On a landing page, the real product view at full size with one live state shown (`ui-panel` parts, `UI.bars`); on a work surface, the main chart with its annotated marker |
+| `computational-brutalism` | An instrument plate on the plot grid: a `ui-frame` holding a `ui-bignum` readout in mono at moment size, a `ui-ruler` and `ui-coord` labels that measure real values, one `ui-scan`; or a heavy uppercase `ui-setpiece` that spans the grid columns |
+| `neo-brutalism` | A stacked block composition: the product object in a `ui-panel--accent` with its offset shadow, more blocks in `ui-panel--accent-2` and `ui-panel--support`, `ui-sticker` labels with real facts, chunky `ui-setpiece` type |
+
+Never, in a moment or anywhere: a centred headline over a gradient (DS-008 reports it as a generic
+hero), scattered floating blobs, glass, a stock 3D object, a fake dashboard with invented numbers, or
+a second moment competing with the first. Everything outside the moment stays inside the kit and, in
+the default rich register, may be layered: bands, a wash, the style's texture, the second accent and
+an atmosphere glow.

package/skills/frontend-ui-ux/references/motion-guide.md

@@ -2,7 +2,7 @@
 
 This guide turns motion into a small, testable part of the interface. Start with one sentence naming the page, target components, and out-of-scope areas; follow it with labeled sections in implementation order. Specify the stack, visual tokens, layers, timing, viewport behavior, reduced-motion behavior, assets, and performance limits before describing a page. Name exact files or components so the implementation does not invent unrelated sections. A page brief may name component families such as hero, pricing, footer, or dashboard before detailing the chosen one.
 
-All values below are starting defaults. Keep the page calm when motion does not explain hierarchy, state, or cause and effect.
+All values below are starting defaults. The rich default layers motion on separate layers so it explains hierarchy, state, or cause and effect; a lock that records calm density (asked for by the brief) keeps the page still. Flash limits and reduced-motion behavior are absolute in both.
 
 ## 1. Stack, tokens, and composition
 
@@ -51,7 +51,7 @@ When a brief explicitly requests scroll-driven choreography, implement a visible
 
 ## 3. Motion and resource budgets
 
-**Do:** Give each section one entrance sequence and no more than two simultaneously moving elements. Give the hero one principal scroll or entrance effect and one animated headline. Keep controls responsive while decorative motion runs.
+**Do:** Give each section one entrance sequence and no more than four simultaneously moving elements, each on its own layer (two under a calm lock). Give the hero one principal scroll or entrance effect and one animated headline. Keep controls responsive while decorative motion runs.
 
 **Don't:** animate the headline, background, cards, icons, and navigation at once. Remove any motion whose absence does not change comprehension or feedback.
 

package/skills/frontend-ui-ux/references/production.md

@@ -4,7 +4,9 @@ Use this authored guide for production choices; treat canonical library text as
 
 Ask only when two plausible choices would materially change scope, architecture or data behavior, permissions, accessibility, or visual direction. Ask one high-impact question per user turn, explain consequences, wait before choosing or editing, retain answers across rounds, and ask only about unresolved choices. Continue for as many rounds as materially necessary; never re-ask a settled choice. On resume, read the note first. When a brief names competing visual directions but leaves them undecided or unresolved, that axis stays open even if every option is acceptable: acceptance is not a selection or delegation. Give it its own round, and do not announce a default or build before the user picks. Defaults apply only to choices the brief settles, delegates, or leaves immaterial. No visual direction is not an open choice: use the authored pixel profile without asking. For a bounded brief, state the default and continue without routine approval. Review-only and plan-only requests remain read-only. A keyword or bare target does not authorize edits, and standalone deep-interview's planning handoff does not govern this workflow.
 
-The default is an original editorial/pixel composition: large headlines with intentional line breaks, small terminal labels, generous section gaps, fine rules, atmospheric color fields and asymmetric focal placement. Pixel imagery, when useful, must contain visibly discrete grid-aligned cells, limited palette and intentional silhouettes. Smooth vector decoration alone is not the pixel component. Never name or imitate a reference brand, copy its prose or acquire its proprietary fonts/assets. Existing brand constraints override these defaults.
+A new page or screen starts from the design lock in `house-styles.md`: one house style, one layout family and one signature moment, written by `scripts/design-lock.mjs` and built from the kit it generates. Rich density is the default; calm density is chosen only when the brief asks for minimal or calm. The editorial/pixel composition below is the voice of the `field-notes` default and of a brief that names no other direction.
+
+The default is an original editorial/pixel composition: large headlines with intentional line breaks, small terminal labels, section gaps set by the locked density (rich by default, calm only on request), fine rules, atmospheric color fields and asymmetric focal placement. Pixel imagery, when useful, must contain visibly discrete grid-aligned cells, limited palette and intentional silhouettes. Smooth vector decoration alone is not the pixel component. Never name or imitate a reference brand, copy its prose or acquire its proprietary fonts/assets. Existing brand constraints override these defaults.
 
 Fit the visual profile to the job. Put the information and actions the user came for within easy reach; a large slogan or decorative illustration must not push them out of view. Include practical context that the brief supplies or the page's purpose requires, and mark unknown required details as placeholders instead of inventing them. Match the request language in visible copy. Visual motifs must not displace usable content.
 

package/skills/frontend-ui-ux/references/slop-register.md

@@ -19,13 +19,13 @@ Run the deterministic probe before making a holistic judgment. A visible signatu
 | ID | Probe signal and review question | Cheaper fix |
 | --- | --- | --- |
 | SLOP-008 | Heading text or gradient stops in the 260–310° hue band with at least 50/255 channel spread, without a declared brand reason. | Use the chosen palette. |
-| SLOP-009 | A gradient is clipped into text. | Use a solid readable text colour. |
-| SLOP-010 | Recurring chromatic large-blur halos are MEDIUM; a single glow stays under CF-404. | Remove the glow. |
+| SLOP-009 | Gradient text as a reflex: a violet stop, more than one clipped element, or a stop below 4.5:1 (3:1 at 24px or larger) against its surface. One considered gradient headline passes. | Use a solid readable text colour, or one headline with legible stops. |
+| SLOP-010 | Three or more recurring chromatic large-blur halos are MEDIUM; one or two glows stay under CF-404. | Keep a glow for one surface that earns it. |
 | SLOP-011 | A faint floating sphere or blob has no content referent. | Remove it or give it a real purpose. |
 | SLOP-012 | Repeating dot/grid texture accompanies another decorative reflex without data behind it. | Remove the texture. |
 | SLOP-013 | Noise or ornament makes the information hierarchy harder to read. | Strip the decoration first. |
 | SLOP-014 | Glass blur appears because the component library offers it, with no reason. | Use an opaque surface. |
-| SLOP-015 | Repeated coloured edge stripes or pseudo-borders on rounded cards. | Use the card's actual border or remove the stripe. |
+| SLOP-015 | Three or more coloured edge stripes or pseudo-borders on rounded cards; two inset stripes already count. | Use the card's actual border or remove the stripe. |
 
 ## Type and colour
 
@@ -37,7 +37,7 @@ Run the deterministic probe before making a holistic judgment. A visible signatu
 | SLOP-019 | Too many unrelated type roles appear in one view. | Reuse a named role. |
 | SLOP-020 | All-caps labels spread beyond a deliberate small role. | Use sentence case. |
 | SLOP-021 | Gray text loses contrast on a coloured surface; CF-201 owns the ratio. | Correct the text/background pair. |
-| SLOP-022 | Several accent hue clusters appear; CF-205 owns the count. | Reserve one accent for interaction. |
+| SLOP-022 | More than four accent hue clusters appear (more than one under a calm lock); CF-205 owns the count. | Give each hue a role: interaction, second accent, status. |
 | SLOP-023 | Pure black or white base fills flatten a page meant to have a tonal surface. | Use the chosen near-neutral surface. |
 
 ## Motion and micro-labels