@monoes/monodesign 1.1.1 → 1.2.0

package/cli/engine/rules/checks.mjs

@@ -2629,6 +2629,288 @@ function checkElementTextOverflowDOM(el) {
   return [];
 }
 
+// ─── Section 7: Stylesheet-level accessibility rules ─────────────────────────
+// These operate on raw CSS text (concatenated <style> blocks + linked sheets),
+// not per-element computed style — because :hover / :focus-visible / @media
+// conditions can't be read off a resting element. Shared by the regex, static
+// and browser engines (each hands over its own CSS text).
+
+// Parse flat CSS into { selector, body, dark } tuples, tracking one level of
+// dark-scheme context (a `@media (prefers-color-scheme: dark)` ancestor).
+// @supports / @layer / @container / @scope are transparently descended.
+// @font-face / @keyframes and other at-rules are skipped.
+function collectCssRules(css, dark = false, depth = 0) {
+  const out = [];
+  if (!css || depth > 6) return out;
+  const src = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  let i = 0;
+  while (i < src.length) {
+    const braceStart = src.indexOf('{', i);
+    if (braceStart === -1) break;
+    const prelude = src.slice(i, braceStart).trim();
+    let d = 1, j = braceStart + 1;
+    for (; j < src.length; j++) {
+      if (src[j] === '{') d++;
+      else if (src[j] === '}') { d--; if (d === 0) break; }
+    }
+    const body = src.slice(braceStart + 1, j);
+    i = j + 1;
+    if (!prelude) continue;
+    if (prelude.startsWith('@')) {
+      const atName = prelude.slice(1).split(/[\s(]/)[0].toLowerCase();
+      if (['media', 'supports', 'layer', 'container', 'scope'].includes(atName)) {
+        const isDarkMedia = atName === 'media' && /prefers-color-scheme\s*:\s*dark/i.test(prelude);
+        out.push(...collectCssRules(body, dark || isDarkMedia, depth + 1));
+      }
+      continue;
+    }
+    for (const sel of prelude.split(',').map(s => s.trim()).filter(Boolean)) {
+      out.push({ selector: sel, body, dark });
+    }
+  }
+  return out;
+}
+
+// --- missing-focus-visible ---
+function selectorTargetsInteractive(sel) {
+  return /(^|[\s>+~(,])(a|button|input|select|textarea|summary)(\b|[.:#[])/i.test(sel)
+    || /:focus\b/i.test(sel)
+    || /\[role\s*=\s*["']?button["']?\]/i.test(sel);
+}
+
+function checkFocusVisible(cssText) {
+  if (!cssText) return [];
+  const rules = collectCssRules(cssText);
+  let suppressor = null;
+  let hasFocusVisible = false;
+  let hasFocusReplacement = false;
+  for (const r of rules) {
+    const sel = r.selector.toLowerCase();
+    const body = r.body.toLowerCase();
+    if (/:focus-visible/.test(sel)) {
+      // Any :focus-visible styling counts as deliberate focus handling.
+      hasFocusVisible = true;
+    }
+    const suppresses = /outline\s*:\s*(none|0(?:px)?)\b/.test(body)
+      || /outline-style\s*:\s*none/.test(body)
+      || /outline-width\s*:\s*0(?:px)?\b/.test(body);
+    if (suppresses && selectorTargetsInteractive(sel) && !/:focus-visible/.test(sel)) {
+      suppressor = suppressor || r;
+    }
+    // A plain :focus rule that draws a visible affordance is a valid fallback.
+    if (/:focus\b/.test(sel) && !/:focus-visible/.test(sel)) {
+      const olVal = /outline\s*:\s*([^;}]+)/.exec(body);
+      const outlineReplaces = olVal && !/^\s*(none|0(?:px)?|inherit|initial|unset)\s*$/.test(olVal[1]);
+      if (/box-shadow\s*:/.test(body)
+        || outlineReplaces
+        || /outline-(?:color|width|style)\s*:\s*(?!none|0(?:px)?\b)/.test(body)
+        || /border(?:-\w+)?(?:-color)?\s*:/.test(body)) {
+        hasFocusReplacement = true;
+      }
+    }
+  }
+  if (suppressor && !hasFocusVisible && !hasFocusReplacement) {
+    return [{ id: 'missing-focus-visible', snippet: `"${suppressor.selector}" removes outline with no :focus-visible replacement` }];
+  }
+  return [];
+}
+
+// --- hover-only-affordance ---
+function lastCompound(sel) {
+  const parts = sel.split(/\s*[>+~]\s*|\s+/).filter(Boolean);
+  const last = parts[parts.length - 1] || sel;
+  return last.replace(/:{1,2}[a-z-]+(\([^)]*\))?/gi, '').trim().toLowerCase();
+}
+function bodyRevealsVisible(body) {
+  const b = body.toLowerCase();
+  if (/display\s*:\s*(block|flex|grid|inline(?:-\w+)?|table|list-item)/.test(b)) return true;
+  if (/visibility\s*:\s*visible/.test(b)) return true;
+  if (/opacity\s*:\s*(?:1(?:\.0+)?|0?\.[1-9]\d*|\.\d*[1-9])\b/.test(b)) return true;
+  return false;
+}
+function bodyHidesByDefault(body) {
+  const b = body.toLowerCase();
+  return /display\s*:\s*none/.test(b)
+    || /visibility\s*:\s*hidden/.test(b)
+    || /opacity\s*:\s*0(?:\.0+)?\b/.test(b);
+}
+function checkHoverOnlyAffordance(cssText) {
+  if (!cssText) return [];
+  const rules = collectCssRules(cssText);
+  const focusTargets = new Set();
+  const hiddenTargets = new Set();
+  for (const r of rules) {
+    const sel = r.selector;
+    if (/:(focus|focus-within|focus-visible|active)\b/i.test(sel) && bodyRevealsVisible(r.body)) {
+      focusTargets.add(lastCompound(sel));
+    }
+    if (!/:hover\b/i.test(sel) && bodyHidesByDefault(r.body)) {
+      hiddenTargets.add(lastCompound(sel));
+    }
+  }
+  const findings = [];
+  const seen = new Set();
+  for (const r of rules) {
+    const sel = r.selector;
+    if (!/:hover\b/i.test(sel)) continue;
+    if (!bodyRevealsVisible(r.body)) continue;
+    const parts = sel.split(/\s*[>+~]\s*|\s+/).filter(Boolean);
+    if (parts.length < 2) continue; // hover on the subject itself — can't hide+reveal
+    if (/:hover\b/i.test(parts[parts.length - 1])) continue; // :hover is on the revealed subject
+    const target = lastCompound(sel);
+    if (!target || !hiddenTargets.has(target)) continue;
+    if (focusTargets.has(target)) continue;
+    if (seen.has(target)) continue;
+    seen.add(target);
+    findings.push({ id: 'hover-only-affordance', snippet: `"${target}" is revealed on :hover with no focus/active equivalent` });
+  }
+  return findings;
+}
+
+// --- dark-scheme-contrast-blindspot ---
+const DARK_SCOPE_RE = /(?:^|[\s>+~(,])(?:html|:root|body)?(?:\.dark|\.theme-dark|\.dark-mode)\b|\[data-theme\s*[~|]?=\s*["']?dark["']?\]|\[data-mode\s*=\s*["']?dark["']?\]|\[data-color-scheme\s*=\s*["']?dark["']?\]/i;
+function stripDarkScope(sel) {
+  return sel
+    .replace(/(?:html|:root|body)?(?:\.dark|\.theme-dark|\.dark-mode)\b/gi, '')
+    .replace(/\[data-(?:theme|mode|color-scheme)\s*[~|]?=\s*["']?dark["']?\]/gi, '')
+    .replace(/\s*[>+~]\s*/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+function normalizeSelKey(sel) {
+  return sel.replace(/\s*[>+~]\s*/g, ' ').replace(/\s+/g, ' ').trim().toLowerCase();
+}
+function declHasColor(body) { return /(?:^|[;{\s])color\s*:/i.test(body); }
+function declHasBg(body) { return /(?:^|[;{\s])background(?:-color)?\s*:/i.test(body); }
+function checkDarkSchemeContrast(cssText) {
+  if (!cssText) return [];
+  const rules = collectCssRules(cssText);
+  const hasDarkMedia = /@media[^{]*prefers-color-scheme\s*:\s*dark/i.test(cssText);
+  const hasDarkSelectors = rules.some(r => DARK_SCOPE_RE.test(r.selector));
+  if (!hasDarkMedia && !hasDarkSelectors) return [];
+
+  const light = new Map(); // base selector → { color, bg }
+  const darkAgg = new Map();
+  for (const r of rules) {
+    const scopedDark = DARK_SCOPE_RE.test(r.selector);
+    const isDark = r.dark || scopedDark;
+    if (isDark) {
+      const base = normalizeSelKey(scopedDark ? stripDarkScope(r.selector) : r.selector);
+      if (!base) continue;
+      const e = darkAgg.get(base) || { color: false, bg: false };
+      if (declHasColor(r.body)) e.color = true;
+      if (declHasBg(r.body)) e.bg = true;
+      darkAgg.set(base, e);
+    } else {
+      const base = normalizeSelKey(r.selector);
+      if (!base) continue;
+      const e = light.get(base) || { color: false, bg: false };
+      if (declHasColor(r.body)) e.color = true;
+      if (declHasBg(r.body)) e.bg = true;
+      light.set(base, e);
+    }
+  }
+
+  const findings = [];
+  for (const [base, d] of darkAgg) {
+    if (d.color === d.bg) continue; // sets both or neither — not a split pair
+    const lp = light.get(base);
+    if (!lp || !(lp.color && lp.bg)) continue; // light scheme must pair both
+    const changed = d.bg ? 'background' : 'text color';
+    const missing = d.bg ? 'text color' : 'background';
+    findings.push({ id: 'dark-scheme-contrast-blindspot', snippet: `"${base}" overrides ${changed} in dark scheme but not ${missing}` });
+  }
+  return findings;
+}
+
+// --- image-missing-dimensions ---
+function checkImageDimensions({ hasWidthAttr, hasHeightAttr, style }) {
+  const s = String(style || '').toLowerCase();
+  if (hasWidthAttr && hasHeightAttr) return [];
+  if (/aspect-?ratio\s*:/.test(s)) return [];
+  const heightM = /(?:^|[;{\s])height\s*:\s*([^;]+)/.exec(s);
+  if (heightM && !/^\s*(auto|inherit|initial|unset|0(?:px)?)\s*$/.test(heightM[1])) return [];
+  return [{ id: 'image-missing-dimensions', snippet: '<img> without width/height attributes or CSS aspect-ratio (layout shift risk)' }];
+}
+
+function checkElementImageDimensions(el, style) {
+  const hasWidthAttr = (el.getAttribute?.('width') ?? el.attribs?.width) != null;
+  const hasHeightAttr = (el.getAttribute?.('height') ?? el.attribs?.height) != null;
+  const parts = [el.getAttribute?.('style') || el.attribs?.style || ''];
+  const ar = style && (style.aspectRatio || style['aspect-ratio']);
+  if (ar && ar !== 'auto') parts.push(`aspect-ratio:${ar}`);
+  const h = style && style.height;
+  if (h && h !== 'auto' && h !== '') parts.push(`height:${h}`);
+  return checkImageDimensions({ hasWidthAttr, hasHeightAttr, style: parts.join(';') });
+}
+
+function checkElementImageDimensionsDOM(el) {
+  const hasWidthAttr = el.getAttribute('width') != null;
+  const hasHeightAttr = el.getAttribute('height') != null;
+  // Browser computed `height` always resolves to a used px value after layout,
+  // so it can't tell a reserved height from a rendered one — only use inline
+  // style + the computed aspect-ratio (which stays 'auto' unless authored).
+  const parts = [el.getAttribute('style') || ''];
+  const style = getComputedStyle(el);
+  const ar = style.aspectRatio || '';
+  if (ar && ar !== 'auto') parts.push(`aspect-ratio:${ar}`);
+  return checkImageDimensions({ hasWidthAttr, hasHeightAttr, style: parts.join(';') });
+}
+
+// --- small-touch-target ---
+const CLICKABLE_INPUT_TYPES = new Set(['button', 'submit', 'reset', 'checkbox', 'radio', 'image']);
+const CLICKABLE_ROLES = new Set(['button', 'link', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'tab', 'switch', 'checkbox', 'radio', 'option']);
+function isClickableControl(tag, role, href, inputType) {
+  if (tag === 'button' || tag === 'select' || tag === 'summary') return true;
+  if (tag === 'a') return href != null && href !== '';
+  if (tag === 'input') return CLICKABLE_INPUT_TYPES.has(String(inputType || '').toLowerCase());
+  if (role && CLICKABLE_ROLES.has(role)) return true;
+  return false;
+}
+function checkSmallTouchTarget({ tag, role, href, inputType, widthPx, heightPx, isInlineLinkInProse }) {
+  if (!isClickableControl(tag, role, href, inputType)) return [];
+  if (isInlineLinkInProse) return [];
+  if (!(widthPx > 0) || !(heightPx > 0)) return [];
+  if (widthPx >= 44 && heightPx >= 44) return [];
+  const roleLabel = role && !['button', 'a', 'input', 'select'].includes(tag) ? `[role=${role}]` : '';
+  return [{ id: 'small-touch-target', snippet: `<${tag}>${roleLabel} renders ${Math.round(widthPx)}x${Math.round(heightPx)}px (min 44x44)` }];
+}
+
+const PROSE_ANCESTOR_SELECTOR = 'p,li,blockquote,figcaption,dd,dt';
+function checkElementSmallTouchTarget(el, style, tag) {
+  // Static path: only provable when width AND height are explicit px lengths
+  // (jsdom performs no layout; rem/%/auto can't be resolved to a real box).
+  const wRaw = style.width || '';
+  const hRaw = style.height || '';
+  if (!/px\s*$/.test(wRaw) || !/px\s*$/.test(hRaw)) return [];
+  const widthPx = parseFloat(wRaw);
+  const heightPx = parseFloat(hRaw);
+  const href = el.getAttribute?.('href');
+  const role = (el.getAttribute?.('role') || '').toLowerCase();
+  const inputType = el.getAttribute?.('type') || '';
+  // An <a> is a prose text link unless it is explicitly laid out as a block
+  // (button-like). jsdom returns '' for the default inline display, so key
+  // off "not blockish" rather than "== inline".
+  const isBlockish = /^(block|flex|grid|inline-block|inline-flex|table)/.test(style.display || '');
+  const inProse = !!(el.closest && el.closest(PROSE_ANCESTOR_SELECTOR));
+  const isInlineLinkInProse = tag === 'a' && !isBlockish && inProse;
+  return checkSmallTouchTarget({ tag, role, href, inputType, widthPx, heightPx, isInlineLinkInProse });
+}
+
+function checkElementSmallTouchTargetDOM(el) {
+  const tag = el.tagName.toLowerCase();
+  const rect = el.getBoundingClientRect();
+  if (!(rect.width > 0) || !(rect.height > 0)) return [];
+  const href = el.getAttribute('href');
+  const role = (el.getAttribute('role') || '').toLowerCase();
+  const inputType = el.getAttribute('type') || '';
+  const style = getComputedStyle(el);
+  const isBlockish = /^(block|flex|grid|inline-block|inline-flex|table)/.test(style.display || '');
+  const inProse = !!(el.closest && el.closest(PROSE_ANCESTOR_SELECTOR));
+  const isInlineLinkInProse = tag === 'a' && !isBlockish && inProse;
+  return checkSmallTouchTarget({ tag, role, href, inputType, widthPx: rect.width, heightPx: rect.height, isInlineLinkInProse });
+}
+
 export {
   checkBorders,
   isEmojiOnlyText,
@@ -2700,4 +2982,14 @@ export {
   checkElementClippedOverflowDOM,
   isScreenReaderOnlyTextStyle,
   checkElementTextOverflowDOM,
+  collectCssRules,
+  checkFocusVisible,
+  checkHoverOnlyAffordance,
+  checkDarkSchemeContrast,
+  checkImageDimensions,
+  checkElementImageDimensions,
+  checkElementImageDimensionsDOM,
+  checkSmallTouchTarget,
+  checkElementSmallTouchTarget,
+  checkElementSmallTouchTargetDOM,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monoes/monodesign",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Frontend design intelligence for AI agents \u2014 design tokens, antipattern detection, and the monodesign skill",
   "type": "module",
   "main": "./src/index.ts",
@@ -21,7 +21,7 @@
   ],
   "scripts": {
     "build": "tsc",
-    "test": "node --test 'tests/*.test.*' 'tests/lib/*.test.*'",
+    "test": "node --experimental-strip-types --test 'tests/*.test.*' 'tests/lib/*.test.*'",
     "sync": "node scripts/sync-skill.mjs",
     "prepare": "node scripts/sync-skill.mjs"
   },

package/skill/SKILL.src.md

@@ -171,7 +171,7 @@ If someone could look at this interface and say "AI made that" without doubt, it
 
 ## Antipattern detection
 
-Before finalizing any design, run the bundled detector. It checks 46 known design antipatterns across two categories (**slop** — AI tells; **quality** — design principle violations):
+Before finalizing any design, run the bundled detector. It checks 51 known design antipatterns across two categories (**slop** — AI tells; **quality** — design principle violations):
 
 ```bash
 monomind design detect <file-or-dir>          # human-readable report

package/skill/reference/antipatterns-catalog.md

@@ -1,14 +1,14 @@
 <!-- Synced from the monodesign v3.2.1 registry. Source of truth: cli/engine/registry/antipatterns.mjs -->
 # Antipatterns Catalog
 
-All 46 known design antipatterns with detection rules and remediation. These are what `monomind design detect` checks. Run this on any HTML/CSS target before presenting work.
+All 51 known design antipatterns with detection rules and remediation. These are what `monomind design detect` checks. Run this on any HTML/CSS target before presenting work.
 
 ## Categories
 
 These are the two categories the `monomind design detect` engine uses:
 
 - **slop** — AI tells that signal lack of intentional design (27 patterns)
-- **quality** — Design principle violations including contrast, motion, readability, and semantic structure (19 patterns)
+- **quality** — Design principle violations including contrast, motion, readability, and semantic structure (24 patterns)
 
 ---
 
@@ -226,6 +226,14 @@ These are the two categories the `monomind design detect` engine uses:
 **Why it's wrong:** Cramped elements are hard to read, harder to click, and communicate low quality. 8px is the absolute minimum; 16px is the default.  
 **Fix:** Minimum 12px padding inside cards. Minimum 10px vertical + 16px horizontal on buttons. Minimum 44×44px touch targets.
 
+### `dark-scheme-contrast-blindspot` — Dark-scheme contrast blindspot
+
+**Detect** (advisory): The page ships dark styling (a `@media (prefers-color-scheme: dark)` block or a `.dark` / `[data-theme=dark]` scope), but for some selector the dark override changes the background without changing the paired text color — or the reverse — while the light scheme defined both.
+
+**Why it's wrong**: A half-updated color pair often collapses to unreadable contrast in dark mode (dark text left on a newly-dark background). It's the most common dark-mode regression and easy to miss because the light scheme looks fine.
+
+**Fix**: Override text and background together for the same selector, or verify the inherited half still contrasts against the changed half. Prefer semantic tokens (`--fg` / `--bg`) that flip as a pair.
+
 ### `design-system-color` — Color outside DESIGN.md
 
 **Detect**: A literal color value used in CSS that is not declared in the project's `DESIGN.md` palette or its tonal ramps.
@@ -263,6 +271,22 @@ These are the two categories the `monomind design detect` engine uses:
 **Why it's wrong:** Gray text on colored backgrounds almost always fails WCAG contrast requirements and looks muddy.  
 **Fix:** Use white or the appropriate neutral from the color ramp. Never use a generic gray on a tinted background.
 
+### `hover-only-affordance` — Functionality gated behind hover only
+
+**Detect**: An element is hidden by default (`display: none`, `visibility: hidden`, or `opacity: 0`) and revealed only via a `:hover` rule on an ancestor, with no matching `:focus`, `:focus-within`, or `:active` rule.
+
+**Why it's wrong**: Hover doesn't exist on touch devices and can't be reached by keyboard. Anything gated behind hover alone is invisible and unusable for a large share of users.
+
+**Fix**: Mirror every hover reveal with a `:focus-within` (or `:active`) rule targeting the same element, so the affordance is reachable without a pointer.
+
+### `image-missing-dimensions` — Image without reserved dimensions
+
+**Detect**: An `<img>` ships without both `width` and `height` attributes and without a CSS `aspect-ratio` or explicit height.
+
+**Why it's wrong**: The browser can't reserve space before the image loads, so surrounding content jumps when it arrives — cumulative layout shift (CLS), a Core Web Vitals failure and a jarring experience.
+
+**Fix**: Set `width` and `height` attributes (the browser derives the aspect ratio), or give the image a CSS `aspect-ratio`. Either reserves the box before load.
+
 ### `justified-text` — Justified text
 **Detect:** `text-align: justify` on paragraph elements.  
 **Why it's wrong:** CSS text justification creates uneven word spacing (rivers of white) because browsers don't hyphenate automatically. It reads as broken on web.  
@@ -283,11 +307,27 @@ These are the two categories the `monomind design detect` engine uses:
 **Why it's wrong:** Low contrast text fails WCAG AA requirements and creates genuine barriers for users with low vision, in bright ambient light, or on low-quality displays.  
 **Fix:** Increase the contrast between text and background. Use white or a high-lightness neutral on dark backgrounds; use Deep Graphite (`oklch(10% 0 0)`) or Soft Charcoal (`oklch(25% 0 0)`) on light ones. Tool: check with `monomind design detect` or the WebAIM contrast checker.
 
+### `missing-focus-visible` — Suppressed focus outline with no replacement
+
+**Detect**: An interactive element (link, button, input, `[role=button]`) removes its focus outline (`outline: none` / `0`), but the stylesheet never provides a `:focus-visible` or `:focus` replacement.
+
+**Why it's wrong**: Removing the outline with no substitute strands keyboard users — there's no visible indication of where focus is. It's one of the most common and most damaging accessibility regressions.
+
+**Fix**: Remove the suppression, or pair it with a visible `:focus-visible` ring — an `outline`, `box-shadow`, or `border` that clearly marks the focused control.
+
 ### `skipped-heading` — Skipped heading level
 **Detect:** An `h3` or deeper element that is not preceded by an `h2` in the same section, or an `h2` not preceded by an `h1`.  
 **Why it's wrong:** Skipped headings break screen reader navigation and document outline semantics.  
 **Fix:** Maintain sequential heading hierarchy. If you need the visual size of `h3` without the `h2` parent, use a `h2` with class-based styling.
 
+### `small-touch-target` — Touch target below 44px
+
+**Detect**: A clickable control (`button`, link, clickable `input`, `[role=button]`) renders smaller than 44×44px on one or both axes. Inline text links inside prose are exempt.
+
+**Why it's wrong**: Fingers are imprecise. Targets below ~44×44px (the WCAG 2.5.5 / platform HIG minimum) are missed and mis-tapped, especially on mobile and for users with motor impairments.
+
+**Fix**: Give standalone controls at least 44×44px of hit area via `padding` or `min-width` / `min-height`. Spacing between adjacent targets helps too.
+
 ### `text-overflow` — Content overflowing its container
 
 **Detect**: Content renders wider than its container — `scrollWidth > clientWidth` on any non-scroll element, or a horizontal scrollbar appears on the page.
@@ -349,16 +389,21 @@ These are the two categories the `monomind design detect` engine uses:
 | `broken-image` | quality | Real image or remove tag |
 | `clipped-overflow-container` | quality | Portal or visible overflow |
 | `cramped-padding` | quality | 16px minimum |
+| `dark-scheme-contrast-blindspot` | quality | Flip text + background as a pair |
 | `design-system-color` | quality | Use palette token or update DESIGN.md |
 | `design-system-font` | quality | Use type system or update DESIGN.md |
 | `design-system-font-size` | quality | Use type-ramp step or update DESIGN.md |
 | `design-system-radius` | quality | Use radius token or update DESIGN.md |
 | `gray-on-color` | quality | White or appropriate ramp tone |
+| `hover-only-affordance` | quality | Mirror hover with :focus-within |
+| `image-missing-dimensions` | quality | width/height attrs or aspect-ratio |
 | `justified-text` | quality | text-align: left |
 | `layout-transition` | quality | transform + opacity only |
 | `line-length` | quality | max-width: 65ch |
 | `low-contrast` | quality | 4.5:1 normal, 3:1 large text |
+| `missing-focus-visible` | quality | Add a :focus-visible ring |
 | `skipped-heading` | quality | Sequential h1→h2→h3 |
+| `small-touch-target` | quality | 44×44px minimum hit area |
 | `text-overflow` | quality | overflow-wrap + constrained widths |
 | `tight-leading` | quality | line-height: 1.6 |
 | `tiny-text` | quality | 16px minimum body |

package/skill/reference/critique.md

@@ -215,7 +215,7 @@ Skip this step if the Setup slug was null (vague or root-level target).
    MONODESIGN_CRITIQUE_META='{"target":"<user phrasing>","total_score":<n>,"p0_count":<n>,"p1_count":<n>}' \
      node {{scripts_path}}/critique-storage.mjs write <slug> <body-file>
    ```
-   The helper prints the absolute path it wrote.
+   The helper prints the absolute path it wrote. As part of the write it also best-effort mirrors a compact record (score, P0/P1 counts, date, slug, path) into monomind's persistent memory under the `design-critique` namespace, so design health carries across sessions. This mirror is silent and never fails the critique: if the monomind CLI is unavailable it is skipped, and setting `MONODESIGN_NO_MEMORY=1` disables it entirely. Do not report mirror status unless the user asks.
 
 3. **Delete the temp body file** after the write attempt completes, whether the write succeeded or failed. If deletion fails, mention `temp-file cleanup failed: <reason>` briefly in the final output, but do not block the critique.
 

package/skill/reference/live.md

@@ -685,10 +685,6 @@ const __monodesignLiveDev =
 - **SvelteKit**: edit `svelte.config.js`, appending to `kit.csp.directives['script-src']` and `kit.csp.directives['connect-src']`.
 - **Nuxt + nuxt-security**: edit `nuxt.config.*`, appending to `security.headers.contentSecurityPolicy['script-src']` and `['connect-src']`.
 
-Reference outputs:
-- `tests/framework-fixtures/nextjs-turborepo/expected-after-patch.ts` (Next.js)
-- `tests/framework-fixtures/sveltekit-csp/expected-after-patch.js` (SvelteKit)
-
 Idempotency: if `__monodesignLiveDev` already exists in the file, the patch is already applied; skip asking and just mark `cspChecked: true`.
 
 #### append-string
@@ -711,10 +707,6 @@ Per-framework specifics:
 - **Next.js inline `headers()`**: edit `next.config.*`, splicing the variable into the CSP value.
 - **Nuxt `routeRules`**: edit `nuxt.config.*`, splicing into the CSP in `routeRules['/**'].headers['Content-Security-Policy']`.
 
-Reference outputs:
-- `tests/framework-fixtures/nextjs-inline-csp/expected-after-patch.js` (Next.js)
-- `tests/framework-fixtures/nuxt-csp/expected-after-patch.ts` (Nuxt)
-
 ### Troubleshooting
 
 If a user says "no" to the CSP patch at setup time and later complains that live doesn't work: their dev CSP blocks `http://localhost:8400`. Fix: delete `cspChecked` from `.monodesign/live/config.json` and re-run `live.mjs`: setup will ask again.

package/skill/reference/polish.md

@@ -38,9 +38,9 @@ Understand the current state and goals before touching anything:
 4. **Pull in any prior critique** (optional signal): If `{{command_prefix}}monodesign critique` has been run on the same target, its priority issues are a useful prior for what to address first. Resolve the target to a file path or URL, then:
    ```bash
    slug=$(node {{scripts_path}}/critique-storage.mjs slug "<resolved>")
-   node {{scripts_path}}/critique-storage.mjs latest "$slug"
+   node {{scripts_path}}/critique-storage.mjs recall "$slug"
    ```
-   Exit 0 with body = found; fold the P0/P1 items into your polish list and mention the snapshot path so the user sees what you read. Exit 2 = no snapshot, continue without it. The critique is one input among many. Do your own pass either way.
+   Exit 0 prints a compact markdown block: latest score, score trend with direction, the open P0/P1 item titles, and the snapshot path. Fold the P0/P1 items into your polish list and mention the snapshot path so the user sees what you read. If you need the full snapshot body behind an item, read the printed snapshot path directly (or run the `latest` subcommand). Exit 2 = no snapshot, continue without it. The critique is one input among many. Do your own pass either way.
 
 5. **Triage cosmetic vs functional**: Classify each issue as **cosmetic** (looks off, doesn't impede the user) or **functional** (breaks, blocks, or confuses the experience). When polish time is tight, functional issues ship first; cosmetic ones can land in a follow-up. Quality should be consistent; never perfect one corner while leaving another rough.
 

package/skill/scripts/context-signals.mjs

@@ -23,6 +23,7 @@ import { fileURLToPath } from 'node:url';
 import { execFileSync } from 'node:child_process';
 import { loadContext, extractRegister, extractPlatform } from './context.mjs';
 import { getCritiqueDir } from './lib/monodesign-paths.mjs';
+import { readTrend, extractIssueLines, trendDirection } from './critique-storage.mjs';
 
 /** Is there code here at all, or just context files / an empty repo? */
 function hasCode(cwd) {
@@ -36,7 +37,10 @@ function hasCode(cwd) {
 /**
  * The most recent critique snapshot across all targets. Filenames are
  * timestamp-prefixed (`<iso>__<slug>.md`), so a lexical sort is chronological.
- * Parses the small frontmatter for score + P0/P1 counts.
+ * Parses the small frontmatter for score + P0/P1 counts, plus two "design
+ * health" extras: the score trend for the same slug (last 3 runs, with a
+ * direction) and the open [P0] issue titles from the snapshot body — enough
+ * for a session to start design-health-aware without an LLM pass.
  */
 function latestCritique(cwd) {
   try {
@@ -55,13 +59,43 @@ function latestCritique(cwd) {
       const n = Number(v);
       return Number.isFinite(n) ? n : null;
     };
+    const slug = get('slug');
+    // Trend across the last 3 runs for the same slug. Frontmatter written by
+    // critique-storage carries `total_score`; older/hand-written snapshots may
+    // carry `score` — accept either. Best-effort: never let this probe throw.
+    let trend = null;
+    try {
+      if (slug) {
+        const rows = readTrend(slug, { limit: 3, cwd });
+        const scores = rows
+          .map((r) => num(r.total_score ?? r.score))
+          .filter((n) => n !== null);
+        if (scores.length) trend = { scores, direction: trendDirection(scores) };
+      }
+    } catch { /* trend stays null */ }
+    let openP0 = [];
+    try {
+      openP0 = extractIssueLines(text).p0;
+    } catch { /* openP0 stays empty */ }
+    // Frontmatter key fallbacks: context fixtures use score/p0/p1, the
+    // critique flow's MONODESIGN_CRITIQUE_META uses total_score/p0_count/
+    // p1_count. `get` returns null for missing keys; keep null (not 0).
+    const numKey = (...keys) => {
+      for (const k of keys) {
+        const v = get(k);
+        if (v !== null) return num(v);
+      }
+      return null;
+    };
     return {
-      slug: get('slug'),
-      score: num(get('score')),
-      p0: num(get('p0')),
-      p1: num(get('p1')),
+      slug,
+      score: numKey('score', 'total_score'),
+      p0: numKey('p0', 'p0_count'),
+      p1: numKey('p1', 'p1_count'),
       timestamp: get('timestamp'),
       file: path.relative(cwd, path.join(dir, newest)),
+      trend,
+      openP0,
     };
   } catch {
     return null;