oh-my-opencode 5.1.51 → 5.1.55

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/layout/text-overflow.ts

@@ -0,0 +1,72 @@
+import { descendants, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../types"
+import { alpha, borders, bottom, bounds, chain, clipRect, clipsX, clipsY, intersects, length, painted, right, scrollsX, textLines } from "./support/geometry"
+import { shell } from "./support/clipping"
+import { openingWidth } from "./support/motion"
+
+const truncates = (el: ElementSnapshot): boolean =>
+	!["inline", "contents"].includes(styleOf(el, "display")) && clipsX(el) &&
+	(!["", "clip"].includes(styleOf(el, "text-overflow")) || Number.parseInt(styleOf(el, "-webkit-line-clamp"), 10) > 0)
+
+function harm(s: PageSnapshot, el: ElementSnapshot, box: Rect, text: Rect): boolean {
+	const code = chain(s, el).some((n) => ["pre", "code"].includes(n.tag))
+	const tolerance = fontSizePx(el) * 0.25
+	let cut = false
+	for (const c of chain(s, el)) {
+		if (styleOf(c, "display") === "inline" || !clipsX(c)) continue
+		const clip = clipRect(c)
+		if (text.x < clip.x - 1 || right(text) > right(clip) + 1) {
+			if (!code) return true
+			if (text.x < clip.x - 1 && clip.x > tolerance ||
+				right(text) > right(clip) + 1 && right(clip) < s.viewport.width - tolerance) cut = true
+		}
+	}
+	if (cut) return false
+	if (text.x <= tolerance || right(text) >= s.viewport.width - tolerance) return true
+	const related = new Set([...chain(s, el), ...descendants(s, el)])
+	return s.elements.some((other) => {
+		if (related.has(other) || !painted(s, other) || other.rect.width <= 2 || other.rect.height <= 2) return false
+		if (other.ownText === "" && !/^(img|video|canvas|svg|picture)$/.test(other.tag) && alpha(other, "background-color") < 0.25 && !borders(other).some(Boolean) &&
+			["", "none"].includes(styleOf(other, "background-image"))) return false
+		const r = other.rect
+		if (r.x <= box.x && right(r) >= right(box) && r.y <= box.y && bottom(r) >= bottom(box)) return false
+		return intersects(text, r) && (right(r) > right(box) && r.x < right(text) || r.x < box.x && right(r) > text.x)
+	})
+}
+
+export const textOverflow: PageRule = {
+	meta: {
+		id: "text-overflow", name: "Content overflowing its container", category: "quality", severity: "warning", engine: "page",
+		description: "Text spills out of its box into a clip, another element, or the viewport edge.",
+		fixHint: "Allow wrapping, constrain the content width, or provide a deliberate horizontal scroll region.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (el.ownText === "" || /^(input|textarea|select|option|svg|path|script|style)$/.test(el.tag) || !painted(snapshot, el)) return []
+		const path = chain(snapshot, el)
+		if (path.some((n) => n.tag === "svg")) return []
+		if (openingWidth(snapshot, el)) return []
+		const code = path.some((n) => ["pre", "code", "samp", "kbd"].includes(n.tag))
+		if (path.some((n) => scrollsX(n) && !(code && n !== el && shell(snapshot, n))) || path.some(truncates)) return []
+		const text = bounds(textLines(snapshot, el))
+		if (!text) return []
+		if (path.some((c) => clipsY(c) && (text.y >= bottom(clipRect(c)) || bottom(text) <= clipRect(c).y))) return []
+		if (path.some((c) => styleOf(c, "display") !== "inline" && clipsX(c) && (right(text) <= clipRect(c).x || text.x >= right(clipRect(c))))) return []
+		const box = styleOf(el, "display") === "inline"
+			? path.slice(1).find((c) => c.scroll.clientWidth > 0 && styleOf(c, "display") !== "inline") ?? el
+			: el
+		const start = box.rect.x + length(box, "border-left-width")
+		const end = start + (box.scroll.clientWidth > 0 ? box.scroll.clientWidth : box.rect.width)
+		const generated = [el.before, el.after].some((p) => p !== null && /["'][^"']+["']/.test(p.style["content"] ?? "") &&
+			p.style["display"] !== "none")
+		const reach = generated && el.scroll.scrollWidth > el.scroll.clientWidth
+			? { ...text, width: Math.max(text.width, el.scroll.scrollWidth) } : text
+		const delta = Math.max(right(reach) - end, start - reach.x)
+		const drawn = alpha(box, "background-color") > 0 || borders(box).some(Boolean)
+		const pastContent = Math.max(right(text) - end + length(box, "padding-right"), start + length(box, "padding-left") - text.x)
+		const paintedSpill = !code && drawn && !clipsX(box) && delta < 16 &&
+			delta >= Math.max(fontSizePx(el) * 0.25, 2) && pastContent >= 15
+		if (!(delta >= 16 && harm(snapshot, el, box.rect, reach) || paintedSpill)) return []
+		return [{ element: el, message: `Text extends ${Math.round(delta)}px past its container.`, snippet: shortSnippet(el) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/layout/unbalanced-heading.ts

@@ -0,0 +1,22 @@
+import { isHeading, shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { measuredLines, oneFace, wordsOf, wrapIs } from "./support/line-breaks"
+
+export const unbalancedHeading: PageRule = {
+	meta: {
+		id: "unbalanced-heading", name: "Unbalanced heading", category: "quality", severity: "advisory", engine: "page",
+		description: "The last line of a heading is much shorter than the line above.",
+		fixHint: "Use text-wrap: balance or rewrite the heading to keep its lines near even.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isHeading(el) || wrapIs(el, "balance") || wordsOf(el).length < 3) return []
+		const lines = measuredLines(snapshot, el)
+		const tail = lines.at(-1)
+		const above = lines.at(-2)
+		if (lines.length < 2 || lines.length > 3 || !tail || !above || tail.width >= above.width * 0.35) return []
+		const widest = Math.max(...lines.map((l) => l.width))
+		const total = lines.reduce((n, l) => n + l.width, 0)
+		if (oneFace(snapshot, el) && widest * el.text.length / total < 20) return []
+		return [{ element: el, message: `The last line is ${Math.round(tail.width / above.width * 100)}% as wide as the line above.`, snippet: shortSnippet(el) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/layout/viewport-reflow.ts

@@ -0,0 +1,33 @@
+import { shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { chain, clipsX, painted, right, scrollsX } from "./support/geometry"
+
+function reaches(s: PageSnapshot, el: ElementSnapshot): number {
+	let end = Math.max(right(el.rect), ...el.lineRects.map(right))
+	if (clipsX(el)) end = right(el.rect)
+	for (const ancestor of chain(s, el).slice(1)) {
+		if (clipsX(ancestor) && ancestor.tag !== "body") end = Math.min(end, right(ancestor.rect))
+	}
+	return end
+}
+
+export const viewportReflow: PageRule = {
+	meta: {
+		id: "viewport-reflow", name: "Viewport reflow", category: "quality", severity: "error", engine: "page",
+		description: "The document is wider than the viewport and requires sideways scrolling.",
+		fixHint: "Constrain the widest content, allow long tokens to wrap, and keep intentional horizontal scrolling inside its own region.",
+	},
+	check: ({ snapshot }) => {
+		if (snapshot.document.scrollWidth <= snapshot.document.clientWidth) return []
+		const widest = snapshot.elements
+			.filter((el) => painted(snapshot, el) && reaches(snapshot, el) > snapshot.document.clientWidth &&
+				!chain(snapshot, el).slice(1).some((n) => n.tag !== "body" && scrollsX(n)))
+			.sort((a, b) => reaches(snapshot, b) - reaches(snapshot, a))[0]
+		return [{
+			element: null,
+			message: `Document width ${snapshot.document.scrollWidth}px exceeds ${snapshot.document.clientWidth}px${widest ? `; furthest element ${widest.selector} ends at ${reaches(snapshot, widest)}px` : ""}.`,
+			snippet: widest ? shortSnippet(widest) : `${snapshot.document.scrollWidth}px / ${snapshot.document.clientWidth}px`,
+		}]
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/ai-color-palette.ts

@@ -0,0 +1,11 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const aiColorPalette: SourceRule = {
+	meta: { id: "ai-color-palette", name: "AI color palette", category: "slop", severity: "warning", engine: "source", description: "Purple heading ink or a purple-to-cool gradient repeats a generic palette.", fixHint: "Choose colors from the product's visual identity." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\btext-(?:purple|violet|indigo)-(\d+)\b/g, /\bfrom-(?:purple|violet|indigo)-(\d+)\b/g], ({ match, scope }) => {
+		if (match[0].startsWith("text-")) return /\btext-[2-9]xl\b|<h[1-3]/i.test(scope) ? `${match[0]} on heading` : null
+		return /\bto-(?:purple|violet|indigo|blue|cyan|pink|fuchsia)-\d+\b/.test(scope) ? `${match[0]} gradient` : null
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/aphoristic-cadence.ts

@@ -0,0 +1,14 @@
+import type { SourceRule } from "../../rule"
+import { bodyText, componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const aphoristicCadence: SourceRule = {
+	meta: { id: "aphoristic-cadence", name: "Aphoristic-cadence copy", category: "slop", severity: "warning", engine: "source", description: "Several clipped rebuttals give page copy a repetitive slogan rhythm.", fixHint: "Replace repeated slogans with specific, naturally paced sentences." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const source = pageSource(context)
+		if (source === null) return []
+		const text = bodyText(source)
+		const count = [...text.matchAll(/\bNot an? [a-z][^.!?]{1,40}[.!]\s+[A-Z][^.!?]{1,60}[.!]/g)].length + [...text.matchAll(/\b[A-Z][^.!?]{4,80}[.!]\s+(No|Just)\s+[a-z][^.!?]{2,60}[.!]/g)].length
+		return count >= 3 ? [sourceHit(source, 0, `${count} clipped slogan constructions`)] : []
+	},
+}

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

@@ -0,0 +1,20 @@
+import type { SourceRule } from "../../rule"
+import { cssScopes, selectorHost, selectorMatches } from "./support/css-scopes"
+import { tagAt } from "./support/markup-scope"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const borderAccentOnRounded: SourceRule = {
+	meta: { id: "border-accent-on-rounded", name: "Border accent on rounded element", category: "slop", severity: "warning", engine: "source", description: "A thick top or bottom border meets a rounded element.", fixHint: "Remove the accent border or use square corners." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\bborder-[tb]-(\d+)\b/g, /border-(?:top|bottom)\s*:\s*(\d+)px\s+solid/gi], ({ match, line, scope, offset, pass }) => {
+		if (match[0].startsWith("border-t-") || match[0].startsWith("border-b-")) {
+			const tag = tagAt(line, match.index ?? 0)
+			return Number(match[1]) >= 1 && /\brounded(?!-none\b)(?:-\w+)?\b/.test(tag) && !/\banimate-spin\b/.test(tag) ? match[0] : null
+		}
+		if (Number(match[1]) < 3) return null
+		const scopes = cssScopes(pass.text, pass.sass)
+		const own = scopes.filter((s) => s.start <= offset && offset <= s.end).sort((a, b) => b.start - a.start)[0]
+		const radius = own ? scopes.some((s) => selectorMatches(selectorHost(s), selectorHost(own)) && /(?:^|[;{\s])border[-\w]*radius\s*:/.test(s.body)) : /border-radius/i.test(scope)
+		return radius ? match[0] : null
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/bounce-easing.ts

@@ -0,0 +1,21 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const bounceEasing: SourceRule = {
+	meta: { id: "bounce-easing", name: "Bounce or elastic easing", category: "slop", severity: "advisory", engine: "source", description: "A named bounce animation or overshooting timing curve adds elastic motion.", fixHint: "Use a smooth deceleration, or allow an intentional timing function." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\banimate-bounce\b/g, /animation(?:-name)?\s*:\s*([^;{}]*(?:bounce|elastic|wobble|jiggle|spring)[^;{}]*)/gi, /cubic-bezier\(\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*\)/g], ({ match, context }) => {
+		const canonical = (s: string): string => s.replace(/\s/g, "").toLowerCase()
+		const names = match[4] === undefined ? match[1]?.split(/[,\s]+/).filter((s) => /bounce|elastic|wobble|jiggle|spring/i.test(s)) ?? [] : []
+		const name = names.find((candidate) => !context.config.allowEasings?.some((easing) => canonical(easing) === canonical(candidate)))
+		if (context.config.allowEasings?.some((easing) => [match[0], match[1] ?? ""].some((value) => canonical(easing) === canonical(value)))
+			|| (names.length > 0 && name === undefined)) return null
+		if (match[4] !== undefined) {
+			const y1 = Number(match[2])
+			const y2 = Number(match[4])
+			return y1 < -0.1 || y1 > 1.1 || y2 < -0.1 || y2 > 1.1 ? `cubic-bezier(${match.slice(1).join(", ")})` : null
+		}
+		if (match[1]) return `animation: ${name ?? match[1].trim()}`
+		return "animate-bounce (Tailwind)"
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/broken-image.ts

@@ -0,0 +1,16 @@
+import { extensionOf } from "../../core/source"
+import type { SourceRule } from "../../rule"
+import { imageTags, missingImageSource } from "./support/image-tags"
+import { sheetExtensions, sourceExtensions, sourceHit, stripComments } from "./support/source-text"
+
+export const brokenImage: SourceRule = {
+	meta: { id: "broken-image", name: "Broken or placeholder image", category: "quality", severity: "warning", engine: "source", description: "An image tag has no statically usable source or source set.", fixHint: "Supply a real image source or remove the unused image element." },
+	extensions: sourceExtensions,
+	check: ({ file }) => {
+		const ext = extensionOf(file.path)
+		if (sheetExtensions.includes(ext)) return []
+		const script = ["js", "jsx", "ts", "tsx", "mjs", "cjs"].includes(ext)
+		const text = stripComments(file.text, script)
+		return imageTags(text, script).filter((hit) => missingImageSource(hit.tag, ext)).map((hit) => sourceHit(file.text, hit.offset, "Image has no source", hit.tag.slice(0, 100)))
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/codex-grid-background.ts

@@ -0,0 +1,18 @@
+import type { SourceRule } from "../../rule"
+import { cssScopes } from "./support/css-scopes"
+import { sourceExtensions, sourceHit, sourcePasses } from "./support/source-text"
+
+export const codexGridBackground: SourceRule = {
+	meta: { id: "codex-grid-background", name: "Decorative grid-line background", category: "slop", severity: "advisory", engine: "source", description: "Two tiled hairline gradients draw a decorative background grid.", fixHint: "Remove the grid unless it communicates structure or data." },
+	extensions: sourceExtensions,
+	check: (context) => {
+		const text = sourcePasses(context)[0]?.text ?? ""
+		const blocks = [...cssScopes(text).map((s) => ({ body: s.body, offset: text.indexOf("{", s.start) })), ...[...text.matchAll(/\bstyle\s*=\s*["']([^"']*)["']/gi)].map((m) => ({ body: m[1] ?? "", offset: m.index ?? 0 }))]
+		for (const block of blocks) {
+			const backgrounds = [...block.body.matchAll(/\bbackground(?:-image)?\s*:\s*([^;{}"']*)/gi)].map((m) => m[1] ?? "").join(";")
+			const lines = [...backgrounds.matchAll(/\b\d{1,3}px\s*,\s*transparent\s+\d{1,3}px|transparent\s+calc\(100%\s*-\s*\d{1,3}px\)/gi)].length
+			if (lines >= 2 && (/background-size\s*:[^;{}"']*\b\d{1,3}px\b/i.test(block.body) || /\/\s*\d{1,3}px\b/.test(backgrounds))) return [sourceHit(context.file.text, block.offset, "Two-axis gradient background grid")]
+		}
+		return []
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/dark-glow.ts

@@ -0,0 +1,21 @@
+import type { SourceRule } from "../../rule"
+import { darkBackground, resolveValues } from "./support/css-effects"
+import { componentExtensions, pageSource, sourceHit } from "./support/source-text"
+import { sourceShadows } from "./support/source-shadow"
+
+export const darkGlow: SourceRule = {
+	meta: { id: "dark-glow", name: "Glowing shadow accents", category: "slop", severity: "warning", engine: "source", description: "A colored blurred shadow creates a visible glow.", fixHint: "Use neutral elevation shadows instead of chromatic halos." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		if (text === null) return []
+		const dark = darkBackground(text)
+		for (const m of resolveValues(text).matchAll(/(?<![-\w])(?:box|text)-shadow\s*:\s*([^;{}]+)/gi)) {
+			for (const s of sourceShadows(m[1] ?? "")) {
+				if (Math.max(s.color.r, s.color.g, s.color.b) - Math.min(s.color.r, s.color.g, s.color.b) < 30 || s.blur <= 4 || s.blur * s.color.a < 3 || s.blur / 2 + s.spread <= 0) continue
+				if (dark || (s.x === 0 && s.y === 0)) return [sourceHit(text, m.index ?? 0, "Colored shadow glow")]
+			}
+		}
+		return []
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/em-dash-overuse.ts

@@ -0,0 +1,15 @@
+import { EM_DASH } from "../../core/characters"
+import type { SourceRule } from "../../rule"
+import { bodyText, componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const emDashOveruse: SourceRule = {
+	meta: { id: "em-dash-overuse", name: "Em-dash overuse", category: "slop", severity: "advisory", engine: "source", description: "Body copy repeatedly uses em dashes in a short space.", fixHint: "Break repeated asides into sentences or use simpler punctuation." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const source = pageSource(context)
+		if (source === null) return []
+		const text = bodyText(source).replace(/—|&#0*8212;|&#x0*2014;/gi, EM_DASH)
+		const count = [...text.matchAll(/\u2014|(?<!-)--(?!-)/g)].length
+		return count >= 8 && text.length <= count * 500 ? [sourceHit(source, 0, `${count} em dashes in body copy`)] : []
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/gradient-text.ts

@@ -0,0 +1,11 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const gradientText: SourceRule = {
+	meta: { id: "gradient-text", name: "Gradient text", category: "slop", severity: "warning", engine: "source", description: "Clipped text uses a decorative gradient fill.", fixHint: "Use a solid text color with a clear hierarchy." },
+	extensions: sourceExtensions,
+	check: lineCheck([/(?:-webkit-)?background-clip\s*:\s*text/gi, /\bbg-clip-text\b/g], ({ match, scope }) => {
+		if (match[0] === "bg-clip-text") return /\bbg-gradient-to-/i.test(scope) ? "bg-clip-text + bg-gradient" : null
+		return /gradient/i.test(scope) ? "background-clip: text + gradient" : null
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/gray-on-color.ts

@@ -0,0 +1,13 @@
+import type { SourceRule } from "../../rule"
+import { exclusiveScopes, solidBackground, tagAt } from "./support/markup-scope"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const grayOnColor: SourceRule = {
+	meta: { id: "gray-on-color", name: "Gray text on colored background", category: "quality", severity: "warning", engine: "source", description: "Gray utility text shares an element and conditional branch with a solid colored fill.", fixHint: "Use ink derived from the surface hue, or a neutral surface." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\btext-(?:gray|slate|zinc|neutral|stone)-(\d+)\b/g], ({ match, line }) => {
+		if (Number(match[1]) >= 700) return null
+		const bg = exclusiveScopes(tagAt(line, match.index ?? 0)).filter((scope) => scope.includes(match[0])).map((scope) => solidBackground(scope, true)).find((value) => value !== null)
+		return bg ? `${match[0]} on ${bg}` : null
+	}),
+}

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

@@ -0,0 +1,19 @@
+import type { SourceRule } from "../../rule"
+import { aiColorPalette } from "./ai-color-palette"
+import { aphoristicCadence } from "./aphoristic-cadence"
+import { borderAccentOnRounded } from "./border-accent-on-rounded"
+import { bounceEasing } from "./bounce-easing"
+import { brokenImage } from "./broken-image"
+import { codexGridBackground } from "./codex-grid-background"
+import { darkGlow } from "./dark-glow"
+import { emDashOveruse } from "./em-dash-overuse"
+import { gradientText } from "./gradient-text"
+import { grayOnColor } from "./gray-on-color"
+import { marketingBuzzword } from "./marketing-buzzword"
+import { marquee } from "./marquee"
+import { monotonousSpacing } from "./monotonous-spacing"
+import { overusedFont } from "./overused-font"
+import { radialHalo } from "./radial-halo"
+import { sideTab } from "./side-tab"
+
+export const SOURCE_RULES: readonly SourceRule[] = [sideTab, borderAccentOnRounded, overusedFont, gradientText, grayOnColor, aiColorPalette, bounceEasing, brokenImage, codexGridBackground, monotonousSpacing, emDashOveruse, marketingBuzzword, aphoristicCadence, darkGlow, radialHalo, marquee]

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/marketing-buzzword.ts

@@ -0,0 +1,17 @@
+import type { SourceRule } from "../../rule"
+import { bodyText, componentExtensions, pageSource, sourceHit } from "./support/source-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"]
+
+export const marketingBuzzword: SourceRule = {
+	meta: { id: "marketing-buzzword", name: "Marketing buzzword", category: "slop", severity: "warning", engine: "source", description: "Page copy contains generic promotional phrases instead of concrete information.", fixHint: "Describe what the product does and who it helps." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const source = pageSource(context)
+		if (source === null) return []
+		const text = bodyText(source).toLowerCase()
+		let count = 0
+		for (const phrase of phrases) count += text.split(phrase).length - 1
+		return count > 0 ? [sourceHit(source, 0, `${count} generic promotional phrases`)] : []
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/marquee.ts

@@ -0,0 +1,12 @@
+import type { SourceRule } from "../../rule"
+import { marqueeSelectors } from "./support/css-effects"
+import { componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const marquee: SourceRule = {
+	meta: { id: "marquee", name: "Auto-scrolling marquee", category: "slop", severity: "warning", engine: "source", description: "Content moves in a perpetual horizontal loop.", fixHint: "Keep content still or let the reader control scrolling." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		return text === null ? [] : marqueeSelectors(text).map((selector) => sourceHit(text, 0, `Horizontal content loop: ${selector}`, selector))
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/monotonous-spacing.ts

@@ -0,0 +1,22 @@
+import type { SourceRule } from "../../rule"
+import { pageSource, sourceHit, componentExtensions } from "./support/source-text"
+
+export const monotonousSpacing: SourceRule = {
+	meta: { id: "monotonous-spacing", name: "Monotonous spacing", category: "slop", severity: "warning", engine: "source", description: "One spacing value dominates a full page with little variation.", fixHint: "Vary spacing to distinguish groups from sections." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		if (text === null) return []
+		const vals: number[] = []
+		for (const m of text.matchAll(/(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*(\d+)px/gi)) { const v = Number(m[1]); if (v > 0 && v < 200) vals.push(v) }
+		for (const m of text.matchAll(/(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*([\d.]+)rem/gi)) { const v = Math.round(Number(m[1]) * 16); if (v > 0 && v < 200) vals.push(v) }
+		for (const m of text.matchAll(/gap\s*:\s*(\d+)px/gi)) vals.push(Number(m[1]))
+		for (const m of text.matchAll(/\b(?:p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|gap)-(\d+)\b/g)) vals.push(Number(m[1]) * 4)
+		if (vals.length < 10) return []
+		const counts = new Map<number, number>()
+		for (const value of vals) { const v = Math.round(value / 4) * 4; counts.set(v, (counts.get(v) ?? 0) + 1) }
+		const [dominant, count] = [...counts].sort((a, b) => b[1] - a[1] || a[0] - b[0])[0] ?? [0, 0]
+		if (dominant === 0 || count / vals.length <= 0.6 || [...counts.keys()].filter((v) => v > 0).length > 3) return []
+		return [sourceHit(text, 0, `${dominant}px appears ${count}/${vals.length} times`)]
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/overused-font.ts

@@ -0,0 +1,16 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+const fonts = ["Inter", "Roboto", "Open Sans", "Lato", "Montserrat", "Arial", "Helvetica", "Fraunces", "Geist Sans", "Geist Mono", "Geist", "Mona Sans", "Plus Jakarta Sans", "Space Grotesk", "Recoleta", "Instrument Sans", "Instrument Serif"]
+
+export const overusedFont: SourceRule = {
+	meta: { id: "overused-font", name: "Overused font", category: "slop", severity: "warning", engine: "source", description: "A familiar default typeface appears in a font declaration or import.", fixHint: "Choose a typeface suited to the product, or allow the intentional family." },
+	extensions: sourceExtensions,
+	check: lineCheck([new RegExp(`font-family\\s*:\\s*['"]?(${fonts.join("|")})\\b`, "gi"), /fonts\.googleapis\.com\/css2?\?[^"'\s)<>]*/gi], ({ match, context }) => {
+		const query = new URLSearchParams(match[0].slice(match[0].indexOf("?") + 1))
+		const family = match[1] ?? query.getAll("family").flatMap((value) => value.split("|")).map((f) => f.split(":")[0] ?? "")
+			.find((f) => fonts.some((font) => font.toLowerCase() === f.toLowerCase()) && !context.config.allowFonts?.some((allowed) => allowed.toLowerCase() === f.toLowerCase()))
+		if (!family || context.config.allowFonts?.some((f) => f.toLowerCase() === family.toLowerCase())) return null
+		return match[1] ? match[0] : `Google Fonts: ${family.toLowerCase()}`
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/radial-halo.ts

@@ -0,0 +1,14 @@
+import type { SourceRule } from "../../rule"
+import { haloOffsets } from "./support/css-effects"
+import { componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const radialHalo: SourceRule = {
+	meta: { id: "radial-halo", name: "Radial-gradient background halo", category: "slop", severity: "warning", engine: "source", description: "A saturated radial gradient fades into a dark background.", fixHint: "Use a quieter solid background or purposeful imagery." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const text = pageSource(context)
+		if (text === null) return []
+		const offset = haloOffsets(text)[0]
+		return offset === undefined ? [] : [sourceHit(text, offset, "Radial color halo on a dark page")]
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/side-tab.ts

@@ -0,0 +1,58 @@
+import type { SourceRule } from "../../rule"
+import { accentScans, safeSelector } from "./support/accent-scans"
+import { chromatic } from "./support/source-color"
+import { applyRadii, roundedAway, scopeCorners, tagCorners } from "./support/corners"
+import { cssScopes, selectorHost } from "./support/css-scopes"
+import { solidBackground, tagAt } from "./support/markup-scope"
+import { lineCheck, sourceExtensions, sourcePasses } from "./support/source-text"
+
+const borderCheck = lineCheck([
+	/\bborder-([lrse])-(\d+)\b/g,
+	/border-(left|right)\s*:\s*(\d+)px\s+solid[^;]*/gi,
+	/border-(left|right|inline-start|inline-end)-width\s*:\s*(\d+)px/gi,
+	/border-(inline-start|inline-end)\s*:\s*(\d+)px\s+solid/gi,
+	/border(Left|Right)\s*[:=]\s*["'`](\d+)px\s+solid/g,
+	/(?<![\w-])w-(?:0\.5|1(?:\.5)?|2(?:\.5)?|3|\[(?:[2-9]|1[0-2])px\])(?![\w./-])/g,
+], ({ match, line, scope, offset, pass, context }) => {
+	const tag = tagAt(line, match.index ?? 0)
+	if (match[0].startsWith("w-")) {
+		const bg = solidBackground(tag)
+		const empty = !tag.startsWith("<") || /\/>$/.test(tag) || line.slice(line.indexOf(tag) + tag.length).trimStart().startsWith("</")
+		if (!bg || !empty || !/(?<![\w-])(?:shrink-0|rounded-[lres](?:-\w+)?|left-0|right-0|inset-0|inset-y-0)(?![\w./-])/.test(tag) || /(?<![\w-])h-(?:px\b|[0-9]|\[)|\brounded-full\b|aria-(?:current|selected)/i.test(tag)) return null
+		return `${match[0]} + ${bg} stripe child`
+	}
+	const side = (match[1] ?? "left").toLowerCase().replace("inline-", "")
+	const width = Number(match[2])
+	const utility = /^border-[lrse]-/.test(match[0])
+	if (utility ? width < (/\brounded(?!-none)\b/.test(scope) ? 2 : 4) : width < (/^border-(?:left|right)\s*:/i.test(match[0]) && /border-radius/i.test(scope) ? 2 : 3)) return null
+	if (!utility && /<(?:blockquote|nav[\s>]|pre[\s>]|code[\s>]|a\s|input[\s>]|span[\s>])/i.test(scope)) return null
+	if (/^border-(?:left|right)\s*:/i.test(match[0])) {
+		const color = /\bsolid\s+([\s\S]*)/i.exec(match[0])?.[1]?.trim() ?? ""
+		if (color && !chromatic(color)) return null
+	}
+	const styles = sourcePasses(context).filter((p) => p.css).map((p) => p.text).join("\n")
+	const imported = /(?:import|require\s*\()[^;\n]*\.(?:css|scss|sass|less)["']|<style[^>]*\bsrc\s*=|@import|@use\s+['"](?!sass:)/.test(context.file.text)
+	if (utility || (tag.startsWith("<") && /border(?:Left|Right)\s*=|(?:style|sx)\s*=/.test(tag))) {
+		const corners = tag === line && !line.trimStart().startsWith("<") ? [null, null, null, null] : tagCorners(tag, styles || context.file.text, imported)
+		if (!roundedAway(corners, side)) return null
+	} else {
+		const embedded = sourcePasses(context).find((p) => p.css && p.offset <= pass.offset + offset && pass.offset + offset < p.offset + p.text.length)
+		const ownPass = embedded ?? pass
+		const localOffset = pass.offset + offset - ownPass.offset
+		const scopes = cssScopes(ownPass.text, ownPass.sass)
+		const block = scopes.filter((s) => s.start <= localOffset && localOffset <= s.end).sort((a, b) => b.start - a.start)[0]
+		if (block) {
+			const host = selectorHost(block)
+			const corners = scopeCorners(block, scopes)
+			const status = /(?:^|[ .>])(?:tr|td|th)\b|(?:error|danger|warning|success|broken|new)\b/.test(host)
+			if (!roundedAway(corners, side) && (!status || safeSelector(host))) return null
+		} else if (!roundedAway(applyRadii([0, 0, 0, 0], scope), side)) return null
+	}
+	return match[0].replace(/\s*;?\s*$/, "")
+})
+
+export const sideTab: SourceRule = {
+	meta: { id: "side-tab", name: "Side-tab accent border", category: "slop", severity: "warning", engine: "source", description: "A colored stripe decorates a rounded card or status row.", fixHint: "Remove the stripe or use a quieter surface and text hierarchy." },
+	extensions: sourceExtensions,
+	check: (context) => [...borderCheck(context), ...accentScans(context)],
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/support/accent-scans.ts

@@ -0,0 +1,78 @@
+import type { SourceContext, SourceHit } from "../../../rule"
+import { roundedAway, scopeCorners } from "./corners"
+import { cleanSelector, cssScopes, declarations, selectorHost, type CssScope } from "./css-scopes"
+import { sourceHit, sourcePasses } from "./source-text"
+import { sourceShadows } from "./source-shadow"
+import { chromatic } from "./source-color"
+
+export const safeSelector = (selector: string): boolean => /:(?:hover|focus|active|visited)|aria-(?:selected|current)|(?:^|[.\s_-])(?:selected|current|active|checked)(?:$|[.\s_:-])|(?:^|[\s>+~])(?:blockquote|nav|pre|code|a|input|span)(?:$|[\s.#:[>])/i.test(selector)
+
+function pseudoEdge(scope: CssScope): string | null {
+	const d = declarations(scope.body)
+	if (!/^(?:absolute|fixed)$/.test(d.get("position") ?? "")) return null
+	const inset = d.get("inset")?.split(/\s+/)
+	const [t = "", r = t, b = t, l = r] = inset ?? []
+	const top = d.get("top") ?? t
+	const right = d.get("right") ?? d.get("inset-inline-end") ?? r
+	const bottom = d.get("bottom") ?? b
+	const left = d.get("left") ?? d.get("inset-inline-start") ?? l
+	const zero = (value: string): boolean => /^0(?:px|rem|em|%)?$/.test(value)
+	const width = Number.parseFloat(d.get("width") ?? d.get("inline-size") ?? "")
+	const height = Number.parseFloat(d.get("height") ?? d.get("block-size") ?? "")
+	const fullHeight = (zero(top) && zero(bottom)) || d.get("height") === "100%" || [top, bottom].every((v) => /^\d+(?:px)?$/.test(v) && Number.parseFloat(v) <= 20)
+	if (width >= 3 && width <= 12 && fullHeight) return zero(left) ? "left" : zero(right) ? "right" : null
+	const fullWidth = (zero(left) && zero(right)) || d.get("width") === "100%"
+	if (height >= 3 && height <= 12 && fullWidth && !safeSelector(scope.selector) && !/(?:^|[ .>])(?:button|summary|tr|td|th|table|li)(?:$|[.#:\s])/.test(scope.selector)) return zero(top) ? "top" : zero(bottom) ? "bottom" : null
+	return null
+}
+
+function resolveTokens(value: string, text: string): string {
+	const tokens = new Map([...text.matchAll(/(--[\w-]+)\s*:\s*([^;{}]+)/g)].map((m) => [m[1] ?? "", m[2] ?? ""]))
+	let result = value
+	for (let depth = 0; depth < 8; depth++) {
+		const next = result.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^)]*))?\)/g, (whole: string, key: string, fallback: string | undefined) => tokens.get(key) ?? fallback ?? whole)
+		if (next === result) break
+		result = next
+	}
+	return result
+}
+
+export function accentScans(context: SourceContext): readonly SourceHit[] {
+	const hits: SourceHit[] = []
+	const seen = new Set<string>()
+	for (const pass of sourcePasses(context).filter((p) => p.css)) {
+		const scopes = cssScopes(pass.text, pass.sass)
+		for (const scope of scopes) {
+			const selector = selectorHost(scope)
+			const d = declarations(scope.body)
+			const pseudo = /::?(?:before|after)\b/.test(selector)
+			if (pseudo) {
+				const side = pseudoEdge(scope)
+				const bg = resolveTokens(d.get("background-color") ?? d.get("background") ?? "", context.file.text)
+				if (!side || !bg || !chromatic(bg) || /(?:^|[ >])(?:blockquote|pre|code)\b/.test(selector)) continue
+				const host = cleanSelector(selector)
+				const hostScope = scopes.find((s) => cleanSelector(selectorHost(s)) === host && !/::?(?:before|after)/.test(s.selector)) ?? scope
+				if ((side === "left" || side === "right") && !roundedAway(scopeCorners(hostScope, scopes, host), side)) continue
+				const key = `${pass.offset}:${selector.includes("&") ? scope.start : selector}`
+				if (seen.has(key)) continue
+				seen.add(key)
+				hits.push(sourceHit(context.file.text, pass.offset + scope.start, `${scope.selector} pseudo-element stripe (${side})`, scope.selector))
+				continue
+			}
+			if (safeSelector(selector) || Number.parseFloat(d.get("width") ?? "999") <= 40) continue
+			const shadow = resolveTokens(d.get("box-shadow") ?? "", context.file.text)
+			const status = /(?:^|[ .>])(?:tr|td|th)\b|(?:error|danger|warning|success|broken|new)\b/.test(selector)
+			for (const layer of sourceShadows(shadow, status)) {
+				const ax = Math.abs(layer.x)
+				const ay = Math.abs(layer.y)
+				if (!layer.inset || layer.blur !== 0 || layer.spread !== 0 || layer.color.a < 0.1 || Math.max(layer.color.r, layer.color.g, layer.color.b) - Math.min(layer.color.r, layer.color.g, layer.color.b) < 30) continue
+				if (!((ax >= 3 && ax <= 12 && ay === 0) || (ay >= 3 && ay <= 12 && ax === 0))) continue
+				const side = ay === 0 ? layer.x > 0 ? "left" : "right" : layer.y > 0 ? "top" : "bottom"
+				if (!(status && ay === 0) && !roundedAway(scopeCorners(scope, scopes), side)) continue
+				hits.push(sourceHit(context.file.text, pass.offset + scope.start, `${scope.selector} inset stripe (${side})`, scope.selector))
+				break
+			}
+		}
+	}
+	return hits
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/source/support/check-source.ts

@@ -0,0 +1,6 @@
+import type { SourceHit, SourceRule } from "../../../rule"
+import type { DetectConfig } from "../../../types"
+
+export function checkSource(rule: SourceRule, text: string, options: { readonly path?: string; readonly config?: DetectConfig } = {}): readonly SourceHit[] {
+	return rule.check({ file: { path: options.path ?? "fixture.tsx", text }, config: options.config ?? {} })
+}