roast-my-design-system 8.4.0 → 8.4.2

package/README.md

@@ -119,6 +119,21 @@ The same report in light mode (one file, built-in toggle):
 
 ![The diagnosis report in light mode](https://raw.githubusercontent.com/gregkozakiewicz/roast-my-design-system/main/assets/report-light-hero.png?v=8.2.2)
 
+## What it works on
+
+**Supported**
+
+- React repos: Next, Remix, Vite and plain React.
+- Web-component repos: Stencil and Lit.
+- 4 kinds of repo: product, library, shadcn, registry.
+- 5 kit profiles: Tailwind theme, MUI, Mantine, Chakra, Ant Design.
+- Any styling on top: Tailwind, styled-components, Emotion, Sass, Less, vanilla-extract, Stitches, CVA, CSS Modules.
+
+**Recognised, not supported yet but on the roadmap**
+
+- Vue, Angular and Svelte: named in the header, colours and spacing still counted, but components are not measured and the report says so.
+- HeroUI, NextUI, Radix Themes, Fluent UI, React Bootstrap and Grommet: named in the header, no kit rules.
+
 ## What makes the numbers trustworthy
 
 - **Deterministic scanner, not AI sampling.** A zero-dependency Node script reads *every* file (about a second on a normal repo, a few on a large monorepo) and returns the same numbers every run. Claude narrates; it never counts.
@@ -164,7 +179,7 @@ The report and the rules file describe the repo as it was at scan time. `--mcp`
 
 The loop: context before building, find while building, validate before saving, review before finishing.
 
-The server reads the repo the way the report does. On a product built on MUI, Mantine, Chakra UI or Ant Design, the context names the theme file and the kit's own way of reading it, `roast_find_token` answers in spacing steps (`12px` is `p: 3` on a 4px MUI theme), and `roast_validate` and `roast_review` flag a colour or a pixel size written onto a kit component where the theme has a value. On a Tailwind theme they flag a palette class such as `text-gray-500` where the theme names a colour of that kind.
+The server reads the repo the way the report does. On a product built on MUI, Mantine, Chakra UI or Ant Design, the context names the theme file and the kit's own way of reading it, `roast_find_token` answers in spacing steps (`12px` is `p: 3` on a 4px MUI theme), and `roast_validate` and `roast_review` flag a colour or a pixel size written onto a kit component where the theme has a value. On a Tailwind theme or a shadcn repo they flag a palette class such as `text-gray-500` or `ring-green-500` where the theme names a colour of that kind.
 
 ### What a session looks like
 
@@ -220,7 +235,7 @@ To use it in Claude Code, type `/mcp__roast__roast-fix` in the chat. MCP prompts
 Otherwise, add it to Claude Code by hand:
 
 ```bash
-claude mcp add roast -- npx roast-my-design-system --mcp
+claude mcp add roast -- npx roast-my-design-system@latest --mcp
 ```
 
 **Verified in Claude Code, Cursor, and Windsurf (now Devin Desktop).** Each was tested end to end: server connected, all 5 tools listed, real answers in the editor's own chat. Same promise as the scan: local, read-only, one scan at startup, no port, no account, nothing about your code leaves your machine. A clean answer reads "no measured violations found" with the list of checks attached, because a scanner can only certify what it can count.

package/cli/roast.mjs

@@ -106,7 +106,7 @@ For your agent (a plain terminal has no agent to write these)
   --mcp           run as a local MCP server (stdio) so your agent can query
                   the design system live: context, canonical components,
                   tokens, validation. Add to your client, e.g. Claude Code:
-                  claude mcp add roast -- npx roast-my-design-system --mcp
+                  claude mcp add roast -- npx roast-my-design-system@latest --mcp
 
 Read-only scan (--apply and --rules write only the files they name).
 No network, no telemetry, nothing leaves your machine.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roast-my-design-system",
-  "version": "8.4.0",
+  "version": "8.4.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/paint.mjs

@@ -35,13 +35,15 @@ export const PALETTE_CLASS_RE = new RegExp(`(?<![\\w-])(?:[\\w-]+:)*(?:bg|text|b
 // Evening overrides painted by hand with white or black (the palette shades
 // are already caught above with their dark: prefix).
 export const GREY_HUE_RE = /-(?:slate|gray|zinc|neutral|stone|mauve|olive|mist|taupe|white|black)(?:-|\/|$)/;
-const DARK_WB_RE = /(?<![\w-])dark:(?:bg|text|border)-(?:white|black)(?:\/\d+)?(?![\w-])/g;
+// exported for the checkers: the same override judged on a file under review
+export const DARK_WB_RE = /(?<![\w-])dark:(?:bg|text|border)-(?:white|black)(?:\/\d+)?(?![\w-])/g;
 // Colour passed into a kit door: palette colour, black, white, any variant prefix.
 const DOOR_COLOR_RE = new RegExp(`(?<![\\w-])(?:[\\w-]+:)*(?:bg|text|border)-(?:${PALETTE}|white|black)(?:-(?:50|[1-9]00|950))?(?:/\\d+)?(?![\\w-])`, 'g');
 // Typography passed into a kit door: weight or size. A receipt, not a score.
 const DOOR_TYPO_RE = /(?<![\w-])(?:[\w-]+:)*(?:font-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black)|text-(?:xs|sm|base|lg|xl|[2-9]xl))(?![\w-])/g;
 
-const DEMO_PATH_RE = /(^|\/)(stories|storybook|__stories__|examples?|demos?|templates?|playground|fixtures?|__tests__|__mocks__|e2e|cypress)\//i;
+// exported for the checkers: a demo folder is not own code there either
+export const DEMO_PATH_RE = /(^|\/)(stories|storybook|__stories__|examples?|demos?|templates?|playground|fixtures?|__tests__|__mocks__|e2e|cypress)\//i;
 
 /**
  * @param root repo root

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

@@ -17,7 +17,7 @@ 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 { PALETTE_CLASS_RE, GREY_HUE_RE } from '../harvest/paint.mjs';
+import { PALETTE_CLASS_RE, GREY_HUE_RE, DARK_WB_RE, DEMO_PATH_RE } from '../harvest/paint.mjs';
 
 // What this engine measures — shipped with every result, clean or not.
 export const CHECKS = [
@@ -37,7 +37,7 @@ export const KIT_CHECK = 'colours and pixel sizes written onto kit components wh
 export const PALETTE_CHECK = 'palette classes where the theme names a colour';
 export function checksFor(k) {
   if (k?.kit) return [...CHECKS, KIT_CHECK];
-  if (k?.tailwind) return [...CHECKS, PALETTE_CHECK];
+  if (k?.tailwind || k?.shadcn) return [...CHECKS, PALETTE_CHECK];
   return CHECKS;
 }
 // "an MUI component", "an Ant Design component", "a Mantine component"
@@ -142,27 +142,40 @@ export function validateContent(content, k) {
     }
   }
 
-  // ---------- a Tailwind theme's palette classes ----------
-  // The theme names its colours (bg-surface, text-ink); a palette class
-  // (text-gray-500) where the theme has a colour of that kind is paint from
-  // the tin. Same rule as the report's tile, from harvest/paint.mjs.
-  if (k.tailwind && !css) {
-    const tw = k.tailwind;
+  // ---------- palette classes where the theme names its colours ----------
+  // A Tailwind theme names its colours (bg-surface, text-ink); a shadcn sheet
+  // names them too (bg-primary, text-muted-foreground). A palette class
+  // (text-gray-500, ring-green-500) where a name of that kind exists is paint
+  // from the tin. Same rule as the report's tile, from harvest/paint.mjs.
+  // On a shadcn repo the catalogue and kit blocks are the kit's own doors
+  // (editing them is the intended use) and a demo folder is not own code,
+  // exactly the files the tile leaves out.
+  const inShadcnDoors = (f) => !!f && k.shadcn.doors.some((d) => f === d || f.startsWith(`${d}/`));
+  const paletteRule = k.tailwind ? 'tailwind'
+    : k.shadcn && !(file && (inShadcnDoors(file) || DEMO_PATH_RE.test(file))) ? 'shadcn'
+    : null;
+  if (paletteRule && !css) {
+    const tw = k.tailwind ?? {};
     const retuned = new Set(tw.retuned ?? []);
     const fam = tw.families ?? null;
     const hasFamily = (cls) => !fam || (GREY_HUE_RE.test(cls) ? fam.grey : fam.colour);
+    const themeFile = paletteRule === 'tailwind' ? tw.file : (k.shadcn.sheet ?? 'the theme sheet');
     // the example name follows the utility: a text- class wants an ink or
     // foreground name, a bg- class a surface or background name
-    const names = tw.names ?? [];
+    const names = paletteRule === 'tailwind' ? (tw.names ?? []) : ['primary', 'foreground', 'muted-foreground', 'background', 'border'];
     const pick = (re) => names.find((n) => re.test(n)) ?? names[0] ?? 'brand';
-    for (const m of text.matchAll(PALETTE_CLASS_RE)) {
+    const hits = [...text.matchAll(PALETTE_CLASS_RE)];
+    // the evening override painted by hand (dark:bg-black) is the same sin
+    // on a shadcn sheet, which always has a dark row of its own
+    if (paletteRule === 'shadcn') hits.push(...text.matchAll(DARK_WB_RE));
+    for (const m of hits.sort((a, b) => a.index - b.index)) {
       const cls = m[0];
       const util = cls.replace(/^((?:[\w-]+:)*[a-z]+)-.*$/, '$1');
       const example = /(^|:)(?:text|placeholder|caret|decoration)$/.test(util) ? pick(/ink|text|fg|foreground/) : /(^|:)bg$/.test(util) ? pick(/surface|bg|background|canvas/) : pick(/border|edge|line|ring/) ;
       if (retuned.has(cls.replace(/^(?:[\w-]+:)*[a-z]+-/, '').replace(/\/\d+$/, ''))) continue;
       if (!hasFamily(cls)) continue;
       add('palette-class', 'violation', m.index,
-        `Palette class ${cls} where the theme names its colours (${tw.file}).`,
+        `Palette class ${cls} where the theme names its colours (${themeFile}).`,
         `Use a theme name as the class (${util}-${example}); if the colour is missing, add it to the theme once.`);
     }
   }

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

@@ -149,6 +149,17 @@ export function loadKnowledge(root) {
     // colours in: null when the repo is neither (see profiles/)
     kit,
     tailwind: P.isTailwind && profile.tailwind ? profile.tailwind : null,
+    // A shadcn kitchen: the sheet names the colours, so a palette class in
+    // own code is paint from a tin (shadcn's own rule: semantic colours,
+    // never bg-blue-500). The report's tile counts it over own code plus
+    // installed registries, never inside the catalogue or a kit block; the
+    // checkers judge a file under review by the same line (2026-09-20: the
+    // report counted a ring-green-500 that validate, review and --check let
+    // through, because the rule was switched on for Tailwind themes only).
+    shadcn: P.isShadcn && profile.shadcn ? {
+      sheet: profile.shadcn.sheet?.found ? profile.shadcn.sheet.file : null,
+      doors: [...P.uiDirs, ...(profile.shadcn.blockFiles ?? [])],
+    } : null,
     agentFiles: (context ?? []).filter((c) => c.kind === 'agent-rules'),
   };
 }

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

@@ -50,7 +50,7 @@ export function getContext(k, { path = null } = {}) {
     if (kit.colour?.uses) L.push(`  ${kit.colour.uses} colours are already written onto components (${kit.colour.samples.slice(0, 3).map((x) => x.value).join(', ')}); do not add one.`);
   } else if (t.tokenFile) {
     const strays = t.colors.length - k.tokenColors.length;
-    L.push(`TOKENS: ${k.tokenColors.length} colour tokens in ${t.tokenFile}. Use them; never hardcode a colour.${strays ? ` (${strays} hardcoded strays already exist; do not add more.)` : ''}`);
+    L.push(`TOKENS: ${k.tokenColors.length} colour tokens in ${t.tokenFile}. Use them${k.shadcn ? ' as classes (bg-primary, text-muted-foreground); never a palette class (text-gray-500, ring-green-500) and' : ';'} never hardcode a colour.${strays ? ` (${strays} hardcoded strays already exist; do not add more.)` : ''}`);
   } else if (t.colors.length) {
     L.push(`TOKENS: none defined. ${t.colors.length} distinct colours already in play; reuse one, never invent another.`);
   }

package/skills/roast-my-design-system/scripts/rules/build.mjs

@@ -238,7 +238,7 @@ if (neverImported.length >= 3) {
   
   lines.push('');
   if (compact) {
-    lines.push(`*Compact rules by roast-my-design-system ver. ${VERSION}; the full set with receipts: npx roast-my-design-system --rules*`);
+    lines.push(`*Compact rules by roast-my-design-system ver. ${VERSION}; the full set with receipts: npx roast-my-design-system@latest --rules*`);
   } else {
     lines.push('---');
     lines.push(`*Generated by [roast-my-design-system](https://github.com/gregkozakiewicz/roast-my-design-system) ver. ${VERSION}. Rescan after refactors to keep these rules honest.*`);
@@ -251,7 +251,7 @@ if (neverImported.length >= 3) {
   if (compact && text.length > MAX_COMPACT) {
     const cut = text.lastIndexOf('\n### ', MAX_COMPACT);
     if (cut > 0) {
-      text = `${text.slice(0, cut).trimEnd()}\n\n*Trimmed to fit this file's limits; the full rules: npx roast-my-design-system --rules*\n`;
+      text = `${text.slice(0, cut).trimEnd()}\n\n*Trimmed to fit this file's limits; the full rules: npx roast-my-design-system@latest --rules*\n`;
     }
   }
   const ruleCount = text.split('\n').filter((l) => l.startsWith('- ')).length;