@litfamily/litgrok 1.0.26 → 1.0.28

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

@@ -1,99 +1,262 @@
-# Craft floor and responsive matrix
+# Craft floor, responsive matrix and the probe loop
 
-Use this index when building, polishing, auditing, or hardening an interface. The rule IDs, numeric bounds, and severities below are the family contract; measure the rendered page through `scripts/probe.mjs` and inspect the screenshots before making a verdict. A row marked JUDG needs a human decision. The DOM probe must never turn its own absence of a finding into a pass for that row.
+This reference and `references/slop-register.md` load whenever `frontend-ui-ux` activates, in
+every mode. They are the numbered rule catalogue the interface probe measures and the review
+table cites. Rule ids (`CF-*`, `RS-*`, `SLOP-*`) are stable family ids; cite the id, not a
+paraphrase of the number. Thresholds live once, as data, in `scripts/interface-probe-rules.mjs`;
+the tables below restate them for reading, and the rule table wins if the two ever differ.
 
-Before sampling, discard hidden, closed-disclosure, screen-reader-only, and off-canvas utility nodes. Read the actual computed style and geometry in the target viewport. A contrast estimate over an image or complex gradient is `not_verified` unless the painted pixels can be sampled. A result calculated from observed values is Derived; the observation itself is Measured. Never call either one Inferred. Do not activate controls or open disclosures just for measurement. Count closed content in the review and label its rendered checks `not_verified`.
+## 1. Run the probe
 
-The required run covers 320, 390, 768, and 1440 CSS pixels in the light scheme, 390 in dark mode, 390 with reduced motion, and the 720×450 CSS-pixel reflow approximation of 1440 at 200% zoom. The zoom view is an emulation and must be described as such. A missing width or an unverified rendered check belongs in the Not verified list, never a silent pass.
+Run the probe from the exact installed skill directory against the page you built or were asked
+to review. It accepts an HTML file, a project directory (it prefers `dist/`, `build/` or `out/`
+over an unbuilt source page) or an `http(s)` URL:
 
-## Typography and colour
+```bash
+FRONTEND_UIUX_SKILL_ROOT="<directory containing the selected installed SKILL.md>"
+node "$FRONTEND_UIUX_SKILL_ROOT/scripts/interface-probe.mjs" "<page.html | project dir | URL>" --out "<evidence dir>"
+```
 
-| Rule | Bound or decision | Kind | Severity |
-|---|---|---|---|
-| CF-101 | **Body-text measure (characters per rendered line):** Target 60–75 chars/line (Latin) and 30–45 (CJK-majority, meaning >30% Hangul/CJK code points). A finding (MEDIUM) is raised only when a prose block renders ≥2 lines and its longest line exceeds 90 chars (Latin, the plan's "fail above 90") or 60 chars (CJK). A single-line block never fires (Delta 1; supersedes Conflicts resolved #10's "no 90ch hard-FAIL") | DET | MEDIUM throughout, never HIGH (see calibration: the check over-fires on non-prose containers, and the Latin-glyph `ch` proxy is not a validated fit for CJK-majority copy) |
-| CF-102 | **Heading line-height:** 1.2–1.35 for a normal heading role; a large display/hero heading (≥40–48px) may run as tight as 1.05, exempt from the 1.2 floor (see Conflicts resolved #1) | DET | MEDIUM, only once the heading element itself renders ≥2 visual lines |
-| CF-103 | **Body line-height:** A finding (MEDIUM) is raised when a ≥2-line body block is below 1.4 (Latin) or 1.5 (CJK-majority). 1.5 Latin and 1.6 CJK remain the recommended targets and raise nothing. No upper bound (Delta 1; the calibrated DET floor was 1.4, and 1.5/1.6 were never calibrated as fail lines — see Conflicts resolved #2) | DET | below floor: MEDIUM |
-| CF-104 | **Wrapped-row line-height floor:** ≥1.4 whenever a column can wrap to 3+ lines, even in a dense layout | DET | MEDIUM |
-| CF-105 | **Balanced headings, no stranded last word:** Heading uses a balancing wrap mode (sourced, DET); body avoids an orphaned short last line (unsourced numeric proxy, JUDG) | DET (wrap-mode presence); JUDG (orphan call) | LOW |
-| CF-106 | **Tabular figures for aligned/updating numbers:** Any numeric table column, KPI, or in-place-updating number uses tabular figures | DET | LOW–MEDIUM |
-| CF-107 | **Sentence case for UI labels:** Button, nav, and form-control labels use sentence case, not Title Case | DET | LOW |
-| CF-108 | **Type-role and family ceiling:** ≤7 named type roles; ≤2 body/display families + 1 mono, a 3rd family needs a recorded exception | DET census, JUDG verdict | MEDIUM if exceeded with no recorded exception |
-| CF-109 | **Weight floor by size:** Below 18px stay at weight ≥400; weights 100–300 are display-only at ≥28px | DET | MEDIUM |
-| CF-201 | **WCAG contrast floor:** Body/small text 4.5:1; text ≥24px (or ≥18.5px bold, per krehel contrast.md's 14pt≈18.5px rounding — not 19px) and UI-component boundaries/icons/focus rings 3:1. Text inside a disabled control (`:disabled`, `aria-disabled="true"`) is skipped, per WCAG 1.4.3's inactive-component exception. Placeholder contrast is owned by CF-807 alone | DET | body below floor: HIGH; large-text/component tier below floor: MEDIUM |
-| CF-202 | **Focus-indicator thickness and contrast:** Focused and unfocused computed styles must differ in at least one of outline, box-shadow, border or background-color. Read them only after `el.matches(':focus-visible')` is confirmed true; if it is false, report `not_verified`. A computed `outline-style: auto` is the browser's own two-tone ring and passes the thickness and contrast checks outright, because its computed `outline-width` (1px) is not its painted width. A custom ring should be ≥2px and ≥3:1 against the resolved background just outside it | DET | HIGH only when nothing changes on focus (no visible indicator, MD-011 #2); MEDIUM when a custom ring exists but is under 2px or under 3:1 |
-| CF-203 | **APCA advisory layer:** Body Lc 75 min / 90 preferred; non-body Lc 60/75; large (≥36px) Lc 45/60; UI components Lc 30 floor | DET computation, JUDG weight (advisory, never blocks alone) | informational annotation on a CF-201 finding |
-| CF-204 | **Contrast against an image or gradient background:** Sampled worst-case region must still clear CF-201's floor | DET (derived for a CSS gradient; an image only through the optional same-origin canvas upgrade, else `not_verified`) | HIGH if the sampled region fails |
-| CF-205 | **One accent colour per view:** At most one high-saturation hue used for interactive emphasis in a single rendered view | JUDG with DET-assist histogram | MEDIUM |
-| CF-206 | **Hue tolerance for "one meaning":** Two accent/status hues within 15° of each other count as the same semantic colour | DET | LOW |
-| CF-207 | **Status never carried by colour alone:** A state/status indicator pairs colour with text, icon, or pattern | JUDG with DET-assist | HIGH (auto-HIGH) |
-
-## Spacing and surfaces
-
-| Rule | Bound or decision | Kind | Severity |
-|---|---|---|---|
-| CF-301 | **On-scale spacing:** A computed padding, gap or margin value is on-scale when it is within ±1px of a multiple of 4px. Values under 4px (hairline adjustments) are skipped, and so are equal (±1px) left and right margins on a block narrower than its parent, since those are resolved `margin: auto` | DET | 1–3 distinct off-scale values in a view: LOW; more than 3: MEDIUM |
-| CF-302 | **Grouping ratio:** Inter-group gap ≥2× intra-group gap | DET | MEDIUM |
-| CF-303 | **Adjacent-element breathing room (non-interactive visual grouping):** ≥12px between bordered/filled visual blocks; ≥24px around borderless blocks and between unrelated groups — scoped to non-interactive grouping/whitespace rhythm | DET | MEDIUM |
-| CF-304 | **Heading spacing asymmetry:** Target: more space above a heading than below it (≈2× per current composition.md). DET fail line: a clear inversion only — above < 0.75× below AND below − above ≥12px; equal spacing is not flagged | DET | LOW |
-| CF-305 | **Full-width control inset:** A full-width primary control stays inset from the viewport edge (≈16px), not flush | DET | LOW |
-| CF-306 | **Prefer container `gap` over sibling margins:** A repeated group's rhythm comes from the parent's `gap`, not per-child margin | JUDG | LOW |
-| CF-401 | **Concentric radius:** Inner radius ≈ outer radius − padding, tolerance ±2px (Delta 1 adopts §C.3's gating; see the corrected Conflicts resolved #5). Both radii are capped at `min(width, height)/2` before comparing; the pair is compared only where the child's box reaches the parent corner being compared; skipped once the parent's padding exceeds 24px | DET | LOW |
-| CF-402 | **Elevation declared once:** A surface's border and its own shadow do not duplicate the same edge: flag only a hard, near-zero-blur shadow (≤2px) tracing the same boundary a border already draws (the "ghost card" pattern), not any border-plus-soft-shadow pairing | DET | LOW |
-| CF-403 | **No hard offset shadow outside a declared register:** `box-shadow` with ≈zero blur and a large solid offset is banned unless the page's recorded visual register explicitly calls for it | JUDG (register-dependent) | MEDIUM |
-| CF-404 | **No glow/bloom on primary actions:** One glow test shared with SLOP-010: a `box-shadow`/`filter: drop-shadow` with offset ≤2px, blur ≥16px and shadow HSL saturation >0.4 (the earlier "1.5× shorter side" test is dropped). Each glowing element is reported once: under SLOP-010 when the same glow recurs on ≥2 unrelated elements, otherwise here at LOW (a single glowing heading is also reported here, per that split) | DET | LOW |
-| CF-405 | **Neutral image outline:** A ~1px low-opacity, near-achromatic outline around photographic imagery | DET | LOW |
-| CF-406 | **Solid modal scrim:** A modal backdrop is solid or near-solid, not `backdrop-filter: blur` | DET | LOW |
-| CF-407 | **Undecided decorative patterns:** A grid/dot background, radial halo, marquee, or pseudo-element stripe with no real content referent | DET presence, JUDG "real referent" | LOW–MEDIUM |
-
-## Motion, icons, targets, and copy
-
-| Rule | Bound or decision | Kind | Severity |
-|---|---|---|---|
-| CF-501 | **Named token set kept:** `enter` 420ms `cubic-bezier(0.16,1,0.3,1)`; `ui` 180ms `cubic-bezier(0.2,0.8,0.2,1)`; `exit` 160ms `cubic-bezier(0.4,0,1,1)` | DET | LOW (drift from the set) |
-| CF-502 | **Press feedback:** Scale to 0.96 over 150ms, ease-out; never below 0.95 | DET | LOW |
-| CF-503 | **Entrance scale floor:** An entrance transform never starts at `scale(0)`; it starts at ≥0.95 — this floor does not apply to an icon-swap cross-fade, which follows its own transition instead | DET | MEDIUM |
-| CF-504 | **Exit shorter than entrance, same path reversed:** Exit duration < entrance duration; same movement axis, reversed | DET | LOW |
-| CF-505 | **No spring bounce on feedback motion:** Overshoot/bounce stays at 0 for toggle/toast/press feedback | DET where a curve is inspectable, else JUDG from a recording | MEDIUM |
-| CF-506 | **High-frequency interaction ceiling:** A routinely-repeated interaction stays ≤150ms or instant | DET | LOW |
-| CF-507 | **`will-change` restricted:** Only `transform`/`opacity`/`filter`, only while the animation is running | DET | wrong property: LOW; left on at rest: MEDIUM |
-| CF-508 | **No layout-triggering continuous animation:** `width`/`height`/`padding`/`margin` are not animated continuously; `transform`/`opacity` are used instead, except a deliberate scoped `all` | DET | MEDIUM |
-| CF-509 | **Reduced-motion path stays functional:** Every motion-gated state, label, and control stays reachable with `prefers-reduced-motion: reduce` forced | DET (media query applies), JUDG (meaning preserved) | HIGH if a control/state becomes unreachable |
-| CF-510 | **Slow-motion replay check before sign-off:** No numeric threshold — a checklist judgment call | JUDG | LOW |
-| CF-601 | **Single-system stroke discipline:** One grid (24px), one stroke weight per icon set; a set that ships weight variants may match a variant to adjacent text weight (regular↔lighter, semibold/bold↔heavier) | JUDG (system-level) | MEDIUM if two unrelated icon families appear on one surface |
-| CF-602 | **Icon-to-text relative sizing:** Icon ≈1–1.25× adjacent text's cap-height; legible at a 16px minimum render | DET | LOW |
-| CF-603 | **Icon-only controls stay named and never solo on a destructive action:** Every focusable control (button, `a[href]`, input, select, textarea, `[role=button\|link\|checkbox\|radio\|switch\|tab\|menuitem]`, `[tabindex≥0]`) has a non-empty computed accessible name (from text, `aria-label`, `aria-labelledby`, an associated label, `title`, or a contained img's `alt`) — widened in Delta 1 so MD-011 #1 has a measuring rule; decorative icons are hidden from assistive tech; a destructive action is never icon-only with no label | DET | HIGH for any focusable control with an empty accessible name, and for a destructive icon-only control |
-| CF-604 | **Optical alignment over bounding-box alignment:** Icon-side padding runs ≈2px tighter than text-side padding in the same control | JUDG | LOW |
-| CF-701 | **Hit-area floor and recommendation:** Coarse pointer ≥44×44px recommended; 24×24px is the WCAG 2.5.8 AA floor: a target below it fails unless WCAG 2.5.8's spacing exception holds (a 24px-diameter circle centred on the target's box intersects no other target's box or circle). Touch-primary is decided by viewport width, not the `pointer` media feature (emulated viewports leave `(pointer: coarse)` false): widths ≤768 (320, 390, 768 and the 720 zoom pass) are touch-primary, 1440 is fine-pointer. On a touch-primary width, 24–44px is MEDIUM for a non-primary control (never a silent pass) and HIGH for a primary action — the form's sole `type=submit` button, or the first filled button or button-styled link inside the first viewport (a narrower, fully mechanical form of the heuristic §C.3's CF-404 row uses); at 1440 a 24×24px target passes. The same width rule governs CF-702, CF-703 and RS-008 | DET | below 24px without the spacing exception: HIGH (FAIL); 24–44px primary action on a touch-primary width: HIGH; 24–44px non-primary on a touch-primary width: MEDIUM; 24–44px at 1440: pass |
-| CF-702 | **Neighbour clearance by pointer class:** ≥8px clear space between coarse-pointer targets' expanded areas; ≥4px for fine-pointer | DET | MEDIUM |
-| CF-703 | **Destructive controls keep the coarse minimum everywhere:** 44×44px floor applies to a destructive control even on a fine-pointer surface (the 1440 width, per CF-701's width rule) | DET | HIGH if violated |
-| CF-704 | **Hover/drag-only actions expose a discrete alternate control:** Any action reachable only by hover, drag, or long-press also has a tap/keyboard-reachable equivalent | DET (stylesheet scan), else JUDG | HIGH (auto-HIGH: pointer-only-reachable control) |
-| CF-801 | **Verb-first, plain-word action labels:** A button/action label leads with a verb and avoids jargon | JUDG | LOW–MEDIUM |
-| CF-802 | **Tone calibrated by stakes:** Warm for success/onboarding/empty; neutral for routine/settings; calm for errors/destructive; serious for data-loss/security | JUDG | checklist item |
-| CF-803 | **Errors name what happened and how to recover:** A vague denylisted phrase with no further detail fails | DET assist + JUDG | MEDIUM |
-| CF-804 | **One capitalization policy:** Sentence case throughout, or a documented exception list | DET | LOW |
-| CF-805 | **Toggle labels state the ON condition:** A setting label describes what turns on, not a bare noun | JUDG | checklist item |
-| CF-806 | **Placeholders are examples, never the only label:** A real `<label>`/`aria-label` exists beside any placeholder; no bracket-instruction placeholder text | DET | MEDIUM (label-only-via-placeholder is also an accessibility escalation) |
-| CF-807 | **Placeholder contrast meets the same floor:** ≥4.5:1 against the field's own background (cross-ref CF-201) | DET where the pseudo-element style is inspectable, else `not_verified` | MEDIUM |
-
-## Responsive and adaptive checks
-
-The driver owns matrix completion. The in-page probe owns the visible defect at each view. Fix a content failure where the content breaks, and record a cue-gated RTL or harden pass as inapplicable only with a reason.
-
-| Rule | Bound or decision | Kind | Severity |
+What it does, in order:
+
+1. Asks the `browser-drive` capability probe for a verified `agent-browser`. It never installs,
+   downloads or updates a browser. A missing, unidentified or uncleaned driver is a `BLOCKED`
+   run, not a pass.
+2. Serves a local page from `127.0.0.1` on a free port (never `file://`), then opens it once per
+   matrix row: 320, 390, 768 and 1440 px in light mode; 390 px dark; 390 px with reduced motion;
+   and 1440 px at 200 % zoom, emulated as a 720 × 450 CSS px viewport at double scale
+   (`zoom_emulation: viewport-halved`, which reproduces reflow but not zoomed text rasterising).
+3. Waits 1200 ms, checks that the page finished loading (one extra wait, then the viewport is
+   recorded as not settled), runs the in-page measurement module, and saves one screenshot per
+   row under `<evidence dir>/screenshots/`. At 1440 px it then hovers up to five repeated list
+   controls for real (CF-506). It never clicks, presses or submits anything; `alert`, `confirm`
+   and `prompt` are stubbed before the first read, and content behind closed disclosures is
+   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
+missing row); **2** `BLOCKED: <reason>` on one line (`browser unavailable`, `browser identity
+unverified`, `browser cleanup failed`, `no entry page found`, `matrix incomplete (<rows>)`). A
+`not_verified` finding never sets exit 1. A blocked run still reads the source files for the
+rules a file can show on its own (a literal match keeps its own tier, with `viewport: static` and
+a `file:line`), and lists every rendered rule under "Not verified". Say `BLOCKED` in the reply;
+never describe it as a pass.
+
+Rules marked *judgment* below are DET-assist: a hit is printed under "Judgment calls" as a
+candidate, never as a finding, and its severity applies only after you confirm it with a stated
+reason (tag it Inferred).
+
+Budget: at most 20 s per viewport and 180 s per run; 12 findings per rule per viewport; 3,000
+elements and 4,000 characters of copy sampled; five controls per viewport for the focus, press
+and hover samples. A viewport the budget skips is not verified.
+
+## 2. The loop
+
+Every mode that edits runs the same loop:
+
+```
+build (or baseline) -> probe -> fix -> probe -> fix -> probe -> fix -> final probe
+                      \__________ at most three fix rounds __________/
+```
+
+- **Fix in the cheaper order.** Delete the offending element or rule first; then use a platform
+  feature instead of custom code; then reuse a token or component the project already has; then
+  correct the value in place; add new code last.
+- **Re-run the whole probe** after each round, not only the rules you touched. A fix that clears
+  one HIGH and adds another is caught by the same battery.
+- **HIGH blocks "done".** Fix every HIGH first, then MEDIUM. A HIGH still present after three
+  rounds may only ship as a limitation stated once in the reply, with its reason (for example
+  "hero heading over a photograph, CF-204 not verified, no safe repaint"). MEDIUM and LOW never
+  block by themselves.
+- **Thresholds do not move.** Never edit a number, add an exception or change a fixture to make a
+  page pass; fix the page or state the limitation. A reviewer's or judge's wording never drives a
+  fix round.
+- **Tier every claim.** *Measured* means read straight off the render (a computed style, a
+  bounding box, a scroll width). *Derived* means computed from measured values (a WCAG ratio from
+  two sampled colours) or read through a named approximation (a stylesheet `:active` rule instead
+  of a real press). *Inferred* is a judgment (every `judgment:` note and every checklist row
+  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. Answer its LOOK-1 to LOOK-6 questions in one line
+  each, fix the two worst, and stop after two look rounds.
+
+## 3. Modes
+
+`build` is the default. The other three are opt-in by wording and nest inside this skill's
+existing mode matrix: `polish` and `harden` are scoped kinds of `build`; `audit` is a probe-driven
+kind of the read-only review row.
+
+| Mode | Edits | Probe | Deliverable |
 |---|---|---|---|
-| RS-001 | **Canonical probe viewport set:** Base pass runs at exactly four widths: 320, 390, 768, 1440px, light scheme, motion enabled | DET | run completeness: a missing width sets exit `2` (§C.5, `BLOCKED: matrix incomplete`), never a HIGH finding |
-| RS-002 | **390px dark-mode pass:** Re-run 390px with the dark colour scheme active (real toggle, not a filter) | DET | run completeness: an unrun dark pass sets exit `2` (§C.5), never a HIGH finding and never a silent pass; once the pass ran: MEDIUM when no dark path is found or it adds new HIGH contrast findings (those findings keep CF-201's own severity) |
-| RS-003 | **Reduced-motion pass:** One pass at minimum at 390px with `prefers-reduced-motion: reduce` forced | DET (query honoured), JUDG (meaning preserved) | HIGH if a control/state becomes unreachable |
-| RS-004 | **1440px at 200% zoom emulation:** Re-run 1440px at an effective content width of ≈720 CSS px | DET | HIGH if the zoom pass shows page-level overflow (RS-006) or clipped text (RS-007) |
-| RS-005 | **Content-derived breakpoints:** A structural layout change (reflow/stack/collapse/reveal/defer/relocate/freeze) sits at the width real content first breaks, never an unexamined framework default | JUDG, DET-assisted (low-confidence advisory only — see note) | LOW, informational, alongside a finding rather than an equal-weight MEDIUM |
-| RS-006 | **No page-level horizontal overflow:** `scrollWidth ≤ innerWidth + 8` at every RS width (the calibrated tolerance §C.2 and MD-011 #14 use; a clean reference overflows by 6px at 320 with no visible defect) (an intentional scroll region needs its own visible affordance, see RS-010) | DET | HIGH (auto-HIGH: page-level horizontal scroll) |
-| RS-007 | **No unintentional clipped/overlapping text:** Text is not cut by a clipping ancestor unless a deliberate `line-clamp`/`text-overflow` is declared — the declared property alone is a sufficient, self-contained exception and does not itself require a separate "show full text" affordance | DET | clipped or offscreen text: HIGH; overlapping text pairs: MEDIUM (§C.3's split; no probe can classify content as "primary" or "secondary/metadata") |
-| RS-008 | **Mobile input font-size floor:** Text-entry controls render ≥16px on a touch-primary width (≤768: 320, 390, 768 and the 720 zoom pass, per CF-701's width rule), or use a documented compensating-scale technique (which keeps a 16px computed `font-size` and so passes the same read) | DET | MEDIUM |
-| RS-009 | **Safe-area-aware offsets:** A control fixed to a physical edge adds `env(safe-area-inset-*)` rather than a bare fixed offset; nothing interactive sits under a notch/home-indicator region. Applies only when `<meta name="viewport">` includes `viewport-fit=cover` (without it the UA keeps content inside the safe area and a bare offset is correct) | DET where the CSS is inspectable, else JUDG from a device screenshot | MEDIUM |
-| RS-010 | **Horizontal-scroll peek:** A scrollable rail with no other visible scroll cue (prev/next controls, pagination dots/tabs, a position counter) reveals 16–32px of the next off-screen item rather than ending flush | DET | LOW |
-| RS-011 | **RTL pass gated by content:** An RTL/bidi mirror check runs only when the brief's real content or shipped locales include an RTL script; logical CSS properties are used throughout so the gated pass is mostly a `dir="rtl"` toggle | JUDG (the gate), DET (the logical-property audit once gated in) | MEDIUM if a physical-direction property appears where the gate says RTL applies |
-| RS-012 | **Re-check discipline across states:** A finding recorded at one viewport/theme/zoom state is re-sampled at a second state before being reported as a stable pass | JUDG (procedural) | downgrades a lone-state pass to `not_verified`, not a hard fail |
-
-## Apply findings
-
-Prioritize broken access, contrast, reachable content, and page overflow before aesthetic advisories. A HIGH finding blocks a clean completion claim until fixed or explicitly stated as a limitation with a reason. Keep the evidence tied to the exact viewport and build revision; never retune a threshold to make a run pass. For mechanics that depend on human intent, record an Inferred judgment beside the measured signal rather than claiming the signal proves the verdict.
+| `build` | Full authoring of the requested surface | At least the final round; after every round is better | Working source, the inspected matrix, the review table, a tiered summary |
+| `polish` | Values only (spacing, colour, radius, type size, a motion token); no new component, no changed layout or information architecture | Once as a baseline, once after the fixes | A value-only diff and the before and after tables |
+| `audit` | None, not even a "quick" fix | The probe run is the deliverable | The review table, the Not verified list and the Block or Approve line |
+| `harden` | Only to repair a break the stress pass found; three rounds at most | At every harden axis that applies | A table per axis with the columns Scenario, Observed and Owner, plus the fixes |
+
+Mode words (the hook names the mode it detected; the wording and the boundary decide together):
+
+- `polish`: *polish*, *clean up the styling*, *tighten up*, *다듬어*, or an explicit "keep the
+  layout / 구조는 그대로" scope, when the object is an interface surface. A request that asks for
+  a new component or a changed layout under polish wording is a `build`.
+- `audit`: *audit*, *read-only*, *just check*, *tell me what's wrong*, *점검*, *검토만* on an
+  interface surface, with no fix requested in the same breath. The route words alone select it;
+  no memory of earlier work is needed. `audit` produces the review table as evidence and hands
+  the acceptance verdict to `visual-qa`; it never issues that verdict itself. A request that only
+  needs proof and carries no audit word still belongs to `visual-qa` directly.
+- `harden`: *harden*, *stress-test*, *hold up under / with*, *robust to*, *튼튼하게*,
+  *견고하게* on an interface surface.
+- Never widened toward video, 영상, 모션 or 발표 wording; those belong to other skills. Prose,
+  documents, servers and pipelines never trigger polish, audit or harden.
+
+**Harden axes.** Name each axis and either run it or write "not applicable: <reason>":
+content length (empty, one word, typical, several sentences, one unbreakable string); content
+shape (emoji, right-to-left, mixed direction, diacritics and tall scripts, aligned numbers);
+quantity (zero, one, realistic, about ten times realistic); container (320 px, squeezed by a
+sibling, very wide); state (loading, error, disabled); environment (dark mode, zoom, reduced
+motion, each toggled live).
+
+## 4. Review format
+
+One table, exact column order, every row a real measurement:
+
+| Severity | Rule | Where | Measured | Fix |
+|---|---|---|---|---|
+| HIGH, MEDIUM or LOW | a `CF-*`, `RS-*` or `SLOP-*` id | `selector @ viewport` (or `file:line` for a static finding) | the read value and its tier, e.g. `2.9:1 [derived]`, `18×18px [measured]` | the cheapest fix; only `build`, `polish` and `harden` may apply it |
+
+Then a **Not verified** list naming every rule that did not run and why (blocked browser, image
+under text, another element painted over text, cross-origin stylesheet or iframe, closed
+disclosures, a lazy image not fetched, a harden axis without a cue). A rule missing from both the table and the list is a defect in the review itself. End with
+**Block** (a HIGH remains that is neither fixed nor stated as a limitation) or **Approve**.
+
+These HIGH/MEDIUM/LOW labels only grade probe findings. When a finding moves into
+`references/evidence-review.md` or `references/inclusive-interface.md`, a HIGH maps to at least
+P1 or S2 there; the probe does not rename those ladders. The table is evidence for `visual-qa`,
+never its verdict.
+
+**Always HIGH once confirmed**, never downgraded for a small surface or a prototype: a control
+with no accessible name; a keyboard-reachable control with no visible focus; a pointer-only
+control; motion that ignores reduced motion; content clipped, overlapped or unreachable at 320 px
+or 200 % zoom; text under its contrast floor; page-level sideways scrolling; a fake text, nav or
+call-to-action link (`href="#"`, `javascript:`; a logo or icon-only social link is MEDIUM); a
+scroll rail whose next item shows 0 px with no controls, pager or fade. Four more are judgment calls, stated as *Inferred*: meaning carried
+by colour alone; a destructive action with no confirmation or undo; an error that names no way to
+recover; a semantic colour token used for an unrelated meaning. Truncated text is HIGH only when
+the hidden value is needed for a task. The probe opens nothing; open drawers, accordions, tabs and
+dialogs yourself before calling content unreachable.
+
+**Reviewing a change.** Read the removed side of each hunk first: a dropped `aria-label`,
+`aria-labelledby` or `role`; a `button`, `nav` or `label` turned into a `div`; a removed
+`:focus-visible` rule, outline or `tabindex`; a token swapped for a literal colour; a shortened
+user-facing string; a removed `prefers-reduced-motion` guard; a `will-change` left behind. Each
+one re-opens the matching always-HIGH item until the added side restores it.
+
+## 5. Responsive matrix (RS)
+
+| Id | Rule | Threshold | Severity | Probe |
+|---|---|---|---|---|
+| RS-001 | Canonical widths | 320, 390, 768, 1440 px light, all recorded in `viewports_run` | run completeness: a missing row is `BLOCKED: matrix incomplete`, never a finding | driver |
+| RS-002 | Dark pass at 390 px | a real dark path with mean surface luminance < 0.35, and no new HIGH contrast finding against the light 390 pass; a page whose only dark path is a theme control is not verified (the probe never clicks it) | MEDIUM once the pass ran; an unrun pass is exit 2 | measured (derived for "no dark path") |
+| RS-003 | Reduced motion at 390 px | the query matches, videos paused, no transition or animation over 250 ms per iteration on a motion property (transform, translate, scale, rotate, offsets, inset, size, margin, background-position, `all`); opacity and colour fades and progress or status motion are exempt | HIGH | measured |
+| RS-004 | 1440 px at 200 % zoom (720 CSS px) | RS-006 and RS-007's clipped and offscreen checks re-run there (overlap there stays RS-007) | HIGH | derived |
+| RS-005 | Content-derived breakpoints | a layout change sits where content breaks, not at a bare framework default | LOW, advisory | checklist |
+| RS-006 | No page-level sideways scroll | `scrollWidth ≤ innerWidth + 8px` at every row | HIGH | measured |
+| RS-007 | No clipped, offscreen or overlapping text | nothing cut without `text-overflow` or a line clamp (prefixed or not); no text past the viewport's side edges by more than 8 px outside a sideways scroller (below the fold never counts); overlap < 0.45 of the smaller box; only elements with their own text, accessibility-only spans excluded | clipped or offscreen HIGH; overlap MEDIUM | measured |
+| RS-008 | Mobile input text | text-entry controls (text-like inputs, `textarea`, `select`, `contenteditable`) ≥ 16 px on touch widths (≤ 768 px, the zoom row included) | MEDIUM | measured |
+| RS-009 | Safe-area offsets | only with `viewport-fit=cover`: a fixed or sticky control touching an edge carries `env(safe-area-inset-<edge>)` in its authored offset or padding | MEDIUM | derived (authored declarations; a cross-origin sheet is not verified) |
+| RS-010 | Scroll-rail peek | 16 to 32 px of the next item visible, required only when the rail has no prev/next control, pager, tab or counter | LOW; HIGH when the next item shows 0 px with no cue or fade | measured |
+| RS-011 | RTL pass | only when real content or locales are right-to-left; logical properties throughout | MEDIUM | checklist |
+| RS-012 | Re-check at a second state | a lone-state pass is not verified until re-sampled at another width, theme or focus | downgrade only | checklist |
+
+## 6. Craft floor (CF)
+
+Every DOM rule samples only what a person can see: `checkVisibility`, no accessibility-only
+1 × 1 or `clip` spans, nothing parked off canvas.
+
+**Typography**
+
+| Id | Rule | Threshold | Severity | Probe |
+|---|---|---|---|---|
+| CF-101 | Body measure | target 60 to 75 characters per line; flagged when a prose block of two or more lines has a longest line over 90 (Latin) or 60 (CJK-majority) in real prose (`p`, long `li`, `blockquote`, `dd`, long `td`; never `nav`, footer or tickers) | MEDIUM, never HIGH | derived |
+| CF-102 | Heading line-height | 1.2 to 1.35 once a heading wraps to two lines; display type ≥ 40 px may go to 1.05 | MEDIUM | measured |
+| CF-103 | Body line-height | flagged below 1.4 (Latin) or 1.5 (CJK) on wrapped prose; 1.5 and 1.6 are the targets; no upper bound | MEDIUM | measured |
+| CF-104 | Wrapped-row floor | ≥ 1.4 for anything that wraps to three or more lines | MEDIUM | measured |
+| CF-105 | Balanced headings | a heading that wraps uses `text-wrap: balance` (`pretty` suits body); a last line under 20 % of the mean of the lines before it is a judgment candidate | LOW | measured; orphans judgment |
+| CF-106 | Tabular figures | numeric table columns and KPIs use `tabular-nums` or `tnum` (monospace passes) | LOW | measured |
+| CF-107 | Sentence case | buttons, links, labels and tabs are not Title Case: every content word after the first capitalised; labels mostly in uncased scripts (Hangul, kana, CJK) are skipped; function words, 2 to 5 letter acronyms, inner capitals, digits and the page's own brand words are exempt; one-word labels never fire | LOW (derived when only one word is capitalised) | measured |
+| CF-108 | Type roles and families | ≤ 7 roles (first family, size to 1 px, weight bucket, form controls excluded) at 390 px; ≤ 2 families plus 1 mono | MEDIUM | judgment (a recorded exception clears it) |
+| CF-109 | Weight by size | ≥ 400 below 18 px; 100 to 300 only for display ≥ 28 px | MEDIUM | checklist |
+
+**Colour and contrast**
+
+| Id | Rule | Threshold | Severity | Probe |
+|---|---|---|---|---|
+| CF-201 | WCAG 2 contrast | 4.5:1 body; 3:1 for text ≥ 24 px or ≥ 18.5 px bold, and for component edges; background read from the paint stack under the text; disabled controls skipped; another element painted on top is not verified; placeholders belong to CF-807 | HIGH body, MEDIUM large | derived |
+| 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 | 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) |
+
+**Spacing and surfaces**
+
+| Id | Rule | Threshold | Severity | Probe |
+|---|---|---|---|---|
+| CF-301 | One spacing scale | padding, gap and margin within ±1 px of a 4 px multiple; values under 4 px and centred auto margins skipped | LOW for 1 to 3 off-scale values, MEDIUM above | measured |
+| CF-302 | Grouping ratio | gap between groups ≥ 2 × the gap inside a group | MEDIUM | checklist |
+| CF-303 | Room between blocks | ≥ 12 px between bordered or filled blocks, ≥ 24 px around borderless ones (non-interactive only) | MEDIUM | checklist |
+| CF-304 | Heading rhythm | target about twice the space above a heading as below; flagged only on a clear inversion (above < 0.75 × below and 12 px short), measured on rendered boxes; a heading that opens a card is not scored | LOW | measured |
+| CF-305 | Full-width control inset | about 16 px from the viewport edge at 320 and 390 px | LOW | checklist |
+| 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 (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 |
+
+**Motion**
+
+| Id | Rule | Threshold | Severity | Probe |
+|---|---|---|---|---|
+| CF-501 | Motion tokens | `enter` 420 ms, `ui` 180 ms, `exit` 160 ms as `references/motion-guide.md` defines | LOW | checklist |
+| CF-502 | Press feedback | the `:active` rule scales to 0.95 to 0.96 over ≤ 150 ms, read from the stylesheet (never pressed) | LOW | derived; no readable rule is not verified |
+| CF-503 | Entrance scale | an entrance starts at ≥ 0.95 scale, never from 0 (icon cross-fades excepted) | MEDIUM when running, LOW when only declared; never HIGH | measured or derived |
+| CF-504 | Exit shorter than entrance | same path reversed | LOW | checklist |
+| CF-505 | No bounce on feedback | cubic-bezier y values and `linear()` stops inside −0.1 to 1.1, also on running Web Animations; an `animation-name` token bounce, elastic, wobble, jiggle or spring (a per-frame script spring stays invisible to the probe) | MEDIUM | measured (derived for a name) |
+| CF-506 | High-frequency motion | ≤ 150 ms for controls repeated ≥ 5 times in a list, table or scroller, read after a real hover at 1440 px | LOW | measured |
+| CF-507 | `will-change` | only `transform`, `opacity`, `filter` (state rules included), only while animating; "at rest" read in the resting pass only | LOW; MEDIUM at rest | measured |
+| CF-508 | No layout animation | never animate width, height, padding, margin or offsets (disclosure height excepted) | MEDIUM | measured |
+| CF-509 | Reduced-motion path works | every state and control stays reachable with reduce on | HIGH | via RS-003 plus judgment |
+| CF-510 | Slow replay | replay entrances and feedback slowly before sign-off | LOW | checklist |
+
+**Icons, targets, microcopy**
+
+| Id | Rule | Threshold | Severity | Probe |
+|---|---|---|---|---|
+| CF-601 | One icon system | one grid, one stroke weight per set | MEDIUM | checklist |
+| CF-602 | Icon size | about 1 to 1.25 × the adjacent cap height, legible at 16 px | LOW | checklist |
+| CF-603 | Named controls | every focusable control, `[tabindex]` ≥ 0 included, has an accessible name; never an unlabeled destructive icon | HIGH | measured |
+| CF-604 | Optical alignment | icon-side padding about 2 px tighter | LOW | checklist |
+| CF-701 | Target size | < 24 px HIGH unless the WCAG 2.5.8 spacing exception holds; under 44 px on touch widths (≤ 768 px) MEDIUM, HIGH for the primary action (a form's sole submit, or the first filled button or button link in the first viewport); inline prose links exempt | HIGH or MEDIUM | measured |
+| CF-702 | Target clearance | ≥ 8 px between touch targets (≤ 768 px), ≥ 4 px at 1440 px | MEDIUM | measured |
+| CF-703 | Destructive targets | 44 px on every pointer type | HIGH | measured |
+| CF-704 | Pointer-only actions | no control revealed only by an ancestor `:hover` rule without a matching `:focus-within` or `:focus-visible` reveal; other drag and long-press cases are judgment | HIGH | measured (stylesheet); rest Inferred |
+| CF-801 | Verb-first labels | actions start with a verb in plain words | LOW to MEDIUM | checklist |
+| CF-802 | Tone by stakes | warm for success, neutral for routine, calm for errors, serious for data loss | checklist | checklist |
+| CF-803 | Useful errors | say what happened and how to recover | MEDIUM | checklist |
+| CF-804 | One capitalisation policy | sentence case throughout, or a written exception list | LOW | via CF-107 |
+| CF-805 | Toggle labels | name the state that turns on | checklist | checklist |
+| CF-806 | Real labels | a placeholder is never the only label | MEDIUM | measured |
+| CF-807 | Placeholder contrast | ≥ 4.5:1 against the field | MEDIUM | derived |
+
+A *checklist* row has no DET method in this probe; review it by eye and tag the claim Inferred.
+The office and diagram skills carry their own subset of these rules in their QA scripts.

package/.grok/skills/frontend-ui-ux/references/creative-directions.md

@@ -2,16 +2,12 @@ Explore direction only after the critical task, success signals, and surface lis
 
 ## Close the brief before exploring
 
-Write the fixed constraints first so exploration terminates.
-
 - Critical task, the two frequent secondary tasks, and return frequency.
 - Immovable inputs: existing tokens, approved marks, locales, viewport bands.
 - Direction count: 3, never more than 4.
 
 ## Read the archetype set
 
-Each archetype is neutral. Pick by which risk this product can absorb, not by taste.
-
 1. Editorial grid — modular columns, visible rules, one restrained accent. Risk: every block weighs the same; no focal point.
 2. Reduced utility — near-monochrome, one accent, large gutters, few borders. Risk: interactive and static elements look alike.
 3. Humanist soft — rounded radii, humanist sans, warm neutrals, low elevation. Risk: casual where the task is financial or clinical.
@@ -23,8 +19,6 @@ Each archetype is neutral. Pick by which risk this product can absorb, not by ta
 
 ## Blend with one base and one guest
 
-Two archetypes at equal weight produce mush. Subordinate one of them explicitly.
-
 - The base owns grid, spacing scale, radius, and density; it is not renegotiated.
 - The guest contributes exactly one dimension: type, color, or surface treatment.
 - A second import is not a refinement; it is a third direction.
@@ -69,3 +63,12 @@ Selection ends exploration. Rejected work stays readable so the decision is not
 - Keep each rejected `direction_id` with a one-line reason.
 - Freeze before token work; a later change needs an `accepted_exceptions` entry with owner and expiry.
 - Record the design contract hash the independent review pass binds its receipt to.
+
+## Failure patterns
+
+Reject:
+
+- Directions differing only in accent hue or corner radius.
+- A blend with two imported dimensions and no owning base.
+- "Modern", "clean", or "premium" standing in for a decision.
+- A direction with no kill condition, which can never be wrong.

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

@@ -0,0 +1,28 @@
+{
+  "schema_id": "litfamily.frontend-default-profile/v1",
+  "name": "Field notes / pixel signal",
+  "authorship": "Original LitGrok profile outside the immutable library",
+  "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,
+    "description": "When the brief gives no visual direction, use an original, task-specific pixel-art illustration as the primary visual anchor without asking. A brief that names competing directions without choosing them is unresolved, not unspecified.",
+    "method": "author a recognizable integer-grid motif with hard edges and nearest-neighbor scaling",
+    "minimum_rendered_cell_size_css_px": 6,
+    "rendering": "crisp and non-smoothed; use nearest-neighbor scaling and disable interpolation",
+    "constraint": "recognizable task-related subject, not random noise or a smooth icon"
+  },
+  "work_surfaces": {
+    "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": "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"},
+  "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"
+}