roast-my-design-system 9.2.4 → 9.2.6

package/README.md

@@ -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)**: 624 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, 21 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 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.4)
+![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.6)
 
 The same report in light mode (one file, built-in toggle):
 
-![The diagnosis report in light mode](assets/report-light-hero.png?v=9.2.4)
+![The diagnosis report in light mode](assets/report-light-hero.png?v=9.2.6)
 
 ## Why the numbers hold
 

package/package.json

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

@@ -1534,7 +1534,7 @@ function skippedLine() {
   const parts = [];
   if (skippedDirs.length) {
     const list = skippedDirs.slice(0, 6).map((e) => `<span class="mono">${esc(e.dir)}/</span> (${n(e.files)} UI file${e.files === 1 ? '' : 's'})`).join(', ');
-    parts.push(`<div class="excl">Left out by design: ${list}${skippedDirs.length > 6 ? ` and ${n(skippedDirs.length - 6)} more` : ''}. A docs site, a demo, an examples folder or a replaced app carries its own styling, which is not the product's design language.</div>`);
+    parts.push(`<div class="excl">Left out by design: ${list}${skippedDirs.length > 6 ? ` and ${n(skippedDirs.length - 6)} more` : ''}. A docs site, a demo, an examples folder, a replaced app or the templates a project generator copies out carries its own styling, which is not the product's design language.</div>`);
   }
   const ra = h.files?.readAnyway;
   if (ra) parts.push(`<div class="excl"><span class="mono">${esc(ra.dir)}/</span> is normally left out, but it holds ${n(ra.files)} UI files, more than the rest of the repo, so it was read as the product.</div>`);

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

@@ -7,6 +7,7 @@
 import { join, basename, posix } from 'node:path';
 import { readSource } from './walk.mjs';
 import { resolveWorkspaces } from '../lib/workspaces.mjs';
+import { isDrawing, SVG_MARKUP_RE } from '../lib/exempt.mjs';
 
 /**
  * Import aliases a tsconfig declares: "@sentry/scraps/*": ["./static/app/
@@ -285,11 +286,15 @@ export function harvestComponents(root, codeFiles) {
   for (const [file, src] of sources) {
     if (!looksLikeJSXFile(src)) continue;
     const isPage = isPageFile(file);
+    const drawing = isDrawing(file, src);
+    const draws = SVG_MARKUP_RE.test(src);
     for (const name of definedComponents(src)) {
       components.push({
         name,
         file,
         isPage,
+        drawing,
+        draws,
         variants: extractVariants(src),
         propsHint: extractPropsHint(src, name),
         usageCount: 0,

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

@@ -69,6 +69,23 @@ const EMAIL_PATH_RE = /(^|\/)(?:[a-z0-9]+[-_.])*emails?(?:[-_][a-z0-9]+)*(?:\/|\
 // Same-name components living in different icons/ directories are ONE
 // problem — two icon libraries colliding — not N separate duplicates.
 const ICON_DIR_RE = /(^|\/)icons?\//i;
+// The icon folder a file belongs to, up to and including icons/. Names that
+// repeat inside ONE icon folder are variants of one set (likec4's aws/, gcp/
+// and tech/ batch icons; nodejs.org's Logo and Favicon for each partner), not
+// two sets colliding: 121 of 180 icon collisions on 205 repos (2026-09-30).
+const iconSetOf = (f) => { const m = f.match(/^(.*?(?:^|\/)icons?\/)/i); return m ? m[1] : null; };
+// An icon is left out of a name's copies when nothing else of that name
+// draws: a Switch icon is not a second Switch component (teable), a Setting
+// icon not a second settings page (cloudreve). When another copy draws too, the
+// icon stays in: the same checkmark or logo drawn twice is two copies
+// (remotion's Checkmark, Typebot's logo in four places). Measured 2026-09-30.
+// A copy with no answer (a guard that does not say) leaves the set as it is.
+export function competing(defs) {
+  if (defs.some((d) => d.drawing === undefined)) return defs;
+  const icons = defs.filter((d) => d.drawing);
+  const rest = defs.filter((d) => !d.drawing);
+  return icons.length && rest.length && !rest.some((d) => d.draws) ? rest : defs;
+}
 
 /**
  * Whether a definition can be a duplicate at all. The report's finder and the
@@ -99,9 +116,12 @@ export function canBeDuplicate({ name, file = '', isPage = false }) {
  *                or null when it counts none
  * @param same    how two paths are compared (a guard matches on path tails)
  */
-export function duplicateCopies({ name, file = '', isPage = false }, copies, counted = null, same = (a, b) => a === b) {
+export function duplicateCopies({ name, file = '', isPage = false, drawing, draws }, copies, counted = null, same = (a, b) => a === b) {
   if (!canBeDuplicate({ name, file, isPage })) return [];
-  const others = (copies ?? []).filter((c) => !same(c.file, file) && canBeDuplicate({ ...c, name }));
+  const self = { name, file, isPage, drawing, draws };
+  const pool = competing([self, ...(copies ?? []).filter((c) => !same(c.file, file) && canBeDuplicate({ ...c, name }))]);
+  if (!pool.includes(self)) return [];
+  const others = pool.filter((c) => c !== self);
   if (!others.length) return [];
   if ((copies ?? []).some((c) => same(c.file, file))) return (counted ?? []).some((f) => same(f, file)) ? others : [];
   if (ICON_DIR_RE.test(file) && others.every((c) => ICON_DIR_RE.test(c.file))) return [];
@@ -126,6 +146,7 @@ export function findDuplicates(components, uiDir = null, root = null, uiDirs = n
     byName.get(c.name).push(c);
   }
   let exactDuplicates = [...byName.entries()]
+    .map(([name, defs]) => [name, competing(defs)])
     .filter(([, defs]) => new Set(defs.map((d) => d.file)).size > 1)
     .map(([name, defs]) => ({
       name,
@@ -134,8 +155,9 @@ export function findDuplicates(components, uiDir = null, root = null, uiDirs = n
     }))
     .sort((a, b) => b.files.length - a.files.length);
 
-  const iconCollisions = exactDuplicates.filter((d) => d.files.every((f) => ICON_DIR_RE.test(f)));
-  exactDuplicates = exactDuplicates.filter((d) => !iconCollisions.includes(d));
+  const inIcons = exactDuplicates.filter((d) => d.files.every((f) => ICON_DIR_RE.test(f)));
+  exactDuplicates = exactDuplicates.filter((d) => !inIcons.includes(d));
+  const iconCollisions = inIcons.filter((d) => new Set(d.files.map(iconSetOf)).size > 1);
 
   // A "duplicate" where one file imports the same identifier from the other is
   // a wrapper/composition (memoized variant, styled passthrough) — still an

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

@@ -36,7 +36,7 @@ const SKIP_DIRS = new Set([
   'examples', 'example', 'demos', 'demo', 'playground', 'fixtures',
   // Test/fixture surfaces are not the product's design language — counting a
   // story's `export const Default` 36× would poison the diagnosis numbers.
-  '__tests__', '__mocks__', '__fixtures__', '__snapshots__',
+  '__tests__', '__mocks__', '__fixtures__', '__testfixtures__', '__snapshots__',
   'cypress', 'e2e', 'playwright', 'test', 'tests', '.storybook',
 ]);
 
@@ -78,6 +78,15 @@ const STYLE_EXTS = new Set(['.css', '.scss', '.sass', '.less']);
 // (2026-09-17). Named in the report like any other skipped folder.
 const LEGACY_DIR_RE = /^(?:old|legacy|deprecated|archive|archived)$|[-_](?:old|legacy|deprecated)$|^(?:old|legacy)[-_]/i;
 
+// Scaffolding: the code a project generator copies into someone else's new
+// repo, not the product. A starters/ folder, or a templates folder kept by a
+// generator (create-app, a cli), a script or a dev tool: backstage's
+// create-app/templates, the dashboard starter's scripts/cleanup-templates,
+// BuilderIO's starters (133 duplicate copies). The name alone is not enough:
+// backstage's scaffolder form templates, OpenCTI's case templates and
+// nocobase's block templates are screens of the product (2026-09-30).
+const SCAFFOLD_DIR_RE = /(^|\/)starters$|(^|\/)(?:create-[\w-]+|cli|scripts|dev|generators?)\/(?:[^/]+\/)*[\w-]*templates?$/i;
+
 export function walkRepo(root, maxDepth = 14, exclusions = null, readAnyway = new Set()) {
   const files = { code: [], styles: [], other: [] };
   const excluded = exclusions?.match ?? (() => null);
@@ -135,6 +144,7 @@ export function walkRepo(root, maxDepth = 14, exclusions = null, readAnyway = ne
       const p = join(dir, e.name);
       if (e.name === 'public' && e.isDirectory() && !hasComponentSource(p)) continue;
       const rel = relative(root, p).replaceAll('\\', '/');
+      if (e.isDirectory() && SCAFFOLD_DIR_RE.test(rel)) { countSkipped(p, rel); continue; }
       const hit = excluded(rel);
       if (hit) {
         if (e.isDirectory()) countExcluded(p, depth + 1, hit);

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

@@ -15,7 +15,9 @@
  * enough though, or every Badge component would walk free: the contents must
  * actually draw SVG. A Badge that is plain styled UI gets judged like anything
  * else. A file that is mostly SVG earns it on contents alone, whatever it is
- * called.
+ * called. So does a file that draws SVG inside an icons, logos or
+ * illustrations folder: an icon set names its files after what they show
+ * (ActionSendEmail.tsx, Server.tsx), not after being an icon.
  *
  * Render-to-image: an OG card or a PDF invoice is a picture drawn with code.
  * satori and react-pdf accept nothing but inline styles, so there is no
@@ -105,6 +107,11 @@ export function isEmail(file, text = '', email = null) {
 export const CRASH_PAGE_RE = /(^|\/)global-error\.(tsx|jsx)$/;
 export const ARTWORK_NAME_RE = /(^|\/)[\w.-]*(icon|logo|badge|illustration|shield|artwork|graphic|background)[\w.-]*\.(tsx|jsx)$/i;
 export const SVG_MARKUP_RE = /<(svg|path|rect|circle|ellipse|polygon|defs|mask)\b/i;
+// An icon set's folder. Measured on 205 repos (2026-09-30): 1,252 files freed
+// in 20 repos, every one an icon, a logo or a loader; none held state or a
+// click handler. teable fell 28 to 24: its 250 icons had padded the files
+// that the per-100-files rates divide by.
+export const ARTWORK_DIR_RE = /(^|\/)(icons?|logos?|illustrations?)\//i;
 // A picture drawn from the DOM (a shareable card, a receipt) is the same
 // medium: the tool reads the styling off the element (2026-09-17).
 export const RENDER_TO_IMAGE_RE = /ImageResponse|from ['"]satori['"]|from ['"]@react-pdf|next\/og|from ['"](?:html-to-image|html2canvas(?:-pro)?|dom-to-image(?:-more)?|modern-screenshot)['"]/;
@@ -115,6 +122,15 @@ export const RENDERER_PATH_RE = /(^|\/)(renderers?|scene|canvas)\/|renderElement
 export const svgHeavy = (text) =>
   (text.match(/<(?:svg|path|rect|circle|ellipse|polygon|mask|defs)\b/g) ?? []).length >= 15;
 
+/**
+ * Whether a file is a drawing kept in an icons, logos or illustrations folder.
+ * The duplicate finder uses it: a Switch icon is not a second Switch component
+ * (teable, 2026-09-30). The folder, not the name: two files called Logo or
+ * Badge are two versions of one thing (dub, cal.com), and not "mostly SVG": a
+ * demo page full of drawings still defines real Buttons (json-render).
+ */
+export const isDrawing = (file, text = '') => ARTWORK_DIR_RE.test(file) && SVG_MARKUP_RE.test(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
@@ -129,7 +145,7 @@ export function exemptReason(file, text = '', { email = null } = {}) {
   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';
   if (svgHeavy(text)) return 'the file is mostly drawing rather than styling';
-  if (ARTWORK_NAME_RE.test(file) && SVG_MARKUP_RE.test(text)) return 'the colours belong to the artwork, not to the interface';
+  if ((ARTWORK_NAME_RE.test(file) || ARTWORK_DIR_RE.test(file)) && SVG_MARKUP_RE.test(text)) return 'the colours belong to the artwork, not to the interface';
   return null;
 }
 

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, isEmail } from './exempt.mjs';
+export { EMAIL_PRINT_RE, ARTWORK_NAME_RE, ARTWORK_DIR_RE, SVG_MARKUP_RE, exemptReason, isEmail, isDrawing } 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.

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.4';
+export const VERSION = '9.2.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

@@ -14,7 +14,7 @@ import { extractStyling } from '../harvest/tokens.mjs';
 import { componentNamesIn, isPageFile } from '../harvest/components.mjs';
 import { duplicateCopies } from '../harvest/duplicates.mjs';
 import { hexRgb } from '../lib/nearpairs.mjs';
-import { exemptReason } from '../lib/exempt.mjs';
+import { exemptReason, isDrawing, SVG_MARKUP_RE } from '../lib/exempt.mjs';
 import { extraDeclarations, fontDeclarations } from '../lib/declarations.mjs';
 import { typefaceOf, GENERIC_FONTS } from '../lib/typefaces.mjs';
 import { kitPaintFindings } from '../lib/kitpaint.mjs';
@@ -94,7 +94,7 @@ function duplicateFindings({ text, file, k, add }) {
   for (const name of componentNamesIn(text, file)) {
     const dupe = k.dupeByName.get(name);
     const counted = dupe ? dupe.files.map((f) => (typeof f === 'string' ? f : f.file)) : null;
-    const existing = duplicateCopies({ name, file: file ?? '', isPage: !!file && isPageFile(file) }, k.byName.get(name), counted);
+    const existing = duplicateCopies({ name, file: file ?? '', isPage: !!file && isPageFile(file), drawing: isDrawing(file ?? '', text), draws: SVG_MARKUP_RE.test(text) }, k.byName.get(name), counted);
     if (!existing.length) continue;
     // the scan may already include this very file — count the OTHER copies
     const otherCopies = counted ? counted.filter((f) => f !== file) : null;