oh-my-opencode 5.1.51 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/render/webview.ts

@@ -0,0 +1,71 @@
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs"
+import { tmpdir } from "node:os"
+import { dirname, join } from "node:path"
+import { fileURLToPath, pathToFileURL } from "node:url"
+import { collectPageSnapshot, SCRIPT_ERROR_PROBE } from "../snapshot/collect"
+import { STYLE_PROPS } from "../snapshot/style-props"
+import type { PageSnapshot } from "../types"
+import { insertAfterProlog } from "./probe-placement"
+import { CONTENT_STRESS_SCRIPT, RenderError, type RenderRequest, type RenderTarget, type Renderer } from "./renderer"
+
+const MAX_ELEMENTS = 20_000
+const SETTLE_FRAMES = "new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => requestAnimationFrame(() => resolve(true)))))"
+
+function withProbe(html: string, baseHref?: string): string {
+	return insertAfterProlog(html, `${baseHref ? `<base href="${baseHref}">` : ""}<script>${SCRIPT_ERROR_PROBE}</script>`)
+}
+
+function isSnapshot(value: unknown): value is PageSnapshot {
+	return typeof value === "object" && value !== null && Array.isArray(Reflect.get(value, "elements"))
+}
+
+/** A renderer backed by Bun.WebView (system WebKit on macOS, installed Chrome/Chromium elsewhere). One view per request. */
+export function createWebViewRenderer(options: { readonly backend?: "webkit" | "chrome" } = {}): Renderer {
+	const scratch = mkdtempSync(join(tmpdir(), "frontend-detect-"))
+	let counter = 0
+	const chrome = options.backend === "chrome" || (options.backend === undefined && process.platform !== "darwin")
+	const writePage = (html: string, baseHref?: string): string => {
+		const file = join(scratch, `page-${counter++}.html`)
+		writeFileSync(file, withProbe(html, baseHref))
+		return pathToFileURL(file).href
+	}
+	const open = async (view: Bun.WebView, target: RenderTarget): Promise<void> => {
+		if (target.kind === "html") return view.navigate(writePage(target.html))
+		if (chrome) {
+			await view.navigate("about:blank")
+			await view.cdp("Page.addScriptToEvaluateOnNewDocument", { source: SCRIPT_ERROR_PROBE })
+			return view.navigate(target.url)
+		}
+		if (target.url.startsWith("file:")) {
+			const path = fileURLToPath(target.url)
+			return view.navigate(writePage(readFileSync(path, "utf8"), pathToFileURL(`${dirname(path)}/`).href))
+		}
+		return view.navigate(target.url)
+	}
+	return {
+		async render(request: RenderRequest): Promise<PageSnapshot> {
+			const label = request.target.kind === "url" ? request.target.url : "inline html"
+			const view = new Bun.WebView({
+				width: request.viewport.width,
+				height: request.viewport.height,
+				...(options.backend ? { backend: options.backend } : {}),
+			})
+			try {
+				await open(view, request.target)
+				await view.evaluate("document.fonts ? document.fonts.ready.then(() => true) : true")
+				await view.evaluate(SETTLE_FRAMES)
+				if (request.contentStress) await view.evaluate(CONTENT_STRESS_SCRIPT)
+				const snapshot: unknown = await view.evaluate(`(${collectPageSnapshot.toString()})(${JSON.stringify(STYLE_PROPS)}, ${MAX_ELEMENTS})`)
+				if (!isSnapshot(snapshot)) throw new Error("the page did not return a snapshot")
+				return snapshot
+			} catch (error) {
+				throw new RenderError(label, error)
+			} finally {
+				await view.close()
+			}
+		},
+		async close(): Promise<void> {
+			rmSync(scratch, { recursive: true, force: true })
+		},
+	}
+}

package/packages/shared-skills/skills/frontend/scripts/detect/report.ts

@@ -0,0 +1,29 @@
+import type { Finding, Severity } from "./types"
+
+/** @public */
+export function summarize(findings: readonly Finding[]): Readonly<Record<Severity, number>> {
+	const counts: Record<Severity, number> = { error: 0, warning: 0, advisory: 0 }
+	for (const f of findings) counts[f.severity]++
+	return counts
+}
+
+function where(f: Finding): string {
+	const l = f.location
+	switch (l.kind) {
+		case "source":
+			return `${l.file}:${l.line}:${l.column}`
+		case "element":
+			return `${l.file ?? "page"} @${l.viewport.width}px ${l.selector}`
+		case "page":
+			return `${l.file ?? "page"} @${l.viewport.width}px`
+	}
+}
+
+export function formatFindingsText(findings: readonly Finding[]): string {
+	const lines = findings.map(
+		(f) => `${where(f)}  ${f.severity}  ${f.ruleId}  ${f.message}\n    > ${f.snippet}\n    fix: ${f.fixHint}`,
+	)
+	const c = summarize(findings)
+	lines.push(`frontend-detect: ${findings.length} finding(s): ${c.error} error, ${c.warning} warning, ${c.advisory} advisory`)
+	return `${lines.join("\n")}\n`
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rule.ts

@@ -0,0 +1,42 @@
+import type { DetectConfig, ElementSnapshot, PageSnapshot, RuleMeta, Severity, SourceFile } from "./types"
+
+export type PageHit = {
+	readonly element: ElementSnapshot | null
+	readonly message: string
+	readonly snippet: string
+	/** Overrides the rule's default severity for this hit; a project override in config.rules still wins. */
+	readonly severity?: Severity
+	/** Keeps `severity` even when the project overrides the rule's severity in config.rules (a rule set to "off" still drops the hit). For notices about missing evidence, which an override must not turn into a failure. */
+	readonly severityFixed?: boolean
+}
+
+export type PageContext = {
+	readonly snapshot: PageSnapshot
+	readonly config: DetectConfig
+}
+
+export type PageRule = {
+	readonly meta: RuleMeta & { readonly engine: "page" }
+	readonly check: (ctx: PageContext) => readonly PageHit[]
+}
+
+export type SourceHit = {
+	readonly line: number
+	readonly column: number
+	readonly message: string
+	readonly snippet: string
+}
+
+export type SourceContext = {
+	readonly file: SourceFile
+	readonly config: DetectConfig
+}
+
+export type SourceRule = {
+	readonly meta: RuleMeta & { readonly engine: "source" }
+	/** File extensions (without the dot) this rule reads, e.g. ["css", "scss", "tsx"]. */
+	readonly extensions: readonly string[]
+	readonly check: (ctx: SourceContext) => readonly SourceHit[]
+}
+
+export type Rule = PageRule | SourceRule

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