roast-my-design-system 9.2.1 → 9.2.3

package/README.md

@@ -73,7 +73,7 @@ The first thing the report says: the places where the repo has no answer yet, or
 
 One gap is known for certain today, because the runs found it: charts hardcoding colours in a repo with no chart palette. 43 of 126 public repos look like that. A gap joins the list when it has been measured.
 
-### Fix what makes agents guess
+### Fixes you can make right now to increase the health score
 
 The mess the agent will copy, ranked by what fixing it is worth.
 
@@ -135,18 +135,18 @@ Eleven reports, hosted exactly as the tool writes them. Every number determinist
 - **[Apache Airflow](https://gregkozakiewicz.github.io/roast-my-design-system/examples/airflow-chakra.html)** (Chakra UI): no colours written onto components, 4 spacings per 100 kit files as pixel strings where a space step exists. Score 43.
 - **[vercel/ai-chatbot](https://gregkozakiewicz.github.io/roast-my-design-system/examples/vercel-ai-chatbot.html)** (shadcn install): 74 values like [13px] written outside the Tailwind scale, and 66 palette colours per 100 files where a theme variable exists; Claude's notes embedded. Score 80.
 - **[excalidraw/excalidraw](https://gregkozakiewicz.github.io/roast-my-design-system/examples/excalidraw-excalidraw.html)**: 78 off-scale spacing values and 90 !important declarations. Score 55.
-- **[dubinc/dub](https://gregkozakiewicz.github.io/roast-my-design-system/examples/dubinc-dub.html)**: 622 arbitrary bracket values, 22 duplicated components, and the chart-palette gap named. Score 20.
+- **[dubinc/dub](https://gregkozakiewicz.github.io/roast-my-design-system/examples/dubinc-dub.html)**: 624 arbitrary bracket values, 22 duplicated components, and the chart-palette gap named. Score 20.
 - **[telekom/scale](https://gregkozakiewicz.github.io/roast-my-design-system/examples/telekom-scale.html)** (Stencil): 95 Stencil components read by tag; 66 spacing values outside the scale where about 12 would do; Claude's notes embedded. Score 55.
 - **[magicuidesign/magicui](https://gregkozakiewicz.github.io/roast-my-design-system/examples/magicui.html)** (registry): counted on the components it publishes, 52 off-theme colours per 100 files in the code it ships, its docs site kept out and named. Score 78.
 - **[adobe/spectrum-web-components](https://gregkozakiewicz.github.io/roast-my-design-system/examples/adobe-spectrum.html)** (Lit): hardcoded colours sitting beside 744 colour tokens, and 37 !important declarations. Score 66.
 
 The full report for vercel/ai-chatbot. The verdict answers what the agent will learn here, the gap section comes first, then "What the repo teaches the agent", Claude's read of the scan:
 
-![The full diagnosis report for vercel/ai-chatbot in dark mode: a fixed side panel with the health score and what it measures, the stack, how the repo was read as a shadcn install, an index of every section and what is not the team's and not counted; then where the agent will have to guess, the What the repo teaches the agent analysis written by Claude, priced Fix what makes agents guess moves each with its copy-the-fix-prompt button, the wrapped present with the agent rules, an agent trap callout, 3-yardstick tiles including the 2 shadcn tiles, the adoption map treemap, palette forensics, the shadcn theme variable by variable, spacing receipts, typography specimens, offenders, duplicates, and the component usage ledger](assets/report-full-dark.png?v=9.1.2)
+![The full diagnosis report for vercel/ai-chatbot in dark mode: a fixed side panel with the health score and what it measures, the stack, how the repo was read as a shadcn install, an index of every section and what is not the team's and not counted; then where the agent will have to guess, the fixes you can make right now, each with what it is worth and its copy-the-fix-prompt button, the wrapped present with the agent rules, an agent trap callout, 3-yardstick tiles including the 2 shadcn tiles, the adoption map treemap, palette forensics, the shadcn theme variable by variable, spacing receipts, typography specimens, offenders, duplicates, and the component usage ledger](assets/report-full-dark.png?v=9.2.2)
 
 The same report in light mode (one file, built-in toggle):
 
-![The diagnosis report in light mode](assets/report-light-hero.png?v=9.1.2)
+![The diagnosis report in light mode](assets/report-light-hero.png?v=9.2.2)
 
 ## Why the numbers hold
 
@@ -347,7 +347,7 @@ You get the roast in chat plus `design-system-roast.html` at your repo root, a s
 - stat tiles comparing you to all 3 yardsticks
 - a **light/dark theme toggle** in one file
 - the usage-weighted palette bar, the grey ramp, the off-scale spacing receipts, the duplicate-component receipts with clickable file paths, and the worst-offenders ledger
-- a **Fix what makes agents guess** list: up to 3 moves derived from your repo's own numbers, each with a file-path receipt
+- a **Fixes you can make right now to increase the health score** list: up to 3 moves derived from your repo's own numbers, each with a file-path receipt
 - **Where will your agent have to guess?** opens the report: the gaps where the repo has no answer yet, with the files that prove each one and the move that closes it, or "No gaps found"
 - **Give the agent the answers**: `design-system-rules.md` wrapped inside the report as a present. Unwrap, then copy or download the agent rules generated from your scan
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roast-my-design-system",
-  "version": "9.2.1",
+  "version": "9.2.3",
   "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/diagnose/index.mjs

@@ -1201,17 +1201,22 @@ function whereToStartSection() {
   }
 
   // What each move is actually worth, then rank by payoff for real.
+  // A move with no points says why, so the list never promises what the
+  // score cannot give: the thing it fixes is not scored, or its tile is
+  // already green, or the move lands inside the band it started in.
   for (const item of c) {
-    item.delta = 0; item.target = null;
+    item.delta = 0; item.target = null; item.why = 'not part of the score';
     if (!item.metric) continue;
-    const now = bigStats.find((st) => st.metric === item.metric)?.healthValue;
-    if (now === undefined) continue;
+    const tile = bigStats.find((st) => st.metric === item.metric);
+    const now = tile?.healthValue;
+    if (now === undefined || !(tile.health in SCORE_OF)) continue;
     if (item.after !== undefined) {
       const gain = bandPoints(item.metric, now, item.after);
       if (gain > 0) { item.delta = gain; continue; }
     }
     const nb = nextBand(item.metric, now);
     if (nb && nb.gain > 0) item.target = nb;
+    else item.why = healthOf(item.metric, now) === 'good' ? 'already green' : 'no points on its own';
   }
   const top3 = c.sort((a, b) => (b.delta - a.delta) || (b.score - a.score)).slice(0, 3);
   if (!top3.length) return '';
@@ -1220,16 +1225,32 @@ function whereToStartSection() {
   const applied = new Map();
   for (const item of top3) if (item.metric && item.after !== undefined && item.delta > 0) applied.set(item.metric, item.after);
   const after = projectedScore(applied);
-  startProjection = { count: top3.length, after };
-  const words = ['One fix', 'Two fixes', 'Three fixes'][top3.length - 1];
-  const head = healthScore !== null && after > healthScore
-    ? `${words} could raise the design system health score from <b class="proj">${healthScore} to ${after}</b>.`
-    : `${words} to increase your score.`;
+  // The line under the heading counts only the moves that pay, and says what
+  // the others are. "Three fixes to increase your score" stood over a list
+  // where 1 of the 3 could, by 4 points (shadcn-admin, 2026-09-29).
+  const paying = healthScore !== null && after > healthScore ? top3.filter((item) => item.delta > 0) : [];
+  const later = top3.filter((item) => !paying.includes(item) && item.target);
+  startProjection = { count: paying.length, after };
+  const COUNT = ['one', 'two', 'three'];
+  const cap = (s) => s[0].toUpperCase() + s.slice(1);
+  const total = top3.length;
+  const none = total - paying.length - later.length;
+  const ofThese = (k) => (k === total
+    ? `${cap(COUNT[k - 1])} ${k === 1 ? 'fix' : 'fixes'}`
+    : `${cap(COUNT[k - 1])} of these ${COUNT[total - 1]} fixes`);
+  const inFull = (k) => `once ${k === 1 ? 'it is' : 'they are'} done in full`;
+  const rest = none ? ` The remaining ${none === 1 ? 'one does' : `${COUNT[none - 1]} do`} not move the score.` : '';
+  const head = paying.length
+    ? `${ofThese(paying.length)} could raise the design system health score from <b class="proj">${healthScore} to ${after}</b>.${later.length ? ` ${cap(COUNT[later.length - 1])} more ${later.length === 1 ? 'pays' : 'pay'} ${inFull(later.length)}.` : ''}${rest}`
+    : later.length
+      ? `${ofThese(later.length)} ${later.length === 1 ? `raises the score, by ${later[0].target.gain},` : 'raise the score'} ${inFull(later.length)}.${rest}`
+      : `${total === 1 ? 'It does' : 'They do'} not move the score. ${total === 1 ? 'It is' : 'They are'} here because ${total === 1 ? 'it stops' : 'each one stops'} the agent guessing.`;
+  const title = paying.length || later.length ? 'Fixes you can make right now to increase the health score' : 'Fixes you can make right now';
   const chip = (item) => item.delta > 0
     ? `<span class="delta" title="once all of them are done">+${item.delta}</span>`
     : item.target
       ? `<span class="delta delta-target">${item.target.target === 0 ? 'clear them all' : `under ${n(item.target.target)}`} · +${item.target.gain}</span>`
-      : '';
+      : `<span class="delta delta-none">${item.why}</span>`;
   // The copy button beside each move hands the finding to whatever agent the
   // reader pastes it into: one move per prompt, so progress stays visible and
   // finishable. Prompt text is composed from the same title/sub the row shows
@@ -1251,7 +1272,7 @@ function whereToStartSection() {
     delta: item.delta || 0, prompt: promptFor(item),
   }));
   return `<section class="glass pad">
-    ${sectionHead('Fix what makes agents guess', head)}
+    ${sectionHead(title, head)}
     <div class="ledger">${top3.map((item, i) => `
       <div class="ledger-row start-row">
         <span class="ledger-idx">${String(i + 1).padStart(2, '0')}</span>
@@ -1651,7 +1672,7 @@ function exceptionsBlock() {
 function addIndex(page) {
   // heading text is already HTML-escaped; strip tags and leading counts only
   const short = (t) => t.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim().replace(/^[\d,]+ /, '')
-    .replace(/^What your AI agent sees today$/, 'What your agent sees').replace(/^Give the agent the answers$/, 'Agent rules').replace(/^What the repo teaches the agent$/, 'What it teaches').replace(/^Fix what makes agents guess$/, 'What to fix')
+    .replace(/^What your AI agent sees today$/, 'What your agent sees').replace(/^Give the agent the answers$/, 'Agent rules').replace(/^What the repo teaches the agent$/, 'What it teaches').replace(/^Fixes you can make right now( to increase the health score)?$/, 'What to fix')
     .replace(/^The shadcn theme and the 2 shadcn checks$/, 'shadcn theme and checks')
     .replace(/^Your Tailwind theme, and what goes around it$/, 'Your Tailwind theme').replace(/^Your (\w+) theme, and what is written around it$/, 'Your $1 theme').replace(/, declared .*$/, '')
     .replace(/^off-scale spacing values$/, 'Off-scale spacing').replace(/^inline style blocks?$/, 'Inline styles').replace(/^typefaces?$/, 'Typefaces');
@@ -2047,6 +2068,7 @@ ${ogTags()}
   .delta { font:700 11px/1 var(--sans); letter-spacing:.04em; padding:5px 9px; border-radius:99px;
     background:var(--ok-soft); color:var(--ok); white-space:nowrap; }
   .delta-target { background:var(--amber-soft); color:var(--amber); font-weight:600; }
+  .delta-none { background:transparent; box-shadow:inset 0 0 0 1px var(--line-soft); color:var(--dim); font-weight:500; letter-spacing:0; }
   .proj { color:var(--accent); font-weight:700; }
   .ndot { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px; vertical-align:-1px; box-shadow:inset 0 0 0 1px var(--cell-ring); }
   .nsim { color:var(--dim2); font-weight:400; padding:0 2px; }

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

@@ -59,9 +59,11 @@ const outPath = resolve(arg('out', 'harvest.json'));
 const t0 = Date.now();
 const exclusions = loadExclusions(target, argAll('exclude'));
 let files = walkRepo(target, 14, exclusions);
+// where the repo keeps its emails (lib/exempt.mjs), kept past any rescoping
+const email = files.email;
 const profile = profileRepo(target, files);
 let { components } = harvestComponents(target, files.code);
-let tokens = harvestTokens(target, files.styles, files.code);
+let tokens = harvestTokens(target, files.styles, files.code, { email });
 // Repo kind and measurability, decided once in profiles/ and read everywhere
 // (a published components package with no app pages is a LIBRARY; a stack the
 // detector cannot read is NOT MEASURED, never scored as zeros). The decision
@@ -98,7 +100,7 @@ if (profileOf(profile).isRegistry) {
   const sheetFile = profile.shadcn?.sheet?.found ? profile.shadcn.sheet.file : null;
   if (sheetFile && !files.styles.includes(sheetFile)) files.styles.push(sheetFile);
   ({ components } = harvestComponents(target, files.code));
-  tokens = harvestTokens(target, files.styles, files.code);
+  tokens = harvestTokens(target, files.styles, files.code, { email });
   // published components are the project's own work, not installed code
   profile.uiDirs = []; profile.uiDir = null; profile.vendoredUi = false;
   profile.registry.counted = { code: files.code.length, styles: files.styles.length };
@@ -109,7 +111,7 @@ if (profileOf(profile).isRegistry) {
 {
   const P = profileOf(profile);
   if (P.isTailwind && profile.tailwind?.adopted) {
-    profile.tailwind.paint = countPaint(target, files.code, { uiDirs: [], kitNames: new Set(), retuned: profile.tailwind.retuned, families: profile.tailwind.families });
+    profile.tailwind.paint = countPaint(target, files.code, { uiDirs: [], kitNames: new Set(), retuned: profile.tailwind.retuned, families: profile.tailwind.families, email });
   }
 }
 // A shadcn kitchen gets the 2 paint checks from shadcn's own agent rules,
@@ -126,12 +128,12 @@ if (profileOf(profile).isRegistry) {
     // registries, because a palette colour in ai-elements teaches the same
     // wrong lesson as one in own code. The catalogue and kit blocks stay out:
     // editing them is the intended use.
-    profile.shadcn.paint = countPaint(target, files.code, { uiDirs: [...P.uiDirs, ...blocks], kitNames });
+    profile.shadcn.paint = countPaint(target, files.code, { uiDirs: [...P.uiDirs, ...blocks], kitNames, email });
     // Own code alone, for the breakdown line under the score.
-    profile.shadcn.paintOwn = regDirs.length ? countPaint(target, files.code, { uiDirs: allInstalled, kitNames }) : profile.shadcn.paint;
+    profile.shadcn.paintOwn = regDirs.length ? countPaint(target, files.code, { uiDirs: allInstalled, kitNames, email }) : profile.shadcn.paint;
     if (regDirs.length) {
       const regFiles = files.code.filter((f) => regDirs.some((d) => f.startsWith(`${d}/`)));
-      const rp = countPaint(target, regFiles, { uiDirs: [], kitNames });
+      const rp = countPaint(target, regFiles, { uiDirs: [], kitNames, email });
       profile.shadcn.registryPaint = { files: rp.ownFiles, tinUses: rp.tin.uses, doorUses: rp.doors.uses, dirs: regDirs };
     }
     // Bracket values inside installed code are shadcn's (or a registry's)
@@ -214,7 +216,7 @@ if (workspaces.length > 1) {
     const codeCount = own.code.length, styleCount = own.styles.length;
     const entry = { name: w.name, dir: w.dir, codeFiles: codeCount, styleFiles: styleCount, scored: false };
     if (!scanning.has(w.dir)) { packages.push(entry); continue; }
-    const t = harvestTokens(target, own.styles, own.code);
+    const t = harvestTokens(target, own.styles, own.code, { email });
     const comps = components.filter((c) => inDir(c.file, w.dir));
     const dupes = duplicates.exactDuplicates.filter((d) => !d.wrapped
       && d.files.every((f) => inDir(typeof f === 'string' ? f : f.file, w.dir)));

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

@@ -58,7 +58,7 @@ export const DEMO_PATH_RE = /(^|\/)(stories|storybook|__stories__|examples?|demo
  * @param opts { uiDirs: string[], kitNames: Set<string> } — catalogue folders
  *   and the component names defined in them
  */
-export function countPaint(root, codeFiles, { uiDirs = [], kitNames = new Set(), retuned = [], families = null } = {}) {
+export function countPaint(root, codeFiles, { uiDirs = [], kitNames = new Set(), retuned = [], families = null, email = null } = {}) {
   const inCatalogue = (f) => uiDirs.some((d) => f === d || f.startsWith(`${d}/`));
   const names = [...kitNames].filter((n) => /^[A-Z][A-Za-z0-9]*$/.test(n));
   const doorOpen = names.length
@@ -79,7 +79,7 @@ export function countPaint(root, codeFiles, { uiDirs = [], kitNames = new Set(),
   for (const f of codeFiles) {
     if (!/\.(tsx|jsx)$/.test(f) || inCatalogue(f) || DEMO_PATH_RE.test(f)) continue;
     const raw = readSource(join(root, f));
-    if (raw === null || exemptReason(f, raw)) continue;
+    if (raw === null || exemptReason(f, raw, { email })) continue;
     ownFiles += 1;
     const src = blankComments(raw);
 

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

@@ -8,7 +8,7 @@
  */
 import { existsSync } from 'node:fs';
 import {
-  EMAIL_PRINT_RE, EMAIL_KIT_RE, ARTWORK_NAME_RE, foreignStylesheet, RENDER_TO_IMAGE_RE, OG_ROUTE_RE, RENDERER_PATH_RE, CRASH_PAGE_RE, svgHeavy, exemptReason, isLibraryClass, WIDGET_CSS_RE, WIDGET_CONFIG_RE,
+  isEmail, EMAIL_KIT_RE, ARTWORK_NAME_RE, foreignStylesheet, RENDER_TO_IMAGE_RE, OG_ROUTE_RE, RENDERER_PATH_RE, CRASH_PAGE_RE, svgHeavy, exemptReason, isLibraryClass, WIDGET_CSS_RE, WIDGET_CONFIG_RE,
 } from '../lib/exempt.mjs';
 import { join } from 'node:path';
 import { canonical, parseColor } from '../lib/color.mjs';
@@ -311,7 +311,7 @@ export function colourListShare(src) {
   return inLists / all;
 }
 
-export function harvestTokens(root, styleFiles, codeFiles) {
+export function harvestTokens(root, styleFiles, codeFiles, { email = null } = {}) {
   const colors = new Tally(), spacing = new Tally(), radii = new Tally(),
         fontSizes = new Tally(), fontFamilies = new Tally(), shadows = new Tally();
   const twColors = new Tally(), twSpacing = new Tally(), twRadii = new Tally(), twTextSizes = new Tally();
@@ -487,9 +487,9 @@ export function harvestTokens(root, styleFiles, codeFiles) {
   // stylesheets the team did not write, named in the report and not counted
   const foreignStyles = [];
   for (const f of styleFiles) {
-    if (/email|(^|[/.])print([/.]|$)/i.test(f)) continue;
     const text = readSource(join(root, f));
     if (text === null) continue;
+    if (isEmail(f, text, email)) continue;
     const foreign = foreignStylesheet(f, text);
     if (foreign) { foreignStyles.push({ file: f, reason: foreign }); continue; }
     scanCssText(text, f);
@@ -500,18 +500,20 @@ export function harvestTokens(root, styleFiles, codeFiles) {
   // reason to discredit the whole report.
   // Email, artwork, mostly-SVG files and pixel renderers: all imported from
   // lib/exempt.mjs, the one list every checker reads.
-  const EXEMPT_RE = EMAIL_PRINT_RE, ARTWORK_RE = ARTWORK_NAME_RE;
+  const ARTWORK_RE = ARTWORK_NAME_RE;
   // every file a check skipped, with the reason, so the report can name them
   const exemptFiles = [];
-  const skip = (f, src) => { const r = exemptReason(f, src); if (r) exemptFiles.push({ file: f, reason: r }); return true; };
+  const skip = (f, src) => { const r = exemptReason(f, src, { email }); if (r) exemptFiles.push({ file: f, reason: r }); return true; };
   // Colour-picker palettes and design-field option lists are user-facing data.
   const PALETTE_FILE_RE = /(color-picker|colour-picker|palette|design-fields|swatch)/i;
 
   for (const f of codeFiles) {
     if (!/\.(tsx|jsx|ts|js)$/.test(f)) continue;
-    if (EXEMPT_RE.test(f) || CRASH_PAGE_RE.test(f)) { skip(f, ''); continue; }
+    if (CRASH_PAGE_RE.test(f)) { skip(f, ''); continue; }
     let src = readSource(join(root, f));
     if (src === null) continue;
+    // an email is an email by what it shows, not by a path that mentions one
+    if (isEmail(f, src, email)) { skip(f, src); continue; }
     for (const m of src.matchAll(/[A-Za-z_][\w-]+/g)) ownClasses.add(m[0]);
     listShare.set(f, colourListShare(src));
 

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

@@ -4,6 +4,7 @@
  * stylesheets of any flavor, and config — not just a happy-path shadcn layout.
  */
 import { CATALOGUE } from '../profiles/shadcn-data.mjs';
+import { emailContextOf } from '../lib/exempt.mjs';
 import { readFileSync, readdirSync, existsSync, statSync } from 'node:fs';
 import { join, relative, extname } from 'node:path';
 
@@ -168,6 +169,9 @@ export function walkRepo(root, maxDepth = 14, exclusions = null, readAnyway = ne
     again.readAnyway = { dir: biggest.dir, files: biggest.files };
     return again;
   }
+  // where the repo keeps its emails, read once here so every checker that
+  // is handed the walk judges an email the same way (lib/exempt.mjs)
+  files.email = emailContextOf(files, (f) => readSource(join(root, f)));
   return files;
 }
 

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

@@ -4,7 +4,11 @@
  *
  * Email and print: mail clients strip stylesheets and print has no cascade to
  * inherit, so the styling has to be inline and hardcoded. That is the medium,
- * not a lapse.
+ * not a lapse. A screen ABOUT email is not an email, though: a sign-in form,
+ * the email settings, an inbox. Until 9.2.3 any path with "email" in it was
+ * skipped, and an email client (inbox-zero keeps its whole app under
+ * [emailAccountId]/) went unjudged. Now a file is an email when it shows it:
+ * see isEmail below.
  *
  * Artwork: a file named Icon, Logo, Badge or Illustration carries the colours
  * of the drawing itself, and a drawing is not interface. The name alone is not
@@ -23,10 +27,78 @@
  * Shared by the engine (whole files) and by guard-my-design-system (added
  * lines), so both give the same answer about the same file.
  */
+// Where an email or a print stylesheet may live: a path that mentions either.
+// A candidate only; isEmail decides.
 export const EMAIL_PRINT_RE = /email|(^|[/.])print([/.]|$)/i;
+const PRINT_RE = /(^|[/.])print([/.]|$)/i;
 // An email built with an email kit is an email wherever it lives: react-email
 // keeps 75 templates in folders like two-buttons/ (2026-09-16).
 export const EMAIL_KIT_RE = /from\s+['"](?:react-email|@react-email\/[\w-]+|jsx-email|@jsx-email\/[\w-]+|mjml-react|@faire\/mjml-react)['"]/;
+// Markup only an email carries, or a page sent outside the app: MJML, Outlook
+// conditionals, the old table attributes, react-email's roots, and an HTML
+// style="" attribute written as text, which JSX cannot hold (a server that
+// builds its emails as strings: lobe-chat, Ghost, novu).
+export const EMAIL_MARKUP_RE = /<mj-|mso-|<!--\[if|\bcellpadding=|\bcellspacing=|\bbgcolor=|<Html[\s>]|<Body[\s>]|\bstyle\s*=\s*\\?["'][^"'{}]*:[^"']*["']/i;
+// A folder named for email: email, emails, email-templates, twenty-emails,
+// email_service. Not [emailAccountId], which is a route holding an app.
+const EMAIL_FOLDER_RE = /^(?:[a-z0-9]+[-_.])*emails?(?:[-_.][a-z0-9]+)*$/i;
+// Email templates written in a template language rather than code
+const EMAIL_TEMPLATE_FILE_RE = /\.(hbs|handlebars|mjml|njk|ejs|pug|liquid|mustache|html)$/i;
+// A preview of an email draws the email's colours, not the product's
+const EMAIL_PREVIEW_RE = /(e?mail|newsletter).*(preview|frame)|(preview|frame).*(e?mail|newsletter)/i;
+// A stylesheet written for emails: email.css, emails.scss, email-pdf-styles.css
+const EMAIL_SHEET_RE = /^e?mails?(?:[-_.][a-z0-9-]+)*\.(css|scss|sass|less)$/i;
+const base = (f) => f.slice(f.lastIndexOf('/') + 1);
+const dir = (f) => (f.includes('/') ? f.slice(0, f.lastIndexOf('/')) : '');
+
+/**
+ * Where the repo keeps its emails, read once per scan: `homes` are folders
+ * named for email that hold an email template (a code file with an email kit
+ * or email markup, or a template-language file), and `templateDirs` are the
+ * folders the templates sit in. A template that builds on the team's own
+ * layout (twenty's billing emails import their BaseEmail) carries no kit
+ * itself; its home says what it is.
+ * @param files  the walk's { code, other } (repo-relative paths)
+ * @param read   (file) => text or null
+ */
+export function emailContextOf(files, read) {
+  const templates = [];
+  for (const f of [...(files.code ?? []), ...(files.other ?? [])]) {
+    if (!/email/i.test(f)) continue;
+    if (EMAIL_TEMPLATE_FILE_RE.test(f)) { templates.push(f); continue; }
+    if (!/\.(tsx|jsx|js|ts|mjs|cjs)$/.test(f)) continue;
+    const t = read(f) ?? '';
+    if (EMAIL_KIT_RE.test(t) || EMAIL_MARKUP_RE.test(t)) templates.push(f);
+  }
+  const homes = new Set();
+  for (const f of templates) {
+    const parts = f.split('/');
+    for (let i = 1; i < parts.length; i++) if (EMAIL_FOLDER_RE.test(parts[i - 1])) homes.add(parts.slice(0, i).join('/'));
+  }
+  return { homes: [...homes].sort(), templateDirs: [...new Set(templates.map(dir))].sort() };
+}
+
+/**
+ * Whether a file is an email or a print stylesheet. A path that mentions
+ * email is only a candidate: the file has to show it, by its kit, its markup,
+ * the email folder it sits in, being a preview of an email or a stylesheet
+ * written for one, or an email-named file beside the templates it sends
+ * (Ghost's gift-email-service.ts next to its .hbs files).
+ * @param email  emailContextOf's answer for this repo; without it, only what
+ *               the file shows by itself counts
+ */
+export function isEmail(file, text = '', email = null) {
+  if (!file) return false;
+  if (PRINT_RE.test(file) || EMAIL_KIT_RE.test(text)) return true;
+  if (!/email/i.test(file)) return false;
+  if (EMAIL_MARKUP_RE.test(text)) return true;
+  const name = base(file);
+  if (EMAIL_PREVIEW_RE.test(name) || EMAIL_SHEET_RE.test(name)) return true;
+  if (!email) return false;
+  if (email.homes.some((h) => file.startsWith(`${h}/`))) return true;
+  const here = dir(file);
+  return /e?mail/i.test(name) && email.templateDirs.some((d) => d === here || dir(d) === here);
+}
 // Next.js's crash page replaces the root layout, so the app's stylesheet
 // never loads there: Next.js tells developers to build it self-contained,
 // styling written on the elements. The medium, not a lapse (2026-09-13).
@@ -46,11 +118,13 @@ export const svgHeavy = (text) =>
 /**
  * Why this file is exempt from judgement, as a sentence, or null when it is
  * fair game. Needs the text as well as the name: the artwork exemption is
- * earned by drawing, not by being called Icon.
+ * earned by drawing, not by being called Icon, and the email one by being an
+ * email, not by mentioning one.
+ * @param email  emailContextOf's answer for this repo (see isEmail)
  */
-export function exemptReason(file, text = '') {
+export function exemptReason(file, text = '', { email = null } = {}) {
   if (!file) return null;
-  if (EMAIL_PRINT_RE.test(file) || EMAIL_KIT_RE.test(text)) return 'email and print styling has to be inline, because there is no cascade to inherit';
+  if (isEmail(file, text, email)) return 'email and print styling has to be inline, because there is no cascade to inherit';
   if (CRASH_PAGE_RE.test(file)) return 'the crash page replaces the root layout, so the stylesheet never loads there and its styling has to be inline';
   if (RENDERER_PATH_RE.test(file)) return 'a renderer draws pixels, so its colours are the picture rather than the interface';
   if (OG_ROUTE_RE.test(file) || RENDER_TO_IMAGE_RE.test(text)) return 'a render-to-image surface accepts nothing but inline styling, so there is no on-system way to write one';

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

@@ -53,7 +53,7 @@ export { isPageFile, looksLikeJSXFile, componentNamesIn } from '../harvest/compo
 
 // The files no checker should judge. Exported so a guard reads the same list
 // as the engine rather than keeping a copy that drifts.
-export { EMAIL_PRINT_RE, ARTWORK_NAME_RE, SVG_MARKUP_RE, exemptReason } from './exempt.mjs';
+export { EMAIL_PRINT_RE, ARTWORK_NAME_RE, SVG_MARKUP_RE, exemptReason, isEmail } from './exempt.mjs';
 // !important as the medium (7.5): a widget stylesheet that must beat its host
 // page, and a selector aimed at a library's own class names. The guard reads
 // the same patterns, so the two checkers agree about the same declaration.
@@ -122,7 +122,7 @@ export const isStyleFile = (p) => STYLE_EXTS.has(extname(p));
 export function learnSystem(repoRoot, { exclude = [] } = {}) {
   const exclusions = loadExclusions(repoRoot, exclude);
   const files = walkRepo(repoRoot, 14, exclusions);
-  const t = harvestTokens(repoRoot, files.styles, files.code);
+  const t = harvestTokens(repoRoot, files.styles, files.code, { email: files.email });
   const ledger = harvestComponents(repoRoot, files.code).components;
   const components = ledger.map(({ name, file, usageCount, isPage }) => ({ name, file, usageCount, isPage }));
   const profile = profileRepo(repoRoot, files);
@@ -168,6 +168,9 @@ export function learnSystem(repoRoot, { exclude = [] } = {}) {
   }
 
   return {
+    // where the repo keeps its emails: pass it to exemptReason(file, text,
+    // { email }) so a guard judges an email the way the report does (9.2.3)
+    email: files.email ?? null,
     tokenFile: t.tokenFile,
     buttons,
     workspaces,

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

@@ -118,7 +118,7 @@ export function kitImportRe(def, layers = []) {
  * disagree about a line. Returns null when the file is not a kit file or is
  * the theme itself; { exempt } when the file is not judged, and why.
  */
-export function kitPaintInSource(src, def, { file = null, layers = [] } = {}) {
+export function kitPaintInSource(src, def, { file = null, layers = [], email = null } = {}) {
   const importRe = kitImportRe(def, layers);
   const code = src.replace(/\/\*[\s\S]*?\*\//g, (m) => ' '.repeat(m.length)).replace(/(^|[^:'"`\\])\/\/[^\n]*/g, (m, pre) => pre + ' '.repeat(m.length - pre.length));
   if (!importRe.test(code)) return null;
@@ -129,7 +129,7 @@ export function kitPaintInSource(src, def, { file = null, layers = [] } = {}) {
   const colours = [...cleaned.matchAll(COLOUR_RE)]
     .map((m) => ({ value: m[2].toLowerCase().replace(/\s+/g, ''), index: m.index }))
     .filter((c) => !/,\s*0(?:\.0+)?\)$/.test(c.value) && c.value !== 'transparent');
-  const why = exemptReason(file, src)
+  const why = exemptReason(file, src, { email })
     ?? (colourTable(code, colours.length) ? 'the file is a colour table, data rather than styling' : null)
     ?? (colours.length && RENDERER_IMPORT_RE.test(code) ? 'the file drives a chart or a map, so its colours are the picture' : null);
   if (why) return { exempt: why, colours: [], px: [] };
@@ -141,7 +141,7 @@ export function kitPaintInSource(src, def, { file = null, layers = [] } = {}) {
   return { exempt: null, colours, px };
 }
 
-export function countKitPaint(root, codeFiles, { importRe: kitImportRe, themeRe, refRe, themeImportRe = kitImportRe, pxPropRes = [], pxMin = 0, reexportRe = null, spacingCustomRe = null }) {
+export function countKitPaint(root, codeFiles, { importRe: kitImportRe, themeRe, refRe, themeImportRe = kitImportRe, pxPropRes = [], pxMin = 0, reexportRe = null, spacingCustomRe = null }, { email = null } = {}) {
   const layers = reexportRe ? kitLayers(root, codeFiles, reexportRe) : [];
   const importRe = layers.length
     ? new RegExp(`${kitImportRe.source}|from\\s+['"](?:[^'"]*\\/)?(?:${layers.map(escapeRe).join('|')})(?:['"]|\\/)`)
@@ -184,7 +184,7 @@ export function countKitPaint(root, codeFiles, { importRe: kitImportRe, themeRe,
     kitFiles += 1;
     refs += (code.match(refRe) ?? []).length;
     if (isTheme || THEME_NAME_RE.test(f)) { if (!isTheme) for (const c of colours) themeValues.add(c); continue; }
-    const why = exemptReason(f, src)
+    const why = exemptReason(f, src, { email })
       ?? (colourTable(code, colours.length) ? 'the file is a colour table, data rather than styling' : null)
       ?? (colours.length && RENDERER_IMPORT_RE.test(code) ? 'the file drives a chart or a map, so its colours are the picture' : null);
     if (why) { if (colours.length) exempt.push({ file: f, reason: why }); continue; }
@@ -250,9 +250,9 @@ const plain = (html) => String(html ?? '').replace(/<\/?code>/g, '').replace(/&q
  * 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 } = {}) {
+export function kitPaintFindings(src, kit, { file = null, email = null } = {}) {
   if (!kit?.def) return null;
-  const paint = kitPaintInSource(src, kit.def, { file, layers: kit.layers ?? [] });
+  const paint = kitPaintInSource(src, kit.def, { file, layers: kit.layers ?? [], email });
   if (!paint) return null;
   if (paint.exempt) return { exempt: paint.exempt, findings: [] };
   const adv = kit.def.advice, themeFile = kit.themeFiles?.[0] ?? null;

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 = '9.2.1';
+export const VERSION = '9.2.3';
 // 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

@@ -123,7 +123,7 @@ export function validateContent(content, k) {
   // Some files cannot be on-system by their nature. Judging them is how a
   // checker earns its reputation for crying wolf, and a checker people
   // distrust gets switched off. Say nothing, and say why nothing was said.
-  const exempt = exemptReason(file, text);
+  const exempt = exemptReason(file, text, { email: k.email });
   const css = file ? CSS_FILE_RE.test(file) : looksLikeCss(text);
   const findings = [];
   const add = (rule, severity, index, message, fix) => findings.push({
@@ -169,7 +169,7 @@ export function validateContent(content, k) {
     for (const f of chartFindings({ file, colours: paint, charts: k.charts, tokenFile: k.tokens.tokenFile })) add(f.rule, f.severity, f.index, f.message, f.fix);
   }
   if (k.kit?.def && !css && !chartFile) {
-    const judged = kitPaintFindings(text, k.kit, { file });
+    const judged = kitPaintFindings(text, k.kit, { file, email: k.email });
     if (judged && !judged.exempt) {
       kitOwnsColours = true;
       for (const f of judged.findings) {

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

@@ -57,7 +57,7 @@ export function loadKnowledge(root) {
   // library read as a product here. Same call, same answer, both doors.
   decideProfile(profile, components, files, root);
   const P = profileOf(profile);
-  let tokens = harvestTokens(root, files.styles, files.code);
+  let tokens = harvestTokens(root, files.styles, files.code, { email: files.email });
   // A product built on a kit (MUI, Mantine, Chakra, Ant Design): the theme
   // file is where colours are decided, and its values are the token set the
   // tools snap to. The report reads the same profile; see profiles/kit-common.
@@ -199,6 +199,9 @@ export function loadKnowledge(root) {
     neverImported,
     // stock, not debt: see profiles/index.mjs
     vendoredUi: P.vendoredUi,
+    // where the repo keeps its emails, so a file is judged an email by what it
+    // shows, the way the report judges it (lib/exempt.mjs)
+    email: files.email ?? null,
     // folders the team did not write, by the same line the guard doorway
     // draws (lib/guard-api.mjs): only a shadcn kit has installed code, and a
     // registry's published folders are its own work

package/skills/roast-my-design-system/scripts/profiles/kit-common.mjs

@@ -51,7 +51,7 @@ export function kitProfile(def) {
       if (!listed) return null;
       const kitUse = importCounts(ctx.root, ctx.files.code);
       if (Object.entries(kitUse).some(([k, n]) => k !== def.name && n > kitUse[def.name])) return null;
-      const paint = countKitPaint(ctx.root, ctx.files.code, def);
+      const paint = countKitPaint(ctx.root, ctx.files.code, def, { email: ctx.files.email ?? null });
       if (paint.kitFiles < MIN_FILES) return null;
       profile.designSystem = { kind: 'kit', name: def.name, pkg: def.packages[0], confidence: 'high' };
       profile.kit = { name: def.name, ...paint };