lazycodex-ai 5.1.48 → 5.1.54

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")]
+	},
+}

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

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test"
+import { sideTab } from "./side-tab"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<div className="border-l-4 rounded-r-lg" />', "a.tsx", 1],
+	['<div className="border-r-8 rounded-r-lg" />', "a.tsx", 0],
+	['<div className="border-l-4" />', "a.tsx", 0],
+	['<div style={{borderLeft:"4px solid red", borderRadius:12}} />', "a.tsx", 1],
+	['<div style={{borderLeft:"4px solid red", padding:12}} />', "a.tsx", 0],
+	['<div className="w-1 shrink-0 bg-amber-500" />', "a.tsx", 1],
+	['<div className="w-1 shrink-0 h-8 bg-amber-500" />', "a.tsx", 0],
+	[".a{border-left:4px solid red;border-radius:12px}", "a.css", 1],
+	[".a{border-left:4px solid #777;border-radius:12px}", "a.css", 0],
+	[".a{border-left:4px solid red}.b{border-radius:2px}", "a.css", 0],
+	[".a{border-radius:12px}.a.active{border-left:4px solid red}", "a.css", 1],
+	[".a{border-radius:12px;box-shadow:inset 4px 0 var(--accent)}", "a.css", 1],
+	[".a{border-radius:0;box-shadow:inset 4px 0 red}", "a.css", 0],
+	[".a\n  border-radius: 12px\n  &.active\n    border-left: 4px solid red", "a.sass", 1],
+	[".a\n  border-radius: 0\n  &.active\n    border-left: 4px solid red", "a.sass", 0],
+	["const A = styled.div`border-radius:12px; &::before {position:absolute;left:0;top:0;bottom:0;width:4px;background:red;}`;", "a.tsx", 1],
+	[".card{border-radius:12px;@media(min-width:600px){&::after{position:absolute;right:0;top:0;bottom:0;width:5px;background:red}}}", "a.scss", 1],
+	[".card{border-radius:3px;border-left:4px solid red}", "a.css", 0],
+	['<div className="border-l-4 rounded-sm" />', "a.tsx", 1],
+	['<div className="border-l-4 rounded-xs" />', "a.tsx", 0],
+	['<div style={{borderRight:"5px solid red",borderRadius:12}} />\n<div style={{borderLeft:"6px solid red",padding:16}} />\n<Box sx={{borderRadius:0,"@media (min-width:600px)":{borderLeft:"11px solid red"}}} />', "a.tsx", 1],
+])("#given accent source %s #then returns expected findings", (source, path, count) => {
+	expect(checkSource(sideTab, source, { path })).toHaveLength(count)
+})

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

@@ -0,0 +1,58 @@
+import type { SourceRule } from "../../rule"
+import { accentScans, safeSelector } from "./support/accent-scans"
+import { chromatic } from "./support/source-color"
+import { applyRadii, roundedAway, scopeCorners, tagCorners } from "./support/corners"
+import { cssScopes, selectorHost } from "./support/css-scopes"
+import { solidBackground, tagAt } from "./support/markup-scope"
+import { lineCheck, sourceExtensions, sourcePasses } from "./support/source-text"
+
+const borderCheck = lineCheck([
+	/\bborder-([lrse])-(\d+)\b/g,
+	/border-(left|right)\s*:\s*(\d+)px\s+solid[^;]*/gi,
+	/border-(left|right|inline-start|inline-end)-width\s*:\s*(\d+)px/gi,
+	/border-(inline-start|inline-end)\s*:\s*(\d+)px\s+solid/gi,
+	/border(Left|Right)\s*[:=]\s*["'`](\d+)px\s+solid/g,
+	/(?<![\w-])w-(?:0\.5|1(?:\.5)?|2(?:\.5)?|3|\[(?:[2-9]|1[0-2])px\])(?![\w./-])/g,
+], ({ match, line, scope, offset, pass, context }) => {
+	const tag = tagAt(line, match.index ?? 0)
+	if (match[0].startsWith("w-")) {
+		const bg = solidBackground(tag)
+		const empty = !tag.startsWith("<") || /\/>$/.test(tag) || line.slice(line.indexOf(tag) + tag.length).trimStart().startsWith("</")
+		if (!bg || !empty || !/(?<![\w-])(?:shrink-0|rounded-[lres](?:-\w+)?|left-0|right-0|inset-0|inset-y-0)(?![\w./-])/.test(tag) || /(?<![\w-])h-(?:px\b|[0-9]|\[)|\brounded-full\b|aria-(?:current|selected)/i.test(tag)) return null
+		return `${match[0]} + ${bg} stripe child`
+	}
+	const side = (match[1] ?? "left").toLowerCase().replace("inline-", "")
+	const width = Number(match[2])
+	const utility = /^border-[lrse]-/.test(match[0])
+	if (utility ? width < (/\brounded(?!-none)\b/.test(scope) ? 2 : 4) : width < (/^border-(?:left|right)\s*:/i.test(match[0]) && /border-radius/i.test(scope) ? 2 : 3)) return null
+	if (!utility && /<(?:blockquote|nav[\s>]|pre[\s>]|code[\s>]|a\s|input[\s>]|span[\s>])/i.test(scope)) return null
+	if (/^border-(?:left|right)\s*:/i.test(match[0])) {
+		const color = /\bsolid\s+([\s\S]*)/i.exec(match[0])?.[1]?.trim() ?? ""
+		if (color && !chromatic(color)) return null
+	}
+	const styles = sourcePasses(context).filter((p) => p.css).map((p) => p.text).join("\n")
+	const imported = /(?:import|require\s*\()[^;\n]*\.(?:css|scss|sass|less)["']|<style[^>]*\bsrc\s*=|@import|@use\s+['"](?!sass:)/.test(context.file.text)
+	if (utility || (tag.startsWith("<") && /border(?:Left|Right)\s*=|(?:style|sx)\s*=/.test(tag))) {
+		const corners = tag === line && !line.trimStart().startsWith("<") ? [null, null, null, null] : tagCorners(tag, styles || context.file.text, imported)
+		if (!roundedAway(corners, side)) return null
+	} else {
+		const embedded = sourcePasses(context).find((p) => p.css && p.offset <= pass.offset + offset && pass.offset + offset < p.offset + p.text.length)
+		const ownPass = embedded ?? pass
+		const localOffset = pass.offset + offset - ownPass.offset
+		const scopes = cssScopes(ownPass.text, ownPass.sass)
+		const block = scopes.filter((s) => s.start <= localOffset && localOffset <= s.end).sort((a, b) => b.start - a.start)[0]
+		if (block) {
+			const host = selectorHost(block)
+			const corners = scopeCorners(block, scopes)
+			const status = /(?:^|[ .>])(?:tr|td|th)\b|(?:error|danger|warning|success|broken|new)\b/.test(host)
+			if (!roundedAway(corners, side) && (!status || safeSelector(host))) return null
+		} else if (!roundedAway(applyRadii([0, 0, 0, 0], scope), side)) return null
+	}
+	return match[0].replace(/\s*;?\s*$/, "")
+})
+
+export const sideTab: SourceRule = {
+	meta: { id: "side-tab", name: "Side-tab accent border", category: "slop", severity: "warning", engine: "source", description: "A colored stripe decorates a rounded card or status row.", fixHint: "Remove the stripe or use a quieter surface and text hierarchy." },
+	extensions: sourceExtensions,
+	check: (context) => [...borderCheck(context), ...accentScans(context)],
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/accent-scans.ts

@@ -0,0 +1,78 @@
+import type { SourceContext, SourceHit } from "../../../rule"
+import { roundedAway, scopeCorners } from "./corners"
+import { cleanSelector, cssScopes, declarations, selectorHost, type CssScope } from "./css-scopes"
+import { sourceHit, sourcePasses } from "./source-text"
+import { sourceShadows } from "./source-shadow"
+import { chromatic } from "./source-color"
+
+export const safeSelector = (selector: string): boolean => /:(?:hover|focus|active|visited)|aria-(?:selected|current)|(?:^|[.\s_-])(?:selected|current|active|checked)(?:$|[.\s_:-])|(?:^|[\s>+~])(?:blockquote|nav|pre|code|a|input|span)(?:$|[\s.#:[>])/i.test(selector)
+
+function pseudoEdge(scope: CssScope): string | null {
+	const d = declarations(scope.body)
+	if (!/^(?:absolute|fixed)$/.test(d.get("position") ?? "")) return null
+	const inset = d.get("inset")?.split(/\s+/)
+	const [t = "", r = t, b = t, l = r] = inset ?? []
+	const top = d.get("top") ?? t
+	const right = d.get("right") ?? d.get("inset-inline-end") ?? r
+	const bottom = d.get("bottom") ?? b
+	const left = d.get("left") ?? d.get("inset-inline-start") ?? l
+	const zero = (value: string): boolean => /^0(?:px|rem|em|%)?$/.test(value)
+	const width = Number.parseFloat(d.get("width") ?? d.get("inline-size") ?? "")
+	const height = Number.parseFloat(d.get("height") ?? d.get("block-size") ?? "")
+	const fullHeight = (zero(top) && zero(bottom)) || d.get("height") === "100%" || [top, bottom].every((v) => /^\d+(?:px)?$/.test(v) && Number.parseFloat(v) <= 20)
+	if (width >= 3 && width <= 12 && fullHeight) return zero(left) ? "left" : zero(right) ? "right" : null
+	const fullWidth = (zero(left) && zero(right)) || d.get("width") === "100%"
+	if (height >= 3 && height <= 12 && fullWidth && !safeSelector(scope.selector) && !/(?:^|[ .>])(?:button|summary|tr|td|th|table|li)(?:$|[.#:\s])/.test(scope.selector)) return zero(top) ? "top" : zero(bottom) ? "bottom" : null
+	return null
+}
+
+function resolveTokens(value: string, text: string): string {
+	const tokens = new Map([...text.matchAll(/(--[\w-]+)\s*:\s*([^;{}]+)/g)].map((m) => [m[1] ?? "", m[2] ?? ""]))
+	let result = value
+	for (let depth = 0; depth < 8; depth++) {
+		const next = result.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^)]*))?\)/g, (whole: string, key: string, fallback: string | undefined) => tokens.get(key) ?? fallback ?? whole)
+		if (next === result) break
+		result = next
+	}
+	return result
+}
+
+export function accentScans(context: SourceContext): readonly SourceHit[] {
+	const hits: SourceHit[] = []
+	const seen = new Set<string>()
+	for (const pass of sourcePasses(context).filter((p) => p.css)) {
+		const scopes = cssScopes(pass.text, pass.sass)
+		for (const scope of scopes) {
+			const selector = selectorHost(scope)
+			const d = declarations(scope.body)
+			const pseudo = /::?(?:before|after)\b/.test(selector)
+			if (pseudo) {
+				const side = pseudoEdge(scope)
+				const bg = resolveTokens(d.get("background-color") ?? d.get("background") ?? "", context.file.text)
+				if (!side || !bg || !chromatic(bg) || /(?:^|[ >])(?:blockquote|pre|code)\b/.test(selector)) continue
+				const host = cleanSelector(selector)
+				const hostScope = scopes.find((s) => cleanSelector(selectorHost(s)) === host && !/::?(?:before|after)/.test(s.selector)) ?? scope
+				if ((side === "left" || side === "right") && !roundedAway(scopeCorners(hostScope, scopes, host), side)) continue
+				const key = `${pass.offset}:${selector.includes("&") ? scope.start : selector}`
+				if (seen.has(key)) continue
+				seen.add(key)
+				hits.push(sourceHit(context.file.text, pass.offset + scope.start, `${scope.selector} pseudo-element stripe (${side})`, scope.selector))
+				continue
+			}
+			if (safeSelector(selector) || Number.parseFloat(d.get("width") ?? "999") <= 40) continue
+			const shadow = resolveTokens(d.get("box-shadow") ?? "", context.file.text)
+			const status = /(?:^|[ .>])(?:tr|td|th)\b|(?:error|danger|warning|success|broken|new)\b/.test(selector)
+			for (const layer of sourceShadows(shadow, status)) {
+				const ax = Math.abs(layer.x)
+				const ay = Math.abs(layer.y)
+				if (!layer.inset || layer.blur !== 0 || layer.spread !== 0 || layer.color.a < 0.1 || Math.max(layer.color.r, layer.color.g, layer.color.b) - Math.min(layer.color.r, layer.color.g, layer.color.b) < 30) continue
+				if (!((ax >= 3 && ax <= 12 && ay === 0) || (ay >= 3 && ay <= 12 && ax === 0))) continue
+				const side = ay === 0 ? layer.x > 0 ? "left" : "right" : layer.y > 0 ? "top" : "bottom"
+				if (!(status && ay === 0) && !roundedAway(scopeCorners(scope, scopes), side)) continue
+				hits.push(sourceHit(context.file.text, pass.offset + scope.start, `${scope.selector} inset stripe (${side})`, scope.selector))
+				break
+			}
+		}
+	}
+	return hits
+}

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

@@ -0,0 +1,6 @@
+import type { SourceHit, SourceRule } from "../../../rule"
+import type { DetectConfig } from "../../../types"
+
+export function checkSource(rule: SourceRule, text: string, options: { readonly path?: string; readonly config?: DetectConfig } = {}): readonly SourceHit[] {
+	return rule.check({ file: { path: options.path ?? "fixture.tsx", text }, config: options.config ?? {} })
+}

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

@@ -0,0 +1,105 @@
+import { cleanSelector, cssScopes, declarations, selectorHost, selectorMatches, type CssScope } from "./css-scopes"
+
+export type Corners = readonly (number | null)[]
+const zero = (): (number | null)[] => [0, 0, 0, 0]
+const unknown = (): (number | null)[] => [null, null, null, null]
+const radiusIndices: Readonly<Record<string, readonly number[]>> = {
+	tl: [0], tr: [1], br: [2], bl: [3], ss: [0], se: [1], ee: [2], es: [3], t: [0, 1], r: [1, 2], b: [2, 3], l: [0, 3], s: [0, 3], e: [1, 2],
+}
+
+function radiusPx(value: string): number | null {
+	const v = value.trim().replace(/^['"`]|['"`]$/g, "")
+	if (v === "0" || v === "none") return 0
+	const m = /^(-?\d*\.?\d+)(px|rem|em|%)?$/.exec(v)
+	if (!m) return null
+	return Number(m[1]) * (m[2] === "rem" || m[2] === "em" ? 16 : m[2] === "%" ? 10 : 1)
+}
+
+export function applyRadii(base: Corners, body: string): Corners {
+	let corners = [...base]
+	if (/@include|@apply|\$\{|#\{|@\{|\.\.\.|(?:^|\n)\s*\+[\w-]+/.test(body)) corners = unknown()
+	for (const [prop, value] of declarations(body)) {
+		const key = prop.replace(/-/g, "").toLowerCase()
+		if (key === "borderradius") {
+			const vals = value.replace(/^['"`]|['"`]$/g, "").split("/")[0]?.trim().split(/\s+/).map(radiusPx) ?? []
+			const [a = null, b = a, c = a, d = b] = vals
+			corners = [a, b, c, d]
+		} else {
+			const at = ["bordertopleftradius", "bordertoprightradius", "borderbottomrightradius", "borderbottomleftradius"].indexOf(key)
+			const logical = ["borderstartstartradius", "borderstartendradius", "borderendendradius", "borderendstartradius"].indexOf(key)
+			if (at >= 0 || logical >= 0) corners[at >= 0 ? at : logical] = radiusPx(value)
+		}
+	}
+	return corners
+}
+
+function utilityCorners(text: string): Corners {
+	const entries = [...text.matchAll(/(?:^|[\s"'`{}])((?:[\w-]+:)*)(rounded(?:-(tl|tr|br|bl|ss|se|ee|es|t|r|b|l|s|e))?(?:-([a-z0-9-]+|\[[^\]]*\]|\([^)]*\)))?)(?=$|[\s"'`{}])/g)]
+	let corners = zero()
+	const scale: Readonly<Record<string, number>> = { none: 0, xs: 2, sm: 4, "": 4, md: 6, lg: 8, xl: 12, "2xl": 16, "3xl": 24, "4xl": 32, full: 9999 }
+	entries.sort((a, b) => (a[3]?.length ?? 0) - (b[3]?.length ?? 0))
+	for (const entry of entries) {
+		const size = entry[4] ?? ""
+		const value = scale[size] ?? (size.startsWith("[") ? radiusPx(size.slice(1, -1)) : null)
+		const indices = radiusIndices[entry[3] ?? ""] ?? [0, 1, 2, 3]
+		for (const i of indices) {
+			const before = corners[i]
+			corners[i] = entry[1] ? before === null || value === null ? null : Math.max(before ?? 0, value) : value
+		}
+	}
+	return corners
+}
+
+export function roundedAway(corners: Corners, side: string): boolean {
+	const away = side === "left" || side === "start" || side === "l" || side === "s" ? [1, 2] : side === "right" || side === "end" || side === "r" || side === "e" ? [0, 3] : side === "top" ? [3, 2] : [0, 1]
+	return away.some((i) => corners[i] === null) || away.every((i) => (corners[i] ?? 0) >= 4)
+}
+
+export function scopeCorners(scope: CssScope, scopes: readonly CssScope[], host = selectorHost(scope)): Corners {
+	let corners: Corners = zero()
+	let declared = false
+	for (const item of scopes) {
+		if (selectorMatches(selectorHost(item), host)) {
+			const body = item.body
+			if (/\bborder[-\w]*radius\s*:|\bborder\w*Radius\s*:|@include|@apply|\$\{|(?:^|\n)\s*\+[\w-]+/.test(body)) declared = true
+			corners = applyRadii(corners, body)
+		}
+	}
+	if (declared) return corners
+	const sheet: (number | null)[] = zero()
+	for (const item of scopes) {
+		const own = applyRadii(zero(), item.body)
+		for (let i = 0; i < 4; i++) sheet[i] = sheet[i] === null || own[i] === null ? null : Math.max(sheet[i] ?? 0, own[i] ?? 0)
+	}
+	return sheet
+}
+
+export function tagCorners(tag: string, styleText: string, imports: boolean): Corners {
+	let corners = utilityCorners(tag)
+	if (/\{\s*\.\.\.|(?:className|class|tw)\s*=\s*\{[^}]*[?:]|(?:className|class|tw)\s*=\s*\{\s*[\w$]+\s*\}|(?:v-bind:class|:class|class:)/.test(tag)) corners = unknown()
+	const classText = /(?:className|class|tw)\s*=\s*["']([^"']*)/.exec(tag)?.[1] ?? ""
+	if (!/\brounded(?:[-\s"']|$)/.test(tag)) {
+		const scopes = cssScopes(styleText)
+		const tagName = /^<([\w-]+)/.exec(tag)?.[1] ?? ""
+		const matching = scopes.filter((s) => {
+			const host = cleanSelector(selectorHost(s))
+			if (/::?(?:before|after)/.test(s.selector)) return false
+			const tail = host.split(/[ >+~]+/).at(-1) ?? ""
+			const classes = [...tail.matchAll(/\.([\w-]+)/g)].map((m) => m[1] ?? "")
+			return classes.length > 0 ? classes.every((c) => classText.split(/\s/).includes(c)) : tail === tagName
+		})
+		const styled = new RegExp(`\\b(?:const|let)\\s+${tagName}\\s*=\\s*styled[^\\x60]*\\x60([^\\x60]*)\\x60`).exec(styleText)?.[1]
+		if (styled) corners = applyRadii(corners, styled)
+		else if (matching.length) for (const s of matching) corners = applyRadii(corners, s.body)
+		else if (imports || /border-radius\s*:\s*(?:var|\$|@)|@apply|@include/.test(styleText)) corners = unknown()
+	}
+	for (const m of tag.matchAll(/\b(borderRadius|border(?:Top|Bottom)(?:Left|Right)Radius|rounded)\s*=\s*(?:["']([^"']*)["']|\{([^}]*)\})/g)) {
+		const value = m[2] ?? m[3] ?? ""
+		corners = m[1] === "rounded" ? value === "none" || value === "0" ? zero() : unknown() : applyRadii(corners, `${m[1]}:${value}`)
+	}
+	const style = /\bstyle\s*=\s*["']([^"']*)["']/.exec(tag)?.[1]
+	const object = /\b(?:style|sx)\s*=\s*\{\{([\s\S]*)\}\}/.exec(tag)?.[1]
+	if (style ?? object) corners = applyRadii(corners, style ?? object ?? "")
+	else if (/\bstyle\s*=\s*\{/.test(tag)) corners = unknown()
+	return corners
+}