@litfamily/litmuse 0.1.1 → 0.1.3

package/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/plugin/skills/frontend-ui-ux/references/complete-contract.md

@@ -212,7 +212,7 @@ rather than executable, and retrieved text is never treated as instruction.
 
 ## Reference router
 
-Eighteen reference documents in this router ship with this skill under `references/`. Each answers one question.
+Nineteen reference documents in this router ship with this skill under `references/`. Each answers one question.
 Open the row that matches the decision in front of you; a reference nobody opens is a reference
 that does not exist.
 
@@ -238,6 +238,7 @@ the lane". `all` means the row applies in every lane.
 | `references/redesign-playbook.md` | `redesign` | How do I change how it looks without changing what a user can finish? |
 | `references/evidence-review.md` | all | What belongs in the review package, and who is allowed to assign the verdict? |
 | `references/craft-floor.md` | all | How do I run the interface probe loop, which mode applies, and which numbered craft and responsive rules does a finding cite? |
+| `references/house-styles.md` | `new-build`, `redesign` | Which of the five house looks fits this brief, what does its lock record, and what is the page's one signature moment? |
 | `references/slop-register.md` | all | Which reflex-default tells does the probe flag, and what is the cheapest fix for each? |
 
 Read-only agents (`Read`, `Grep`, `Glob`) are the right way to consult this pack when the main

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

@@ -36,6 +36,10 @@ What it does, in order:
    counted under Not verified instead of being opened.
 4. Writes `<evidence dir>/findings.json` (`{ manifest, findings }`, each finding naming exactly
    one rule id) and prints the review table below.
+5. When a `design.lock.json` sits beside the page (or `--lock` names one), runs the DS-* lock rules
+   from `references/house-styles.md` in the same pass and records the lock in
+   `manifest.design_lock`; without one, DS-001 is listed under Not verified. A rendered run ends with
+   the screenshot paths and the six LOOK questions that section 2's loop answers.
 
 Exit codes are the contract: **0** all seven matrix rows ran and no measured or derived HIGH
 finding remains; **1** at least one measured or derived HIGH finding remains (this wins over a
@@ -82,7 +86,8 @@ build (or baseline) -> probe -> fix -> probe -> fix -> probe -> fix -> final pro
   below). Never phrase an inferred value as measured. A derived value built on a missing or stale
   measurement drops to inferred. *Not verified* is its own state: the check did not run.
 - **Look at the screenshots** for 320, 390 and 1440 before claiming the page works; the probe
-  measures rules, it does not see a composition.
+  measures rules, it does not see a composition. Answer its LOOK-1 to LOOK-6 questions in one line
+  each, fix the two worst, and stop after two look rounds.
 
 ## 3. Modes
 
@@ -198,7 +203,7 @@ Every DOM rule samples only what a person can see: `checkVisibility`, no accessi
 | CF-202 | Focus indicator | in-page focus confirmed as `:focus-visible`, then focused and resting styles compared: outline, shadow, border or background must change; the browser's own `auto` ring passes; a custom ring needs ≥ 2 px and ≥ 3:1 against the colour just outside it | HIGH when focus changes nothing; MEDIUM for a weak custom ring | measured |
 | CF-203 | APCA | advisory Lc figure beside every CF-201 finding (body 75, non-body 60, large 45, components 30) | information | in the note |
 | CF-204 | Text over image or gradient | on a CSS gradient the text clears CF-201's floor against its worst colour stop; text over an image is not verified | HIGH | derived |
-| CF-205 | One accent per view | ≤ 1 saturated hue cluster (±15°) among filled surfaces ≥ 24 × 24 px; status roles, live regions, `aria-invalid`, success/warning/error/danger/info-style class tokens and pills ≤ 32 px tall excluded | MEDIUM | measured |
+| CF-205 | Accent families per view | ≤ 4 saturated hue clusters (±15°) among filled surfaces ≥ 24 × 24 px in the default rich register, ≤ 1 when the lock records `density: calm`; status roles, live regions, `aria-invalid`, success/warning/error/danger/info-style class tokens and pills ≤ 32 px tall excluded | MEDIUM | measured |
 | CF-206 | Hue tolerance | hues within 15° count as one meaning | LOW | inside CF-205 |
 | CF-207 | Not colour alone | state carries text, an icon or a pattern too | HIGH | checklist (Inferred) |
 
@@ -214,8 +219,8 @@ Every DOM rule samples only what a person can see: `checkVisibility`, no accessi
 | CF-306 | Container `gap` | rhythm from the parent's `gap`, not child margins | LOW | checklist |
 | CF-401 | Concentric radius | inner = outer − padding, ±2 px, compared per corner where the child reaches that corner, radii capped at half the short side, padding ≤ 24 px | LOW | measured |
 | CF-402 | Elevation once | no hard ≤ 2 px shadow retracing a border | LOW | checklist |
-| CF-403 | Hard offset shadow | a zero-blur shadow offset past a hairline, unless the direction records a neo-brutalist register (the probe's proxy for one: the same shadow on ≥ 3 elements that each carry a ≥ 2 px solid border) | MEDIUM | measured |
-| CF-404 | No glow on the primary action | no ≤ 2 px offset, ≥ 16 px blur, saturation > 0.4 shadow on the primary action or a heading; the same glow on ≥ 2 unrelated elements is reported once, as SLOP-010 | LOW | measured |
+| CF-403 | Hard offset shadow | a zero-blur shadow offset past a hairline, unless the direction records a neo-brutalist register (a `design.lock.json` with `offset` elevation, the `neo-brutalism` house style, records one; without a lock the probe's proxy is the same shadow on ≥ 3 elements that each carry a ≥ 2 px solid border) | MEDIUM | measured |
+| CF-404 | No glow on the primary action | no ≤ 2 px offset, ≥ 16 px blur, saturation > 0.4 shadow on the primary action or a heading; the same glow on ≥ 3 unrelated elements is reported once, as SLOP-010; a glow on a section, panel or the moment (the kit's `ui-glow`) is not a control halo and is never reported | LOW | measured |
 | CF-405 | Neutral image outline | ~1 px, low opacity, saturation < 15 % | LOW | checklist |
 | CF-406 | Solid scrim | no `backdrop-filter: blur` on a full-viewport overlay | LOW | measured |
 | CF-407 | Decorative patterns | grids, halos, marquees and stripes need a real referent (see the slop register) | LOW to MEDIUM | via SLOP rows |

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

@@ -2,10 +2,59 @@
   "schema_id": "litfamily.frontend-default-profile/v1",
   "name": "Field notes / pixel signal",
   "authorship": "Original LitMuse profile outside the immutable library",
-  "hierarchy": ["large editorial title with intentional breaks", "small terminal labels", "broad spacing and thin rules", "asymmetric atmospheric field", "original task-specific pixel-art illustration as the primary visual anchor when the brief gives no visual direction"],
-  "spacing": {"unit_px": 8, "detail_px": 4, "section_desktop_px": [80, 128], "section_mobile_px": [40, 64]},
-  "type": {"display_desktop_px": [56, 104], "display_mobile_px": [36, 56], "latin_leading": [0.95, 1.05], "korean_leading": [1.12, 1.25], "body_leading": [1.5, 1.7]},
-  "palette": {"paper": "#f5f3eb", "ink": "#18272b", "accent": "#c64d2e", "mist": "#b7d8c7"},
+  "hierarchy": [
+    "large editorial title with intentional breaks",
+    "small terminal labels",
+    "a tight editorial rhythm with thin rules, notebook-dot paper and a second accent",
+    "layered surfaces: a colour band, a two-accent wash and one atmosphere glow",
+    "asymmetric atmospheric field",
+    "original task-specific pixel-art illustration as the primary visual anchor when the brief gives no visual direction"
+  ],
+  "spacing": {
+    "unit_px": 8,
+    "detail_px": 4,
+    "section_desktop_px": [
+      72,
+      96
+    ],
+    "section_mobile_px": [
+      40,
+      56
+    ]
+  },
+  "density": {
+    "default": "rich",
+    "calm_only_when": "the request asks for a minimal, calm, quiet or restrained page (미니멀, 차분, 절제), or design-lock.mjs init --density calm; calm restores 64 to 128 px sections, a flat canvas and no glow"
+  },
+  "type": {
+    "display_desktop_px": [
+      56,
+      104
+    ],
+    "display_mobile_px": [
+      36,
+      56
+    ],
+    "latin_leading": [
+      0.95,
+      1.05
+    ],
+    "korean_leading": [
+      1.12,
+      1.25
+    ],
+    "body_leading": [
+      1.5,
+      1.7
+    ]
+  },
+  "palette": {
+    "paper": "#f5f3eb",
+    "ink": "#18272b",
+    "accent": "#c64d2e",
+    "accent_2": "#1d6b68",
+    "mist": "#b7d8c7"
+  },
   "pixel_art": {
     "default_when_unspecified": true,
     "primary_visual_anchor": true,
@@ -19,9 +68,12 @@
     "applies_to": "screens people work in repeatedly, such as admin consoles, analytics views and internal tools, as opposed to pages people 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",
-    "keeps": "the palette, type scale and spacing of this profile"
+    "keeps": "nothing of this palette: work surfaces lock the graphite house style (scripts/design-lock.mjs family default); the pixel art stays a small accent at most"
+  },
+  "responsive": {
+    "minimum_css_width": 320,
+    "rule": "reflow content and line breaks, never crop the title"
   },
-  "responsive": {"minimum_css_width": 320, "rule": "reflow content and line breaks, never crop the title"},
-  "motion": "state changes remain understandable with nonessential motion disabled",
+  "motion": "layered motion is welcome where it explains or delights (see references/motion-guide.md); state changes remain understandable with nonessential motion disabled",
   "precedence": "explicit user direction and existing brand tokens override this default; if the brief names competing visual directions without choosing or delegating one, ask before applying it"
 }

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

@@ -0,0 +1,234 @@
+# House styles, the kit and the design lock
+
+Read this before writing markup for a new page or screen. It replaces the decisions a run used to
+make from scratch every time (typeface, palette, scale, radii, component anatomy, page skeleton)
+with a small closed set that a script writes into the project and the interface probe checks on the
+render. The point is that two runs of the same brief land in the same register at the same level of
+craft; what still varies is the content, the composition inside the skeleton and the accent art. One
+place on every page is allowed to be bold: its signature moment (section 6), declared in the lock and
+checked like the rest.
+
+## 1. Lock the look first
+
+```bash
+FRONTEND_UIUX_SKILL_ROOT="<directory containing the selected installed SKILL.md>"
+node "$FRONTEND_UIUX_SKILL_ROOT/scripts/design-lock.mjs" list
+node "$FRONTEND_UIUX_SKILL_ROOT/scripts/design-lock.mjs" match "<the request>"
+node "$FRONTEND_UIUX_SKILL_ROOT/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 "$FRONTEND_UIUX_SKILL_ROOT/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 this plugin after a sha256 check; nothing is fetched |
+| `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-interview.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
+
+The interface probe 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; `soft` locks leave offsets to CF-403 | 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 also the recorded neo-brutalist register CF-403 asks for, so the
+probe clears CF-403 on a neo-brutalism page; on any other lock a hard offset shadow is still CF-403.
+
+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.
+
+Thresholds live in `scripts/interface-probe-rules.mjs` like every other rule. Never widen a
+tolerance or add an exemption to make a page pass; change the page.
+
+## 4. Look, then fix
+
+After the rule table, a rendered probe run prints the paths 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 "$FRONTEND_UIUX_SKILL_ROOT/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/plugin/skills/frontend-ui-ux/references/motion-guide.md

@@ -2,7 +2,7 @@
 
 Use this guide with the active frontend Design Contract and `references/interaction-motion.md`. Motion decisions belong to named components and states; they do not grant implementation scope. Start with the target page, components, and exclusions. Specify the stack, visual tokens, layers, timing, viewport behavior, reduced-motion path, assets, and performance limits before implementation. Name exact files or components so the work does not invent unrelated sections.
 
-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 default register is rich: layered motion (an atmosphere layer drifting behind the hero, the headline entering, the moment animating its own detail) is welcome when each layer has a job and a budget. A calm page is the opt-in, used when the request asks for a minimal or quiet page or the lock records `density: calm`. Either way, every layer stops under `prefers-reduced-motion: reduce`.
 
 ## 1. Stack, tokens, and composition
 
@@ -49,9 +49,9 @@ Use named curves so a later editor can change the motion family without hunting
 
 ## 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:** Layer motion by depth: a slow atmosphere layer (8 s or longer, transform or opacity only), one entrance sequence per section, and the signature moment's own detail. Up to four elements may move at once when they sit on separate layers and none of them is body text. Keep controls responsive while decorative motion runs, and keep each layer inside the frame budget below.
 
-**Don't:** animate the headline, background, cards, icons, and navigation at once. Remove any motion whose absence does not change comprehension or feedback.
+**Don't:** animate every card, icon and nav item on the same beat, move body text while it is being read, or loop anything faster than three flashes a second (the flash floor stays absolute). Drop a layer that costs the frame budget before dropping the moment.
 
 **Do:** Animate `transform` and `opacity` for routine movement. Target a frame callback below 4 ms so the page has room for layout, paint, and input work within a 60 Hz frame. Check for dropped frames on a mid-range device.