roast-my-design-system 7.7.0 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roast-my-design-system",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "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 34 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

@@ -30,7 +30,8 @@ import { PALETTE } from '../profiles/shadcn-data.mjs';
 // and any opacity suffix. Word boundary at the front stops `text-primary` and
 // `bg-sidebar` from matching; the shade stops `border-gray` (no shade) which
 // is not a Tailwind class.
-const TIN_RE = new RegExp(`(?<![\\w-])(?:[\\w-]+:)*(?:bg|text|border|ring|outline|from|to|via|fill|stroke|divide|decoration|placeholder|caret|accent|shadow)-(?:${PALETTE})-(?:50|[1-9]00|950)(?:/\\d+)?(?![\\w-])`, 'g');
+// exported for the guard: the same pattern judges an added line
+export const PALETTE_CLASS_RE = new RegExp(`(?<![\\w-])(?:[\\w-]+:)*(?:bg|text|border|ring|outline|from|to|via|fill|stroke|divide|decoration|placeholder|caret|accent|shadow)-(?:${PALETTE})-(?:50|[1-9]00|950)(?:/\\d+)?(?![\\w-])`, 'g');
 // Evening overrides painted by hand with white or black (the palette shades
 // are already caught above with their dark: prefix).
 const DARK_WB_RE = /(?<![\w-])dark:(?:bg|text|border)-(?:white|black)(?:\/\d+)?(?![\w-])/g;
@@ -70,7 +71,7 @@ export function countPaint(root, codeFiles, { uiDirs = [], kitNames = new Set()
     if (src === null || exemptReason(f, src)) continue;
     ownFiles += 1;
 
-    const tinHits = [...src.matchAll(TIN_RE)].map((m) => m[0]);
+    const tinHits = [...src.matchAll(PALETTE_CLASS_RE)].map((m) => m[0]);
     const wbHits = [...src.matchAll(DARK_WB_RE)].map((m) => m[0]);
     const all = [...tinHits, ...wbHits];
     if (all.length) {

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

@@ -8,7 +8,7 @@
  */
 import { existsSync } from 'node:fs';
 import {
-  EMAIL_PRINT_RE, ARTWORK_NAME_RE, RENDER_TO_IMAGE_RE, OG_ROUTE_RE, RENDERER_PATH_RE, CRASH_PAGE_RE, svgHeavy, exemptReason, isLibraryClass,
+  EMAIL_PRINT_RE, ARTWORK_NAME_RE, 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';
@@ -297,8 +297,6 @@ export function harvestTokens(root, styleFiles, codeFiles) {
   // page and must beat the host's CSS: Tailwind imported with the important
   // flag, or a config scoping every utility under an id. There, !important is
   // the medium, like inline styles in email. Skipped, named with the reason.
-  const WIDGET_CSS_RE = /@import\s+["']tailwindcss(?:\/utilities\.css)?["'][^;]*\bimportant\b/;
-  const WIDGET_CONFIG_RE = /\bimportant\s*:\s*["']#/;
   const widgetDirs = codeFiles.filter((f) => /(^|\/)tailwind\.config\.[mc]?[jt]s$/.test(f))
     .filter((f) => WIDGET_CONFIG_RE.test(readSource(join(root, f)) ?? ''))
     .map((f) => f.slice(0, f.lastIndexOf('/') + 1));

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

@@ -64,3 +64,11 @@ export function exemptReason(file, text = '') {
  */
 export const LIBRARY_CLASS_RE = /^(cm-|ͼ|ProseMirror|monaco-|sp-|react-datepicker|react-tel-input|DateInput_|DayPicker|react-grid-|react-resizable|react-flow|react-select|react-toastify|Toastify|select2|EmojiPickerReact|epr-|notion-|fc-|fc$|tippy-|hljs|language-|ps__|ace_|ng-|docsearch|DocSearch|grecaptcha|rr-|sbdocs|docs-story|mapboxgl-|leaflet-|swiper-|slick-|rc-|ant-|Mui|ck-|ql-|tox-|mce-|DraftEditor|public-Draft|w-md-editor|rdp-|recharts-|apexcharts-|intercom-|crisp-|hubspot|shiki|katex|mermaid|prism-)/;
 export const isLibraryClass = (c) => LIBRARY_CLASS_RE.test(c);
+
+/**
+ * An embedded widget (a survey, a chat bubble) lives inside a stranger's page
+ * and must beat the host's CSS: Tailwind imported with the important flag, or
+ * a config scoping every utility under an id. There, !important is the medium.
+ */
+export const WIDGET_CSS_RE = /@import\s+["']tailwindcss(?:\/utilities\.css)?["'][^;]*\bimportant\b/;
+export const WIDGET_CONFIG_RE = /\bimportant\s*:\s*["']#/;

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

@@ -10,10 +10,13 @@
  * text for styling, and say which on-system value a stray most resembles.
  */
 import { extname, join } from 'node:path';
-import { walkRepo, readSource } from '../harvest/walk.mjs';
+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 { harvestTokens, extractStyling, normalizeHex, isGrey } from '../harvest/tokens.mjs';
 import { harvestComponents, definedComponents } from '../harvest/components.mjs';
 import { loadExclusions } from './exclusions.mjs';
+import { WIDGET_CONFIG_RE } from './exempt.mjs';
 import { hexRgb } from './nearpairs.mjs';
 import { typefaceOf, GENERIC_FONTS } from './typefaces.mjs';
 
@@ -26,6 +29,13 @@ export { definedComponents };
 // 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';
+// !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.
+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 };
 
 // Radius, font size, shadow and typeface: the patterns, so both checkers agree
 // on what a declaration is and what counts as a disciplined value.
@@ -63,6 +73,14 @@ 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 components = harvestComponents(repoRoot, files.code).components
+    .map(({ name, file, usageCount, isPage }) => ({ name, file, usageCount, isPage }));
+  const profile = profileRepo(repoRoot, files);
+  decideProfile(profile, components, files, repoRoot);
+  const P = profileOf(profile);
+  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));
 
   // Every --var definition, as normalizedValue → name, so a guard can say
   // "use var(--blue-500)" instead of leaving the reader to hunt the hex.
@@ -97,9 +115,34 @@ export function learnSystem(repoRoot, { exclude = [] } = {}) {
     // Trimmed to the four fields a guard can act on: what it is called, where
     // it lives, how much the repo leans on it, and whether it is a page (pages
     // are routes, not reusable parts, so two of a name is not a duplicate).
-    components: harvestComponents(repoRoot, files.code).components
-      .map(({ name, file, usageCount, isPage }) => ({ name, file, usageCount, isPage })),
+    components,
     files: { styles: files.styles.length, code: files.code.length },
+    // How the repo was read (7.1 to 7.7), decided once by the same profiles
+    // the report uses, so a guard treats installed code, a registry's
+    // published folders and a widget's stylesheet the way the score does.
+    profile: {
+      kind: P.kind,
+      role: P.role,
+      // folders the team did not write (a shadcn catalogue, installed
+      // registries, kit blocks): their brackets and copies are not the PR's
+      // sin. Empty on a registry: what it publishes is its own work.
+      // 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 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,
+      sheetFile: P.shadcn?.sheet?.found ? P.shadcn.sheet.file : null,
+      // packages whose Tailwind config scopes utilities under an id: widgets
+      widgetDirs,
+      // a registry: only the published folders are counted; sibling variants
+      // and blocks hold the same names by design
+      registry: P.isRegistry && P.registry ? {
+        countedDirs: P.registry.publishedDirs ?? [],
+        variants: P.registry.variants ?? [],
+        blockDirs: P.registry.blockDirs ?? [],
+      } : 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 = '7.7.0';
+export const VERSION = '7.8.0';
 // 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.