oh-my-opencode 5.1.51 → 5.1.55

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

@@ -0,0 +1,141 @@
+import { ancestors, childrenOf, isRendered, px, styleOf } from "../../../core/page"
+import type { ComputedStyle, ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { effectiveOpacity, gradientStops, opacity } from "./gradients"
+import { textOpacity } from "./animation-opacity"
+
+export function contains(outer: Rect, inner: Rect): boolean {
+	return inner.x >= outer.x - 1 && inner.y >= outer.y - 1 && inner.x + inner.width <= outer.x + outer.width + 1 && inner.y + inner.height <= outer.y + outer.height + 1
+}
+
+export function textRect(el: ElementSnapshot): Rect {
+	if (el.lineRects.length === 0) return el.rect
+	const x = Math.min(...el.lineRects.map((r) => r.x))
+	const y = Math.min(...el.lineRects.map((r) => r.y))
+	return {
+		x, y,
+		width: Math.max(...el.lineRects.map((r) => r.x + r.width)) - x,
+		height: Math.max(...el.lineRects.map((r) => r.y + r.height)) - y,
+	}
+}
+
+const zIndex = (el: ElementSnapshot): number => Number.parseFloat(styleOf(el, "z-index")) || 0
+
+function coveredBySibling(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	const rect = textRect(el)
+	for (const node of [el, ...ancestors(snapshot, el)]) {
+		const parent = node.parent === null ? undefined : snapshot.elements[node.parent]
+		if (!parent) continue
+		for (const sibling of childrenOf(snapshot, parent)) {
+			if (sibling === node || !isRendered(snapshot, sibling) || effectiveOpacity(snapshot, sibling) < 0.99 || !contains(sibling.rect, rect)) continue
+			if (!["absolute", "fixed"].includes(styleOf(sibling, "position")) && styleOf(sibling, "z-index") === "auto") continue
+			if (zIndex(sibling) < zIndex(node) || (zIndex(sibling) === zIndex(node) && sibling.index < node.index)) continue
+			const bg = sibling.style["background-color"] ?? ""
+			const alpha = /rgba\([^)]*,\s*([\d.]+)\s*\)/.exec(bg)
+			const solid = bg.startsWith("rgb(") || bg.startsWith("#") || (alpha !== null && Number(alpha[1]) >= 0.99)
+			if (solid || ["img", "video", "canvas"].includes(sibling.tag)) return true
+		}
+	}
+	return false
+}
+
+function maskHides(node: ElementSnapshot, rect: Rect): boolean {
+	const mask = styleOf(node, "mask-image") || styleOf(node, "-webkit-mask-image")
+	if (!mask.includes("linear-gradient")) return false
+	const stops = gradientStops(mask)
+	const last = stops.at(-1)
+	if (!last || last.color.a > 0.02) return false
+	const terminal = /([\d.]+)(px|%)(?:\s*\))?$/.exec(last.raw)
+	if (!terminal) return false
+	const edge = Number(terminal[1]) * (terminal[2] === "%" ? node.rect.height / 100 : 1)
+	return rect.y >= node.rect.y + edge
+}
+
+function scrollFrame(snapshot: PageSnapshot, node: ElementSnapshot): boolean {
+	const r = node.rect
+	if (styleOf(node, "position") === "fixed" && r.x <= 1 && r.y <= 1
+		&& r.x + r.width >= snapshot.viewport.width - 1 && r.y + r.height >= snapshot.viewport.height - 1) return true
+	if (r.height < snapshot.viewport.height - 1 || node.scroll.scrollHeight <= node.scroll.clientHeight + 1) return false
+	const max = px(styleOf(node, "max-height"))
+	if (max !== null && max > snapshot.viewport.height + 1 && Math.abs(r.height - max) <= 1) return false
+	const stack = [...childrenOf(snapshot, node)]
+	let read = 0
+	while (stack.length > 0) {
+		const child = stack.pop()
+		if (!child) break
+		if (++read > 2000) return true
+		const position = styleOf(child, "position")
+		if (position === "fixed") continue
+		if (position === "absolute" && child.rect.height < r.height / 2) continue
+		if (child.rect.y + child.rect.height > r.y + r.height + 1) return true
+		stack.push(...childrenOf(snapshot, child))
+	}
+	return node.ownText.trim() !== ""
+}
+
+export function textWhole(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	const rect = textRect(el)
+	if (el.rect.x < -1 || el.rect.x + el.rect.width > snapshot.viewport.width + 1) return false
+	return ancestors(snapshot, el).every((node) => !["hidden", "clip", "auto", "scroll"].includes(styleOf(node, "overflow-x"))
+		|| (rect.x >= node.rect.x - 1 && rect.x + rect.width <= node.rect.x + node.rect.width + 1))
+}
+
+export function textPainted(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	if (el.rect.width <= 0 || el.rect.height <= 0 || textOpacity(snapshot, el) <= 0.02) return false
+	const rect = textRect(el)
+	if ([el, ...ancestors(snapshot, el)].some((node) => styleOf(node, "position") === "fixed")
+		&& (rect.x >= snapshot.viewport.width || rect.x + rect.width <= 0)) return false
+	let left = rect.x
+	let right = rect.x + rect.width
+	const viewportFrame = [el, ...ancestors(snapshot, el)].some((node) => styleOf(node, "position") === "fixed"
+		&& node.rect.x <= 1 && node.rect.y <= 1 && node.rect.width >= snapshot.viewport.width - 1 && node.rect.height >= snapshot.viewport.height - 1)
+	for (const node of [el, ...ancestors(snapshot, el)]) {
+		if (["hidden", "collapse"].includes(styleOf(node, "visibility")) || styleOf(node, "display") === "none") return false
+		if (node.attributes["hidden"] === "until-found" || (node.tag === "details" && node.attributes["open"] === undefined
+			&& node !== el && ![el, ...ancestors(snapshot, el)].some((child) => child.tag === "summary" && child.parent === node.index))) return false
+		if (node.rect.width <= 1 && node.rect.height <= 1 && styleOf(node, "overflow-x") === "hidden") return false
+		const r = node.rect
+		if (["hidden", "clip", "auto", "scroll"].includes(styleOf(node, "overflow-x"))) {
+			left = Math.max(left, r.x)
+			right = Math.min(right, r.x + r.width)
+			const inside = [el, ...ancestors(snapshot, el)].slice(0, [el, ...ancestors(snapshot, el)].indexOf(node))
+			const parks = r.width < snapshot.viewport.width - 1 || ["auto", "scroll"].includes(styleOf(node, "overflow-x"))
+				|| inside.some((child) => !["", "none"].includes(styleOf(child, "transform")))
+			if (right <= left || (parks && styleOf(node, "text-overflow") !== "ellipsis" && (right - left) / rect.width < 0.25)) return false
+		}
+		if (["hidden", "clip"].includes(styleOf(node, "overflow-y")) && !(node.tag === "body" && viewportFrame) && !scrollFrame(snapshot, node)
+			&& (rect.y >= r.y + r.height || rect.y + rect.height <= r.y)) return false
+		if (maskHides(node, rect)) return false
+	}
+	return !coveredBySibling(snapshot, el)
+}
+
+export function pseudoCovers(style: ComputedStyle, host: ElementSnapshot, rect: Rect): boolean {
+	if (style["display"] === "none" || ["hidden", "collapse"].includes(style["visibility"] ?? "") || Number.parseFloat(style["opacity"] ?? "1") < 0.9) return false
+	if (style["content"] === "none" || style["content"] === "normal") return false
+	const length = (value: string | undefined, size: number, fallback: number): number => value?.endsWith("%") ? Number.parseFloat(value) * size / 100 : px(value) ?? fallback
+	const width = length(style["width"], host.rect.width, host.rect.width)
+	const height = length(style["height"], host.rect.height, host.rect.height)
+	let x = host.rect.x + length(style["left"], host.rect.width, 0)
+	let y = host.rect.y + length(style["top"], host.rect.height, 0)
+	const matrix = /^matrix\(([^)]+)\)/.exec(style["transform"] ?? "")
+	if (matrix) {
+		const [a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0] = (matrix[1] ?? "").split(",").map(Number)
+		if (Math.abs(a) < 0.01 || Math.abs(d) < 0.01) return false
+		x += tx
+		y += ty
+		if (b !== 0 && c === 0) {
+			const conservativeEdge = y + height + Math.min(0, b * width)
+			if (rect.y + rect.height > conservativeEdge) return false
+		}
+	}
+	if (style["scale"]?.startsWith("0")) return false
+	return contains({ x, y, width, height }, rect)
+}
+
+export function siblingGrounds(snapshot: PageSnapshot, node: ElementSnapshot, rect: Rect): readonly ElementSnapshot[] {
+	const parent = node.parent === null ? undefined : snapshot.elements[node.parent]
+	if (!parent) return []
+	return childrenOf(snapshot, parent).filter((sib) =>
+		sib !== node && sib.index < node.index && zIndex(sib) <= zIndex(node) && isRendered(snapshot, sib) && opacity(sib) > 0 && contains(sib.rect, rect),
+	).sort((a, b) => zIndex(b) - zIndex(a) || b.index - a.index)
+}

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

@@ -0,0 +1,58 @@
+import { parseColor, toHsl, type Rgba } from "../../../core/color"
+import { ancestors, fontSizePx, isHeading, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { gradientStops, spread } from "./gradients"
+
+export const tellHue = (c: Rgba): "cyan" | "purple" | null => {
+	const { h, s } = toHsl(c)
+	return h >= 260 && h <= 310 ? "purple" : h >= 170 && h <= 197 && s >= 0.4 ? "cyan" : null
+}
+
+export function paletteVisible(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	return el.rect.width > 0 && el.rect.height > 0 && [el, ...ancestors(snapshot, el)].every((node) =>
+		styleOf(node, "display") !== "none" && !["hidden", "collapse"].includes(styleOf(node, "visibility")))
+}
+
+function roleKey(el: ElementSnapshot, fill: boolean): string {
+	return fill ? `${el.tag}|${Math.round(el.rect.width)}x${Math.round(el.rect.height)}` : `${el.tag}|${fontSizePx(el)}|${styleOf(el, "font-weight")}`
+}
+
+export function categoryColor(snapshot: PageSnapshot, el: ElementSnapshot, fill: boolean): boolean {
+	const hues: number[] = []
+	for (const other of snapshot.elements) {
+		if (!paletteVisible(snapshot, other) || roleKey(other, fill) !== roleKey(el, fill)) continue
+		const color = fill
+			? gradientStops(styleOf(other, "background-image")).find((s) => s.color.a > 0.1 && spread(s.color) > 50)?.color
+			: parseColor(styleOf(other, "color"))
+		if (color && spread(color) > 50 && (fill || color.a >= 0.5)) hues.push(toHsl(color).h)
+	}
+	const distinct: number[] = []
+	for (const h of hues.sort((a, b) => a - b)) if (h - (distinct.at(-1) ?? -360) >= 5) distinct.push(h)
+	if (distinct.length > 1 && (distinct[0] ?? 0) + 360 - (distinct.at(-1) ?? 0) < 5) distinct.pop()
+	const outside = distinct.filter((h) => !(h >= 260 && h <= 310) && !(h >= 170 && h <= 197)).length
+	return distinct.length >= 6 && outside * 2 >= distinct.length
+}
+
+export function brandColor(snapshot: PageSnapshot, ink: Rgba): boolean {
+	return snapshot.elements.some((el) => {
+		if (!paletteVisible(snapshot, el)) return false
+		const local = [...ancestors(snapshot, el)].some((a) => a.tag === "main" || a.tag === "article")
+		const name = [el.attributes["id"], el.attributes["class"], el.attributes["aria-label"], el.attributes["alt"]].join(" ").toLowerCase()
+		const namedLogo = /(?:^|[\s_-])(logo|wordmark|logotype)(?:$|[\s_-])/.test(name) && !/(logos|gallery|grid|wall|list|strip|row|carousel|cloud|title|heading|section)/.test(name)
+		if (isHeading(el) && !namedLogo) return false
+		const logo = !local && namedLogo
+		const bar = !local && (["nav", "header"].includes(el.tag) || ["navigation", "banner"].includes(el.attributes["role"] ?? "")) && el.rect.width >= snapshot.viewport.width * 0.5
+		const band = el.rect.width >= snapshot.viewport.width * 0.9 && el.rect.width * el.rect.height >= snapshot.viewport.width * snapshot.viewport.height * 0.2
+		if (!logo && !bar && !band) return false
+		const colors = gradientStops(styleOf(el, "background-image")).length === 0 ? [parseColor(styleOf(el, "background-color"))] : []
+		if (logo) {
+			const text = el.ownText ? el : snapshot.elements.find((node) => node.ownText && [...ancestors(snapshot, node)].some((a) => a.index === el.index))
+			if (text) colors.push(parseColor(styleOf(text, "color")))
+		}
+		return colors.some((c) => {
+			if (!c || c.a < 0.9 || spread(c) <= 50) return false
+			const delta = Math.abs(toHsl(c).h - toHsl(ink).h)
+			return Math.min(delta, 360 - delta) <= 12
+		})
+	})
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/support/placeholder-contrast.ts

@@ -0,0 +1,25 @@
+import { blend, contrastRatio, parseColor } from "../../../core/color"
+import { ancestors, fontSizePx, styleOf } from "../../../core/page"
+import type { PageHit } from "../../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { textPainted } from "./painted-text"
+import { textBackgrounds } from "./text-colors"
+
+export function placeholderContrast(snapshot: PageSnapshot, el: ElementSnapshot): readonly PageHit[] {
+	const text = (el.attributes["placeholder"] ?? "").trim()
+	if (!["input", "textarea"].includes(el.tag) || !el.placeholder || !text || !textPainted(snapshot, el)) return []
+	if ([el, ...ancestors(snapshot, el)].some((node) => node.attributes["disabled"] !== undefined || node.attributes["aria-disabled"] === "true")) return []
+	if (el.tag === "input" && ["hidden", "checkbox", "radio", "file", "submit", "button", "image", "reset", "range", "color"].includes((el.attributes["type"] ?? "text").toLowerCase())) return []
+	const ink = parseColor(el.placeholder.style["color"] ?? "")
+	if (!ink || ink.a <= 0.02) return []
+	const backgrounds = textBackgrounds(snapshot, el)
+	if (backgrounds.length === 0) return []
+	const size = fontSizePx(el)
+	if (size <= 0) return []
+	const words = (styleOf(el, "font-family").split(",")[0] ?? "").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/)
+	const namedBold = words.some((word) => ["bold", "semibold", "demibold", "extrabold", "ultrabold", "heavy", "black"].includes(word))
+	const weight = namedBold ? Math.max(700, Number.parseFloat(styleOf(el, "font-weight")) || 400) : Number.parseFloat(styleOf(el, "font-weight"))
+	const threshold = size >= 24 || (size >= 18.66 && weight >= 700) ? 3 : 4.5
+	const ratio = Math.min(...backgrounds.map((background) => contrastRatio(blend(ink, background), background)))
+	return ratio < threshold ? [{ element: el, message: `Placeholder contrast ${ratio.toFixed(2)}:1; needs ${threshold}:1`, snippet: text }] : []
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/color/support/stock-accent.ts

@@ -0,0 +1,31 @@
+import { parseColor, type Rgba } from "../../../core/color"
+import { px, styleOf } from "../../../core/page"
+import { parseShadow } from "../../../core/shadow"
+import { cssBlocks } from "../../../core/source"
+import type { PageSnapshot } from "../../../types"
+import { matchesSelector } from "../../decoration/support/css-candidates"
+import { colorDistance, gradientStops } from "./gradients"
+import { paletteVisible } from "./palette-roles"
+
+const colors = ["#7c3aed", "#8b5cf6", "#a855f7", "#9333ea", "#7e22ce", "#6d28d9", "#6366f1", "#764ba2", "#667eea"]
+	.map(parseColor).filter((color) => color !== null)
+const stock = (color: Rgba | null): boolean => color !== null && color.a > 0.1 && colors.some((c) => colorDistance(c, color) <= 8)
+
+export function stockAccent(snapshot: PageSnapshot): boolean {
+	const trigger = /(?:^|;)\s*color\s*:[^;]*#(?:7c3aed|8b5cf6|a855f7|9333ea|7e22ce|6d28d9)\b|gradient[^;]*#(?:7c3aed|8b5cf6|a855f7|764ba2|667eea)\b/i
+	const declared = snapshot.elements.some((el) => trigger.test(el.attributes["style"] ?? "") && paletteVisible(snapshot, el))
+		|| snapshot.cssText.some((css) => cssBlocks(css).some((block) =>
+		trigger.test(block.body) && block.selector.split(",").some((selector) =>
+			snapshot.elements.some((el) => matchesSelector(snapshot, el, selector.trim()) && paletteVisible(snapshot, el)))))
+	if (!declared) return false
+	return snapshot.elements.some((el) => {
+		if (!paletteVisible(snapshot, el)) return false
+		if (el.ownText.trim() && stock(parseColor(styleOf(el, "color")))) return true
+		if (stock(parseColor(styleOf(el, "background-color"))) || gradientStops(styleOf(el, "background-image")).some((s) => stock(s.color))) return true
+		for (const side of ["top", "right", "bottom", "left"]) {
+			if ((px(styleOf(el, `border-${side}-width`)) ?? 0) > 0 && !["none", "hidden"].includes(styleOf(el, `border-${side}-style`)) && stock(parseColor(styleOf(el, `border-${side}-color`)))) return true
+		}
+		if ((px(styleOf(el, "outline-width")) ?? 0) > 0 && !["", "none"].includes(styleOf(el, "outline-style")) && stock(parseColor(styleOf(el, "outline-color")))) return true
+		return parseShadow(styleOf(el, "box-shadow")).some((s) => stock(s.color) && [s.x, s.y, s.blur, s.spread].some((n) => n !== 0))
+	})
+}

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

@@ -0,0 +1,80 @@
+import { blend, parseColor, WHITE, type Rgba } from "../../../core/color"
+import { ancestors, fontSizePx, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { effectiveOpacity, gradientStops } from "./gradients"
+import { gradientSamples } from "./gradient-samples"
+import { contains, pseudoCovers, siblingGrounds, textPainted, textRect } from "./painted-text"
+import { textOpacity } from "./animation-opacity"
+
+export const clipsText = (el: ElementSnapshot): boolean =>
+	[styleOf(el, "background-clip"), styleOf(el, "-webkit-background-clip")].some((v) => v.split(",").some((s) => s.trim() === "text"))
+
+export function textInk(snapshot: PageSnapshot, el: ElementSnapshot): Rgba | null {
+	if (!textPainted(snapshot, el) || !/[\p{L}\p{N}]/u.test(el.ownText)) return null
+	if (fontSizePx(el) <= 0 || [el, ...ancestors(snapshot, el)].some((node) => ["video", "audio", "canvas", "iframe"].includes(node.tag))) return null
+	if (["script", "style", "title", "option", "noscript", "template"].includes(el.tag)) return null
+	const fill = styleOf(el, "-webkit-text-fill-color")
+	const color = parseColor(fill || styleOf(el, "color"))
+	if (!color || color.a <= 0.02) return null
+	return { ...color, a: color.a * textOpacity(snapshot, el) }
+}
+
+export function textBackgrounds(snapshot: PageSnapshot, el: ElementSnapshot): readonly Rgba[] {
+	const layers: Rgba[] = []
+	const rect = textRect(el)
+	const nodes = [el, ...ancestors(snapshot, el)].flatMap((node) => [node, ...siblingGrounds(snapshot, node, rect)])
+	for (const node of nodes) {
+		if (["img", "video", "canvas"].includes(node.tag)) return []
+		const paired = node.before && node.after && contains(node.rect, rect)
+			&& node.before.style["background-color"] === node.after.style["background-color"]
+			&& node.before.style["background-image"] === node.after.style["background-image"]
+			&& [node.before, node.after].every((p) => Number.parseFloat(p.style["opacity"] ?? "1") >= 0.9)
+		for (const pseudo of [node.after, node.before]) {
+			if (!pseudo || (!paired && !pseudoCovers(pseudo.style, node, rect))) continue
+			const hostFill = parseColor(styleOf(node, "background-color"))
+			if (Number.parseFloat(pseudo.style["z-index"] ?? "") < 0 && styleOf(node, "z-index") === "auto" && (hostFill?.a ?? 0) >= 1) continue
+			const fill = parseColor(pseudo.style["background-color"] ?? "")
+			const stops = gradientStops(pseudo.style["background-image"] ?? "")
+			if (stops.length > 0 && fill && fill.a >= 0.9) {
+				return stops.map((s) => layers.reduceRight((under, top) => blend(top, under), blend(s.color, fill)))
+			}
+			if (fill && fill.a >= 0.9) return [layers.reduceRight((under, top) => blend(top, under), fill)]
+		}
+		const image = styleOf(node, "background-image")
+		if (image.includes("url(")) return []
+		const tile = styleOf(node, "background-size").split(/\s+/)
+		const tileWidth = Number.parseFloat(tile[0] ?? "")
+		const tileHeight = Number.parseFloat(tile[1] ?? tile[0] ?? "")
+		const stops = gradientStops(image)
+		const radius = /([\d.]+)px/.exec(stops[0]?.raw ?? "")
+		const sparseDots = image.startsWith("radial-gradient(") && radius !== null && tileWidth > 0 && tileHeight > 0 && Math.PI * Number(radius[1]) ** 2 / (tileWidth * tileHeight) < 0.5 && (stops[0]?.color.a ?? 0) > 0
+		const parkedImage = tile.some((v) => /^0(?:px|%)?$/.test(v))
+		if (image.includes("gradient") && !clipsText(node) && !sparseDots && !parkedImage) {
+			const ground = solidGround(snapshot, node)
+			const samples = gradientSamples(node, rect)
+			if (samples?.every((color) => color.a < 0.005)) continue
+			return (samples ?? stops.map((s) => s.color)).map((color) => layers.reduceRight((under, top) => blend(top, under), blend(color, ground)))
+		}
+		const rawFill = styleOf(node, "background-color")
+		const fill = parseColor(rawFill)
+		if (rawFill !== "" && !fill) return []
+		if (fill && fill.a > 0) {
+			const a = fill.a * (nodes.includes(node) && ![el, ...ancestors(snapshot, el)].includes(node) ? effectiveOpacity(snapshot, node) : 1)
+			layers.push({ ...fill, a })
+			if (a >= 1) break
+		}
+	}
+	return [layers.reduceRight((under, top) => blend(top, under), WHITE)]
+}
+
+export function solidGround(snapshot: PageSnapshot, el: ElementSnapshot): Rgba {
+	const layers: Rgba[] = []
+	for (const node of [el, ...ancestors(snapshot, el)]) {
+		const c = parseColor(styleOf(node, "background-color"))
+		if (c) {
+			layers.push(c)
+			if (c.a >= 1) break
+		}
+	}
+	return layers.reduceRight((under, top) => blend(top, under), WHITE)
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/aphoristic-cadence.test.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { aphoristicCadence } from "./aphoristic-cadence"
+
+test("#given two versus three rebuttal constructions #then the three-construction floor applies", () => {
+	const phrases = ["Not a dashboard. Your command center.", "Not an app. Your working memory.", "Not a tool. Your daily companion."]
+	const check = (count: number) => aphoristicCadence.check({
+		snapshot: buildSnapshot(phrases.slice(0, count).map((text) => ({ tag: "p", text }))), config: {},
+	})
+	expect(check(3)).toHaveLength(1)
+	expect(check(2)).toHaveLength(0)
+})
+
+test("#given short no and just rebuttals #then ordinary sentences remain clear", () => {
+	const check = (text: string) => aphoristicCadence.check({ snapshot: buildSnapshot([{ text }]), config: {} })
+	expect(check("Everything you need. No friction. All your work. Just results. Bring your team. No limits.")).toHaveLength(1)
+	expect(check("The invoice is ready. Send it to your customer. Track the payment.")).toHaveLength(0)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/aphoristic-cadence.ts

@@ -0,0 +1,20 @@
+import type { PageRule } from "../../rule"
+import { pageText } from "./support/page-text"
+
+export const aphoristicCadence: PageRule = {
+	meta: {
+		id: "aphoristic-cadence", name: "Aphoristic-cadence copy", category: "slop", severity: "warning", engine: "page",
+		description: "Three or more short rebuttals give unrelated sections the same cadence.",
+		fixHint: "Replace repeated rebuttals with specific information and vary sentence structure.",
+	},
+	check: ({ snapshot }) => {
+		const text = pageText(snapshot)
+		const matches = [
+			...text.matchAll(/\bNot an? [a-z][^.!?]{1,40}[.!]\s+[A-Z][^.!?]{1,60}[.!]/g),
+			...text.matchAll(/\b[A-Z][^.!?]{4,80}[.!]\s+(No|Just)\s+[a-z][^.!?]{2,60}[.!]/g),
+		]
+		return matches.length < 3 ? [] : [{
+			element: null, message: `${matches.length} aphoristic constructions`, snippet: (matches[0]?.[0] ?? "").trim().slice(0, 80),
+		}]
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/broken-image.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { brokenImage } from "./broken-image"
+
+test("#given absent empty and hash sources #then real source aliases and responsive images pass", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "img", id: "absent" }, { tag: "img", id: "empty", attributes: { src: " " } },
+		{ tag: "img", id: "hash", attributes: { src: "#" } },
+		{ tag: "img", id: "real", attributes: { src: "photo.png" } },
+		{ tag: "img", id: "set", attributes: { src: "", srcset: "photo.png 1x" } },
+		{ tag: "img", id: "lazy", attributes: { "data-src": "photo.png" } },
+		{ tag: "img", id: "misleading", attributes: { alt: "src=photo.png" } },
+		{ tag: "div", id: "other" },
+	])
+	expect(brokenImage.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#absent", "#empty", "#hash", "#misleading"])
+})
+
+test("#given placeholder srcset and valid alternate sources #then either usable attribute is enough", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "img", id: "placeholder", attributes: { src: "#", srcset: " " } },
+		{ tag: "img", id: "inline", attributes: { src: "data:image/svg+xml,<svg/>" } },
+		{ tag: "img", id: "lazyset", attributes: { "data-srcset": "/small.png 300w" } },
+	])
+	expect(brokenImage.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#placeholder"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/broken-image.ts

@@ -0,0 +1,17 @@
+import { shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+
+export const brokenImage: PageRule = {
+	meta: {
+		id: "broken-image", name: "Broken or placeholder image", category: "quality", severity: "warning", engine: "page",
+		description: "An image has no usable source attribute.",
+		fixHint: "Provide a real src or srcset, or remove the unused image element.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (el.tag !== "img") return []
+		const hasSource = Object.entries(el.attributes).some(([name, value]) =>
+			/(?:^|[:-])(?:src|srcset)$/i.test(name.split(".")[0] ?? "")
+			&& value.trim() !== "" && value.trim() !== "#")
+		return hasSource ? [] : [{ element: el, message: "Image source is missing, empty or a placeholder", snippet: shortSnippet(el) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/em-dash-overuse.test.ts

@@ -0,0 +1,39 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { emDashOveruse } from "./em-dash-overuse"
+
+test("#given dash floor and density boundaries #then only dense prose with eight marks reports", () => {
+	const check = (text: string) => emDashOveruse.check({ snapshot: buildSnapshot([{ tag: "p", text }]), config: {} })
+	expect(check("a — b — c — d — e — f — g — h — i")).toHaveLength(1)
+	expect(check("a — b — c — d — e — f — g — h")).toHaveLength(0)
+	expect(check(`${"—".repeat(8)}${"x".repeat(3992)}`)).toHaveLength(1)
+	expect(check(`${"—".repeat(8)}${"x".repeat(3993)}`)).toHaveLength(0)
+})
+
+test("#given alternate dash spellings and table rules #then punctuation alone is counted", () => {
+	const check = (text: string) => emDashOveruse.check({ snapshot: buildSnapshot([{ text }]), config: {} })
+	expect(check("word---word ".repeat(8))).toHaveLength(1)
+	expect(check("word--next ".repeat(8))).toHaveLength(1)
+	expect(check("word —— next ".repeat(8))).toHaveLength(1)
+	expect(check("word —— next ".repeat(7))).toHaveLength(0)
+	expect(check("|-------| ------- rule ----x -- space ".repeat(10))).toHaveLength(0)
+})
+
+test("#given matrix markers choices and list separators #then actual prose remains counted", () => {
+	const check = (prose: string) => emDashOveruse.check({ snapshot: buildSnapshot([
+		{ tag: "p", text: prose },
+		...Array.from({ length: 10 }, () => ({ tag: "td", text: "—" })),
+		{ tag: "select", children: Array.from({ length: 10 }, () => ({ tag: "option", text: "USD — US Dollar" })) },
+		{ tag: "ul", children: Array.from({ length: 8 }, (_, n) => ({ tag: "li", text: `Feature ${n} — Description` })) },
+	]), config: {} })
+	expect(check("a — b — c — d — e — f — g — h — i")).toHaveLength(1)
+	expect(check("Read the feature list.")).toHaveLength(0)
+})
+
+test("#given lowercase prose list items #then their dashes are not treated as separators", () => {
+	const check = (ending: string) => emDashOveruse.check({
+		snapshot: buildSnapshot([{ tag: "ul", children: Array.from({ length: 8 }, () => ({ tag: "li", text: `We ship every week — ${ending}` })) }]), config: {},
+	})
+	expect(check("and every update is free.")).toHaveLength(1)
+	expect(check("Current updates")).toHaveLength(0)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/em-dash-overuse.ts

@@ -0,0 +1,46 @@
+import { EM_DASH } from "../../core/characters"
+import { ancestors, descendants, parentOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { lineage, visibleText } from "./support/page-text"
+
+export const emDashOveruse: PageRule = {
+	meta: {
+		id: "em-dash-overuse", name: "Em-dash overuse", category: "slop", severity: "advisory", engine: "page",
+		description: "At least eight prose dashes appear at a density of one per 500 characters or more.",
+		fixHint: "Use sentence breaks or commas where the copy repeatedly interrupts itself.",
+	},
+	check: ({ snapshot }) => {
+		const runs = snapshot.elements.filter((el) => visibleText(snapshot, el)
+			&& !lineage(snapshot, el).some((a) => ["select", "option", "datalist"].includes(a.tag)))
+			.map((el) => el.ownText).filter((text) => text !== "" && !/^[\u2014–\s-]+$/.test(text))
+		const text = runs.join(" ").replace(/\s+/g, " ")
+		let count = 0
+		for (const match of text.matchAll(/\u2014+|-+/g)) {
+			const run = match[0]
+			if (run.startsWith(EM_DASH)) count += run.length === 2 ? 1 : run.length
+			else {
+				const next = text[match.index + run.length] ?? ""
+				const previous = text[match.index - 1] ?? ""
+				if (run.length === 2 && next !== "" && !/\s/.test(next)) count++
+				else if (run.length === 3 && /[\p{L}\p{N}]/u.test(previous) && /[\p{L}\p{N}]/u.test(next)) count++
+			}
+		}
+		const groups = new Map<number | null, number>()
+		for (const li of snapshot.elements.filter((el) => el.tag === "li").slice(0, 2000)) {
+			if (!visibleText(snapshot, li) || [...descendants(snapshot, li)].some((d) => d.tag === "li")) continue
+			const parts = li.text.replace(/^[^\p{L}\p{N}]+/u, "").split(EM_DASH)
+			const term = (parts[0] ?? "").trim()
+			const rest = (parts[1] ?? "").trim()
+			if (term === "" || [...term].length > 60 || term.split(/\s+/).length > 6 || /[.!?。！？]/.test(term) || rest === "") continue
+			const first = [...rest][0] ?? ""
+			const label = [...descendants(snapshot, li)].some((d) => [...ancestors(snapshot, d)].findIndex((a) => a.index === li.index) < 3 && d.text === term)
+			if (!(first.toUpperCase() === first && /\p{L}/u.test(first)) && !label) continue
+			const key = parentOf(snapshot, parentOf(snapshot, li) ?? li)?.index ?? null
+			groups.set(key, (groups.get(key) ?? 0) + 1)
+		}
+		count = Math.max(0, count - [...groups.values()].filter((n) => n >= 3).reduce((sum, n) => sum + n, 0))
+		return count < 8 || text.length > count * 500 ? [] : [{
+			element: null, message: `${count} em-dashes in body text`, snippet: `${count} em-dashes in body text`,
+		}]
+	},
+}

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

@@ -0,0 +1,15 @@
+import type { PageRule } from "../../rule"
+import { aphoristicCadence } from "./aphoristic-cadence"
+import { brokenImage } from "./broken-image"
+import { emDashOveruse } from "./em-dash-overuse"
+import { marketingBuzzword } from "./marketing-buzzword"
+import { numberedSectionLabels } from "./numbered-section-labels"
+import { repeatedContainerText } from "./repeated-container-text"
+import { scriptError } from "./script-error"
+import { skippedHeading } from "./skipped-heading"
+import { theaterSlopPhrase } from "./theater-slop-phrase"
+
+export const COPY_RULES: readonly PageRule[] = [
+	emDashOveruse, marketingBuzzword, aphoristicCadence, theaterSlopPhrase, numberedSectionLabels,
+	repeatedContainerText, skippedHeading, brokenImage, scriptError,
+]

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/marketing-buzzword.test.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { marketingBuzzword } from "./marketing-buzzword"
+
+test("#given repeated stock phrases and concrete copy #then only stock phrases count", () => {
+	const check = (text: string) => marketingBuzzword.check({ snapshot: buildSnapshot([{ tag: "p", text }]), config: {} })
+	expect(check("STREAMLINE YOUR workflow and streamline your day. World-class enterprise-grade tools.")).toHaveLength(1)
+	expect(check("Export an invoice as PDF in two clicks.")).toHaveLength(0)
+	expect(check("revolutionize revolutionary")).toHaveLength(1)
+})
+
+test("#given hidden buzzwords beside visible concrete copy #then only painted copy contributes", () => {
+	const check = (display: string) => marketingBuzzword.check({
+		snapshot: buildSnapshot([{ style: { display }, children: [{ tag: "p", text: "Empower your team" }] }, { tag: "p", text: "Send invoices." }]), config: {},
+	})
+	expect(check("block")).toHaveLength(1)
+	expect(check("none")).toHaveLength(0)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/marketing-buzzword.ts

@@ -0,0 +1,33 @@
+import type { PageRule } from "../../rule"
+import { pageText } from "./support/page-text"
+
+const PHRASES = [
+	"streamline your", "empower your", "supercharge your", "unleash your", "unleash the power", "leverage the power",
+	"built for the modern", "trusted by leading", "trusted by the world", "best-in-class", "industry-leading",
+	"world-class", "enterprise-grade", "next-generation", "cutting-edge", "transform your business", "revolutionize",
+	"game-changer", "game changing", "mission-critical", "best of breed", "future-proof", "future proof",
+	"seamless experience", "seamlessly integrate", "drive engagement", "drive growth", "drive results", "harness the power",
+] as const
+
+export const marketingBuzzword: PageRule = {
+	meta: {
+		id: "marketing-buzzword", name: "Marketing buzzword", category: "slop", severity: "warning", engine: "page",
+		description: "Generic promotion replaces a concrete description of the product.",
+		fixHint: "Name the action, benefit or measured result instead of a stock marketing phrase.",
+	},
+	check: ({ snapshot }) => {
+		const text = pageText(snapshot)
+		const lower = text.toLowerCase()
+		let count = 0
+		let sample = ""
+		for (const phrase of PHRASES) {
+			let from = 0
+			for (let at = lower.indexOf(phrase, from); at >= 0; at = lower.indexOf(phrase, from)) {
+				count++
+				if (sample === "") sample = text.slice(Math.max(0, at - 12), at + phrase.length + 12).trim()
+				from = at + phrase.length
+			}
+		}
+		return count === 0 ? [] : [{ element: null, message: `${count} buzzword phrases`, snippet: sample }]
+	},
+}