roast-my-design-system 8.4.4 → 8.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roast-my-design-system",
-  "version": "8.4.4",
+  "version": "8.4.6",
   "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/lib/guard-api.mjs

@@ -12,7 +12,9 @@
 import { extname, join } from 'node:path';
 import { walkRepo, readSource, profileRepo } from '../harvest/walk.mjs';
 import { decideProfile, profileOf, installedDirs } from '../profiles/index.mjs';
-import { PALETTE_CLASS_RE } from '../harvest/paint.mjs';
+import { KITS } from '../profiles/kit-common.mjs';
+import { kitPaintFindings } from './kitpaint.mjs';
+import { PALETTE_CLASS_RE, blankComments } from '../harvest/paint.mjs';
 import { harvestTokens, extractStyling, normalizeHex, isGrey } from '../harvest/tokens.mjs';
 import { harvestComponents, definedComponents } from '../harvest/components.mjs';
 import { loadExclusions } from './exclusions.mjs';
@@ -35,7 +37,17 @@ export { EMAIL_PRINT_RE, ARTWORK_NAME_RE, SVG_MARKUP_RE, exemptReason } from './
 export { WIDGET_CSS_RE, WIDGET_CONFIG_RE, LIBRARY_CLASS_RE, isLibraryClass } from './exempt.mjs';
 // A palette class (bg-blue-500, text-gray-600) where a theme variable exists:
 // the shadcn paint check (7.2). Only meaningful when system.profile.paletteReady.
-export { PALETTE_CLASS_RE };
+// blankComments (8.4.5) is what the report and the live checks run on a file
+// before matching, so a class named in a comment paints nothing; a guard that
+// matches the raw text counts it, and disagrees with the report.
+export { PALETTE_CLASS_RE, blankComments };
+// A product built on a kit (MUI, Mantine, Chakra UI, Ant Design), 8.4.6: a
+// colour or a pixel size written onto a kit component where the theme has a
+// value. kitPaintFindings(fileText, system.profile.kit, { file }) returns the
+// worded findings the report's live checks give for the same file, with the
+// index of each in the text; null when the file is not a kit file, { exempt }
+// when it is not judged. Only meaningful when system.profile.kit is set.
+export { kitPaintFindings };
 
 // Radius, font size, shadow and typeface: the patterns, so both checkers agree
 // on what a declaration is and what counts as a disciplined value.
@@ -78,6 +90,10 @@ export function learnSystem(repoRoot, { exclude = [] } = {}) {
   const profile = profileRepo(repoRoot, files);
   decideProfile(profile, components, files, repoRoot);
   const P = profileOf(profile);
+  // 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
+  const kit = P.isKit && profile.kit && KITS[profile.kit.name] ? { ...profile.kit, def: KITS[profile.kit.name] } : null;
   const widgetDirs = files.code.filter((f) => /(^|\/)tailwind\.config\.[mc]?[jt]s$/.test(f))
     .filter((f) => WIDGET_CONFIG_RE.test(readSource(join(repoRoot, f)) ?? ''))
     .map((f) => f.slice(0, f.lastIndexOf('/') + 1));
@@ -104,7 +120,7 @@ export function learnSystem(repoRoot, { exclude = [] } = {}) {
     // report counts a token's base statement only, because a dark theme is
     // the system working rather than sprawl; a guard needs the opposite, the
     // full set, or it cannot recognise a dark-theme value as on-system.
-    tokens: t.tokenColors ?? t.colors.filter((c) => c.isToken).map((c) => c.value),
+    tokens: [...new Set([...(t.tokenColors ?? t.colors.filter((c) => c.isToken).map((c) => c.value)), ...(kit?.themeValues ?? [])])],
     tokenNames,
     spacing: t.spacing,
     radii: t.radii,
@@ -129,6 +145,9 @@ export function learnSystem(repoRoot, { exclude = [] } = {}) {
       // only a shadcn kit has installed code; a hand-written components/ui on a
       // plain product is the team's own (the report splits nothing there either)
       installedDirs: P.isShadcn && !P.isRegistry ? installedDirs(P) : [],
+      // a product built on a kit: name, theme files and values, spacing step,
+      // the team's own layers over it, and the definition kitPaintFindings reads
+      kit,
       // a shadcn kit whose theme file holds the variables, in CSS-variable
       // mode: a palette class in own code is paint from a tin
       paletteReady: P.isShadcn && (P.shadcn?.sheet?.shadcnPresent ?? 0) >= 5 && P.designSystem?.cssVariables !== false,

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

@@ -234,3 +234,47 @@ export function countKitPaint(root, codeFiles, { importRe: kitImportRe, themeRe,
     exempt: exempt.slice(0, 20),
   };
 }
+
+const aKit = (name) => (/^(?:[AEIOU]|MUI)/.test(name) ? `an ${name}` : `a ${name}`);
+const plain = (html) => String(html ?? '').replace(/<\/?code>/g, '').replace(/&quot;/g, '"');
+
+/**
+ * One file's kit findings, worded: what the MCP validate and review say about
+ * a line, and what guard-my-design-system says about the same line. One
+ * function, so the three never disagree. `kit` is the profile's kit with its
+ * definition attached ({ name, def, themeFiles, themeValues, spacingUnit,
+ * layers }). Returns null when the file is not a kit file or is the theme;
+ * { exempt } when the file is not judged, and why; otherwise
+ * { exempt: null, findings: [{ rule, index, value, label, note, message, fix }] }:
+ * label is the finding in a few words ("colour written onto an MUI
+ * component"), note what the theme says about it or null, message the two
+ * as one sentence for the live checks.
+ */
+export function kitPaintFindings(src, kit, { file = null } = {}) {
+  if (!kit?.def) return null;
+  const paint = kitPaintInSource(src, kit.def, { file, layers: kit.layers ?? [] });
+  if (!paint) return null;
+  if (paint.exempt) return { exempt: paint.exempt, findings: [] };
+  const adv = kit.def.advice, themeFile = kit.themeFiles?.[0] ?? null;
+  const themeSet = new Set(kit.themeValues ?? []);
+  const findings = [];
+  const colourLabel = `colour written onto ${aKit(kit.name)} component`;
+  for (const c of paint.colours) {
+    findings.push(themeSet.has(c.value)
+      ? { rule: 'kit-colour', index: c.index, value: c.value, label: colourLabel,
+          note: `the theme already holds it${themeFile ? ` (${themeFile})` : ''}`,
+          message: `Colour ${c.value} written onto ${aKit(kit.name)} component. The theme already holds it${themeFile ? ` (${themeFile})` : ''}.`,
+          fix: plain(adv.colourHow) }
+      : { rule: 'kit-colour', index: c.index, value: c.value, label: colourLabel,
+          note: 'the theme has no such colour',
+          message: `Colour ${c.value} written onto ${aKit(kit.name)} component, and the theme has no such colour.`,
+          fix: `Add it to the theme once${themeFile ? ` (${themeFile})` : ` with ${adv.themeCall}`}, then read it there. ${plain(adv.colourHow)}` });
+  }
+  for (const h of paint.px) {
+    const raw = h.value.split(': ')[1];
+    findings.push({ rule: 'kit-px', index: h.index, value: h.value, label: `pixel size on ${aKit(kit.name)} component`, note: null,
+      message: `Pixel size ${h.value} on ${aKit(kit.name)} component.`,
+      fix: adv.step ? adv.step(kit, parseFloat(raw)) : plain(adv.spacingHow?.(kit)) });
+  }
+  return { exempt: null, findings };
+}

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.4.4';
+export const VERSION = '8.4.6';
 // 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/engine.mjs

@@ -16,7 +16,7 @@ import { hexRgb } from '../lib/nearpairs.mjs';
 import { exemptReason } from '../lib/exempt.mjs';
 import { extraDeclarations, fontDeclarations } from '../lib/declarations.mjs';
 import { typefaceOf, GENERIC_FONTS } from '../lib/typefaces.mjs';
-import { kitPaintInSource } from '../lib/kitpaint.mjs';
+import { kitPaintFindings } from '../lib/kitpaint.mjs';
 import { PALETTE_CLASS_RE, GREY_HUE_RE, DARK_WB_RE, DEMO_PATH_RE, blankComments } from '../harvest/paint.mjs';
 
 // What this engine measures — shipped with every result, clean or not.
@@ -41,8 +41,6 @@ export function checksFor(k) {
   return CHECKS;
 }
 // "an MUI component", "an Ant Design component", "a Mantine component"
-const aKit = (name) => (/^(?:[AEIOU]|MUI)/.test(name) ? `an ${name}` : `a ${name}`);
-const plain = (html) => String(html ?? '').replace(/<\/?code>/g, '').replace(/&quot;/g, '"');
 
 const CSS_FILE_RE = /\.(css|scss|sass|less|styl)$/i;
 const lineOf = (text, index) => text.slice(0, index).split('\n').length;
@@ -115,29 +113,12 @@ export function validateContent(content, k) {
   // compare, SVG artwork), so the generic check stays out of its way.
   let kitOwnsColours = false;
   if (k.kit?.def && !css) {
-    const paint = kitPaintInSource(text, k.kit.def, { file, layers: k.kit.layers ?? [] });
-    if (paint && !paint.exempt) {
+    const judged = kitPaintFindings(text, k.kit, { file });
+    if (judged && !judged.exempt) {
       kitOwnsColours = true;
-      const kitName = k.kit.name, adv = k.kit.def.advice, themeFile = k.kit.themeFiles?.[0] ?? null;
-      const themeSet = new Set(k.kit.themeValues ?? []);
-      for (const c of paint.colours) {
-        if (themeSet.has(c.value)) {
-          add('kit-colour', 'violation', c.index,
-            `Colour ${c.value} written onto ${aKit(kitName)} component. The theme already holds it${themeFile ? ` (${themeFile})` : ''}.`,
-            plain(adv.colourHow));
-        } else {
-          add('kit-colour', 'violation', c.index,
-            `Colour ${c.value} written onto ${aKit(kitName)} component, and the theme has no such colour.`,
-            `Add it to the theme once${themeFile ? ` (${themeFile})` : ` with ${adv.themeCall}`}, then read it there. ${plain(adv.colourHow)}`);
-        }
-      }
-      for (const h of paint.px) {
-        const [prop, raw] = h.value.split(': ');
-        kitPx.add(raw);
-        add('kit-px', 'violation', h.index,
-          `Pixel size ${h.value} on ${aKit(kitName)} component.`,
-          adv.step ? adv.step(k.kit, parseFloat(raw)) : plain(adv.spacingHow?.(k.kit)));
-        void prop;
+      for (const f of judged.findings) {
+        if (f.rule === 'kit-px') kitPx.add(f.value.split(': ')[1]);
+        add(f.rule, 'violation', f.index, f.message, f.fix);
       }
     }
   }