roast-my-design-system 8.9.1 → 8.9.2

package/README.md

@@ -49,7 +49,7 @@ Run it on your codebase and get, in about a second:
 
 ## Why this exists
 
-Your AI agent (Claude, Cursor, Copilot) builds UI by imitating what's already in your repo. If your repo has 112 colours and 4 Button implementations, your agent guesses which one is canonical, and it picks wrong half the time. That's why AI-generated UI looks *almost-but-not-quite* right. The first step to fixing it is seeing the mess measured.
+Your AI agent (Claude, Cursor, Copilot) builds UI by copying what is already in your repo. We measured it: 164 agent sessions on 10 real products, with and without this tool. On everyday work the agent reused the components and tokens it found and stayed on-system. It went off-system where the design system had no answer, a chart with no palette or a whole new theme, and it filled the gap the way the repo's own code did: by hand. So the mess an agent adds is a map of the gaps in your system. This tool measures the mess, names the gaps, and puts the check inside the agent's editor, so it runs whether or not the agent thinks to ask.
 
 ## Live examples
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roast-my-design-system",
-  "version": "8.9.1",
+  "version": "8.9.2",
   "mcpName": "io.github.gregkozakiewicz/roast-my-design-system",
   "description": "Your AI can write the UI. This makes sure it writes your UI. A deterministic scanner scores your design system 0-100 against 112 public repos, reads React and web components (Stencil, Lit), hands you a copy-paste fix prompt for each top finding, writes rules for Claude, Cursor, Copilot and Windsurf with --apply, and runs as a local MCP server with --mcp.",
   "keywords": [

package/skills/roast-my-design-system/scripts/harvest/index.mjs

@@ -159,7 +159,11 @@ const duplicates = findDuplicates(components, profile.uiDir, target, profile.uiD
 const context = harvestContext(target);
 // The chart palette the repo keeps, or the charts painting by hand without
 // one, and the gaps an agent will fill by inventing (lib/charts, lib/gaps).
-const charts = chartSystemOf(files, (f) => readSource(resolve(target, f)));
+const charts = (() => {
+  const installed = installedDirs(profileOf(profile));
+  const own = (f) => !installed.some((d) => f === d || f.startsWith(`${d}/`));
+  return chartSystemOf(files, (f) => readSource(resolve(target, f)), { own });
+})();
 const gaps = designGaps({ charts, tokenFile: tokens.tokenFile ?? null });
 const staleRules = ruleStaleness(target, components,
   new Set(neverImportedComponents(components, profile.uiDir).map((c) => c.name)),

package/skills/roast-my-design-system/scripts/harvest/tokens.mjs

@@ -137,6 +137,9 @@ const isTokenRef = (v) =>
 const FONTFAMILY_PROPS = /font-family\s*:\s*([^;{}]+)[;}]/g;
 const SHADOW_PROPS = /box-shadow\s*:\s*([^;{}]+)[;}]/g;
 const LENGTH_RE = /-?\d*\.?\d+(?:px|rem|em|%|vh|vw|ch)\b/g;
+// the spacing keys of a style object, camelCase: padding, paddingTop, margin,
+// marginInline, gap, rowGap, top, inset, insetBlock
+const INLINE_SPACING_RE = /\b(padding(?:Top|Right|Bottom|Left|Block|Inline|X|Y)?|margin(?:Top|Right|Bottom|Left|Block|Inline|X|Y)?|gap|rowGap|columnGap|top|right|bottom|left|inset(?:Block|Inline)?)\s*:\s*(['"`][^'"`]*['"`])/g;
 
 // ---------- Tailwind utility classes ----------
 // Colour-bearing utilities: bg-red-500, text-zinc-400, border-gray-200, arbitrary bg-[#1a1a1a]
@@ -274,7 +277,12 @@ export function extractStyling(src, { css = false } = {}) {
     const at = src.indexOf(b);
     if (isStaticInline(b)) out.inlineBlocks.push({ index: at });
     for (const m of b.matchAll(HEX_RE)) out.colors.push({ value: normalizeHex(m[0]), index: at + m.index });
-    for (const m of b.matchAll(LENGTH_RE)) out.spacing.push({ value: m[0], index: at + m.index });
+    // Only the spacing properties, the same set the CSS rule reads: a width,
+    // a font size or a shadow's offsets (boxShadow: '0 3px 9px …') are not
+    // spacing, and the live check reported them as such until 8.9.2.
+    for (const m of b.matchAll(INLINE_SPACING_RE)) {
+      for (const len of (m[2].match(LENGTH_RE) ?? [])) out.spacing.push({ value: len, index: at + m.index });
+    }
   }
   // hex literals outside class strings / style blocks (styled-components,
   // colour consts) — everything not already collected above

package/skills/roast-my-design-system/scripts/lib/charts.mjs

@@ -62,11 +62,13 @@ const refRe = (name) => name.startsWith('--')
 
 /**
  * What the repo already knows about charts, from the same file set the rest
- * of the knowledge reads.
+ * of the knowledge reads. `own` says whether a file is the team's own code;
+ * installed kit code (a shadcn catalogue, a registry block) is left out of
+ * the precedents, and a fresh install therefore has no chart gap.
  * @returns { palette: { names, file, shadcnDefault, referenced } | null,
  *            precedents: [{ file, count, sample }], chartFiles }
  */
-export function chartSystemOf(files, read) {
+export function chartSystemOf(files, read, { own = () => true } = {}) {
   const names = [], where = new Map();
   const noteToken = (name, file) => { if (!where.has(name)) { names.push(name); where.set(name, file); } };
   for (const f of files.styles ?? []) {
@@ -84,7 +86,9 @@ export function chartSystemOf(files, read) {
         if (COLOUR_LITERAL_RE.test(text.slice(m.index, m.index + 600))) noteToken(m[1], f);
       }
     }
-    if (isChartFile(f, text)) chartTexts.push({ f, text });
+    // a chart inside installed kit code (shadcn's components/ui/chart.tsx, a
+    // registry block) is the kit's, not a precedent the team set
+    if (own(f) && isChartFile(f, text)) chartTexts.push({ f, text });
   }
   const palette = names.length ? { names, file: where.get(names[0]), shadcnDefault: names.every((n) => SHADCN_DEFAULT_RE.test(n)), referenced: false } : null;
   const precedents = [];

package/skills/roast-my-design-system/scripts/lib/guard-api.mjs

@@ -110,9 +110,10 @@ export function learnSystem(repoRoot, { exclude = [] } = {}) {
   // the same two lists the MCP knowledge builds (mcp/knowledge.mjs), from the
   // same helpers, for tokenTwinFindings and avoidedImportFindings (8.6.1)
   const read = (f) => readSource(join(repoRoot, f));
-  const charts = chartSystemOf(files, read);
   const hardDupes = (findDuplicates(ledger, profile.uiDir, repoRoot).exactDuplicates ?? []).filter((d) => !d.wrapped);
   const P = profileOf(profile);
+  const installedNow = installedDirs(P);
+  const charts = chartSystemOf(files, read, { own: (f) => !installedNow.some((d) => f === d || f.startsWith(`${d}/`)) });
   // the kit the product is built on, with its definition attached, the way
   // the MCP knowledge reads it (mcp/knowledge.mjs): the theme's colours are
   // the token set on a kit repo, whatever stylesheet holds the most literals

package/skills/roast-my-design-system/scripts/lib/version.mjs

@@ -1,7 +1,7 @@
 // Single version constant for the engine — imported by diagnose (report
 // footer) and rules (generated-by line). This is the bump spot that used to
 // live as a const inside diagnose/index.mjs.
-export const VERSION = '8.9.1';
+export const VERSION = '8.9.2';
 // The shape of harvest.json and summary.json. Bumped only when a field is
 // renamed, removed or changes meaning; a new field is not a new schema. A
 // tool comparing two scans compares like with like by this number, not by VERSION.

package/skills/roast-my-design-system/scripts/mcp/knowledge.mjs

@@ -22,7 +22,7 @@ import { resolveWorkspaces } from '../lib/workspaces.mjs';
 import { neverImportedComponents } from '../lib/neverimported.mjs';
 import { typefaceOf } from '../lib/typefaces.mjs';
 import { hexRgb } from '../lib/nearpairs.mjs';
-import { decideProfile, profileOf } from '../profiles/index.mjs';
+import { decideProfile, profileOf, installedDirs } from '../profiles/index.mjs';
 import { KITS } from '../profiles/kit-common.mjs';
 import { repoTokenDefs } from '../lib/tokentwins.mjs';
 import { dupeCopiesOf } from '../lib/avoidedimports.mjs';
@@ -132,7 +132,10 @@ export function loadKnowledge(root) {
   const tokenDefs = repoTokenDefs(files.styles, read);
   // the chart palette the repo keeps, or the charts that paint by hand
   // without one (lib/charts.mjs)
-  const charts = chartSystemOf(files, read);
+  // installed kit code is the kit's own door, never a precedent (profiles/index)
+  const installed = installedDirs(P);
+  const ownCode = (f) => !installed.some((d) => f === d || f.startsWith(`${d}/`));
+  const charts = chartSystemOf(files, read, { own: ownCode });
   const gaps = designGaps({ charts, tokenFile: tokens.tokenFile ?? null });
 
   return {