lazycodex-ai 5.1.48 → 5.1.54

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

@@ -0,0 +1,74 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { aiColorPalette } from "./ai-color-palette"
+
+test("#given stock ramps, flat fills, faint washes and blurred ancestors #then visible palette ramps report", () => {
+	const ramp = "linear-gradient(#8526fe, #82fff7)"
+	const snapshot = buildSnapshot([
+		{ id: "stock", style: { "background-image": ramp } },
+		{ id: "teal", style: { "background-image": "linear-gradient(#14b8a6, #06b6d4)" } },
+		{ id: "emerald", style: { "background-image": "linear-gradient(#059669, #065f46)" } },
+		{ id: "sky", style: { "background-image": "linear-gradient(#0ea5e9, #38bdf8)" } },
+		{ id: "flat", style: { "background-image": "linear-gradient(#4d148c, #4d148c)" } },
+		{ id: "faint", style: { "background-image": "linear-gradient(rgba(133,38,254,0.05), rgba(130,255,247,0.05))" } },
+		{ id: "rail", rect: { height: 1 }, style: { "background-image": ramp } },
+		{ style: { filter: "blur(120px)" }, children: [{ id: "blur", style: { "background-image": ramp } }] },
+		{ id: "covered", style: { "background-image": ramp }, children: [{ tag: "img", style: { "object-fit": "cover" } }] },
+	])
+	expect(aiColorPalette.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#stock", "#teal"])
+})
+
+test("#given violet headings, muted subtitles and brand surfaces #then only unchosen heading colors report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "subtitle", text: "Violet subtitle", style: { color: "#7c3aed", "font-size": "20px" } },
+		{ id: "muted", text: "Muted subtitle", style: { color: "#7a6699", "font-size": "20px" } },
+		{ id: "heading", tag: "h2", text: "Muted heading", style: { color: "#7a6699" } },
+		{ id: "bare-span", tag: "span", text: "Bare violet label", style: { color: "#7c3aed", "font-size": "24px" } },
+	])
+	expect(aiColorPalette.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#subtitle", "#heading"])
+	const branded = buildSnapshot([
+		{ tag: "nav", style: { "background-color": "#5c2d91" }, rect: { width: 1280, height: 50 } },
+		{ id: "heading", tag: "h2", text: "Brand heading", style: { color: "#5c2d91" } },
+		{ id: "other", tag: "h2", text: "Other violet", style: { color: "#c026d3" } },
+	])
+	expect(aiColorPalette.check({ snapshot: branded, config: {} }).map((h) => h.element?.selector)).toEqual(["#other"])
+})
+
+test("#given two neon hues and a declared palette #then only undeclared paired inks report", () => {
+	const snapshot = buildSnapshot([{ style: { "background-color": "#050b0f" }, children: [
+		{ id: "cyan", text: "Download", style: { color: "#82fff7" } },
+		{ id: "purple", text: "Design", style: { color: "#8526fe" } },
+		{ id: "bit", text: "1", style: { color: "#82fff7" } },
+		{ id: "neutral", text: "Body copy", style: { color: "#cbd5e1" } },
+	] }])
+	expect(aiColorPalette.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#cyan", "#purple"])
+	expect(aiColorPalette.check({ snapshot, config: { designTokens: { colors: ["#82fff7", "#8526fe"] } } })).toEqual([])
+})
+
+test("#given six role colors and an isolated violet heading #then category ink passes but lone ink reports", () => {
+	const snapshot = buildSnapshot([
+		...["#dc2626", "#ea580c", "#16a34a", "#2563eb", "#7c3aed", "#9333ea"].map((color, i) => ({ id: `category-${i}`, tag: "h3", text: "Category", style: { color, "font-size": "22px", "font-weight": "700" } })),
+		{ id: "lone", tag: "h3", text: "Feature", style: { color: "#7c3aed", "font-size": "28px", "font-weight": "700" } },
+	])
+	expect(aiColorPalette.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#lone"])
+})
+
+test("#given a stock accent declaration and a painted carrier #then the page form reports without charging dead tokens", () => {
+	const cssText = [".accent { color: #7c3aed; } .unused { color: #9333ea; }"]
+	const painted = buildSnapshot([{ tag: "p", attributes: { class: "accent" }, text: "Accent copy", style: { color: "#7c3aed" } }], { cssText })
+	expect(aiColorPalette.check({ snapshot: painted, config: {} }).map((h) => h.element)).toEqual([null])
+	const dead = buildSnapshot([{ text: "Plain copy" }], { cssText })
+	expect(aiColorPalette.check({ snapshot: dead, config: {} })).toEqual([])
+	expect(aiColorPalette.check({ snapshot: painted, config: { designTokens: { colors: ["#7c3aed"] } } })).toEqual([])
+})
+
+test("#given a parked wipe and an ignored cyan vote #then neither contributes a palette tell", () => {
+	const snapshot = buildSnapshot([
+		{ id: "wipe", style: { "background-image": "linear-gradient(90deg, #7c3aed 50%, #06b6d4 50%)", "background-size": "200% 100%" } },
+		{ style: { "background-color": "#050b0f" }, children: [
+			{ id: "purple", text: "Design", style: { color: "#8526fe" } },
+			{ id: "waived", text: "Download", attributes: { "data-detect-ignore": "ai-color-palette" }, style: { color: "#82fff7" } },
+		] },
+	])
+	expect(aiColorPalette.check({ snapshot, config: {} })).toEqual([])
+})

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

@@ -0,0 +1,83 @@
+import { luminance, parseColor, toHsl, type Rgba } from "../../core/color"
+import { ancestors, childrenOf, fontSizePx, isIgnored, shortSnippet, styleOf } from "../../core/page"
+import type { PageHit, PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { backdrop, colorDistance, gradientStops, opacity, sameColor, spread } from "./support/gradients"
+import { brandColor, categoryColor, paletteVisible, tellHue } from "./support/palette-roles"
+import { clipsText } from "./support/text-colors"
+import { gradientSamples } from "./support/gradient-samples"
+import { stockAccent } from "./support/stock-accent"
+import { textPainted } from "./support/painted-text"
+import { bareText } from "./support/color-path"
+
+function highlighted(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!/mono|consolas|courier/i.test(styleOf(el, "font-family")) || !["pre", "pre-wrap", "break-spaces"].includes(styleOf(el, "white-space")) || !styleOf(el, "display").startsWith("inline")) return false
+	const parent = el.parent === null ? undefined : snapshot.elements[el.parent]
+	const ink = parseColor(styleOf(el, "color"))
+	if (!parent || !ink) return false
+	return [parent, ...childrenOf(snapshot, parent)].some((node) => {
+		if (node === el || node.ownText.trim() === "" || (node !== parent && !styleOf(node, "display").startsWith("inline")) || !paletteVisible(snapshot, node) || opacity(node) === 0) return false
+		const c = parseColor(styleOf(node, "color"))
+		return c !== null && c.a > 0 && (Math.abs(c.r - ink.r) + Math.abs(c.g - ink.g) + Math.abs(c.b - ink.b) > 24 || Math.abs(c.a - ink.a) > 0.1)
+	})
+}
+
+function covered(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	return childrenOf(snapshot, el).some((child) => {
+		if (!["img", "video"].includes(child.tag) || !paletteVisible(snapshot, child) || styleOf(child, "object-fit") === "contain") return false
+		const a = el.rect
+		const b = child.rect
+		return opacity(child) >= 0.95 && b.x <= a.x + 1 && b.y <= a.y + 1 && b.x + b.width >= a.x + a.width - 1 && b.y + b.height >= a.y + a.height - 1
+	})
+}
+
+export const aiColorPalette: PageRule = {
+	meta: {
+		id: "ai-color-palette", name: "AI color palette", category: "slop", severity: "warning", engine: "page",
+		description: "Stock violet and cyan ramps or paired neon inks replace an intentional palette.",
+		fixHint: "Choose a distinctive palette and declare its colors as design tokens.",
+	},
+	check: ({ snapshot, config }) => {
+		const allowed = config.designTokens?.colors?.map(parseColor).filter((c) => c !== null) ?? []
+		const declared = (c: Rgba): boolean => allowed.some((token) => colorDistance(c, token) <= 6)
+		const purpleDeclared = allowed.some((c) => tellHue(c) === "purple")
+		const hits: PageHit[] = []
+		const neon: { readonly el: ElementSnapshot; readonly hue: string }[] = []
+		const tells = new Set<string>()
+		for (const el of snapshot.elements) {
+			if (!paletteVisible(snapshot, el) || !textPainted(snapshot, el) || isIgnored(snapshot, el, "ai-color-palette")) continue
+			const image = styleOf(el, "background-image")
+			const stops = gradientStops(image).map((s) => s.color)
+			const first = stops[0]
+			const blurred = [el, ...ancestors(snapshot, el)].some((node) => [...styleOf(node, "filter").matchAll(/blur\(([\d.]+)px\)/g)].some((m) => Number(m[1]) >= 24))
+			const samples = gradientSamples(el, el.rect)
+			const flat = first !== undefined && (stops.every((c) => colorDistance(c, first) === 0 && c.a === first.a) || (stops.every((c) => colorDistance(c, first) === 0) && stops.every((c) => c.a >= 0.75)) || (samples !== null && samples.length > 0 && samples.every((c) => samples[0] !== undefined && sameColor(c, samples[0]))))
+			if (first && stops.length >= 2 && !flat && !blurred && !clipsText(el) && Math.min(el.rect.width, el.rect.height) >= 8 && el.rect.width * el.rect.height >= 256 && !covered(snapshot, el)) {
+				const painted = stops.filter((c) => !declared(c) && c.a * opacity(el) >= 0.15 && spread(c) > 50)
+				const bands = painted.map(tellHue).filter((h) => h !== null && !(h === "purple" && purpleDeclared))
+				const bridge = painted.filter((c) => toHsl(c).h > 197 && toHsl(c).h < 260).length
+				if (bands.length > 0 && bands.length * 2 >= painted.length && (bands.includes("purple") || bands.length * 2 > painted.length || bridge >= painted.length - bands.length)) {
+					if (!categoryColor(snapshot, el, true)) {
+						for (const band of bands) if (band) tells.add(band)
+						hits.push({ element: el, message: "Stock violet or cyan gradient background", snippet: shortSnippet(el) })
+					}
+				}
+			}
+			const ink = parseColor(styleOf(el, "color"))
+			if (!ink || declared(ink) || el.ownText.trim().length < 2 || highlighted(snapshot, el)) continue
+			const band = tellHue(ink)
+			if (!bareText(el) && band === "purple" && !purpleDeclared && spread(ink) > 50 && (["h1", "h2", "h3"].includes(el.tag) || (fontSizePx(el) >= 20 && toHsl(ink).s >= 0.3)) && !brandColor(snapshot, ink) && !categoryColor(snapshot, el, false)) {
+				hits.push({ element: el, message: "Violet text on a heading", snippet: shortSnippet(el) })
+			}
+			const parent = el.parent === null ? undefined : snapshot.elements[el.parent]
+			const ground = parent ? backdrop(snapshot, parent) : null
+			if (band && !(band === "purple" && purpleDeclared) && ink.a * opacity(el) >= 0.15 && spread(ink) > 80 && ground && luminance(ground) < 0.1 && !categoryColor(snapshot, el, false)) {
+				tells.add(band)
+				neon.push({ el, hue: band })
+			}
+		}
+		if (tells.size >= 2) for (const { el } of neon) if (!categoryColor(snapshot, el, false)) hits.push({ element: el, message: "Neon text paired with another stock palette hue on dark", snippet: shortSnippet(el) })
+		if (!purpleDeclared && stockAccent(snapshot)) hits.push({ element: null, message: "Stock violet accent colors appear on the page", snippet: "Stock violet accent" })
+		return hits
+	},
+}

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

@@ -0,0 +1,24 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { creamPalette } from "./cream-palette"
+
+test("#given warm page fills and neutral or cool pages #then only cream grounds report", () => {
+	for (const [color, expected] of [["#f5efe2", 1], ["#ffffff", 0], ["#e2eff5", 0], ["#222222", 0]] as const) {
+		const snapshot = buildSnapshot([{ tag: "body", style: { "background-color": color } }])
+		const body = snapshot.elements[1]
+		if (!body) throw new Error("Fixture body missing")
+		const page = { ...snapshot, elements: [{ ...body, index: 0, parent: null }] }
+		expect(creamPalette.check({ snapshot: page, config: {} })).toHaveLength(expected)
+	}
+})
+
+test("#given utility cream pages and covered grounds #then visible cream alone reports", () => {
+	const page = (classes: string, covered: boolean) => {
+		const snapshot = buildSnapshot([{ tag: "body", attributes: { class: classes }, style: { "background-color": "#f5efe2" }, children: covered ? [{ style: { "background-color": "#ffffff" }, rect: { width: 1280, height: 800 } }] : [] }])
+		const root = snapshot.elements[0]
+		if (!root) throw new Error("Fixture root missing")
+		return { ...snapshot, elements: [{ ...root, tag: "html" }, ...snapshot.elements.slice(1)] }
+	}
+	expect(creamPalette.check({ snapshot: page("bg-amber-50", false), config: {} })).toHaveLength(1)
+	expect(creamPalette.check({ snapshot: page("", true), config: {} })).toHaveLength(0)
+})

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

@@ -0,0 +1,35 @@
+import { parseColor, type Rgba } from "../../core/color"
+import { isRendered, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+
+const cream = (c: Rgba | null): boolean => c !== null && Math.min(c.r, c.g, c.b) >= 209 && c.r >= c.g && c.g >= c.b && c.r - c.b >= 6 && c.r - c.b <= 48
+const CREAM_CLASSES = ["bg-amber-50", "bg-orange-50", "bg-yellow-50", "bg-orange-100"] as const
+
+export const creamPalette: PageRule = {
+	meta: {
+		id: "cream-palette", name: "Cream / beige palette", category: "slop", severity: "warning", engine: "page",
+		description: "The page defaults to a warm cream or beige ground.",
+		fixHint: "Choose a page surface that follows the project's palette.",
+	},
+	check: ({ snapshot }) => {
+		const body = snapshot.elements.find((el) => el.tag === "body")
+		const html = snapshot.elements.find((el) => el.tag === "html")
+		if (!body) return []
+		let fill = parseColor(styleOf(body, "background-color"))
+		if (!fill || fill.a === 0) fill = html ? parseColor(styleOf(html, "background-color")) : null
+		const classes = [body, html].flatMap((el) => (el?.attributes["class"] ?? "").split(/\s+/))
+		const classCream = classes.some((c) => CREAM_CLASSES.some((known) => known === c) || (c.startsWith("bg-[") && cream(parseColor(c.slice(4, -1).replaceAll("_", " ")))))
+		if (!cream(fill) && !classCream) return []
+		const bands = snapshot.elements.filter((el) => el !== body && el !== html && isRendered(snapshot, el) && el.rect.width >= snapshot.viewport.width * 0.9)
+		const covering = bands.filter((el) => {
+			const c = parseColor(styleOf(el, "background-color"))
+			return c !== null && c.a >= 0.95 && el.rect.height >= snapshot.viewport.height * 0.9
+		}).sort((a, b) => b.rect.width * b.rect.height - a.rect.width * a.rect.height)[0]
+		if (covering) {
+			const c = parseColor(styleOf(covering, "background-color"))
+			const near = c !== null && Math.min(c.r, c.g, c.b) >= 209 && c.r >= c.g && c.g >= c.b && c.r - c.b >= 2 && c.r - c.b <= 48
+			if (!cream(c) && !near && !bands.some((el) => cream(parseColor(styleOf(el, "background-color"))))) return []
+		}
+		return [{ element: body, message: "The page uses a cream or beige background", snippet: "<body>" }]
+	},
+}

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

@@ -0,0 +1,47 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { darkGlow } from "./dark-glow"
+
+test("#given colored halos, dark elevation and neutral shadows #then only perceptible colored light reports", () => {
+	const snapshot = buildSnapshot([{ style: { "background-color": "#080808" }, children: [
+		{ id: "halo", style: { "box-shadow": "rgba(0,169,255,0.6) 0px 0px 24px 0px" } },
+		{ id: "offset", style: { "box-shadow": "rgba(0,169,255,0.6) 0px 4px 24px 0px" } },
+		{ id: "neutral", style: { "box-shadow": "rgba(0,0,0,0.6) 0px 4px 24px 0px" } },
+		{ id: "faint", style: { "box-shadow": "rgba(149,100,255,0.1) 0px 4px 20px 0px" } },
+		{ id: "contracted", style: { "box-shadow": "rgba(52,211,153,0.4) 0px 0px 40px -22px" } },
+		{ id: "indicator", rect: { width: 6, height: 6 }, style: { "box-shadow": "rgba(0,169,255,0.6) 0px 0px 24px 0px" } },
+	] }])
+	expect(darkGlow.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#halo", "#offset"])
+})
+
+test("#given light surfaces and inherited text shadows #then zero offset halos report once", () => {
+	const snapshot = buildSnapshot([
+		{ id: "light-halo", style: { "box-shadow": "rgba(59,130,246,0.8) 0px 0px 24px 0px" } },
+		{ id: "light-offset", style: { "box-shadow": "rgba(59,130,246,0.8) 0px 4px 24px 0px" } },
+		{ id: "text", text: "Glow", style: { "text-shadow": "rgb(255,90,120) 0px 0px 12px" }, children: [{ id: "inherited", text: "Child", style: { "text-shadow": "rgb(255,90,120) 0px 0px 12px" } }] },
+	])
+	expect(darkGlow.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#light-halo", "#text"])
+})
+
+test("#given pseudo shadows and keyframes absent from computed shadows #then the live page form reports once", () => {
+	const snapshot = buildSnapshot([
+		{ style: { "background-color": "#080808" }, children: [
+			{ id: "orb", after: { "box-shadow": "rgba(34,197,94,0.7) 0px 0px 18px" } },
+		] },
+	])
+	expect(darkGlow.check({ snapshot, config: {} }).map((h) => h.element)).toEqual([null])
+	const cssText = ["@keyframes breathe { 50% { box-shadow: 0 0 14px rgba(255,0,200,0.5); } }"]
+	const live = buildSnapshot([{ style: { "animation-name": "breathe", "animation-iteration-count": "infinite" } }], { cssText })
+	const dead = buildSnapshot([{ style: { "animation-name": "breathe", display: "none" } }], { cssText })
+	expect(darkGlow.check({ snapshot: live, config: {} }).map((h) => h.element)).toEqual([null])
+	expect(darkGlow.check({ snapshot: dead, config: {} })).toEqual([])
+})
+
+test("#given an offset glow over the light end of a gradient #then the mean dark surface cannot create a glow", () => {
+	const snapshot = buildSnapshot([
+		{ rect: { width: 400, height: 400 }, style: { "background-image": "linear-gradient(#080808 0%, #080808 60%, #ffffff 70%)" }, children: [
+			{ id: "light", rect: { x: 20, y: 320, width: 160, height: 44 }, style: { "box-shadow": "rgba(146,99,233,0.9) 0px 4px 24px" } },
+		] },
+	])
+	expect(darkGlow.check({ snapshot, config: {} })).toEqual([])
+})

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

@@ -0,0 +1,44 @@
+import { luminance, toHsl } from "../../core/color"
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import { parseShadow } from "../../core/shadow"
+import type { PageRule } from "../../rule"
+import { backdrop, colorDistance, opacity, spread } from "./support/gradients"
+import { glowForm } from "./support/glow-forms"
+import { textBackgrounds } from "./support/text-colors"
+
+export const darkGlow: PageRule = {
+	meta: {
+		id: "dark-glow", name: "Glowing shadow accents", category: "slop", severity: "warning", engine: "page",
+		description: "A colored blurred shadow reads as a decorative glow.",
+		fixHint: "Use a neutral elevation shadow or remove the halo.",
+	},
+	check: ({ snapshot }) => {
+		const hits = snapshot.elements.flatMap((el) => {
+			if (!isRendered(snapshot, el)) return []
+			const parent = el.parent === null ? el : snapshot.elements[el.parent] ?? el
+			const grounds = textBackgrounds(snapshot, { ...el, lineRects: [el.rect], style: { ...el.style, "background-color": "transparent", "background-image": "none" } })
+			const surface = grounds[0] ?? backdrop(snapshot, parent)
+			const dark = surface !== null && luminance(surface) < 0.1
+			return ["box-shadow", "text-shadow"].flatMap((property) => {
+				const value = styleOf(el, property)
+				if (property === "text-shadow" && parent !== el && value === styleOf(parent, property)) return []
+				const layers = parseShadow(value)
+				const lift = surface === null ? null : layers.reduce((sum, layer) => {
+					if (spread(layer.color) <= 30 || layer.blur * layer.color.a * opacity(el) < 1.5) return sum
+					const hueDelta = Math.abs(toHsl(layer.color).h - toHsl(surface).h)
+					const shade = (layer.x !== 0 || layer.y !== 0) && toHsl(layer.color).l < 0.25 && luminance(layer.color) < luminance(surface) && spread(surface) > 30 && Math.min(hueDelta, 360 - hueDelta) <= 50
+					return sum + (shade ? 0 : 0.5 * layer.color.a * opacity(el) * colorDistance(layer.color, surface))
+				}, 0)
+				const hit = layers.find((layer) => {
+					const extent = layer.blur / 2 + layer.spread
+					const area = el.rect.width * el.rect.height
+					const lit = (el.rect.width + 2 * extent) * (el.rect.height + 2 * extent) - area
+					return !layer.inset && spread(layer.color) > 30 && layer.blur > 4 && extent > 0 && layer.blur * layer.color.a * opacity(el) >= 3 && lit <= area * 2 && (lift === null || lift >= 20) && ((layer.x === 0 && layer.y === 0) || dark)
+				})
+				return hit ? [{ element: el, message: `${property} creates a colored glow`, snippet: shortSnippet(el) }] : []
+			})
+		})
+		const page = glowForm(snapshot, hits)
+		return page ? [...hits, page] : hits
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/design-system-color.test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { designSystemColor } from "./design-system-color"
+
+test("#given declared colors and visible drift #then only undocumented dimensions report once", () => {
+	const snapshot = buildSnapshot([
+		{ id: "allowed", text: "Declared", style: { color: "#151515", "background-color": "#ffffff" } },
+		{ id: "text", text: "Drift", style: { color: "#ef4444" } },
+		{ id: "repeat", text: "Repeat", style: { color: "#ef4444" } },
+		{ id: "border", style: { "border-top-width": "1px", "border-top-color": "#ef4444" } },
+		{ id: "outline", style: { "outline-width": "2px", "outline-color": "#3b82f6" } },
+		{ id: "transparent", style: { "background-color": "rgba(255,0,0,0.01)" } },
+		{ id: "hidden", text: "Hidden", style: { color: "#ef4444", display: "none" } },
+	])
+	const config = { designTokens: { colors: ["#111111", "#ffffff"] } }
+	expect(designSystemColor.check({ snapshot, config }).map((h) => h.element?.selector)).toEqual(["#text", "#border", "#outline"])
+	expect(designSystemColor.check({ snapshot, config: {} })).toEqual([])
+})
+
+test("#given transparent tokens and six channel units of tolerance #then larger drift still reports", () => {
+	const snapshot = buildSnapshot([
+		{ id: "near", text: "Near token", style: { color: "#171717" } },
+		{ id: "far", text: "Outside token", style: { color: "#181818" } },
+	])
+	expect(designSystemColor.check({ snapshot, config: { designTokens: { colors: ["#111111"] } } }).map((h) => h.element?.selector)).toEqual(["#far"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/design-system-color.ts

@@ -0,0 +1,35 @@
+import { parseColor } from "../../core/color"
+import { isRendered, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageHit, PageRule } from "../../rule"
+import { colorDistance } from "./support/gradients"
+
+export const designSystemColor: PageRule = {
+	meta: {
+		id: "design-system-color", name: "Color outside DESIGN.md", category: "quality", severity: "advisory", engine: "page",
+		description: "A painted color is outside the project's declared palette.",
+		fixHint: "Use a declared color token or add the intentional color to the palette.",
+	},
+	check: ({ snapshot, config }) => {
+		const tokens = config.designTokens?.colors?.map(parseColor).filter((c) => c !== null) ?? []
+		if (tokens.length === 0) return []
+		const seen = new Set<string>()
+		const hits: PageHit[] = []
+		for (const el of snapshot.elements) {
+			if (!isRendered(snapshot, el) || ["head", "title", "meta", "link", "style", "script", "noscript", "template", "source"].includes(el.tag)) continue
+			const props = ["background-color"]
+			if (el.ownText.trim() !== "") props.push("color")
+			for (const side of ["top", "right", "bottom", "left"]) if ((px(styleOf(el, `border-${side}-width`)) ?? 0) > 0) props.push(`border-${side}-color`)
+			if ((px(styleOf(el, "outline-width")) ?? 0) > 0) props.push("outline-color")
+			for (const prop of props) {
+				const raw = styleOf(el, prop)
+				const c = parseColor(raw)
+				if (!c || c.a <= 0.05 || tokens.some((token) => colorDistance(c, token) <= 6)) continue
+				const key = `${prop}:${raw}`
+				if (seen.has(key)) continue
+				seen.add(key)
+				hits.push({ element: el, message: `${prop} ${raw} is outside the declared palette`, snippet: shortSnippet(el) })
+			}
+		}
+		return hits
+	},
+}

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

@@ -0,0 +1,24 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { gradientText } from "./gradient-text"
+
+test("#given multicolor, alpha-only and flat text fills #then only visible ramps report", () => {
+	const snapshot = buildSnapshot([
+		...Object.entries({ ramp: "linear-gradient(#db2777, #7c3aed)", sheen: "linear-gradient(rgb(255,255,255), rgba(255,255,255,0.5))", flat: "linear-gradient(#111111, #111111)" }).map(([id, image]) => ({ id, text: "A headline", style: { "background-clip": "text", "background-image": image } })),
+		{ id: "faint", text: "A watermark", style: { opacity: "0.08", "background-clip": "text", "background-image": "linear-gradient(#db2777, #7c3aed)" } },
+		{ id: "solid", text: "A normal headline" },
+		{ id: "layered", text: "Two clipped layers", style: { "background-clip": "text, text", "-webkit-background-clip": "text, text", "background-image": "linear-gradient(#db2777, #7c3aed), linear-gradient(#2563eb, #06b6d4)" } },
+		{ id: "utility", tag: "h2", text: "An uncompiled utility heading", attributes: { class: "bg-clip-text bg-gradient-to-r" } },
+	])
+	expect(gradientText.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#ramp", "#sheen", "#utility"])
+})
+
+test("#given a sweeping shimmer, paused shimmer and rainbow fallback #then only the loading shimmer passes", () => {
+	const base = { "background-clip": "text", "background-size": "200% 100%", "animation-name": "shimmer", "animation-iteration-count": "infinite", color: "rgba(0,0,0,0.38)", "background-image": "linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.38) 30%, rgba(36,35,28,0.92) 55%, rgba(0,0,0,0.38) 70%, rgba(0,0,0,0.38) 100%)" }
+	const snapshot = buildSnapshot([
+		{ id: "shimmer", text: "Working", style: base },
+		{ id: "paused", text: "Working", style: { ...base, "animation-play-state": "paused" } },
+		{ id: "rainbow", text: "A sweeping rainbow", style: { ...base, color: "#ff0080", "background-image": "linear-gradient(#ff0080 0%, #7928ca 30%, #2563eb 70%, #ff0080 100%)" } },
+	], { cssText: ["@keyframes shimmer { from { background-position-x: 200%; } to { background-position-x: -200%; }}"] })
+	expect(gradientText.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#paused", "#rainbow"])
+})

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

@@ -0,0 +1,59 @@
+import { parseColor } from "../../core/color"
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { effectiveOpacity, gradientStops, sameColor } from "./support/gradients"
+import { clipsText } from "./support/text-colors"
+import { textPainted } from "./support/painted-text"
+import { bareText } from "./support/color-path"
+
+function shimmer(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	const stops = gradientStops(styleOf(el, "background-image"))
+	const first = stops[0]
+	const last = stops.at(-1)
+	const ink = parseColor(styleOf(el, "color"))
+	if (!first || !last || !ink || stops.length < 3 || !sameColor(first.color, ink) || !sameColor(last.color, ink)) return false
+	let plateau = 0
+	for (let i = 1; i < stops.length; i++) {
+		const a = stops[i - 1]
+		const b = stops[i]
+		if (a && b && a.position !== null && b.position !== null && sameColor(a.color, ink) && sameColor(b.color, ink)) plateau += b.position - a.position
+	}
+	if (plateau < 0.5 || Number.parseFloat(styleOf(el, "background-size")) <= 100 || !styleOf(el, "background-size").split(/\s+/)[0]?.endsWith("%")) return false
+	if (styleOf(el, "animation-play-state") === "paused") return false
+	return styleOf(el, "animation-iteration-count").includes("infinite") && styleOf(el, "animation-name").split(",").some((name) =>
+		name.trim() !== "none" && snapshot.cssText.some((css) => {
+			const start = css.indexOf(`@keyframes ${name.trim()}`)
+			if (start < 0) return false
+			const open = css.indexOf("{", start)
+			let depth = 0
+			for (let i = open; i < css.length; i++) {
+				if (css[i] === "{") depth++
+				if (css[i] === "}") depth--
+				if (depth === 0) return /background-position/.test(css.slice(open, i))
+			}
+			return false
+		}))
+}
+
+export const gradientText: PageRule = {
+	meta: {
+		id: "gradient-text", name: "Gradient text", category: "slop", severity: "warning", engine: "page",
+		description: "A color ramp clipped to text adds decoration to the glyphs.",
+		fixHint: "Use a solid text color to keep the emphasis readable.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isRendered(snapshot, el) || !textPainted(snapshot, el) || el.text.trim() === "") return []
+		if (bareText(el)) return []
+		const tokens = (el.attributes["class"] ?? "").split(/\s+/)
+		if (!clipsText(el)) return tokens.includes("bg-clip-text") && tokens.some((token) => /^bg-gradient-to-/.test(token))
+			? [{ element: el, message: "Utility classes declare a gradient text treatment", snippet: shortSnippet(el) }] : []
+		if ([styleOf(el, "background-clip"), styleOf(el, "-webkit-background-clip")].every((v) => v !== "text")) return []
+		const image = styleOf(el, "background-image")
+		const stops = gradientStops(image)
+		const first = stops[0]
+		if (!first || !image.includes("gradient") || stops.every((s) => sameColor(s.color, first.color))) return []
+		if (Math.max(...stops.map((s) => s.color.a)) * effectiveOpacity(snapshot, el) < 0.15 || shimmer(snapshot, el)) return []
+		return [{ element: el, message: "A gradient paints the text", snippet: shortSnippet(el) }]
+	}),
+}

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

@@ -0,0 +1,39 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { grayOnColor } from "./gray-on-color"
+
+test("#given gray inks on navy, teal and amber #then only chromatic non-pale surfaces report", () => {
+	const snapshot = buildSnapshot([
+		...Object.entries({ navy: "#1e3a8a", teal: "#115e59", darkNavy: "#001c47", nearBlack: "#04002d", cream: "#feeed4", tint: "#fef3c7", neutral: "#f3f4f6" }).map(([id, bg]) => ({ id, text: "Some gray copy", style: { color: "#d1d5db", "background-color": bg } })),
+		{ id: "amber", text: "Gray six hundred", style: { color: "#4b5563", "background-color": "#fcd34d" } },
+	])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#navy", "#teal", "#darkNavy", "#amber"])
+})
+
+test("#given neutral extremes and utility variants #then gray classes only report resting chromatic fills", () => {
+	const snapshot = buildSnapshot([
+		{ id: "gray", text: "Gray utility", attributes: { class: "text-gray-400 bg-blue-600" } },
+		{ id: "hover", text: "Hover not resting", attributes: { class: "text-gray-500 bg-white hover:bg-emerald-400" } },
+		{ id: "black", text: "Near black", style: { color: "#393939", "background-color": "#ffc224" } },
+		{ id: "white", text: "Near white", style: { color: "#e5e7eb", "background-color": "#115e59" } },
+		{ id: "near-black-class", text: "Dark utility", attributes: { class: "text-gray-800 bg-yellow-400" } },
+	])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#gray"])
+})
+
+test("#given utility wrappers without direct text and bare inherited spans #then only the full color path reports", () => {
+	const snapshot = buildSnapshot([
+		{ id: "wrapper", attributes: { class: "text-gray-400 bg-blue-600" }, children: [{ text: "Wrapper copy" }] },
+		{ style: { "background-color": "#1e3a8a" }, children: [
+			{ id: "bare", tag: "span", text: "Bare gray text", style: { color: "#999999" } },
+			{ id: "paragraph", tag: "p", text: "Gray paragraph", style: { color: "#999999" } },
+		] },
+	])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#wrapper", "#paragraph"])
+})
+
+test("#given both a gray utility and measured gray ink #then preserves both upstream forms on the same element", () => {
+	const snapshot = buildSnapshot([{ id: "dual", attributes: { class: "text-gray-400 bg-blue-600" }, text: "Measured utility",
+		style: { color: "#999999", "background-color": "#1e40af" } }])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#dual", "#dual"])
+})

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

@@ -0,0 +1,38 @@
+import { luminance, parseColor, toHsl, type Rgba } from "../../core/color"
+import { shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { oklch, spread } from "./support/gradients"
+import { clipsText, textBackgrounds, textInk } from "./support/text-colors"
+import { bareText } from "./support/color-path"
+import { textPainted } from "./support/painted-text"
+
+function colored(bg: Rgba): boolean {
+	const lum = luminance(bg)
+	const scale = lum >= 0.01 ? 1 : Math.sqrt(0.01 / Math.max(lum, 0.0001))
+	const perceptual = oklch(bg)
+	return spread(bg) > 40 * scale && (perceptual.l < 0.9 || perceptual.c >= 0.09)
+}
+
+export const grayOnColor: PageRule = {
+	meta: {
+		id: "gray-on-color", name: "Gray text on colored background", category: "quality", severity: "warning", engine: "page",
+		description: "Mid-gray ink loses clarity on a chromatic surface.",
+		fixHint: "Use a dark shade of the surface hue or a contrasting near-white ink.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!textPainted(snapshot, el) || bareText(el) || clipsText(el)) return []
+		const color = parseColor(styleOf(el, "color"))
+		if (!color) return []
+		const hsl = toHsl(color)
+		const gray = hsl.s < 0.2 && hsl.l > 0.3 && hsl.l < 0.85
+		const tokens = (el.attributes["class"] ?? "").split(/\s+/)
+		const grayClass = tokens.some((t) => /^text-(gray|slate|zinc|neutral|stone)-[1-6]00(?:\/\d+)?$/.test(t))
+		const bgClass = tokens.some((t) => /^bg-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-([2-9]00|950)(?:\/\d+)?$/.test(t))
+		const classHit = grayClass && bgClass && hsl.l < 0.85 && spread(color) <= 50
+		const backgrounds = textBackgrounds(snapshot, el)
+		const computedHit = textInk(snapshot, el) !== null && gray && backgrounds.length > 0 && backgrounds.every(colored)
+		if (!classHit && !computedHit) return []
+		const hit = { element: el, message: "Gray ink on a colored surface", snippet: shortSnippet(el) }
+		return classHit && computedHit ? [hit, hit] : [hit]
+	}),
+}

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

@@ -0,0 +1,15 @@
+import type { PageRule } from "../../rule"
+import { aiColorPalette } from "./ai-color-palette"
+import { creamPalette } from "./cream-palette"
+import { darkGlow } from "./dark-glow"
+import { designSystemColor } from "./design-system-color"
+import { gradientText } from "./gradient-text"
+import { grayOnColor } from "./gray-on-color"
+import { lowContrast } from "./low-contrast"
+import { radialHalo } from "./radial-halo"
+import { radialSpotlightGlow } from "./radial-spotlight-glow"
+
+export const COLOR_RULES: readonly PageRule[] = [
+	lowContrast, grayOnColor, aiColorPalette, creamPalette, gradientText,
+	darkGlow, radialHalo, radialSpotlightGlow, designSystemColor,
+]