oh-my-opencode 5.1.51 → 5.1.54

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/copy/theater-slop-phrase.ts

@@ -0,0 +1,21 @@
+import type { PageRule } from "../../rule"
+import { pageText } from "./support/page-text"
+
+const HEADS = [
+	"accessibility", "accountability", "agile", "alignment", "compliance", "diversity", "engagement", "governance", "growth",
+	"hiring", "hygiene", "innovation", "inclusion", "kindness", "leadership", "metrics", "privacy", "process", "productivity",
+	"quality", "safety", "security", "strategy", "sustainability", "transparency", "trust", "wellness",
+] as const
+
+export const theaterSlopPhrase: PageRule = {
+	meta: {
+		id: "theater-slop-phrase", name: "Theater framing copy", category: "slop", severity: "advisory", engine: "page",
+		description: "Calling a practice theater dismisses it without explaining the defect.",
+		fixHint: "Describe the missing behavior or evidence instead of dismissing it as theater.",
+	},
+	check: ({ snapshot }) => {
+		const match = [...pageText(snapshot).matchAll(/\b(\w+)\s+theater\b/gi)]
+			.find((m) => HEADS.some((head) => head === m[1]?.toLowerCase()))
+		return match ? [{ element: null, message: "Dismissive theater framing", snippet: match[0] }] : []
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/blinking-cursor.ts

@@ -0,0 +1,48 @@
+import type { PageRule } from "../../rule"
+import { parseColor } from "../../core/color"
+import { ancestors, shortSnippet, styleOf } from "../../core/page"
+import { context, radii, visible } from "./support/appearance"
+import { infiniteNames, keyframes, toggles } from "./support/keyframes"
+export const blinkingCursor: PageRule = {
+	meta: {
+		id: "blinking-cursor",
+		name: "Decorative blinking cursor",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "A fake caret blinks in non-editable landing content.",
+		fixHint: "Remove the decorative cursor and let actual editable fields draw their caret.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((e) => {
+			if (
+				e.rect.width <= 0 || e.rect.height <= 0 ||
+				styleOf(e, "display") === "none" || e.attributes["hidden"] !== undefined ||
+				[...ancestors(snapshot, e)].some(a => !visible(snapshot, a)) ||
+				["input", "textarea", "select", "img", "svg", "script", "style"].includes(e.tag) ||
+				e.rect.y > 1200 ||
+				context(
+					snapshot,
+					e,
+					(a) => a.attributes["role"] === "textbox" || ["", "true", "plaintext-only"].includes(a.attributes["contenteditable"] ?? "false"),
+				)
+			)
+				return []
+			const animated = infiniteNames(e.style).some((n) => /blink|caret|cursor/i.test(n) || toggles(keyframes(snapshot, n) ?? []))
+			if (!animated) return []
+			const text = e.text.trim(),
+				{ width: w, height: h } = e.rect
+			const glyph = /^[_|\u2580-\u259f\u25a0\u25ae\u2759\u275a\uff5c]$/.test(text)
+			const bg = parseColor(styleOf(e, "background-color"))
+			const filled =
+				(bg !== null && bg.a > 0.2) ||
+				["left", "right", "bottom"].some((side) => Number.parseFloat(styleOf(e, "border-" + side + "-width")) >= 1)
+			const block =
+				text === "" &&
+				e.children.length === 0 &&
+				filled &&
+				((w >= 1 && w <= 24 && h >= 6 && h <= 48 && h >= w) || (h >= 1 && h <= 6 && w >= 4 && w <= 24)) &&
+				Math.max(...radii(e)) < 0.4 * Math.min(w, h)
+			return glyph || block ? [{ element: e, message: "Blinking decorative cursor in the landing region", snippet: shortSnippet(e) }] : []
+		}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/border-accent-on-rounded.ts

@@ -0,0 +1,14 @@
+import type { PageRule } from "../../rule"
+import { borderHits } from "./support/borders"
+export const borderAccentOnRounded: PageRule = {
+	meta: {
+		id: "border-accent-on-rounded",
+		name: "Border accent on rounded element",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A heavy accent band competes with rounded corners.",
+		fixHint: "Remove the accent border or square the container.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((e) => borderHits(snapshot, e, "border-accent-on-rounded")),
+}

package/packages/omo-codex/plugin/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/omo-codex/plugin/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/omo-codex/plugin/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/omo-codex/plugin/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/omo-codex/plugin/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/omo-codex/plugin/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) }]
+		}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/hero-eyebrow-chip.ts

@@ -0,0 +1,19 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet } from "../../core/page"
+import { heroLabel } from "./support/labels"
+export const heroEyebrowChip: PageRule = {
+	meta: {
+		id: "hero-eyebrow-chip",
+		name: "Hero eyebrow / pill chip",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A tiny tracked or accented label decorates a display hero heading.",
+		fixHint: "Remove the eyebrow or integrate its words into the heading.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((h) => {
+			const label = heroLabel(snapshot, h)
+			return label ? [{ element: h, message: "Small decorative eyebrow above the hero heading", snippet: shortSnippet(h) }] : []
+		}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/icon-tile-stack.ts

@@ -0,0 +1,92 @@
+import type { PageRule } from "../../rule"
+import { childrenOf, descendants, fontSizePx, isHeading, shortSnippet, styleOf } from "../../core/page"
+import { parseColor } from "../../core/color"
+import { parseShadow } from "../../core/shadow"
+import { length, radii, visible } from "./support/appearance"
+import { labelBefore, nearAbove } from "./support/labels"
+export const iconTileStack: PageRule = {
+	meta: {
+		id: "icon-tile-stack",
+		name: "Icon tile stacked above heading",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A small framed icon tile sits above a heading.",
+		fixHint: "Put the icon beside the title or remove its separate tile.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((h) => {
+			const title =
+				["div", "span"].includes(h.tag) &&
+				["block", "flow-root"].includes(styleOf(h, "display")) &&
+				h.children.length === 0 &&
+				h.ownText.length >= 2 &&
+				h.ownText.length <= 80 &&
+				Number(styleOf(h, "font-weight")) >= 600 &&
+				fontSizePx(h) >= 16
+			if ((!isHeading(h) && !title) || !visible(snapshot, h)) return []
+			const found = labelBefore(snapshot, h)
+			if (!found) return []
+			let box = found.label
+			for (let i = 0; i < 3; i++) {
+				const children = childrenOf(snapshot, box),
+					only = children[0]
+				if (styleOf(box, "display") === "contents") {
+					box = children.at(-1) ?? box
+					continue
+				}
+				const bg = parseColor(styleOf(box, "background-color"))
+				const bare =
+					(bg === null || bg.a === 0) &&
+					["none", ""].includes(styleOf(box, "background-image")) &&
+					parseShadow(styleOf(box, "box-shadow")).length === 0 &&
+					length(styleOf(box, "border-top-width")) === 0
+				if (
+					children.length !== 1 ||
+					!only ||
+					!bare ||
+					Math.abs(box.rect.width - only.rect.width) > 2 ||
+					Math.abs(box.rect.height - only.rect.height) > 2
+				)
+					break
+				box = only
+			}
+			const candidates = [box]
+			const tile = candidates.find((t) => {
+				const { width: w, height: hgt } = t.rect,
+					bg = parseColor(styleOf(t, "background-color"))
+				if (
+					w < 32 ||
+					w > 128 ||
+					hgt < 32 ||
+					hgt > 128 ||
+					w / hgt < 0.7 ||
+					w / hgt > 1.4 ||
+					Math.max(...radii(t)) >= w / 2 ||
+					!visible(snapshot, t) ||
+					!nearAbove(t, h)
+				)
+					return false
+				const framed =
+					(bg !== null && bg.a >= 0.05) ||
+					!["none", ""].includes(styleOf(t, "background-image")) ||
+					length(styleOf(t, "border-top-width")) > 0 ||
+					parseShadow(styleOf(t, "box-shadow")).some((l) => l.color.a > 0 && !l.inset)
+				if (!framed) return false
+				const emoji = (text: string): boolean => /^[\p{Extended_Pictographic}\uFE0F\u200D\s]+$/u.test(text) && text.trim() !== ""
+				return (
+					emoji(t.ownText) ||
+					[...descendants(snapshot, t)].some(
+						(c) =>
+							visible(snapshot, c) &&
+							(["svg", "i", "img"].includes(c.tag) ||
+								!["none", ""].includes(styleOf(c, "mask-image")) ||
+								!["none", ""].includes(styleOf(c, "-webkit-mask-image")) ||
+								emoji(c.text)) &&
+							c.rect.width < w * 0.95,
+					)
+				)
+			})
+			return tile ? [{ element: h, message: "Framed icon tile stacked above heading", snippet: shortSnippet(h) }] : []
+		}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/index.ts

@@ -0,0 +1,38 @@
+import type { Rule } from "../../rule"
+import { hardOffsetShadow } from "./hard-offset-shadow"
+import { sideTab } from "./side-tab"
+import { borderAccentOnRounded } from "./border-accent-on-rounded"
+import { gptThinBorderWideShadow } from "./gpt-thin-border-wide-shadow"
+import { repeatingStripesGradient } from "./repeating-stripes-gradient"
+import { codexGridBackground } from "./codex-grid-background"
+import { organicClipPath } from "./organic-clip-path"
+import { buriedRaster } from "./buried-raster"
+import { shapeAssembledIllustration } from "./shape-assembled-illustration"
+import { iconTileStack } from "./icon-tile-stack"
+import { heroEyebrowChip } from "./hero-eyebrow-chip"
+import { kickerAboveHeading } from "./kicker-above-heading"
+import { designSystemRadius } from "./design-system-radius"
+import { marquee } from "./marquee"
+import { pulsingDot } from "./pulsing-dot"
+import { blinkingCursor } from "./blinking-cursor"
+import { bounceEasing } from "./bounce-easing"
+
+export const DECORATION_RULES: readonly Rule[] = [
+	hardOffsetShadow,
+	sideTab,
+	borderAccentOnRounded,
+	gptThinBorderWideShadow,
+	repeatingStripesGradient,
+	codexGridBackground,
+	organicClipPath,
+	buriedRaster,
+	shapeAssembledIllustration,
+	iconTileStack,
+	heroEyebrowChip,
+	kickerAboveHeading,
+	designSystemRadius,
+	marquee,
+	pulsingDot,
+	blinkingCursor,
+	bounceEasing,
+]

package/packages/omo-codex/plugin/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) }]
+		}),
+}