oh-my-opencode 5.1.51 → 5.1.55

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/viewport-reflow.ts

@@ -0,0 +1,33 @@
+import { shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { chain, clipsX, painted, right, scrollsX } from "./support/geometry"
+
+function reaches(s: PageSnapshot, el: ElementSnapshot): number {
+	let end = Math.max(right(el.rect), ...el.lineRects.map(right))
+	if (clipsX(el)) end = right(el.rect)
+	for (const ancestor of chain(s, el).slice(1)) {
+		if (clipsX(ancestor) && ancestor.tag !== "body") end = Math.min(end, right(ancestor.rect))
+	}
+	return end
+}
+
+export const viewportReflow: PageRule = {
+	meta: {
+		id: "viewport-reflow", name: "Viewport reflow", category: "quality", severity: "error", engine: "page",
+		description: "The document is wider than the viewport and requires sideways scrolling.",
+		fixHint: "Constrain the widest content, allow long tokens to wrap, and keep intentional horizontal scrolling inside its own region.",
+	},
+	check: ({ snapshot }) => {
+		if (snapshot.document.scrollWidth <= snapshot.document.clientWidth) return []
+		const widest = snapshot.elements
+			.filter((el) => painted(snapshot, el) && reaches(snapshot, el) > snapshot.document.clientWidth &&
+				!chain(snapshot, el).slice(1).some((n) => n.tag !== "body" && scrollsX(n)))
+			.sort((a, b) => reaches(snapshot, b) - reaches(snapshot, a))[0]
+		return [{
+			element: null,
+			message: `Document width ${snapshot.document.scrollWidth}px exceeds ${snapshot.document.clientWidth}px${widest ? `; furthest element ${widest.selector} ends at ${reaches(snapshot, widest)}px` : ""}.`,
+			snippet: widest ? shortSnippet(widest) : `${snapshot.document.scrollWidth}px / ${snapshot.document.clientWidth}px`,
+		}]
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/ai-color-palette.test.ts

@@ -0,0 +1,13 @@
+import { expect, test } from "bun:test"
+import { aiColorPalette } from "./ai-color-palette"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<h1 className="text-purple-500" />', 1],
+	['<div className="text-purple-500 text-3xl" />', 1],
+	['<div className="from-purple-500 to-cyan-400" />', 1],
+	['<p className="text-purple-500" />', 0],
+	['<div className="from-red-500 to-orange-400" />', 0],
+])("#given palette source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(aiColorPalette, source)).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/ai-color-palette.ts

@@ -0,0 +1,11 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const aiColorPalette: SourceRule = {
+	meta: { id: "ai-color-palette", name: "AI color palette", category: "slop", severity: "warning", engine: "source", description: "Purple heading ink or a purple-to-cool gradient repeats a generic palette.", fixHint: "Choose colors from the product's visual identity." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\btext-(?:purple|violet|indigo)-(\d+)\b/g, /\bfrom-(?:purple|violet|indigo)-(\d+)\b/g], ({ match, scope }) => {
+		if (match[0].startsWith("text-")) return /\btext-[2-9]xl\b|<h[1-3]/i.test(scope) ? `${match[0]} on heading` : null
+		return /\bto-(?:purple|violet|indigo|blue|cyan|pink|fuchsia)-\d+\b/.test(scope) ? `${match[0]} gradient` : null
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/aphoristic-cadence.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test"
+import { aphoristicCadence } from "./aphoristic-cadence"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	[`<html><p>${"Not a tool. A whole new world. ".repeat(3)}</p></html>`, 1],
+	[`<html><p>${"Not a tool. A whole new world. ".repeat(2)}</p></html>`, 0],
+	["<html><p>Export invoices, send reports, and compare totals.</p></html>", 0],
+	["Not a tool. A whole new world. ".repeat(3), 0],
+])("#given clipped page copy #then returns %i findings", (source, count) => {
+	expect(checkSource(aphoristicCadence, source, { path: "a.svelte" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/aphoristic-cadence.ts

@@ -0,0 +1,14 @@
+import type { SourceRule } from "../../rule"
+import { bodyText, componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const aphoristicCadence: SourceRule = {
+	meta: { id: "aphoristic-cadence", name: "Aphoristic-cadence copy", category: "slop", severity: "warning", engine: "source", description: "Several clipped rebuttals give page copy a repetitive slogan rhythm.", fixHint: "Replace repeated slogans with specific, naturally paced sentences." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const source = pageSource(context)
+		if (source === null) return []
+		const text = bodyText(source)
+		const count = [...text.matchAll(/\bNot an? [a-z][^.!?]{1,40}[.!]\s+[A-Z][^.!?]{1,60}[.!]/g)].length + [...text.matchAll(/\b[A-Z][^.!?]{4,80}[.!]\s+(No|Just)\s+[a-z][^.!?]{2,60}[.!]/g)].length
+		return count >= 3 ? [sourceHit(source, 0, `${count} clipped slogan constructions`)] : []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/border-accent-on-rounded.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "bun:test"
+import { borderAccentOnRounded } from "./border-accent-on-rounded"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<div className="rounded-lg border-t-2" />', "a.tsx", 1],
+	['<div className="rounded-none border-t-2" />', "a.tsx", 0],
+	['<div className="rounded-full border-t-2 animate-spin" />', "a.tsx", 0],
+	[".a{border-bottom:3px solid red}\n\n\n\n\n.a{border-radius:12px}", "a.css", 1],
+	[".a{border-bottom:3px solid red}\n.b{border-radius:12px}", "a.css", 0],
+	[".a{border-bottom:2px solid red;border-radius:12px}", "a.css", 0],
+])("#given border source %s #then returns expected findings", (source, path, count) => {
+	expect(checkSource(borderAccentOnRounded, source, { path })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/border-accent-on-rounded.ts

@@ -0,0 +1,20 @@
+import type { SourceRule } from "../../rule"
+import { cssScopes, selectorHost, selectorMatches } from "./support/css-scopes"
+import { tagAt } from "./support/markup-scope"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const borderAccentOnRounded: SourceRule = {
+	meta: { id: "border-accent-on-rounded", name: "Border accent on rounded element", category: "slop", severity: "warning", engine: "source", description: "A thick top or bottom border meets a rounded element.", fixHint: "Remove the accent border or use square corners." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\bborder-[tb]-(\d+)\b/g, /border-(?:top|bottom)\s*:\s*(\d+)px\s+solid/gi], ({ match, line, scope, offset, pass }) => {
+		if (match[0].startsWith("border-t-") || match[0].startsWith("border-b-")) {
+			const tag = tagAt(line, match.index ?? 0)
+			return Number(match[1]) >= 1 && /\brounded(?!-none\b)(?:-\w+)?\b/.test(tag) && !/\banimate-spin\b/.test(tag) ? match[0] : null
+		}
+		if (Number(match[1]) < 3) return null
+		const scopes = cssScopes(pass.text, pass.sass)
+		const own = scopes.filter((s) => s.start <= offset && offset <= s.end).sort((a, b) => b.start - a.start)[0]
+		const radius = own ? scopes.some((s) => selectorMatches(selectorHost(s), selectorHost(own)) && /(?:^|[;{\s])border[-\w]*radius\s*:/.test(s.body)) : /border-radius/i.test(scope)
+		return radius ? match[0] : null
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/bounce-easing.test.ts

@@ -0,0 +1,19 @@
+import { expect, test } from "bun:test"
+import { bounceEasing } from "./bounce-easing"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	["animate-bounce", 1],
+	["animation: spring-in 1s", 1],
+	["transition: all cubic-bezier(.2, -0.2, .3, 1)", 1],
+	["transition: all cubic-bezier(.2, -.1, .3, 1.1)", 0],
+	["animation: fade-in 1s", 0],
+])("#given motion source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(bounceEasing, source)).toHaveLength(count)
+})
+
+test("#given an intentional easing #then removes that curve only", () => {
+	expect(checkSource(bounceEasing, "cubic-bezier(.2, -.2, .3, 1)\nanimate-bounce", { config: { allowEasings: ["cubic-bezier(.2,-.2,.3,1)"] } })).toHaveLength(1)
+	expect(checkSource(bounceEasing, "animation: spring-in 1s\nanimation: bounce-out 1s", { config: { allowEasings: ["SPRING-IN"] } })).toHaveLength(1)
+	expect(checkSource(bounceEasing, "animation: spring-in 1s, bounce-out 1s", { config: { allowEasings: ["spring-in"] } })[0]?.message).toBe("animation: bounce-out")
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/bounce-easing.ts

@@ -0,0 +1,21 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const bounceEasing: SourceRule = {
+	meta: { id: "bounce-easing", name: "Bounce or elastic easing", category: "slop", severity: "advisory", engine: "source", description: "A named bounce animation or overshooting timing curve adds elastic motion.", fixHint: "Use a smooth deceleration, or allow an intentional timing function." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\banimate-bounce\b/g, /animation(?:-name)?\s*:\s*([^;{}]*(?:bounce|elastic|wobble|jiggle|spring)[^;{}]*)/gi, /cubic-bezier\(\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*\)/g], ({ match, context }) => {
+		const canonical = (s: string): string => s.replace(/\s/g, "").toLowerCase()
+		const names = match[4] === undefined ? match[1]?.split(/[,\s]+/).filter((s) => /bounce|elastic|wobble|jiggle|spring/i.test(s)) ?? [] : []
+		const name = names.find((candidate) => !context.config.allowEasings?.some((easing) => canonical(easing) === canonical(candidate)))
+		if (context.config.allowEasings?.some((easing) => [match[0], match[1] ?? ""].some((value) => canonical(easing) === canonical(value)))
+			|| (names.length > 0 && name === undefined)) return null
+		if (match[4] !== undefined) {
+			const y1 = Number(match[2])
+			const y2 = Number(match[4])
+			return y1 < -0.1 || y1 > 1.1 || y2 < -0.1 || y2 > 1.1 ? `cubic-bezier(${match.slice(1).join(", ")})` : null
+		}
+		if (match[1]) return `animation: ${name ?? match[1].trim()}`
+		return "animate-bounce (Tailwind)"
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/broken-image.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "bun:test"
+import { brokenImage } from "./broken-image"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<img alt="photo" />', "a.tsx", 1],
+	['<img\nsrc="#"\n/>', "a.tsx", 1],
+	['<img src={url} />', "a.tsx", 0],
+	['<img srcset="a.webp 1x" />', "a.tsx", 0],
+	['<img {...props} />', "a.tsx", 0],
+	['<img data-caption="src=example" />', "a.tsx", 1],
+	['const example = "<img>";', "a.tsx", 0],
+	['<script>const example = "<img>";</script><img src="a.png">', "a.vue", 0],
+	['<img :src="url" />', "a.vue", 0],
+	["<img {src} />", "a.svelte", 0],
+	['<img src="" />', "a.astro", 1],
+	["// Plain <img> comment\nexport const A=()=> <img src='a.png'/>;", "a.tsx", 0],
+	['<div>{"<img>"}</div>', "a.tsx", 0],
+	['const pattern=/<img>/;', "a.tsx", 0],
+	['<div>{url ? <img src={url}/> : <img/>}</div>', "a.tsx", 1],
+])("#given image source %s #then returns expected findings", (source, path, count) => {
+	expect(checkSource(brokenImage, source, { path })).toHaveLength(count)
+})
+
+test("#given a multiline missing image #then identifies its opening position", () => {
+	expect(checkSource(brokenImage, "\n  <img\n    alt='photo'\n  />")[0]).toMatchObject({ line: 2, column: 3 })
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/broken-image.ts

@@ -0,0 +1,16 @@
+import { extensionOf } from "../../core/source"
+import type { SourceRule } from "../../rule"
+import { imageTags, missingImageSource } from "./support/image-tags"
+import { sheetExtensions, sourceExtensions, sourceHit, stripComments } from "./support/source-text"
+
+export const brokenImage: SourceRule = {
+	meta: { id: "broken-image", name: "Broken or placeholder image", category: "quality", severity: "warning", engine: "source", description: "An image tag has no statically usable source or source set.", fixHint: "Supply a real image source or remove the unused image element." },
+	extensions: sourceExtensions,
+	check: ({ file }) => {
+		const ext = extensionOf(file.path)
+		if (sheetExtensions.includes(ext)) return []
+		const script = ["js", "jsx", "ts", "tsx", "mjs", "cjs"].includes(ext)
+		const text = stripComments(file.text, script)
+		return imageTags(text, script).filter((hit) => missingImageSource(hit.tag, ext)).map((hit) => sourceHit(file.text, hit.offset, "Image has no source", hit.tag.slice(0, 100)))
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/codex-grid-background.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from "bun:test"
+import { codexGridBackground } from "./codex-grid-background"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	[".grid{background:linear-gradient(red 1px, transparent 1px),linear-gradient(90deg, red 1px, transparent 1px);background-size:24px 24px}", 1],
+	[".line{background:linear-gradient(red 1px, transparent 1px);background-size:24px 24px}", 0],
+	[".grid{background:linear-gradient(red 1px, transparent 1px),linear-gradient(90deg, red 1px, transparent 1px)}", 0],
+])("#given background source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(codexGridBackground, source, { path: "a.css" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/codex-grid-background.ts

@@ -0,0 +1,18 @@
+import type { SourceRule } from "../../rule"
+import { cssScopes } from "./support/css-scopes"
+import { sourceExtensions, sourceHit, sourcePasses } from "./support/source-text"
+
+export const codexGridBackground: SourceRule = {
+	meta: { id: "codex-grid-background", name: "Decorative grid-line background", category: "slop", severity: "advisory", engine: "source", description: "Two tiled hairline gradients draw a decorative background grid.", fixHint: "Remove the grid unless it communicates structure or data." },
+	extensions: sourceExtensions,
+	check: (context) => {
+		const text = sourcePasses(context)[0]?.text ?? ""
+		const blocks = [...cssScopes(text).map((s) => ({ body: s.body, offset: text.indexOf("{", s.start) })), ...[...text.matchAll(/\bstyle\s*=\s*["']([^"']*)["']/gi)].map((m) => ({ body: m[1] ?? "", offset: m.index ?? 0 }))]
+		for (const block of blocks) {
+			const backgrounds = [...block.body.matchAll(/\bbackground(?:-image)?\s*:\s*([^;{}"']*)/gi)].map((m) => m[1] ?? "").join(";")
+			const lines = [...backgrounds.matchAll(/\b\d{1,3}px\s*,\s*transparent\s+\d{1,3}px|transparent\s+calc\(100%\s*-\s*\d{1,3}px\)/gi)].length
+			if (lines >= 2 && (/background-size\s*:[^;{}"']*\b\d{1,3}px\b/i.test(block.body) || /\/\s*\d{1,3}px\b/.test(backgrounds))) return [sourceHit(context.file.text, block.offset, "Two-axis gradient background grid")]
+		}
+		return []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/dark-glow.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from "bun:test"
+import { darkGlow } from "./dark-glow"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	["<html><style>.a{box-shadow:0 0 20px #f00}</style></html>", 1],
+	["<html><style>body{background:#000}.a{box-shadow:0 4px 20px #f00}</style></html>", 1],
+	["<html><style>.a{box-shadow:0 4px 20px #f00}</style></html>", 0],
+	["<html><style>.a{box-shadow:0 0 20px #777}</style></html>", 0],
+	["<html><style>.a{box-shadow:0 0 4px #f00}</style></html>", 0],
+	["<html><style>.a{box-shadow:0 0 20px rgba(255,0,0,.1)}</style></html>", 0],
+	["<html><style>.a{box-shadow:0 0 20px -11px #f00}</style></html>", 0],
+])("#given glow page source #then returns %i findings", (source, count) => {
+	expect(checkSource(darkGlow, source, { path: "a.astro" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/dark-glow.ts

@@ -0,0 +1,21 @@
+import type { SourceRule } from "../../rule"
+import { darkBackground, resolveValues } from "./support/css-effects"
+import { componentExtensions, pageSource, sourceHit } from "./support/source-text"
+import { sourceShadows } from "./support/source-shadow"
+
+export const darkGlow: SourceRule = {
+	meta: { id: "dark-glow", name: "Glowing shadow accents", category: "slop", severity: "warning", engine: "source", description: "A colored blurred shadow creates a visible glow.", fixHint: "Use neutral elevation shadows instead of chromatic halos." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		if (text === null) return []
+		const dark = darkBackground(text)
+		for (const m of resolveValues(text).matchAll(/(?<![-\w])(?:box|text)-shadow\s*:\s*([^;{}]+)/gi)) {
+			for (const s of sourceShadows(m[1] ?? "")) {
+				if (Math.max(s.color.r, s.color.g, s.color.b) - Math.min(s.color.r, s.color.g, s.color.b) < 30 || s.blur <= 4 || s.blur * s.color.a < 3 || s.blur / 2 + s.spread <= 0) continue
+				if (dark || (s.x === 0 && s.y === 0)) return [sourceHit(text, m.index ?? 0, "Colored shadow glow")]
+			}
+		}
+		return []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/em-dash-overuse.test.ts

@@ -0,0 +1,13 @@
+import { expect, test } from "bun:test"
+import { emDashOveruse } from "./em-dash-overuse"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	[`<html><p>${"a &mdash; b ".repeat(8)}</p></html>`, 1],
+	[`<html><p>${"a -- b ".repeat(8)}</p></html>`, 1],
+	[`<html><p>${"a --- b ".repeat(8)}</p></html>`, 0],
+	[`<html><p>${"a &mdash; b ".repeat(7)}</p></html>`, 0],
+	[`<html><p>${"a &mdash; b ".repeat(8)}${"x".repeat(5000)}</p></html>`, 0],
+])("#given page dash source #then returns %i findings", (source, count) => {
+	expect(checkSource(emDashOveruse, source, { path: "a.astro" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/em-dash-overuse.ts

@@ -0,0 +1,15 @@
+import { EM_DASH } from "../../core/characters"
+import type { SourceRule } from "../../rule"
+import { bodyText, componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const emDashOveruse: SourceRule = {
+	meta: { id: "em-dash-overuse", name: "Em-dash overuse", category: "slop", severity: "advisory", engine: "source", description: "Body copy repeatedly uses em dashes in a short space.", fixHint: "Break repeated asides into sentences or use simpler punctuation." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const source = pageSource(context)
+		if (source === null) return []
+		const text = bodyText(source).replace(/—|&#0*8212;|&#x0*2014;/gi, EM_DASH)
+		const count = [...text.matchAll(/\u2014|(?<!-)--(?!-)/g)].length
+		return count >= 8 && text.length <= count * 500 ? [sourceHit(source, 0, `${count} em dashes in body copy`)] : []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/gradient-text.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test"
+import { gradientText } from "./gradient-text"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<h1 className="bg-gradient-to-r bg-clip-text" />', 1],
+	['<h1 className="bg-clip-text bg-blue-500" />', 0],
+	[".a {background:linear-gradient(red,blue);\nbackground-clip:text;\n-webkit-background-clip:text}", 1],
+	[".a{background:blue;background-clip:text}", 0],
+])("#given gradient source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(gradientText, source, { path: "a.css" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/gradient-text.ts

@@ -0,0 +1,11 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const gradientText: SourceRule = {
+	meta: { id: "gradient-text", name: "Gradient text", category: "slop", severity: "warning", engine: "source", description: "Clipped text uses a decorative gradient fill.", fixHint: "Use a solid text color with a clear hierarchy." },
+	extensions: sourceExtensions,
+	check: lineCheck([/(?:-webkit-)?background-clip\s*:\s*text/gi, /\bbg-clip-text\b/g], ({ match, scope }) => {
+		if (match[0] === "bg-clip-text") return /\bbg-gradient-to-/i.test(scope) ? "bg-clip-text + bg-gradient" : null
+		return /gradient/i.test(scope) ? "background-clip: text + gradient" : null
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/gray-on-color.test.ts

@@ -0,0 +1,20 @@
+import { expect, test } from "bun:test"
+import { grayOnColor } from "./gray-on-color"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<div className="text-gray-400 bg-blue-500" />', 1],
+	['<div className="text-gray-700 bg-blue-500" />', 0],
+	['<div className="text-gray-400 bg-blue-100" />', 0],
+	['<div className="text-gray-400 bg-blue-500/10" />', 0],
+	['<div className="text-gray-400 hover:bg-blue-500" />', 0],
+	['<div className="text-gray-400" /><div className="bg-blue-500" />', 0],
+	['<div className={active ? "text-gray-400" : "bg-blue-500"} />', 0],
+	['<div className={active ? "text-gray-400 bg-blue-500" : "text-white"} />', 1],
+	['<button className={`px-4 ${mode === "a" ? "bg-amber-600 text-white" : "text-slate-400"}`}>Mode</button>', 0],
+	['<div className={a ? "bg-red-500" : b ? "text-slate-400" : "bg-blue-600"} />', 0],
+	['<button className={cn("text-slate-400", mode === "a" ? "bg-amber-600" : "bg-white")}>Go</button>', 1],
+	['<div className={cn(a ? "bg-red-500" : "bg-blue-600", "text-slate-400")} />', 1],
+])("#given utility scope %s #then returns %i findings", (source, count) => {
+	expect(checkSource(grayOnColor, source)).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/gray-on-color.ts

@@ -0,0 +1,13 @@
+import type { SourceRule } from "../../rule"
+import { exclusiveScopes, solidBackground, tagAt } from "./support/markup-scope"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const grayOnColor: SourceRule = {
+	meta: { id: "gray-on-color", name: "Gray text on colored background", category: "quality", severity: "warning", engine: "source", description: "Gray utility text shares an element and conditional branch with a solid colored fill.", fixHint: "Use ink derived from the surface hue, or a neutral surface." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\btext-(?:gray|slate|zinc|neutral|stone)-(\d+)\b/g], ({ match, line }) => {
+		if (Number(match[1]) >= 700) return null
+		const bg = exclusiveScopes(tagAt(line, match.index ?? 0)).filter((scope) => scope.includes(match[0])).map((scope) => solidBackground(scope, true)).find((value) => value !== null)
+		return bg ? `${match[0]} on ${bg}` : null
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/index.ts

@@ -0,0 +1,19 @@
+import type { SourceRule } from "../../rule"
+import { aiColorPalette } from "./ai-color-palette"
+import { aphoristicCadence } from "./aphoristic-cadence"
+import { borderAccentOnRounded } from "./border-accent-on-rounded"
+import { bounceEasing } from "./bounce-easing"
+import { brokenImage } from "./broken-image"
+import { codexGridBackground } from "./codex-grid-background"
+import { darkGlow } from "./dark-glow"
+import { emDashOveruse } from "./em-dash-overuse"
+import { gradientText } from "./gradient-text"
+import { grayOnColor } from "./gray-on-color"
+import { marketingBuzzword } from "./marketing-buzzword"
+import { marquee } from "./marquee"
+import { monotonousSpacing } from "./monotonous-spacing"
+import { overusedFont } from "./overused-font"
+import { radialHalo } from "./radial-halo"
+import { sideTab } from "./side-tab"
+
+export const SOURCE_RULES: readonly SourceRule[] = [sideTab, borderAccentOnRounded, overusedFont, gradientText, grayOnColor, aiColorPalette, bounceEasing, brokenImage, codexGridBackground, monotonousSpacing, emDashOveruse, marketingBuzzword, aphoristicCadence, darkGlow, radialHalo, marquee]

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/marketing-buzzword.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test"
+import { marketingBuzzword } from "./marketing-buzzword"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	["<html><p>Streamline your work.</p></html>", 1],
+	["<html><p>Export invoices as CSV.</p></html>", 0],
+	["<html><script>const label='Streamline your work'</script><p>Export invoices.</p></html>", 0],
+	["<p>Streamline your work.</p>", 0],
+])("#given marketing page source #then returns %i findings", (source, count) => {
+	expect(checkSource(marketingBuzzword, source, { path: "a.vue" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/marketing-buzzword.ts

@@ -0,0 +1,17 @@
+import type { SourceRule } from "../../rule"
+import { bodyText, componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+const phrases = ["streamline your", "empower your", "supercharge your", "unleash your", "unleash the power", "leverage the power", "built for the modern", "trusted by leading", "trusted by the world", "best-in-class", "industry-leading", "world-class", "enterprise-grade", "next-generation", "cutting-edge", "transform your business", "revolutionize", "game-changer", "game changing", "mission-critical", "best of breed", "future-proof", "future proof", "seamless experience", "seamlessly integrate", "drive engagement", "drive growth", "drive results", "harness the power"]
+
+export const marketingBuzzword: SourceRule = {
+	meta: { id: "marketing-buzzword", name: "Marketing buzzword", category: "slop", severity: "warning", engine: "source", description: "Page copy contains generic promotional phrases instead of concrete information.", fixHint: "Describe what the product does and who it helps." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const source = pageSource(context)
+		if (source === null) return []
+		const text = bodyText(source).toLowerCase()
+		let count = 0
+		for (const phrase of phrases) count += text.split(phrase).length - 1
+		return count > 0 ? [sourceHit(source, 0, `${count} generic promotional phrases`)] : []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/marquee.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test"
+import { marquee } from "./marquee"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	["<marquee>News</marquee>", 1],
+	["<style>@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-100%)}}.track{animation:roll 10s linear infinite}</style>", 1],
+	["<style>@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-100%)}}.track{animation:roll 10s linear 1}</style>", 0],
+	["<style>@keyframes fade{from{opacity:0}to{opacity:1}}.track{animation:fade 1s infinite}</style>", 0],
+])("#given marquee source #then returns %i findings", (source, count) => {
+	expect(checkSource(marquee, `<html>${source}</html>`, { path: "a.astro" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/marquee.ts

@@ -0,0 +1,12 @@
+import type { SourceRule } from "../../rule"
+import { marqueeSelectors } from "./support/css-effects"
+import { componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const marquee: SourceRule = {
+	meta: { id: "marquee", name: "Auto-scrolling marquee", category: "slop", severity: "warning", engine: "source", description: "Content moves in a perpetual horizontal loop.", fixHint: "Keep content still or let the reader control scrolling." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		return text === null ? [] : marqueeSelectors(text).map((selector) => sourceHit(text, 0, `Horizontal content loop: ${selector}`, selector))
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/monotonous-spacing.test.ts

@@ -0,0 +1,13 @@
+import { expect, test } from "bun:test"
+import { monotonousSpacing } from "./monotonous-spacing"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	[`<html>${'<div class="p-4"></div>'.repeat(10)}</html>`, 1],
+	[`<html>${'<div class="p-0"></div>'.repeat(10)}</html>`, 0],
+	[`<html>${'<div class="p-4"></div>'.repeat(9)}</html>`, 0],
+	[`<html>${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => `<div class="p-${n}"></div>`).join("")}</html>`, 0],
+	['<div class="p-4"></div>'.repeat(10), 0],
+])("#given page spacing source #then returns %i findings", (source, count) => {
+	expect(checkSource(monotonousSpacing, source, { path: "a.astro" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/monotonous-spacing.ts

@@ -0,0 +1,22 @@
+import type { SourceRule } from "../../rule"
+import { pageSource, sourceHit, componentExtensions } from "./support/source-text"
+
+export const monotonousSpacing: SourceRule = {
+	meta: { id: "monotonous-spacing", name: "Monotonous spacing", category: "slop", severity: "warning", engine: "source", description: "One spacing value dominates a full page with little variation.", fixHint: "Vary spacing to distinguish groups from sections." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		if (text === null) return []
+		const vals: number[] = []
+		for (const m of text.matchAll(/(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*(\d+)px/gi)) { const v = Number(m[1]); if (v > 0 && v < 200) vals.push(v) }
+		for (const m of text.matchAll(/(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*([\d.]+)rem/gi)) { const v = Math.round(Number(m[1]) * 16); if (v > 0 && v < 200) vals.push(v) }
+		for (const m of text.matchAll(/gap\s*:\s*(\d+)px/gi)) vals.push(Number(m[1]))
+		for (const m of text.matchAll(/\b(?:p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|gap)-(\d+)\b/g)) vals.push(Number(m[1]) * 4)
+		if (vals.length < 10) return []
+		const counts = new Map<number, number>()
+		for (const value of vals) { const v = Math.round(value / 4) * 4; counts.set(v, (counts.get(v) ?? 0) + 1) }
+		const [dominant, count] = [...counts].sort((a, b) => b[1] - a[1] || a[0] - b[0])[0] ?? [0, 0]
+		if (dominant === 0 || count / vals.length <= 0.6 || [...counts.keys()].filter((v) => v > 0).length > 3) return []
+		return [sourceHit(text, 0, `${dominant}px appears ${count}/${vals.length} times`)]
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/overused-font.test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from "bun:test"
+import { overusedFont } from "./overused-font"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	["font-family: 'Inter', sans-serif;", 1],
+	["font-family: 'Instrument Serif';", 1],
+	['@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400");', 1],
+	["font-family: Georgia, serif;", 0],
+	["/* font-family: Inter; */", 0],
+	['@import url("https://fonts.googleapis.com/css?family=DM+Sans:400|Inter:400");', 1],
+	["const A = styled.div`/* font-family: Inter */ font-family: Georgia;`", 0],
+])("#given font source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(overusedFont, source)).toHaveLength(count)
+})
+
+test("#given a case-insensitive allowed font #then suppresses only that family", () => {
+	expect(checkSource(overusedFont, ".a{font-family: Inter}\n.b{font-family: Roboto}", { path: "a.css", config: { allowFonts: ["INTER"] } })).toHaveLength(1)
+	const source = '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Roboto:wght@400");'
+	expect(checkSource(overusedFont, source, { config: { allowFonts: ["INTER"] } })[0]?.message).toBe("Google Fonts: roboto")
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/overused-font.ts

@@ -0,0 +1,16 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+const fonts = ["Inter", "Roboto", "Open Sans", "Lato", "Montserrat", "Arial", "Helvetica", "Fraunces", "Geist Sans", "Geist Mono", "Geist", "Mona Sans", "Plus Jakarta Sans", "Space Grotesk", "Recoleta", "Instrument Sans", "Instrument Serif"]
+
+export const overusedFont: SourceRule = {
+	meta: { id: "overused-font", name: "Overused font", category: "slop", severity: "warning", engine: "source", description: "A familiar default typeface appears in a font declaration or import.", fixHint: "Choose a typeface suited to the product, or allow the intentional family." },
+	extensions: sourceExtensions,
+	check: lineCheck([new RegExp(`font-family\\s*:\\s*['"]?(${fonts.join("|")})\\b`, "gi"), /fonts\.googleapis\.com\/css2?\?[^"'\s)<>]*/gi], ({ match, context }) => {
+		const query = new URLSearchParams(match[0].slice(match[0].indexOf("?") + 1))
+		const family = match[1] ?? query.getAll("family").flatMap((value) => value.split("|")).map((f) => f.split(":")[0] ?? "")
+			.find((f) => fonts.some((font) => font.toLowerCase() === f.toLowerCase()) && !context.config.allowFonts?.some((allowed) => allowed.toLowerCase() === f.toLowerCase()))
+		if (!family || context.config.allowFonts?.some((f) => f.toLowerCase() === family.toLowerCase())) return null
+		return match[1] ? match[0] : `Google Fonts: ${family.toLowerCase()}`
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/radial-halo.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test"
+import { radialHalo } from "./radial-halo"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	["body{background:#000}.a{background:radial-gradient(#a855f7,transparent 70%)}", 1],
+	["body{background:#fff}.a{background:radial-gradient(#a855f7,transparent 70%)}", 0],
+	["body{background:#000}.a{background:radial-gradient(#777,transparent 70%)}", 0],
+	["body{background:#000}.a{background:radial-gradient(#a855f7 2px,transparent 4px)}", 0],
+	["body{background:#000}.a{background:repeating-radial-gradient(#a855f7,transparent 70%)}", 0],
+	["body{background:#fff}.glass{background:rgba(18,20,26,0.86)}.a{background:radial-gradient(#a855f7,transparent 70%)}", 0],
+	["body{background:rgba(18,20,26,0.86)}.a{background:radial-gradient(#a855f7,transparent 70%)}", 1],
+	[":root{--background:#000}.a{background:radial-gradient(#a855f7,transparent 70%)}", 0],
+])("#given radial source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(radialHalo, `<html><style>${source}</style></html>`, { path: "a.astro" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/radial-halo.ts

@@ -0,0 +1,14 @@
+import type { SourceRule } from "../../rule"
+import { haloOffsets } from "./support/css-effects"
+import { componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const radialHalo: SourceRule = {
+	meta: { id: "radial-halo", name: "Radial-gradient background halo", category: "slop", severity: "warning", engine: "source", description: "A saturated radial gradient fades into a dark background.", fixHint: "Use a quieter solid background or purposeful imagery." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		if (text === null) return []
+		const offset = haloOffsets(text)[0]
+		return offset === undefined ? [] : [sourceHit(text, offset, "Radial color halo on a dark page")]
+	},
+}