lazycodex-ai 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/hero-eyebrow-chip.test.ts

@@ -0,0 +1,76 @@
+import { test } from "bun:test"
+import { heroEyebrowChip } from "./hero-eyebrow-chip"
+import { assertCases } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const label: NodeSpec = {
+	tag: "span",
+	text: "New platform",
+	style: { "font-size": "12px", "text-transform": "uppercase", "letter-spacing": "1.2px" },
+}
+const hero = (id: string, size = "64px"): NodeSpec => ({
+	id,
+	tag: "h1",
+	text: "Build a better workflow",
+	style: { "font-size": size },
+	rect: { y: 60 },
+})
+test("#given tracked caps above heroes #then ordinary and application titles pass", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [label, hero("flag")] },
+			{ children: [{ ...label, style: { ...label.style, "letter-spacing": "normal" } }, hero("plain")] },
+			{ children: [label, hero("small", "24px")] },
+			{ attributes: { role: "tabpanel" }, children: [label, hero("app")] },
+		],
+		["#flag"],
+	)
+})
+test("#given typed caps bold accents and dash prefixes #then neutral labels pass", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [{ ...label, text: "FEATURED", style: { "font-size": "11px", "letter-spacing": "2px" } }, hero("caps")] },
+			{ children: [{ ...label, style: { "font-size": "12px", "font-weight": "700", color: "rgb(200,60,0)" } }, hero("bold")] },
+			{
+				children: [
+					{ ...label, style: { "font-size": "12px" }, before: { width: "20px", height: "2px", "background-color": "rgb(200,60,0)" } },
+					hero("dash"),
+				],
+			},
+			{ children: [{ ...label, style: { "font-size": "12px" } }, hero("neutral")] },
+		],
+		["#caps", "#bold", "#dash"],
+	)
+})
+test("#given wrapped label typography and dated metadata #then only the actual eyebrow reports", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [{ children: [label] }, hero("flag")] },
+			{ children: [{ ...label, text: "News 2026" }, hero("date")] },
+			{ children: [{ tag: "h2", text: "FEATURED", style: label.style ?? {} }, hero("heading")] },
+		],
+		["#flag"],
+	)
+})
+test("#given two independent text children #then the wrapper typography is not borrowed", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [label, hero("flag")] },
+			{
+				children: [
+					{
+						children: [
+							{ ...label, text: "North" },
+							{ ...label, text: "South" },
+						],
+					},
+					hero("pair"),
+				],
+			},
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/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/shared-skills/skills/frontend/scripts/detect/rules/decoration/icon-tile-stack.test.ts

@@ -0,0 +1,67 @@
+import { test } from "bun:test"
+import { iconTileStack } from "./icon-tile-stack"
+import { assertCases, round } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const tile = (id: string): NodeSpec => ({
+	id,
+	rect: { width: 64, height: 64, y: 0 },
+	style: { ...round("16px"), "background-color": "rgba(40,85,189,.1)" },
+	children: [{ tag: "svg", rect: { width: 24, height: 24 } }],
+})
+const heading = (id: string, y = 80): NodeSpec => ({ id, tag: "h3", text: "Fast useful feature", rect: { y } })
+test("#given framed icons stacked above headings #then avatars and inline tiles pass", () => {
+	assertCases(
+		iconTileStack,
+		[
+			{ children: [tile("tile"), heading("flag")] },
+			{ children: [{ ...tile("avatar"), style: { ...tile("avatar").style, ...round("50%") } }, heading("avatar-heading")] },
+			{ children: [tile("inline"), heading("inline-heading", 20)] },
+			{ children: [{ ...tile("tiny"), rect: { width: 24, height: 24 } }, heading("tiny-heading")] },
+		],
+		["#flag"],
+	)
+})
+test("#given wrapped tiles masks and emoji #then words and hidden emoji pass", () => {
+	assertCases(
+		iconTileStack,
+		[
+			{ children: [{ rect: { width: 64, height: 64 }, children: [tile("tile")] }, { children: [{ children: [heading("wrapped")] }] }] },
+			{
+				children: [
+					{ ...tile("emoji"), children: [{ tag: "span", text: "\u{1F4DD}", rect: { width: 24, height: 24 } }] },
+					heading("emoji-heading"),
+				],
+			},
+			{
+				children: [{ ...tile("word"), children: [{ tag: "span", text: "AI", rect: { width: 24, height: 24 } }] }, heading("word-heading")],
+			},
+			{
+				children: [
+					{
+						...tile("hidden"),
+						children: [{ tag: "span", text: "\u{1F4DD}", style: { display: "none" }, rect: { width: 24, height: 24 } }],
+					},
+					heading("hidden-heading"),
+				],
+			},
+			{ children: [tile("far"), { children: [heading("far-heading", 240)] }] },
+		],
+		["#wrapped", "#emoji-heading"],
+	)
+})
+test("#given shadow rings and masked glyphs #then empty tiles pass", () => {
+	assertCases(
+		iconTileStack,
+		[
+			{ children: [{ ...tile("ring"), style: { ...round("14px"), "box-shadow": "0 0 0 1px rgb(203,213,225)" } }, heading("flag")] },
+			{
+				children: [
+					{ ...tile("mask"), children: [{ rect: { width: 30, height: 30 }, style: { "mask-image": "url(icon.svg)" } }] },
+					heading("masked"),
+				],
+			},
+			{ children: [{ ...tile("empty"), children: [] }, heading("empty-heading")] },
+		],
+		["#flag", "#masked"],
+	)
+})

package/packages/shared-skills/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/shared-skills/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/shared-skills/skills/frontend/scripts/detect/rules/decoration/kicker-above-heading.test.ts

@@ -0,0 +1,126 @@
+import { test } from "bun:test"
+import { kickerAboveHeading } from "./kicker-above-heading"
+import { assertCases, round } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const label = (id: string, text = "Platform notes"): NodeSpec => ({
+	id,
+	tag: "span",
+	text,
+	rect: { width: 200, height: 16, y: 0 },
+	style: { "font-size": "12px", "letter-spacing": "0.96px", "text-transform": "uppercase" },
+})
+test("#given tracked labels outside the hero size ceiling #then fixed hero tracking still hands them off", () => {
+	const wide = { ...label("wide"), style: { "font-size": "15px", "letter-spacing": "1.8px", "text-transform": "uppercase" } }
+	assertCases(kickerAboveHeading, [
+		{ children: [wide, heading("h1", "64px")] },
+		{ children: [{ ...wide, id: "section" }, heading("h2", "44px")] },
+	], ["#section"])
+})
+const heading = (tag = "h2", size = "32px"): NodeSpec => ({
+	tag,
+	text: "A useful section heading",
+	style: { "font-size": size },
+	rect: { y: 24 },
+})
+test("#given captured small caps above display titles #then shorthand and longhand remain kickers", () => {
+	assertCases(kickerAboveHeading, ["font-variant", "font-variant-caps"].map((property, i) => ({
+		children: [
+			{ ...label(`caps-${i}`), text: "new in version four", style: {
+				"font-size": "13px", "letter-spacing": "1.3px", "text-transform": "none", [property]: "small-caps",
+			} },
+			heading("h1", "56px"),
+		],
+	})), ["#caps-0", "#caps-1"])
+})
+test("#given one tracked kicker above a heading #then sentence case and metadata pass", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [label("flag"), heading()] },
+			{ children: [label("date", "News Jan 12 2026"), heading()] },
+			{ children: [label("path", "Home / Journal"), heading()] },
+			{ children: [label("chapter", "Chapter Four"), heading()] },
+			{ children: [label("section", "Section kicker"), heading()] },
+			{ children: [{ ...label("sentence"), style: { "font-size": "12px", "letter-spacing": "1px" } }, heading()] },
+		],
+		["#flag", "#section"],
+	)
+})
+test("#given larger headings and wrapped kickers #then relative ceilings and geometry apply", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [{ id: "flag", children: [label("inner")] }, { children: [heading()] }] },
+			{
+				children: [
+					{ ...label("large"), style: { "font-size": "15px", "letter-spacing": "3px", "text-transform": "uppercase" } },
+					heading("h2", "44px"),
+				],
+			},
+			{
+				children: [
+					{ ...label("too-large"), style: { "font-size": "15px", "letter-spacing": "3px", "text-transform": "uppercase" } },
+					heading("h3", "24px"),
+				],
+			},
+			{
+				children: [
+					{ ...label("beside"), rect: { x: 0, y: 24, width: 100, height: 16 } },
+					{ ...heading(), rect: { x: 150, y: 24 } },
+				],
+			},
+		],
+		["#flag", "#large"],
+	)
+})
+test("#given semantic card and application labels #then section kickers alone report", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [label("flag"), heading()] },
+			{ tag: "article", children: [label("article"), heading("h3")] },
+			{ attributes: { role: "tabpanel" }, children: [label("app"), heading()] },
+			{ tag: "nav", children: [label("nav"), heading()] },
+			{ attributes: { "data-impeccable-allow-kickers": "" }, children: [label("waived"), heading()] },
+			{
+				children: [
+					{ ...label("hero"), style: { "font-size": "12px", "letter-spacing": "2px", "text-transform": "uppercase" } },
+					heading("h1", "64px"),
+				],
+			},
+		],
+		["#flag"],
+	)
+})
+test("#given painted card labels and display titles #then only section scale titles retain kickers", () => {
+	const card = { ...round("16px"), "background-color": "rgb(255,255,255)" }
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ style: card, children: [label("flag"), heading("h3", "40px")] },
+			{ style: card, children: [label("small-card"), heading("h3", "20px")] },
+			{ style: card, children: [{ ...label("badge"), style: { ...label("badge").style, position: "absolute" } }, heading("h3", "24px")] },
+		],
+		["#flag"],
+	)
+})
+test("#given normal tracking and small caps #then only tracked uppercase forms report", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [label("flag"), heading()] },
+			{ children: [{ ...label("plain"), style: { ...label("plain").style, "letter-spacing": "normal" } }, heading()] },
+			{
+				children: [
+					{
+						...label("smallcaps"),
+						text: "materials briefing",
+						style: { "font-size": "12px", "letter-spacing": "1.44px", "font-variant-caps": "small-caps" },
+					},
+					heading(),
+				],
+			},
+		],
+		["#flag", "#smallcaps"],
+	)
+})

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