roast-my-design-system 5.2.3 → 5.3.0

package/README.md

@@ -1,6 +1,6 @@
 # roast-my-design-system
 
-[![npm](https://img.shields.io/npm/v/roast-my-design-system?color=2dd4bf&label=npm)](https://www.npmjs.com/package/roast-my-design-system) [![downloads](https://img.shields.io/npm/dm/roast-my-design-system?color=2dd4bf&label=downloads)](https://www.npmjs.com/package/roast-my-design-system) [![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
+[![npm](https://img.shields.io/npm/v/roast-my-design-system?color=2dd4bf&label=npm)](https://www.npmjs.com/package/roast-my-design-system) [![downloads](https://img.shields.io/npm/dm/roast-my-design-system?color=2dd4bf&label=downloads)](https://www.npmjs.com/package/roast-my-design-system) [![Socket](https://badge.socket.dev/npm/package/roast-my-design-system)](https://socket.dev/npm/package/roast-my-design-system) [![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE) [![zero dependencies](https://img.shields.io/badge/dependencies-0-2dd4bf)](https://www.npmjs.com/package/roast-my-design-system?activeTab=dependencies) [![no telemetry](https://img.shields.io/badge/no-telemetry-2dd4bf)](https://github.com/gregkozakiewicz/roast-my-design-system#what-makes-the-numbers-trustworthy)
 
 ## Your AI can write the UI. This makes sure it writes *your* UI.
 
@@ -28,8 +28,8 @@ One scan powers all of it; the flags decide what lands on disk. Combine freely.
 
 | Command                                                             | What you get |
 |---|---|
-| <code>npx&nbsp;roast-my-design-system</code> | The scan and `design-system-roast.html`, opened in your browser |
-| <code>npx&nbsp;roast-my-design-system&nbsp;&lt;path&gt;</code> | Scan a different repo than the current directory |
+| <code>npx&nbsp;roast-my-design-system@latest</code> | The scan and `design-system-roast.html`, opened in your browser |
+| <code>npx&nbsp;roast-my-design-system@latest&nbsp;&lt;path&gt;</code> | Scan a different repo than the current directory |
 | `... --apply` | The generated agent rules injected straight into every agent file you have: `CLAUDE.md`, `AGENTS.md`, `.cursorrules`, `.cursor/rules/`, `.windsurfrules` and `.github/copilot-instructions.md`, inside a marked block. Re-running replaces only that block, never your own text. Windsurf and Copilot get a compact variant sized for their limits |
 | `... --rules` | The same rules written to `design-system-rules.md` instead, for pasting by hand |
 | `... --card` | `roast-card.svg`: a shareable 1200x630 card with the score and worst findings. Pure SVG, embeds in a README |
@@ -76,7 +76,7 @@ The same report in light mode (one file, built-in toggle):
 Some repos host more than one visual world on purpose: the product plus a marketing site, a playground, a batch of experiments. Blending them produces a score that describes none of them. Scope the scan to the design system you are actually judging:
 
 ```bash
-npx roast-my-design-system --exclude lab/ --exclude playground/
+npx roast-my-design-system@latest --exclude lab/ --exclude playground/
 ```
 
 Or make it permanent with a `.roastignore` file at the repo root, one repo-relative folder per line:
@@ -117,7 +117,7 @@ The scanner already speaks SARIF, so wiring it into GitHub code scanning is six
 
 ```yaml
 - uses: actions/checkout@v4
-- run: npx roast-my-design-system . --sarif --no-open
+- run: npx roast-my-design-system@latest . --sarif --no-open
 - uses: github/codeql-action/upload-sarif@v3
   with:
     sarif_file: design-system-roast.sarif
@@ -128,7 +128,7 @@ The scanner already speaks SARIF, so wiring it into GitHub code scanning is six
 **No install, no Claude needed — just try it:**
 
 ```bash
-npx roast-my-design-system
+npx roast-my-design-system@latest
 ```
 
 Run it inside any repo. Same scanner, same report, straight from npm. The Claude Code skill below adds the conversation on top: the roast in chat, then a punch list you can actually work through with Claude.

package/bin/roast.mjs

@@ -5,7 +5,7 @@
  * diagnose it against Ideal Design System norms and the 29-repo benchmark,
  * write design-system-roast.html, open it, print the score.
  *
- *   npx roast-my-design-system [path] [--theme dark|light] [--out report.html] [--no-open]
+ *   npx roast-my-design-system@latest [path] [--theme dark|light] [--out report.html] [--no-open]
  *                              [--rules] [--json] [--exclude <path>]
  */
 import { spawnSync } from 'node:child_process';
@@ -61,7 +61,7 @@ if (flag('version') || flag('v')) { console.log(VERSION); process.exit(0); }
 if (flag('help') || flag('h')) {
   console.log(`roast-my-design-system ${VERSION}
 
-Usage: npx roast-my-design-system [path] [options]
+Usage: npx roast-my-design-system@latest [path] [options]
 
   path            repo to scan (default: current directory)
   --theme <t>     dark | light (default: dark)

package/package.json

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

@@ -75,7 +75,7 @@ const svg = `<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http:/
   ${rows}
 
   <line x1="96" y1="486" x2="1104" y2="486" stroke="#272c37" stroke-width="1.5"/>
-  <text x="96" y="536" font-family="${MONO}" font-size="20" fill="#8b93a7">npx roast-my-design-system</text>
+  <text x="96" y="536" font-family="${MONO}" font-size="20" fill="#8b93a7">npx roast-my-design-system@latest</text>
   <text x="1104" y="536" font-family="${MONO}" font-size="17" fill="#5a6172" text-anchor="end">scanned ${date} · ver. ${esc(s.version ?? '')}</text>
 </svg>
 `;

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

@@ -516,6 +516,28 @@ function spacingTrap() {
   }
   return '';
 }
+function coloursTrap() {
+  if (nearPairs.length < 6) return '';
+  return trapBox(`This palette holds ${nearPairs.length} pairs of colours a screen can barely tell apart. An agent asked for the brand grey cannot see the difference either, so it copies whichever twin is nearest, and when unsure it invents a third between them. Twins breed triplets.`);
+}
+function inlineTrap() {
+  if (inline.count < 50) return '';
+  return trapBox(`${n(inline.count)} inline styles live where the system should. An agent learns a codebase by example, and every inline style is an example that says the system is optional. Each exception it copies becomes the precedent for the next one.`);
+}
+function importantTrap() {
+  if (important.count < 20) return '';
+  return trapBox(`${n(important.count)} !important declarations, and each one is a shouting match a previous developer decided to win by force. An agent whose style will not apply does what the repo taught it and shouts louder. The volume in this codebase only goes up.`);
+}
+function orphansTrap() {
+  if (neverImported.length < 10) return '';
+  return trapBox(`${neverImported.length} components are never imported anywhere. An agent searching for a Button finds the abandoned ones alongside the canonical one with nothing to tell them apart, so yesterday's dead end becomes today's example.`);
+}
+// At most three traps per report, in severity order: scarcity is what makes
+// the marker readable as a warning rather than wallpaper.
+function trapsBlock() {
+  return [dupesTrap(), spacingTrap(), coloursTrap(), inlineTrap(), importantTrap(), orphansTrap()]
+    .filter(Boolean).slice(0, 3).join('');
+}
 
 function spacingBars() {
   const hasTw = twSpacing.length > 0;
@@ -1379,7 +1401,7 @@ ${whereToStartSection()}
 
 ${giftSection()}
 
-${dupesTrap()}${spacingTrap()}
+${trapsBlock()}
 
 <div class="stats">${bigStats.map((s) => statTile(s)).join('')}</div>
 

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

@@ -1,4 +1,4 @@
 // 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 = '5.2.3';
+export const VERSION = '5.3.0';

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

@@ -62,7 +62,7 @@ export function getContext(k, { path = null } = {}) {
   const faces = distinctTypefaces(t.fontFamilies ?? []);
   if (faces.length) L.push(`TYPE: ${faces.slice(0, 3).join(', ')}. No new typefaces, no hand-declared font stacks.`);
   L.push('DISCIPLINE: no static style={{ }}, no !important, no new arbitrary values. Match the neighbouring component.');
-  if (k.agentFiles.length === 0) L.push('NOTE: this repo has no agent rules file; these lines are the only guardrail. Suggest running npx roast-my-design-system --apply.');
+  if (k.agentFiles.length === 0) L.push('NOTE: this repo has no agent rules file; these lines are the only guardrail. Suggest running npx roast-my-design-system@latest --apply.');
   L.push('Before finishing: call roast_validate on what you wrote, then roast_review.');
 
   let text = L.join('\n');

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

@@ -30,7 +30,7 @@ const repoName = h.profile?.name ?? 'this repo';
   if (!compact) {
     lines.push(`<!-- Generated by roast-my-design-system from a scan of ${repoName} on ${scanDate}.`);
     lines.push('     Paste into CLAUDE.md, .cursor/rules or AGENTS.md. Regenerate after big refactors:');
-    lines.push('     npx roast-my-design-system --rules -->');
+    lines.push('     npx roast-my-design-system@latest --rules -->');
     lines.push('');
   }
   // Mirror of the report's "no design system" banner: with almost no colour or