lazycodex-ai 5.1.48 → 5.1.54

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

@@ -0,0 +1,83 @@
+import type { PageHit, PageRule } from "../../rule"
+import { shortSnippet, styleOf } from "../../core/page"
+import { borderSafe, splitTop, visible } from "./support/appearance"
+import { keyframes, onlyUnitPulse, overshoot } from "./support/keyframes"
+import { pageIgnored } from "../color/support/page-ignore"
+import { textPainted } from "../color/support/painted-text"
+import { bounceEasing as sourceBounce } from "../source/bounce-easing"
+import { cssBlocks } from "../../core/source"
+import { matchesSelector } from "./support/css-candidates"
+import type { ElementSnapshot } from "../../types"
+
+function easingKey(value: string): string {
+	const curve = /cubic-bezier\(([^)]+)\)/i.exec(value)
+	if (curve) return `cubic-bezier(${(curve[1] ?? "").split(",").map(Number).join(",")})`
+	return value.replace(/\s/g, "").toLowerCase()
+}
+export const bounceEasing: PageRule = {
+	meta: {
+		id: "bounce-easing",
+		name: "Bounce or elastic easing",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "Animation names or timing curves imply overshooting motion.",
+		fixHint: "Use a smooth deceleration or document an intentional easing in allowEasings.",
+	},
+	check: ({ snapshot, config }) => {
+		const covered = new Set<string>()
+		const hits: PageHit[] = []
+		const allowed = (value: string): boolean =>
+			(config.allowEasings ?? []).some((easing) => easingKey(easing) === easingKey(value))
+		const painted = (el: ElementSnapshot): boolean => visible(snapshot, el) && textPainted(snapshot, el)
+			&& el.rect.x + el.rect.width > 0 && el.rect.x < snapshot.document.scrollWidth
+			&& el.rect.y + el.rect.height > 0 && el.rect.y < snapshot.document.scrollHeight
+		for (const e of snapshot.elements) {
+			if (!painted(e) || borderSafe.has(e.tag) || e.tag === "label" || pageIgnored(snapshot, e, "bounce-easing")) continue
+			const names = splitTop(styleOf(e, "animation-name")).filter((n) => /bounce|elastic|wobble|jiggle|spring/i.test(n))
+			const named = names.filter((n) => {
+				const f = keyframes(snapshot, n)
+				return !allowed(n) && (f === null || !onlyUnitPulse(f))
+			})
+			const curves = [styleOf(e, "animation-timing-function"), styleOf(e, "transition-timing-function")]
+				.flatMap((v) => splitTop(v))
+				.filter((v) => !allowed(v) && overshoot(v))
+			const tailwind = /(?:^|\s)animate-bounce(?:$|\s)/.test(e.attributes["class"] ?? "") && !allowed("animate-bounce")
+			if (named.length === 0 && !tailwind && curves.length === 0) continue
+			hits.push({ element: e, message: "Overshooting motion: " + (curves[0] ?? (named.join(",") || "animate-bounce")), snippet: shortSnippet(e) })
+			for (const name of named) covered.add(easingKey(`animation: ${name}`))
+			for (const curve of curves) covered.add(easingKey(curve))
+			if (tailwind) {
+				covered.add(easingKey("animate-bounce"))
+				covered.add(easingKey("animation: bounce"))
+			}
+		}
+		const original = snapshot.cssText.join("\n")
+		const css = original.replace(/(^|[;{}])\s*(--[\w-]+)\s*:\s*([^;{}]+)/g, (whole: string, _prefix: string, name: string) =>
+			new RegExp(`var\\(\\s*${name}\\s*[,)]`).test(original) ? whole : whole.replace(/[^{}\n;]/g, " "))
+		const blocks = cssBlocks(css)
+		const lines = css.split("\n")
+		const forms = sourceBounce.check({ file: { path: "captured.css", text: css }, config })
+		for (const form of forms) {
+			const name = form.message.startsWith("animation: ") ? form.message.slice("animation: ".length) : null
+			if (allowed(name ?? form.message)) continue
+			if (name) {
+				const frames = keyframes(snapshot, name)
+				if (frames !== null && onlyUnitPulse(frames)) continue
+			}
+			const key = easingKey(form.message)
+			if (covered.has(key)) continue
+			const offset = lines.slice(0, form.line - 1).reduce((sum, line) => sum + line.length + 1, 0) + form.column - 1
+			const block = blocks.find((candidate) => offset >= candidate.offset && offset < candidate.offset + candidate.body.length)
+			if (block && !block.selector.split(",").every((part) => /^(?:from|to|[\d.]+%)$/i.test(part.trim()))) {
+				const matches = snapshot.elements.filter((el) => block.selector.split(",").some((selector) => matchesSelector(snapshot, el, selector.trim())))
+				const applies = (el: ElementSnapshot): boolean => name
+					? splitTop(styleOf(el, "animation-name")).some((value) => easingKey(`animation: ${value}`) === key)
+					: [styleOf(el, "animation-timing-function"), styleOf(el, "transition-timing-function")].flatMap((value) => splitTop(value)).some((value) => easingKey(value) === key)
+				if (!matches.some((el) => painted(el) && !pageIgnored(snapshot, el, "bounce-easing") && applies(el))) continue
+			}
+			hits.push({ element: null, message: form.message, snippet: form.snippet })
+		}
+		return hits
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/buried-raster.test.ts

@@ -0,0 +1,95 @@
+import { test } from "bun:test"
+import { buriedRaster } from "./buried-raster"
+import { assertCases } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+test("#given faint rasters with captured motion #then only running opacity motion exempts them", () => {
+	const image: NodeSpec = { tag: "img", rect: { width: 400, height: 200 }, style: { opacity: ".05" } }
+	assertCases(buriedRaster, [
+		{ children: [{ ...image, id: "running", motion: ["opacity"] }] },
+		{ children: [{ ...image, id: "paused", motion: [], style: { opacity: ".05", "animation-play-state": "paused" } }] },
+		{ children: [{ ...image, id: "transform", motion: ["transform"] }] },
+		{ children: [{ ...image, id: "rest" }] },
+	], ["#paused", "#transform", "#rest"])
+})
+test("#given raster images under near opaque washes #then legible tints and reversed layers pass", () => {
+	const image = "url(photo.png)",
+		wash = "linear-gradient(rgba(240,237,226,.96),rgba(240,237,226,.96))",
+		tint = "linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45))"
+	assertCases(
+		buriedRaster,
+		[
+			{ id: "flag", style: { "background-image": wash + ", " + image } },
+			{ id: "tint", style: { "background-image": tint + ", " + image } },
+			{ id: "reverse", style: { "background-image": image + ", " + wash } },
+			{ id: "gradient", style: { "background-image": wash } },
+			{ id: "blend", style: { "background-image": wash + ", " + image, "background-blend-mode": "multiply" } },
+			{ id: "blend-list", style: { "background-image": wash + ", " + image, "background-blend-mode": "normal, multiply" } },
+			{ id: "mix-blend", style: { "background-image": wash + ", " + image, "mix-blend-mode": "multiply" } },
+			{ id: "normal-list", style: { "background-image": wash + ", " + image, "background-blend-mode": "normal, normal", "mix-blend-mode": "normal" } },
+		],
+		["#flag", "#normal-list"],
+	)
+})
+test("#given hidden posters and nested videos #then only a video actually painted can replace the poster", () => {
+	const photo: NodeSpec = { tag: "img", style: { opacity: "0" }, rect: { width: 400, height: 200 } }
+	const video: NodeSpec = { tag: "video", rect: { width: 400, height: 200 } }
+	assertCases(buriedRaster, [
+		{ children: [{ children: [video] }, { ...photo, id: "poster" }] },
+		{ children: [{ style: { opacity: "0" }, children: [video] }, { ...photo, id: "unseen" }] },
+		{ children: [{ children: [{ ...photo, style: { opacity: "1" } }] }, { ...photo, id: "buried" }] },
+	], ["#unseen", "#buried"])
+})
+test("#given pending lazy images and observed class reveals #then held faint material still reports", () => {
+	const photo = (id: string, opacity: string, attributes: Readonly<Record<string, string>>): NodeSpec => ({
+		id, tag: "img", attributes, rect: { width: 400, height: 200 }, style: { opacity },
+	})
+	assertCases(buriedRaster, [
+		{ children: [
+		photo("native", ".08", { loading: "lazy" }),
+		] },
+		{ children: [
+		photo("utility", ".08", { class: "lazy transition", src: "photo.png" }),
+		] },
+		{ children: [
+		photo("lazy", "0", { class: "lazy" }),
+		photo("tween", ".07", { class: "lazy", style: "opacity: .07;" }),
+		photo("pending", "0", { "data-loaded": "false" }),
+		photo("waiting", "0", { class: "thumb waiting" }),
+		...["one", "two"].map(id => ({
+			...photo(id, "1", { class: "thumb shown" }),
+			style: { opacity: "1", "transition-property": "opacity", "transition-duration": ".3s" },
+		})),
+		] },
+		{ style: { opacity: "0" }, children: [photo("ancestor", ".05", {})] },
+	], ["#native", "#utility"])
+})
+test("#given faint produced rasters #then SVG sources and icon sized state images pass", () => {
+	assertCases(
+		buriedRaster,
+		[
+			{ id: "flag", tag: "img", attributes: { src: "paper.png" }, rect: { width: 400, height: 300 }, style: { opacity: "0.04" } },
+			{ id: "icon", tag: "img", attributes: { src: "pin.png" }, rect: { width: 24, height: 24 }, style: { opacity: "0" } },
+			{ id: "svg", tag: "img", attributes: { src: "icon.svg?state=on" }, style: { opacity: "0" } },
+			{ id: "text", text: "Faint text", style: { opacity: ".04" } },
+		],
+		["#flag"],
+	)
+})
+test("#given overlapping crossfade and blurred placeholders #then isolated faint rasters remain findings", () => {
+	const photo = (id: string, opacity: string): NodeSpec => ({
+		id,
+		tag: "img",
+		attributes: { src: "photo.png" },
+		rect: { width: 320, height: 180 },
+		style: { opacity },
+	})
+	assertCases(
+		buriedRaster,
+		[
+			{ children: [photo("flag", ".04"), { tag: "p", text: "Copy" }] },
+			{ children: [photo("painted", "1"), photo("frame", "0")] },
+			{ ...photo("blurred", "0"), style: { opacity: "0", filter: "blur(10px)" } },
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/buried-raster.ts

@@ -0,0 +1,72 @@
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot } from "../../types"
+import { ancestors, childrenOf, parentOf, shortSnippet, styleOf } from "../../core/page"
+import { colorsIn } from "../../core/color"
+import { splitTop } from "./support/appearance"
+import { pendingRaster } from "./support/raster-state"
+export const buriedRaster: PageRule = {
+	meta: {
+		id: "buried-raster",
+		name: "Raster buried under a wash or opacity",
+		category: "quality",
+		severity: "warning",
+		engine: "page",
+		description: "A raster image is almost invisible under a wash or low opacity.",
+		fixHint: "Let the photo or material show through, or remove the unused raster.",
+	},
+	check: ({ snapshot }) => {
+		const raster = (e: ElementSnapshot): boolean =>
+			["img", "picture", "video", "canvas"].includes(e.tag) || /url\(/i.test(styleOf(e, "background-image"))
+		return snapshot.elements.flatMap((e) => {
+			const bg = styleOf(e, "background-image"),
+				src = e.attributes["src"] ?? ""
+			if (e.rect.width <= 0 || e.rect.height <= 0 || styleOf(e, "display") === "none" || !raster(e) || pendingRaster(snapshot, e)) return []
+			const urls = [...bg.matchAll(/url\(["']?([^)]*?)["']?\)/gi)].map((m) => m[1] ?? "")
+			const svg = (s: string): boolean => /^data:image\/svg\+xml/i.test(s) || /\.svg(?:[?#]|$)/i.test(s)
+			if (e.tag === "img" ? svg(src) : urls.length > 0 && urls.every(svg)) return []
+			const opacity = Number(styleOf(e, "opacity"))
+			const faint = Number.isFinite(opacity) && opacity >= 0 && opacity < 0.15
+			const layers = splitTop(bg),
+				imageAt = layers.findIndex((l) => /url\(/i.test(l))
+			const washed =
+				imageAt >= 0 &&
+				layers.slice(0, imageAt).some((l) => {
+					const stops = colorsIn(l)
+					return /gradient\(/i.test(l) && stops.length > 0 && stops.every((c) => c.a >= 0.9)
+				})
+			if (!faint && !washed) return []
+			if (faint) {
+				if (
+					(e.rect.width <= 48 && e.rect.height <= 48) ||
+					[...styleOf(e, "filter").matchAll(/blur\(([\d.]+)px\)/g)].some((m) => Number(m[1]) >= 4)
+				)
+					return []
+				const area = e.rect.width * e.rect.height,
+					p = parentOf(snapshot, e)
+				const cover = (n: ElementSnapshot): boolean => {
+					if (n.index === e.index || !raster(n) || Number(styleOf(n, "opacity")) < 0.15 || styleOf(n, "display") === "none") return false
+					const w = Math.max(0, Math.min(e.rect.x + e.rect.width, n.rect.x + n.rect.width) - Math.max(e.rect.x, n.rect.x))
+					const h = Math.max(0, Math.min(e.rect.y + e.rect.height, n.rect.y + n.rect.height) - Math.max(e.rect.y, n.rect.y))
+					return w * h >= area * 0.5
+				}
+				if (
+					(p && childrenOf(snapshot, p).some(cover)) ||
+					[...ancestors(snapshot, e)]
+						.slice(0, 2)
+						.filter((a) => a.tag !== "body")
+						.some(cover)
+				)
+					return []
+			}
+			const blend = [styleOf(e, "background-blend-mode"), styleOf(e, "mix-blend-mode")].flatMap(v => v.split(","))
+			if (blend.some(v => v.trim() !== "" && v.trim() !== "normal")) return []
+			return [
+				{
+					element: e,
+					message: faint ? "Raster at opacity " + opacity : "Raster covered by a near-opaque gradient",
+					snippet: shortSnippet(e),
+				},
+			]
+		})
+	},
+}

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

@@ -0,0 +1,28 @@
+import { test } from "bun:test"
+import { codexGridBackground } from "./codex-grid-background"
+import { assertCases } from "./support/assert-cases"
+
+test("#given two tiled gradient hairlines #then a single rail and percentage cells pass", () => {
+	const layer = "linear-gradient(rgb(0,0,0) 1px, transparent 1px)",
+		grid = layer + ", " + layer
+	assertCases(
+		codexGridBackground,
+		[
+			{ id: "flag", style: { "background-image": grid, "background-size": "40px 40px" } },
+			{ id: "rail", style: { "background-image": layer, "background-size": "40px 40px" } },
+			{ id: "percent", style: { "background-image": grid, "background-size": "50% 50%" } },
+		],
+		["#flag"],
+	)
+})
+test("#given a pseudo grid #then hidden grids do not occupy the page finding", () => {
+	const style = {
+		"background-image": "linear-gradient(#111 1px, transparent 1px),linear-gradient(90deg,#111 1px,transparent 1px)",
+		"background-size": "32px 32px",
+	}
+	assertCases(
+		codexGridBackground,
+		[{ id: "hidden", style: { ...style, display: "none" } }, { id: "flag", after: style }, { id: "plain" }],
+		["#flag"],
+	)
+})

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

@@ -0,0 +1,34 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet } from "../../core/page"
+import { splitTop, visible } from "./support/appearance"
+export const codexGridBackground: PageRule = {
+	meta: {
+		id: "codex-grid-background",
+		name: "Decorative grid-line background",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "Tiled hairline gradients draw a decorative grid behind content.",
+		fixHint: "Reserve grids for measurement or canvas surfaces; use a plain content background.",
+	},
+	check: ({ snapshot }) => {
+		const e = snapshot.elements.find(
+			(e) =>
+				visible(snapshot, e) &&
+				[e.style, e.before?.style, e.after?.style].some((s) => {
+					const image = s?.["background-image"] ?? "",
+						size = s?.["background-size"] ?? ""
+					return (
+						splitTop(image).filter(
+							(layer) =>
+								layer.includes("linear-gradient(") &&
+								/(?:\b[0-9]{1,3}px\s*,\s*(?:transparent|rgba?\([^)]*[, /]\s*0\s*\)))|(?:transparent\s+calc\(100%\s*-\s*[0-9]{1,3}px\))/i.test(
+									layer,
+								),
+						).length >= 2 && /\b[0-9]{1,3}px\b/.test(size)
+					)
+				}),
+		)
+		return e ? [{ element: e, message: "Tiled two-axis gradient grid", snippet: shortSnippet(e) }] : []
+	},
+}

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

@@ -0,0 +1,37 @@
+import { test } from "bun:test"
+import { designSystemRadius } from "./design-system-radius"
+import { assertCases, round } from "./support/assert-cases"
+
+test("#given project radii #then off-scale corners report with tolerance", () => {
+	assertCases(
+		designSystemRadius,
+		[
+			{ id: "flag", style: round("18px") },
+			{ id: "token", style: round("8px") },
+			{ id: "tolerance", style: round("8.5px") },
+			{ id: "percent", style: round("50%") },
+			{ id: "zero", style: round("0px") },
+		],
+		["#flag"],
+		{ config: { designTokens: { radii: [0, 8, 16] } } },
+	)
+})
+test("#given a pill token #then large pill radii pass but other values report", () => {
+	assertCases(
+		designSystemRadius,
+		[
+			{ id: "flag", style: round("18px") },
+			{ id: "pill", style: round("9999px") },
+		],
+		["#flag"],
+		{ config: { designTokens: { radii: [8, 999] } } },
+	)
+})
+test("#given tokens only on the configured run #then the unconfigured run stays silent", () => {
+	const nodes = [
+		{ id: "flag", style: round("18px") },
+		{ id: "zero", style: round("0px") },
+	]
+	assertCases(designSystemRadius, nodes, ["#flag"], { config: { designTokens: { radii: [8] } } })
+	assertCases(designSystemRadius, nodes, [])
+})

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

@@ -0,0 +1,31 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet, styleOf } from "../../core/page"
+import { corners, length, splitTop, visible } from "./support/appearance"
+export const designSystemRadius: PageRule = {
+	meta: {
+		id: "design-system-radius",
+		name: "Radius outside DESIGN.md",
+		category: "quality",
+		severity: "advisory",
+		engine: "page",
+		description: "A corner radius is outside the project radius scale.",
+		fixHint: "Use a documented radius token or deliberately update the scale.",
+	},
+	check: ({ snapshot, config }) => {
+		const tokens = config.designTokens?.radii
+		if (!tokens?.length) return []
+		return snapshot.elements.flatMap((e) => {
+			if (!visible(snapshot, e)) return []
+			const values = [
+				...new Set(
+					corners
+						.flatMap((c) => splitTop(styleOf(e, "border-" + c + "-radius"), /\s/))
+						.filter((v) => !v.includes("%"))
+						.map(length)
+						.filter((v) => Number.isFinite(v) && v > 0.5 && !tokens.some((t) => Math.abs(t - v) <= 0.5 || (t >= 99 && v >= 99))),
+				),
+			]
+			return values.map((v) => ({ element: e, message: v + "px radius is outside the project scale", snippet: shortSnippet(e) }))
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/gpt-thin-border-wide-shadow.test.ts

@@ -0,0 +1,59 @@
+import { test } from "bun:test"
+import { gptThinBorderWideShadow } from "./gpt-thin-border-wide-shadow"
+import { assertCases, border } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const card = (id: string, shadow = "0 0 40px rgba(15,23,42,0.18)"): NodeSpec => ({
+	id,
+	style: { ...border("1px"), "box-shadow": shadow },
+	rect: { width: 180, height: 88 },
+})
+test("#given three repeated card treatments #then lone panels and pairs pass", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: [card("a"), card("b"), card("c")] },
+			{ tag: "section", children: [card("pair-a"), card("pair-b")] },
+			{ tag: "aside", children: [card("lone")] },
+		],
+		["#a", "#b", "#c"],
+	)
+})
+test("#given tight negative spread and inset shadows #then only broad external halos report", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: [card("a"), card("b"), card("c")] },
+			...["0 0 24px rgba(0,0,0,.2)", "0 18px 40px -26px rgba(0,0,0,.95)", "inset 0 0 40px rgba(0,0,0,.2)"].map((shadow, i) => ({
+				children: [card("p" + i + "a", shadow), card("p" + i + "b", shadow), card("p" + i + "c", shadow)],
+			})),
+		],
+		["#a", "#b", "#c"],
+	)
+})
+test("#given repeated cards behind two wrappers #then comparable sizes still form a row", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: ["a", "b", "c"].map((id) => ({ tag: "article", children: [{ children: [card(id)] }] })) },
+			{ children: [card("mismatch-a"), { ...card("mismatch-b"), rect: { width: 40, height: 200 } }, card("mismatch-c")] },
+		],
+		["#a", "#b", "#c"],
+	)
+})
+test("#given dark invisible halos and hidden flyouts #then only visible cards report", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: [card("a"), card("b"), card("c")] },
+			{
+				style: { "background-color": "rgb(10,10,11)" },
+				children: ["x", "y", "z"].map((id) => ({
+					...card(id, "0 0 40px rgba(0,0,0,.18)"),
+					style: { ...border("1px", "rgb(28,28,31)"), "background-color": "rgb(24,24,27)", "box-shadow": "0 0 40px rgba(0,0,0,.18)" },
+				})),
+			},
+			{ children: ["f1", "f2", "f3"].map((id) => ({ ...card(id), style: { ...card(id).style, position: "absolute", opacity: "0" } })) },
+		],
+		["#a", "#b", "#c"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/gpt-thin-border-wide-shadow.ts

@@ -0,0 +1,66 @@
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot } from "../../types"
+import { childrenOf, effectiveBackground, parentOf, shortSnippet, styleOf } from "../../core/page"
+import { parseColor, WHITE } from "../../core/color"
+import { parseShadow } from "../../core/shadow"
+import { length, showsOver, sides, visible } from "./support/appearance"
+export const gptThinBorderWideShadow: PageRule = {
+	meta: {
+		id: "gpt-thin-border-wide-shadow",
+		name: "Hairline border with wide shadow",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "Comparable cards repeat a hairline edge and broad halo.",
+		fixHint: "Choose one edge treatment across the row: border or elevation.",
+	},
+	check: ({ snapshot }) => {
+		const pair = (e: ElementSnapshot): boolean => {
+			if (!visible(snapshot, e)) return false
+			const p = parentOf(snapshot, e),
+				surface = p ? effectiveBackground(snapshot, p) : WHITE
+			const halo = parseShadow(styleOf(e, "box-shadow")).some(
+				(l) => !l.inset && l.color.a >= 0.12 && l.blur + Math.min(0, l.spread) >= 32 && showsOver(l.color, surface),
+			)
+			if (!halo) return false
+			const fill = effectiveBackground(snapshot, e)
+			return (
+				sides.filter((side) => {
+					const w = length(styleOf(e, "border-" + side + "-width")),
+						c = parseColor(styleOf(e, "border-" + side + "-color"))
+					return w > 0 && w <= 1.5 && c !== null && c.a >= 0.28 && showsOver(c, fill)
+				}).length >= 2
+			)
+		}
+		const matches = (a: ElementSnapshot, b: ElementSnapshot): boolean =>
+			["width", "height"].every((k) => {
+				const x = k === "width" ? a.rect.width : a.rect.height,
+					y = k === "width" ? b.rect.width : b.rect.height
+				return Math.max(x, y) > 0 && Math.abs(x - y) / Math.max(x, y) <= 0.25
+			})
+		return snapshot.elements.flatMap((e) => {
+			if (!pair(e)) return []
+			let cell = e
+			for (let depth = 0; depth <= 2; depth++) {
+				const p = parentOf(snapshot, cell)
+				if (!p) break
+				const siblings = childrenOf(snapshot, p),
+					at = siblings.findIndex((s) => s.index === cell.index)
+				let count = 1
+				for (const sibling of siblings.slice(Math.max(0, at - 24), at + 25)) {
+					if (sibling.index === cell.index || (depth > 0 && sibling.tag !== cell.tag)) continue
+					let level: readonly ElementSnapshot[] = [sibling],
+						budget = 32
+					for (let i = 0; i < depth; i++) {
+						level = level.flatMap((n) => childrenOf(snapshot, n)).slice(0, budget)
+						budget -= level.length
+					}
+					count += level.filter((n) => matches(e, n) && pair(n)).length
+				}
+				if (count >= 3) return [{ element: e, message: "Hairline border and broad shadow repeated across a row", snippet: shortSnippet(e) }]
+				cell = p
+			}
+			return []
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/hard-offset-shadow.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test"
+import { lintSnapshot } from "../../lint"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { hardOffsetShadow } from "./hard-offset-shadow"
+
+const flagged = (shadows: Readonly<Record<string, string>>, extra: Readonly<Record<string, Readonly<Record<string, string>>>> = {}): readonly string[] => {
+	const snap = buildSnapshot(
+		Object.entries(shadows).map(([id, shadow]) => ({ id, style: { "box-shadow": shadow }, attributes: extra[id] ?? {} })),
+	)
+	return lintSnapshot(snap, { rules: [hardOffsetShadow] }).map((f) => (f.location.kind === "element" ? f.location.selector : ""))
+}
+
+describe("hard-offset-shadow", () => {
+	test("#given unblurred shadows offset by 4px or more #then each is flagged", () => {
+		expect(
+			flagged({
+				positive: "rgb(51, 51, 51) 4px 4px 0px 0px",
+				negative: "rgb(51, 51, 51) -6px 6px 0px 0px",
+				layered: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(51, 51, 51) 4px 4px 0px 0px, rgba(0, 0, 0, 0.12) 0px 8px 24px 0px",
+			}),
+		).toEqual(["#positive", "#negative", "#layered"])
+	})
+
+	test("#given soft, inset, ring, transparent, small or contracted shadows #then none is flagged", () => {
+		expect(
+			flagged({
+				soft: "rgb(51, 51, 51) 0px 4px 12px 0px",
+				inset: "rgb(51, 51, 51) 4px 4px 0px 0px inset",
+				ring: "rgb(51, 51, 51) 0px 0px 0px 4px",
+				transparent: "rgba(0, 0, 0, 0) 4px 4px 0px 0px",
+				small: "rgb(51, 51, 51) 2px 2px 0px 0px",
+				contracted: "rgb(51, 51, 51) 4px 4px 0px -8px",
+			}),
+		).toEqual([])
+	})
+
+	test("#given a hard shadow waived with data-detect-ignore #then it is not flagged", () => {
+		expect(flagged({ waived: "rgb(51, 51, 51) 4px 4px 0px 0px" }, { waived: { "data-detect-ignore": "hard-offset-shadow" } })).toEqual([])
+	})
+
+	test("#given the rule is switched off in config #then nothing is reported", () => {
+		const snap = buildSnapshot([{ id: "x", style: { "box-shadow": "rgb(51, 51, 51) 4px 4px 0px 0px" } }])
+		expect(lintSnapshot(snap, { rules: [hardOffsetShadow], config: { rules: { "hard-offset-shadow": "off" } } })).toEqual([])
+	})
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/hard-offset-shadow.ts

@@ -0,0 +1,31 @@
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import { parseShadow } from "../../core/shadow"
+import type { PageRule } from "../../rule"
+
+const MIN_OFFSET_PX = 4
+
+export const hardOffsetShadow: PageRule = {
+	meta: {
+		id: "hard-offset-shadow",
+		name: "Hard offset shadow",
+		category: "quality",
+		severity: "advisory",
+		engine: "page",
+		description: "A visible shadow displaced by 4px or more with no blur: a neobrutalist costume unless the brief chose that direction.",
+		fixHint: "Use an elevation shadow with a y-offset and a soft blur, or waive it with data-detect-ignore=\"hard-offset-shadow\" when neobrutalism is the brief.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((el) => {
+			if (!isRendered(snapshot, el)) return []
+			const hard = parseShadow(styleOf(el, "box-shadow")).find(
+				(l) =>
+					!l.inset &&
+					l.color.a > 0 &&
+					l.blur === 0 &&
+					Math.max(Math.abs(l.x), Math.abs(l.y)) >= MIN_OFFSET_PX &&
+					l.spread > -Math.max(Math.abs(l.x), Math.abs(l.y)),
+			)
+			if (!hard) return []
+			return [{ element: el, message: `box-shadow ${hard.x}px ${hard.y}px with no blur`, snippet: shortSnippet(el) }]
+		}),
+}