oh-my-opencode 5.1.51 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/kicker-above-heading.ts

@@ -0,0 +1,69 @@
+import type { PageRule } from "../../rule"
+import { fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import { context, length, visible } from "./support/appearance"
+import { application, caps, cardContext, headingLevel, heroLabel, labelBefore, labelType, nearAbove } from "./support/labels"
+export const kickerAboveHeading: PageRule = {
+	meta: {
+		id: "kicker-above-heading",
+		name: "Kicker / eyebrow label above heading",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A separate tracked uppercase label repeats the heading hierarchy.",
+		fixHint: "Delete the kicker or work meaningful words into the heading or body.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((h) => {
+			const level = headingLevel(h),
+				size = fontSizePx(h)
+			if (
+				level < 1 ||
+				level > 4 ||
+				size < 20 ||
+				h.text.length < 3 ||
+				/^\s*["']?\//.test(h.text) ||
+				application(snapshot, h) ||
+				!visible(snapshot, h)
+			)
+				return []
+			const found = labelBefore(snapshot, h)
+			if (!found) return []
+			const label = found.label,
+				ty = labelType(snapshot, label),
+				text = label.text.trim(),
+				fs = fontSizePx(ty)
+			const variant = styleOf(ty, "font-variant") + styleOf(ty, "font-variant-caps")
+			const smallCaps = /small-caps/.test(variant)
+			if (
+				!visible(snapshot, label) ||
+				!["p", "span", "div", "small"].includes(label.tag) ||
+				text.length < 2 ||
+				text.length > 34 ||
+				!(caps(ty) || smallCaps) ||
+				fs <= 0 ||
+				fs > Math.max(14, Math.min(16, size * 0.45)) ||
+				!(length(styleOf(ty, "letter-spacing")) >= fs * 0.06)
+			)
+				return []
+			if (
+				!nearAbove(ty, h) ||
+				/[·•|]|\b(?:19|20)\d{2}\b|\s[\/›»>]\s|^(?:step\s*\d|\d{1,2}$|§|\d+(?:\.\d+)+\b|(?:section|article|clause|appendix|exhibit|schedule|chapter|part|rule|title)\s+(?:[0-9ivxlc]+|one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve)\b)/i.test(text) ||
+				cardContext(snapshot, h, label)
+			)
+				return []
+			if (h.tag === "h1" && size >= 48 &&
+				(length(styleOf(ty, "letter-spacing")) >= 1.6 || (found.levels === 0 && fs <= 14 && heroLabel(snapshot, h)))) return []
+			if (
+				context(
+					snapshot,
+					h,
+					(a) =>
+						["nav", "form", "figure", "footer", "header", "pre", "code"].includes(a.tag) ||
+						a.attributes["data-impeccable-allow-kickers"] !== undefined ||
+						a.attributes["aria-hidden"] === "true",
+				)
+			)
+				return []
+			return [{ element: label, message: "Tracked kicker above " + h.tag, snippet: shortSnippet(label) }]
+		}),
+}

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

@@ -0,0 +1,63 @@
+import { test } from "bun:test"
+import { marquee } from "./marquee"
+import { assertCases } from "./support/assert-cases"
+
+test("#given infinite crawling content and empty ornaments #then only content tracks report", () => {
+	const style = { "animation-name": "crawl", "animation-iteration-count": "infinite" }
+	assertCases(
+		marquee,
+		[
+			{ id: "words", text: "New arrivals every Friday", style },
+			{ id: "logos", style, children: [{ tag: "svg", attributes: { role: "img" } }] },
+			{ id: "wave", tag: "svg", style, attributes: { "aria-hidden": "true" }, children: [{ tag: "path" }] },
+			{ id: "sweep", style },
+		],
+		["#words", "#logos"],
+		{ cssText: ["@keyframes crawl {from{transform:translateX(0)}to{transform:translateX(-50%)}}"] },
+	)
+})
+test("#given moving pseudo content #then host words do not make empty sheens marquees", () => {
+	const pseudo = { "animation-name": "flow", "animation-iteration-count": "infinite" }
+	assertCases(
+		marquee,
+		[
+			{ id: "ticker", before: { ...pseudo, content: '"Sale New arrivals"' } },
+			{ id: "sheen", text: "Release news", before: { ...pseudo, content: '""' } },
+			{ id: "plain", text: "Still content" },
+		],
+		["#ticker"],
+		{ cssText: ["@keyframes flow {from{transform:translateX(-48%)}to{transform:translateX(48%)}}"] },
+	)
+})
+test("#given nested and native marquees #then each moving content strip reports once", () => {
+	assertCases(
+		marquee,
+		[
+			{
+				id: "flag",
+				tag: "marquee",
+				text: "Sale",
+				children: [{ id: "nested", text: "Sale", style: { "animation-name": "ticker", "animation-iteration-count": "infinite" } }],
+			},
+			{ id: "still", text: "Calm" },
+		],
+		["#flag"],
+	)
+})
+
+test("#given measured keyframes #then only percentage travel of at least twenty points is a marquee", () => {
+	const track = (id: string, name: string) => ({ id, text: "Moving content", style: { "animation-name": name, "animation-iteration-count": "infinite" } })
+	assertCases(marquee, [
+		track("pixels", "slide"),
+		track("short", "ticker-short"),
+		track("offset", "ticker-offset"),
+		track("pulse", "pulse-x"),
+		track("percent", "loop"),
+	], ["#percent"], { cssText: [
+		"@keyframes slide { from { transform: translateX(-96px); } to { transform: translateX(-1496px); } }",
+		"@keyframes ticker-short { from { transform: translateX(0%); } to { transform: translateX(-19%); } }",
+		"@keyframes ticker-offset { from { transform: translateX(-49%); } to { transform: translateX(-50%); } }",
+		"@keyframes pulse-x { from { transform: translateX(50%); opacity: 0; } to { opacity: 1; } }",
+		"@keyframes loop { from { transform: translateX(0%); } to { transform: translateX(calc(-20% + 1rem)); } }",
+	] })
+})

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

@@ -0,0 +1,51 @@
+import type { PageRule } from "../../rule"
+import { ancestors, descendants, shortSnippet, styleOf } from "../../core/page"
+import { visible } from "./support/appearance"
+import { infiniteNames, keyframes } from "./support/keyframes"
+import { pageIgnored } from "../color/support/page-ignore"
+import type { PageSnapshot } from "../../types"
+
+function marqueeKeyframes(snapshot: PageSnapshot, name: string): boolean {
+	const frames = keyframes(snapshot, name)
+	if (frames === null) return /marquee|ticker|crawl|scroll/i.test(name)
+	const percentages = frames.flatMap((frame) => [...(frame["transform"] ?? "").matchAll(/\btranslate(?:x|3d)?\(\s*(?:calc\(\s*)?(-?[\d.]+)%/gi)]
+		.map((match) => Number(match[1])))
+	if (percentages.length === 0 || (percentages.length === 1 && frames.some((frame) =>
+		frame["opacity"] !== undefined || /\bscale\(/i.test(frame["transform"] ?? "")))) return false
+	const travel = percentages.length === 1 ? Math.abs(percentages[0] ?? 0) : Math.max(...percentages) - Math.min(...percentages)
+	return travel >= 20
+}
+export const marquee: PageRule = {
+	meta: {
+		id: "marquee",
+		name: "Auto-scrolling marquee",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "Content crawls automatically through a repeating horizontal loop.",
+		fixHint: "Keep the content still and let readers scroll it themselves.",
+	},
+	check: ({ snapshot }) => {
+		const seen = new Set<number>()
+		const strips = new Set<number>()
+		return snapshot.elements.flatMap((e) => {
+			if (!visible(snapshot, e) || pageIgnored(snapshot, e, "marquee") || [...ancestors(snapshot, e)].some((a) => seen.has(a.index))) return []
+			const carries =
+				e.text.trim() !== "" ||
+				[...descendants(snapshot, e)].some(
+					(c) =>
+						["img", "picture", "video", "canvas", "iframe", "object", "embed", "marquee"].includes(c.tag) ||
+						(c.tag === "svg" && c.attributes["aria-hidden"] !== "true"),
+				)
+			const loop = (style: Readonly<Record<string, string>>): boolean =>
+				infiniteNames(style).some((name) => marqueeKeyframes(snapshot, name))
+			const pseudo = [e.before, e.after].some((p) => p && loop(p.style) && !["", '""', "none", "normal"].includes(p.style["content"] ?? ""))
+			if (e.tag !== "marquee" && !(carries && loop(e.style)) && !pseudo) return []
+			const strip = [...ancestors(snapshot, e)].find((a) => ["hidden", "clip", "scroll", "auto"].includes(styleOf(a, "overflow-x")))
+			if (strip && strips.has(strip.index)) return []
+			if (strip) strips.add(strip.index)
+			seen.add(e.index)
+			return [{ element: e, message: "Continuously scrolling content track", snippet: shortSnippet(e) }]
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/organic-clip-path.test.ts

@@ -0,0 +1,67 @@
+import { test } from "bun:test"
+import { organicClipPath } from "./organic-clip-path"
+import { assertCases } from "./support/assert-cases"
+
+const blob =
+	"polygon(50% 0%,61% 8%,74% 6%,82% 16%,94% 22%,96% 36%,100% 50%,92% 63%,88% 78%,74% 88%,60% 100%,46% 96%,30% 98%,18% 86%,6% 78%,2% 62%,0% 48%,6% 34%,12% 20%,22% 10%,36% 4%)"
+test("#given repeated inline contours #then one declaration reports once", () => {
+	assertCases(organicClipPath, [
+		{ id: "first", attributes: { style: "clip-path:" + blob }, style: { "clip-path": blob } },
+		{ id: "second", attributes: { style: "clip-path:" + blob }, style: { "clip-path": blob } },
+	], ["#first"])
+})
+test("#given organic polygons #then cut corners circles and coarse grid shapes pass", () => {
+	assertCases(
+		organicClipPath,
+		[
+			{ id: "flag", style: { "clip-path": blob } },
+			{ id: "hex", style: { "clip-path": "polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)" } },
+			{ id: "circle", style: { "clip-path": "circle(50% at 50% 50%)" } },
+			{ id: "cut", style: { "clip-path": "polygon(0 0,100% 0,100% 85%,85% 100%,0 100%)" } },
+		],
+		["#flag"],
+	)
+})
+test("#given notches even zigzags and torn edges #then only irregular contours report", () => {
+	assertCases(
+		organicClipPath,
+		[
+			{
+				id: "flag",
+				style: {
+					"clip-path":
+						"polygon(0 0,100% 0,100% 96%,95% 100%,90% 97%,85% 100%,80% 96%,75% 99%,70% 96%,65% 100%,60% 97%,55% 99%,50% 96%,0 96%)",
+				},
+			},
+			{
+				id: "zigzag",
+				style: { "clip-path": "polygon(0% 0%,100% 0%,100% 20%,96% 40%,100% 60%,96% 80%,100% 100%,0% 100%,4% 80%,0% 60%,4% 40%,0% 20%)" },
+			},
+			{
+				id: "notch",
+				style: {
+					"clip-path":
+						"polygon(4px 0%,calc(100% - 4px) 0%,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0% calc(100% - 4px),0% 4px,4px 4px)",
+				},
+			},
+		],
+		["#flag"],
+	)
+})
+test("#given curved silhouettes and smooth corner rectangles #then only organic paths report", () => {
+	assertCases(
+		organicClipPath,
+		[
+			{
+				id: "flag",
+				style: { "clip-path": "path('M0 0 H1440 V300 C1260 360 1080 240 900 300 C720 360 540 240 360 300 C180 360 90 260 0 300 Z')" },
+			},
+			{
+				id: "rounded",
+				style: { "clip-path": "path('M10 0 L90 0 Q100 0 100 10 L100 90 Q100 100 90 100 L10 100 Q0 100 0 90 L0 10 Q0 0 10 0 Z')" },
+			},
+			{ id: "line", style: { "clip-path": "path('M0 0 L100 0 L100 100 L0 100 Z')" } },
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/organic-clip-path.ts

@@ -0,0 +1,41 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet, styleOf } from "../../core/page"
+import { visible, splitTop } from "./support/appearance"
+import { geometricPolygon, roundedPath } from "./support/clip-geometry"
+import { cssCandidates, matchesSelector } from "./support/css-candidates"
+export const organicClipPath: PageRule = {
+	meta: {
+		id: "organic-clip-path",
+		name: "Organic contour drawn as clip-path",
+		category: "quality",
+		severity: "warning",
+		engine: "page",
+		description: "A complex CSS contour substitutes for produced organic material.",
+		fixHint: "Use an image-derived alpha matte; keep CSS clipping for simple geometry.",
+	},
+	check: ({ snapshot }) => {
+		const seen = new Set<string>()
+		const declarations = [...cssCandidates(snapshot)].filter(([, style]) => style["clip-path"] !== undefined)
+		return snapshot.elements.flatMap((e) => {
+			if (!visible(snapshot, e)) return []
+			const clip = styleOf(e, "clip-path"),
+				kind = /^(polygon|path)\(([\s\S]*)\)$/.exec(clip),
+				body = kind?.[2]
+			if (!kind || body === undefined) return []
+			const points = splitTop(body)
+			const offGrid = [...body.matchAll(/[-+]?(?:\d*\.)?\d+/g)].filter(
+				(m) => Math.abs(Number(m[0]) - Math.round(Number(m[0]) / 25) * 25) > 0.5,
+			).length
+			const organic =
+				kind[1] === "path"
+					? (body.match(/[CSQTA]/gi)?.length ?? 0) >= 3 && !roundedPath(body)
+					: points.length >= 10 && offGrid >= points.length && !geometricPolygon(body)
+			const inline = /(?:^|;)\s*clip-path\s*:/i.test(e.attributes["style"] ?? "")
+			const selector = declarations.find(([selector]) => matchesSelector(snapshot, e, selector))?.[0]
+			const key = inline ? clip : (selector ?? e.selector) + clip
+			if (!organic || seen.has(key)) return []
+			seen.add(key)
+			return [{ element: e, message: "Organic contour approximated with CSS " + kind[1], snippet: shortSnippet(e) }]
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/pulsing-dot.test.ts

@@ -0,0 +1,58 @@
+import { test } from "bun:test"
+import { pulsingDot } from "./pulsing-dot"
+import { assertCases, round } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const dot = (id: string, name: string, size = 8): NodeSpec => ({
+	id,
+	rect: { width: size, height: size },
+	style: { ...round("50%"), "animation-name": name, "animation-iteration-count": "infinite" },
+})
+test("#given authored dots with inline empty boxes #then declarations report once per selector", () => {
+	assertCases(pulsingDot, [
+		{ id: "one", tag: "span", attributes: { class: "dot" }, rect: { width: 0, height: 0 } },
+		{ id: "two", tag: "span", attributes: { class: "dot" }, rect: { width: 0, height: 0 } },
+		{ id: "tw", tag: "span", attributes: { class: "animate-ping w-2 h-2 rounded-full" }, rect: { width: 0, height: 0 } },
+	], ["#one", "#tw"], { cssText: [
+		":root {--dot:8px} .dot {width:var(--dot);height:var(--dot);border-radius:50%} " +
+		"@media (prefers-reduced-motion:no-preference) {.dot {animation:pulse 2s infinite}} " +
+		"@media (prefers-reduced-motion:reduce) {.dot {animation:none}} @keyframes pulse {50%{opacity:.3}}",
+	] })
+})
+test("#given tiny circular pulses #then finite animations and bars pass", () => {
+	assertCases(
+		pulsingDot,
+		[
+			dot("flag", "pulse"),
+			{ ...dot("finite", "pulse"), style: { ...dot("finite", "pulse").style, "animation-iteration-count": "3" } },
+			{ ...dot("bar", "pulse"), rect: { width: 3, height: 8 } },
+			dot("large", "pulse", 24),
+			{ ...dot("square", "pulse"), style: { ...dot("square", "pulse").style, ...round("2px") } },
+		],
+		["#flag"],
+		{ cssText: ["@keyframes pulse {50%{opacity:.3}}"] },
+	)
+})
+test("#given rotating travelling and swelling keyframes #then only stationary dot pulses report", () => {
+	assertCases(
+		pulsingDot,
+		[dot("flag", "swell"), dot("spin", "spin"), dot("float", "float"), dot("eye", "eye"), dot("wave", "wave")],
+		["#flag"],
+		{
+			cssText: [
+				"@keyframes swell {from{transform:scale(.5);opacity:1} to{transform:scale(1);opacity:.5}} @keyframes spin {to{transform:rotate(360deg)}} @keyframes float {from{transform:none;opacity:.4}to{transform:translateY(-14px);opacity:.6}} @keyframes eye {from{transform:scaleY(1)}to{transform:scaleY(.1)}} @keyframes wave {from{height:4px;opacity:.3}to{height:16px;opacity:1}}",
+			],
+		},
+	)
+})
+test("#given tiny bobs centred ripples and connector travel #then travel alone is excluded", () => {
+	assertCases(
+		pulsingDot,
+		[dot("bob", "bob"), dot("ring", "ring"), dot("ripple", "ripple"), dot("connector", "travel")],
+		["#bob", "#ring", "#ripple"],
+		{
+			cssText: [
+				"@keyframes bob {from{transform:translateY(0);opacity:1}to{transform:translateY(-2px);opacity:.4}} @keyframes ring {from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%, -50%) scale(2);opacity:0}} @keyframes ripple {from{width:8px;height:8px;margin:0;opacity:1}to{width:16px;height:16px;margin:-4px;opacity:0}} @keyframes travel {from{left:0px;opacity:0}to{left:calc(100% - 4px);opacity:1}}",
+			],
+		},
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/pulsing-dot.ts

@@ -0,0 +1,72 @@
+import type { PageHit, PageRule } from "../../rule"
+import type { ComputedStyle, ElementSnapshot, PageSnapshot } from "../../types"
+import { ancestors, shortSnippet, styleOf } from "../../core/page"
+import { radii, splitTop } from "./support/appearance"
+import { cssCandidates, matchesSelector } from "./support/css-candidates"
+import { dotPulse, infiniteNames, keyframes } from "./support/keyframes"
+
+function pulses(s: PageSnapshot, style: ComputedStyle): boolean {
+	const shorthand = splitTop(style["animation"] ?? "").filter(v => /\binfinite\b/.test(v))
+	const names = [...infiniteNames(style), ...shorthand.flatMap(v => v.split(/\s+/).filter(n => keyframes(s, n) !== null || /pulse|ping|ripple|beacon/i.test(n)))]
+	return names.some(n => {
+		const frames = keyframes(s, n)
+		return frames === null ? /pulse|ping|ripple|beacon/i.test(n) : dotPulse(frames)
+	})
+}
+const shown = (s: PageSnapshot, e: ElementSnapshot): boolean =>
+	[e, ...ancestors(s, e)].every(n => styleOf(n, "display") !== "none" && styleOf(n, "visibility") !== "hidden" &&
+		Number.parseFloat(styleOf(n, "opacity")) !== 0 && n.attributes["hidden"] === undefined)
+const dotSize = (w: number, h: number): boolean =>
+	w >= 2 && h >= 2 && w <= 16 && h <= 16 && Math.max(w, h) <= 1.5 * Math.min(w, h)
+
+export const pulsingDot: PageRule = {
+	meta: {
+		id: "pulsing-dot", name: "Pulsing status dot", category: "slop", severity: "warning", engine: "page",
+		description: "A tiny circular indicator pulses continuously.",
+		fixHint: "Keep the indicator static unless it represents live changing data.",
+	},
+	check: ({ snapshot }) => {
+		const hits: PageHit[] = []
+		const covered = new Set<number>()
+		const candidates = cssCandidates(snapshot)
+		const vars = new Map([...candidates.values()].flatMap(d => Object.entries(d).filter(([p]) => p.startsWith("--"))))
+		const length = (value: string): number => {
+			const resolved = value.replace(/var\((--[\w-]+)\)/g, (_, name: string) => vars.get(name) ?? "")
+			const m = /^([\d.]+)(px|rem|em)?$/.exec(resolved)
+			return m ? Number(m[1]) * (m[2] === "rem" || m[2] === "em" ? 16 : 1) : Number.NaN
+		}
+		for (const [selector, style] of candidates) {
+			const w = length(style["width"] ?? style["inline-size"] ?? ""), h = length(style["height"] ?? style["block-size"] ?? "")
+			const radius = style["border-radius"] ?? ""
+			if (!dotSize(w, h) || !pulses(snapshot, style) ||
+				!radius.split(/[\s/]+/).every(r => r.endsWith("%") ? Number.parseFloat(r) >= 40 : length(r) >= Math.min(w, h) * 0.4)) continue
+			const matches = snapshot.elements.filter(e => matchesSelector(snapshot, e, selector) && shown(snapshot, e))
+			const first = matches[0]
+			if (!first) continue
+			matches.forEach(e => covered.add(e.index))
+			hits.push({ element: first, message: "Infinitely pulsing " + w + "x" + h + "px status dot", snippet: shortSnippet(first) })
+		}
+		const tailwind = new Set<string>()
+		for (const e of snapshot.elements) {
+			const classes = e.attributes["class"] ?? ""
+			if (/(?:^|\s)animate-(?:ping|pulse)(?:$|\s)/.test(classes) && /(?:^|\s)rounded-full(?:$|\s)/.test(classes) &&
+				/(?:^|\s)[wh]-(?:0\.5|1|1\.5|2|2\.5|3|3\.5|4)(?:$|\s)/.test(classes)) {
+				const side = (name: string): number | undefined => {
+					const value = new RegExp("(?:^|\\s)" + name + "-([\\d.]+)(?:$|\\s)").exec(classes)?.[1]
+					return value === undefined ? undefined : Number(value) * 4
+				}
+				const w = side("w"), h = side("h")
+				if ((w === undefined || h === undefined || dotSize(w, h)) && !tailwind.has(classes)) {
+					tailwind.add(classes)
+					covered.add(e.index)
+					hits.push({ element: e, message: "Infinitely pulsing utility status dot", snippet: shortSnippet(e) })
+				}
+			}
+			if (covered.has(e.index) || !shown(snapshot, e) || !pulses(snapshot, e.style)) continue
+			const w = e.rect.width, h = e.rect.height
+			if (dotSize(w, h) && radii(e).every(r => r >= Math.min(w, h) * 0.4))
+				hits.push({ element: e, message: "Infinitely pulsing " + w + "x" + h + "px status dot", snippet: shortSnippet(e) })
+		}
+		return hits
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/repeating-stripes-gradient.test.ts

@@ -0,0 +1,26 @@
+import { test } from "bun:test"
+import { repeatingStripesGradient } from "./repeating-stripes-gradient"
+import { assertCases } from "./support/assert-cases"
+
+test("#given repeating gradients on elements and pseudo elements #then single gradients pass", () => {
+	assertCases(
+		repeatingStripesGradient,
+		[
+			{ id: "flag", style: { "background-image": "repeating-linear-gradient(45deg,#000 0px,#fff 2px)" } },
+			{ id: "single", style: { "background-image": "linear-gradient(#000,#fff)" } },
+			{ id: "hidden", style: { display: "none", "background-image": "repeating-linear-gradient(#000,#fff)" } },
+		],
+		["#flag"],
+	)
+})
+test("#given radial rings and full span ramps #then only patterns that tile report", () => {
+	assertCases(
+		repeatingStripesGradient,
+		[
+			{ id: "full", style: { "background-image": "repeating-linear-gradient(147deg,#032e6d,#032e6d 40%,#021d45)" } },
+			{ id: "percent", style: { "background-image": "repeating-linear-gradient(147deg,#0394c9 0%,#0288ba 100%)" } },
+			{ id: "flag", after: { "background-image": "repeating-radial-gradient(#000 0px,#fff 2px)" } },
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/repeating-stripes-gradient.ts

@@ -0,0 +1,25 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet } from "../../core/page"
+import { visible } from "./support/appearance"
+import { repeats } from "./support/gradient-pattern"
+export const repeatingStripesGradient: PageRule = {
+	meta: {
+		id: "repeating-stripes-gradient",
+		name: "Repeating-gradient stripes",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "Repeating gradient bands decorate a surface without adding structure.",
+		fixHint: "Use a deliberate texture or keep the surface plain.",
+	},
+	check: ({ snapshot }) => {
+		const e = snapshot.elements.find(
+			(e) =>
+				visible(snapshot, e) &&
+				[e.style, e.before?.style, e.after?.style].some((s) =>
+					["background-image", "mask-image", "-webkit-mask-image"].some((p) => repeats(s?.[p] ?? "")),
+				),
+		)
+		return e ? [{ element: e, message: "Repeating gradient surface stripes", snippet: shortSnippet(e) }] : []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/shape-assembled-illustration.test.ts

@@ -0,0 +1,59 @@
+import { test } from "bun:test"
+import { shapeAssembledIllustration } from "./shape-assembled-illustration"
+import { assertCases } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const primitives: readonly NodeSpec[] = Array.from({ length: 8 }, (_, i) => ({
+	tag: i % 2 === 0 ? "rect" : "circle",
+	attributes: { fill: ["#00bb55", "#dd3333", "#ffcc00"][i % 3] ?? "#00bb55", width: "40", height: "40" },
+}))
+const scene = (id: string): NodeSpec => ({ id, tag: "svg", rect: { width: 640, height: 480 }, children: primitives })
+test("#given large primitive scenes #then small logos and path dominated art pass", () => {
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			scene("flag"),
+			{ ...scene("logo"), rect: { width: 32, height: 32 } },
+			{ ...scene("traced"), children: [...primitives, ...Array.from({ length: 36 }, () => ({ tag: "path" }))] },
+		],
+		["#flag"],
+	)
+})
+test("#given data graphics and texture patterns #then pictorial scenes alone report", () => {
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			scene("flag"),
+			{ ...scene("chart"), children: [...primitives, ...Array.from({ length: 3 }, () => ({ tag: "text", text: "Data" }))] },
+			{ ...scene("pattern"), children: [...primitives, { tag: "defs", children: [{ tag: "pattern" }] }] },
+			{ ...scene("stroke"), children: primitives.map((p) => ({ ...p, attributes: { fill: "none" } })) },
+		],
+		["#flag"],
+	)
+})
+test("#given unlabeled equal width bars #then charts pass but block scenes report", () => {
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			scene("flag"),
+			{
+				...scene("chart"),
+				children: Array.from({ length: 10 }, (_, i) => ({
+					tag: "rect",
+					attributes: { width: "44", height: String(100 + i * 10), fill: ["#ffffff", "#6633ff", "#eeeeee"][i % 3] ?? "#ffffff" },
+				})),
+			},
+		],
+		["#flag"],
+	)
+})
+test("#given definitions repeated through use elements #then only drawn primitives count", () => {
+	const defs = { tag: "defs", children: primitives.map((p, i) => ({ ...p, attributes: { ...p.attributes, id: "shape" + i } })) }
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			{ ...scene("flag"), children: [defs, ...primitives.map((_, i) => ({ tag: "use", attributes: { href: "#shape" + i } }))] },
+			{ ...scene("unused"), children: [defs] },
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/shape-assembled-illustration.ts

@@ -0,0 +1,58 @@
+import type { PageRule } from "../../rule"
+import { ancestors, descendants, shortSnippet } from "../../core/page"
+import { visible } from "./support/appearance"
+export const shapeAssembledIllustration: PageRule = {
+	meta: {
+		id: "shape-assembled-illustration",
+		name: "Shape-assembled illustration",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "A hero-sized SVG scene is assembled mainly from primitive shapes.",
+		fixHint: "Use produced artwork, a photograph, or a deliberately drawn illustration.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((e) => {
+			if (e.tag !== "svg" || !visible(snapshot, e) || e.rect.width < 200 || e.rect.height < 200) return []
+			const all = [...descendants(snapshot, e)]
+			if (all.filter((n) => n.tag === "text").length > 2 || all.some((n) => n.tag === "pattern")) return []
+			const primitive = (tag: string): boolean => ["rect", "circle", "ellipse", "polygon"].includes(tag)
+			const drawn = (tag: string): boolean => primitive(tag) || ["path", "line", "polyline"].includes(tag)
+			const painted = all.filter((n) => ![...ancestors(snapshot, n)].some((a) => a.tag === "defs"))
+			const used = painted
+				.filter((n) => n.tag === "use")
+				.flatMap((n) => {
+					const id = (n.attributes["href"] ?? n.attributes["xlink:href"] ?? "").replace(/^#/, "")
+					const target = all.find((a) => a.attributes["id"] === id && drawn(a.tag))
+					return target ? [target] : []
+				})
+			const shapes = [...painted, ...used],
+				primitives = shapes.filter((n) => primitive(n.tag))
+			if (primitives.length < 8 || primitives.length < shapes.filter((n) => drawn(n.tag)).length * 0.5) return []
+			const fills = new Set(
+				[e, ...all]
+					.map((n) => n.attributes["fill"]?.toLowerCase())
+					.filter((v) => v !== undefined && !["none", "transparent", "currentcolor", "inherit", ""].includes(v)),
+			)
+			if (fills.size < 3) return []
+			const rects = primitives
+				.filter((n) => n.tag === "rect")
+				.map((n) => ({ w: Number(n.attributes["width"]), h: Number(n.attributes["height"]) }))
+				.filter((r) => Number.isFinite(r.w) && Number.isFinite(r.h))
+			if (
+				primitives.length <= 400 &&
+				primitives.filter((n) => ["circle", "ellipse", "polygon"].includes(n.tag)).length < primitives.length * 0.25
+			) {
+				const series = rects.some((a) => {
+					const sameWidth = rects.filter((b) => Math.abs(a.w - b.w) <= 1),
+						sameHeight = rects.filter((b) => Math.abs(a.h - b.h) <= 1)
+					return (
+						(sameWidth.length >= primitives.length / 2 && sameWidth.some((b) => Math.abs(b.h - a.h) > 1)) ||
+						(sameHeight.length >= primitives.length / 2 && sameHeight.some((b) => Math.abs(b.w - a.w) > 1))
+					)
+				})
+				if (series) return []
+			}
+			return [{ element: e, message: "Large SVG scene assembled from " + primitives.length + " primitives", snippet: shortSnippet(e) }]
+		}),
+}