oh-my-opencode 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/design-system-font-size.ts

@@ -0,0 +1,23 @@
+import { fontSizePx, shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { visibleText } from "./support/text-context"
+
+export const designSystemFontSize: PageRule = {
+	meta: {
+		id: "design-system-font-size", name: "Font size outside DESIGN.md", category: "quality", severity: "advisory", engine: "page",
+		description: "A rendered font size is outside the configured type ramp.",
+		fixHint: "Use a configured size token or add the intentional step to designTokens.fontSizes.",
+	},
+	check: ({ snapshot, config }) => {
+		const allowed = config.designTokens?.fontSizes
+		if (allowed === undefined || allowed.length === 0) return []
+		const seen = new Set<number>()
+		return snapshot.elements.flatMap(element => {
+			const size = fontSizePx(element)
+			if (visibleText(snapshot, element) === false || element.ownText.trim() === "" ||
+				size <= 0 || allowed.some(n => Math.abs(n - size) <= 0.5) || seen.has(size)) return []
+			seen.add(size)
+			return [{ element, message: `${size}px is outside configured type ramp`, snippet: shortSnippet(element) }]
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/design-system-font.test.ts

@@ -0,0 +1,22 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { designSystemFont } from "./design-system-font"
+
+test("#given declared fonts, off-system duplicates and quoted commas #then unique undeclared families report", () => {
+	const snapshot = buildSnapshot([
+		{ text: "Allowed font", style: { "font-family": "Georgia, serif" } },
+		{ id: "off", text: "Different font", style: { "font-family": "Comic Sans MS, cursive" } },
+		{ text: "Same different font", style: { "font-family": '"Comic Sans MS", cursive' } },
+		{ text: "Comma family", style: { "font-family": '"Foo, Bar", serif' } },
+		{ text: "Platform only", style: { "font-family": "system-ui, sans-serif" } },
+		{ text: "Invisible", style: { "font-family": "Hidden Face", display: "none" } },
+	])
+	expect(designSystemFont.check({ snapshot, config: { designTokens: { fonts: ["GEORGIA", "Foo, Bar"] } } }).map(h => h.element?.selector)).toEqual(["#off"])
+})
+
+test("#given absent font tokens #then no font drift is inferred", () => {
+	const snapshot = buildSnapshot([{ text: "Different font", style: { "font-family": "Comic Sans MS" } }])
+	expect(designSystemFont.check({ snapshot, config: {} })).toEqual([])
+	expect(designSystemFont.check({ snapshot, config: { designTokens: { fonts: [] } } })).toEqual([])
+	expect(designSystemFont.check({ snapshot, config: { designTokens: { fonts: ["Georgia"] } } })).toHaveLength(1)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/design-system-font.ts

@@ -0,0 +1,24 @@
+import { shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { normalizeFont, primaryFont } from "./support/font-family"
+import { visibleText } from "./support/text-context"
+
+export const designSystemFont: PageRule = {
+	meta: {
+		id: "design-system-font", name: "Font outside DESIGN.md", category: "quality", severity: "warning", engine: "page",
+		description: "A text face is absent from the configured typography tokens.",
+		fixHint: "Use a configured font token or add the intentional face to designTokens.fonts.",
+	},
+	check: ({ snapshot, config }) => {
+		const allowed = config.designTokens?.fonts?.map(normalizeFont)
+		if (allowed === undefined || allowed.length === 0) return []
+		const seen = new Set<string>()
+		return snapshot.elements.flatMap(element => {
+			const family = primaryFont(styleOf(element, "font-family"), true)
+			if (visibleText(snapshot, element) === false || element.ownText.trim() === "" ||
+				family === "" || allowed.includes(family) || seen.has(family)) return []
+			seen.add(family)
+			return [{ element, message: `Font ${family} is outside configured tokens`, snippet: shortSnippet(element) }]
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/extreme-negative-tracking.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { extremeNegativeTracking } from "./extreme-negative-tracking"
+
+test("#given crushed reading and display tracking with optical controls #then only crushed runs report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "body", text: "Tracking crushed paragraph that still needs to read.", style: { "font-size": "16px", "letter-spacing": "-1.28px" } },
+		{ id: "small", text: "Tracking crushed paragraph in a smaller face.", style: { "font-size": "14px", "letter-spacing": "-1.4px" } },
+		{ id: "display", tag: "h2", text: "Tracking crushed display heading variant", style: { "font-size": "48px", "letter-spacing": "-4.8px" } },
+		{ id: "optical", text: "Optically tightened display headline", style: { "font-size": "72px", "letter-spacing": "-4.32px" } },
+		{ id: "body-floor", text: "Tracking at the exact reading-size limit", style: { "font-size": "16px", "letter-spacing": "-1.12px" } },
+		{ id: "display-floor", text: "Tracking at the exact display-size limit", style: { "font-size": "40px", "letter-spacing": "-3.6px" } },
+		{ id: "cjk", text: "この段落は日本語の文字組みで、字間を詰めても文字の形は崩れません。", style: { "font-size": "18px", "letter-spacing": "-1.8px" } },
+	])
+	expect(extremeNegativeTracking.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#body", "#small", "#display"])
+})
+
+test("#given short or hidden crushed text beside visible prose #then only prose reports", () => {
+	const style = { "letter-spacing": "-2px" }
+	const snapshot = buildSnapshot([{ id: "flag", text: "A visible paragraph longer than twenty characters.", style },
+		{ text: "Short", style }, { text: "A hidden paragraph longer than twenty characters.", style: { ...style, opacity: "0" } }])
+	expect(extremeNegativeTracking.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#flag"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/extreme-negative-tracking.ts

@@ -0,0 +1,18 @@
+import { fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { cjk, visibleText } from "./support/text-context"
+
+export const extremeNegativeTracking: PageRule = {
+	meta: {
+		id: "extreme-negative-tracking", name: "Crushed letter spacing", category: "slop", severity: "warning", engine: "page",
+		description: "Negative tracking beyond the reading or display threshold damages letter shapes.",
+		fixHint: "Keep tracking at or above -0.07em for reading text and -0.09em for display type.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		const tracking = (px(styleOf(element, "letter-spacing")) ?? 0) / size
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 || element.text.length <= 20 ||
+			size <= 0 || tracking >= (size >= 40 ? -0.09 : -0.07) || cjk(element.text)) return []
+		return [{ element, message: `Letter spacing ${tracking.toFixed(2)}em at ${size}px`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/flat-type-hierarchy.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { flatTypeHierarchy } from "./flat-type-hierarchy"
+
+const nodes = (tag: string, size: number, count = 1) => Array.from({ length: count }, () => ({
+	tag, text: "Ordinary visible text for this role", style: { "font-size": `${size}px` },
+}))
+const check = (specs: Parameters<typeof buildSnapshot>[0]) => flatTypeHierarchy.check({ snapshot: buildSnapshot(specs), config: {} })
+
+test("#given compressed roles and a strong ramp #then only the compressed hierarchy reports", () => {
+	expect(check([...nodes("h1", 18), ...nodes("h2", 16), ...nodes("h3", 15), ...nodes("p", 14)])).toHaveLength(1)
+	expect(check([...nodes("h1", 48), ...nodes("h2", 30), ...nodes("h3", 22), ...nodes("p", 16)])).toEqual([])
+	expect(check([...nodes("h1", 16), ...nodes("p", 16)])).toEqual([])
+})
+
+test("#given tied h1 sizes and an h1 label #then neither flattens the visible ladder", () => {
+	expect(check([...nodes("h1", 66.56), ...nodes("h1", 48.64), ...nodes("h2", 18.4, 4), ...nodes("h3", 20.8, 4), ...nodes("p", 17, 3)])).toEqual([])
+	expect(check([...nodes("h1", 14), ...nodes("h2", 15, 3), ...nodes("p", 16, 3)])).toEqual([])
+	expect(check([...nodes("h1", 16), ...nodes("h2", 15, 3), ...nodes("p", 16, 3)])).toHaveLength(1)
+})
+
+test("#given dropped heading roles #then their possible sizes must not break the ladder", () => {
+	const base = [...nodes("h1", 16), ...nodes("h2", 16, 3), ...nodes("p", 14, 4)]
+	expect(check([...base, ...nodes("h3", 14, 3), ...nodes("h3", 16, 3), ...nodes("h3", 20, 3)])).toEqual([])
+	expect(check([...nodes("h1", 18), ...nodes("h3", 16), ...nodes("p", 16, 6), ...nodes("h2", 17, 3), ...nodes("h2", 18, 3)])).toHaveLength(1)
+})
+
+test("#given near-tied heading sizes and body chips #then only settled text roles determine flatness", () => {
+	expect(check([...nodes("h1", 16), ...nodes("p", 16, 12), ...nodes("h2", 16, 12), ...nodes("h2", 24, 10), ...nodes("h3", 18, 3)])).toEqual([])
+	expect(check([...nodes("h1", 18), ...nodes("h2", 16), ...nodes("p", 16, 3),
+		...Array.from({ length: 20 }, () => ({ tag: "td", text: "GG", style: { "font-size": "24px" } })),
+	])).toHaveLength(1)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/flat-type-hierarchy.ts

@@ -0,0 +1,26 @@
+import { childrenOf, fontSizePx, isHeading } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { readingTags, visibleText } from "./support/text-context"
+import { flatHierarchy } from "./support/type-hierarchy"
+
+export const flatTypeHierarchy: PageRule = {
+	meta: {
+		id: "flat-type-hierarchy", name: "Flat type hierarchy", category: "slop", severity: "warning", engine: "page",
+		description: "Heading and body roles have no adjacent size step of at least 1.25.",
+		fixHint: "Add a stronger size step between at least two heading or body roles.",
+	},
+	check: ({ snapshot }) => {
+		const sampled = (tag: string): boolean => /^h[1-6]$/.test(tag) || readingTags.includes(tag)
+		const ownChars = (e: (typeof snapshot.elements)[number]): number =>
+			e.ownText.replace(/\s/g, "").length + childrenOf(snapshot, e)
+				.filter(n => sampled(n.tag) === false && visibleText(snapshot, n))
+				.reduce((count, n) => count + ownChars(n), 0)
+		const samples = snapshot.elements.filter(e => sampled(e.tag) && e.text.trim() !== "" && visibleText(snapshot, e) &&
+			fontSizePx(e) >= 8 && fontSizePx(e) < 200 &&
+			(isHeading(e) || [1, 2].includes(ownChars(e)) === false))
+			.map(e => ({ role: isHeading(e) ? e.tag : "body", size: fontSizePx(e), weight: Number.parseFloat(e.style["font-weight"] ?? "400") }))
+		const roles = flatHierarchy(samples)
+		if (roles.length === 0) return []
+		return [{ element: null, message: `Flat role sizes: ${roles.map(([r, size]) => `${r} ${size}px`).join(", ")}`, snippet: "All adjacent type steps are below 1.25" }]
+	},
+}

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

@@ -0,0 +1,21 @@
+import type { Rule } from "../../rule"
+import { allCapsBody } from "./all-caps-body"
+import { designSystemFont } from "./design-system-font"
+import { designSystemFontSize } from "./design-system-font-size"
+import { extremeNegativeTracking } from "./extreme-negative-tracking"
+import { flatTypeHierarchy } from "./flat-type-hierarchy"
+import { italicSerifDisplay } from "./italic-serif-display"
+import { justifiedText } from "./justified-text"
+import { lineLength } from "./line-length"
+import { oversizedH1 } from "./oversized-h1"
+import { overusedFont } from "./overused-font"
+import { tightLeading } from "./tight-leading"
+import { tinyText } from "./tiny-text"
+import { undersizedUiText } from "./undersized-ui-text"
+import { wideTracking } from "./wide-tracking"
+
+export const TYPOGRAPHY_RULES: readonly Rule[] = [
+	overusedFont, flatTypeHierarchy, italicSerifDisplay, oversizedH1, extremeNegativeTracking,
+	tinyText, undersizedUiText, allCapsBody, wideTracking, tightLeading, justifiedText,
+	lineLength, designSystemFont, designSystemFontSize,
+]

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/italic-serif-display.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { italicSerifDisplay } from "./italic-serif-display"
+
+test("#given italic serif heroes and roman or sans controls #then only serif heroes report", () => {
+	const snapshot = buildSnapshot([
+		...["Fraunces", "Recoleta", "Playfair Display", "CustomSerifFace"].map((f, i) =>
+			({ id: `flag-${i}`, tag: "h1", text: "Display heading", style: { "font-size": "56px", "font-style": "italic", "font-family": `"${f}", serif` } })),
+		{ tag: "h1", text: "Sans Italic Display", style: { "font-family": "Karla, sans-serif", "font-size": "64px", "font-style": "italic" } },
+		{ tag: "h1", text: "Roman Serif Display", style: { "font-family": "Fraunces, serif", "font-size": "88px" } },
+		{ tag: "blockquote", text: "Pull quote", style: { "font-family": "Georgia, serif", "font-size": "64px", "font-style": "italic" } },
+		{ tag: "h2", text: "Small italic heading", style: { "font-size": "32px", "font-style": "italic" } },
+	])
+	expect(italicSerifDisplay.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#flag-0", "#flag-1", "#flag-2", "#flag-3"])
+})
+
+test("#given several italic descendants in one roman heading #then one heading finding reports", () => {
+	const style = { "font-size": "72px", "font-style": "italic", "font-family": "Georgia, serif" }
+	const snapshot = buildSnapshot([
+		{ id: "hero", tag: "h1", children: [{ tag: "em", text: "One", style }, { tag: "em", text: "Two", style }] },
+		{ tag: "h1", children: [{ tag: "em", text: "Invisible", style: { ...style, display: "none" } }] },
+	])
+	expect(italicSerifDisplay.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#hero"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/italic-serif-display.ts

@@ -0,0 +1,24 @@
+import { descendants, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { visibleText } from "./support/text-context"
+import { primaryFont } from "./support/font-family"
+
+const serifNames = ["fraunces", "recoleta", "newsreader", "playfair display", "playfair", "cormorant", "cormorant garamond", "garamond", "eb garamond", "tiempos", "tiempos headline", "tiempos text", "lora", "vollkorn", "spectral", "source serif pro", "source serif 4", "source serif", "ibm plex serif", "merriweather", "libre caslon", "libre baskerville", "baskerville", "georgia", "times new roman", "times", "dm serif display", "dm serif text", "instrument serif", "gt sectra", "ogg", "canela", "freight display", "freight text"]
+
+export const italicSerifDisplay: PageRule = {
+	meta: {
+		id: "italic-serif-display", name: "Italic serif display headline", category: "slop", severity: "warning", engine: "page",
+		description: "An italic serif at hero scale repeats a common landing-page treatment.",
+		fixHint: "Use roman type or a non-serif display face unless the brief calls for editorial typography.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (["h1", "h2"].includes(element.tag) === false || visibleText(snapshot, element) === false) return []
+		const italic = [element, ...descendants(snapshot, element)].some(n => {
+			const families = styleOf(n, "font-family").toLowerCase().split(",").map(f => f.trim().replace(/^['"]|['"]$/g, ""))
+			const primary = primaryFont(styleOf(n, "font-family"), true)
+			return visibleText(snapshot, n) && n.ownText.trim() !== "" && styleOf(n, "font-style") === "italic" &&
+				fontSizePx(n) >= 48 && primary !== "" && (serifNames.includes(primary) || families.includes("serif"))
+		})
+		return italic ? [{ element, message: "Italic serif heading at 48px or larger", snippet: shortSnippet(element) }] : []
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/justified-text.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { justifiedText } from "./justified-text"
+
+test("#given narrow justified columns and wide, hyphenated or script controls #then only narrow Latin prose reports", () => {
+	const text = "Forcing every line of a narrow column to the same width stretches the spaces between words."
+	const style = { "text-align": "justify", "line-height": "24px" }
+	const lineRects = [{ x: 0, y: 0, width: 300, height: 18 }, { x: 0, y: 24, width: 280, height: 18 }]
+	const snapshot = buildSnapshot([
+		{ id: "narrow", tag: "p", text, style, rect: { width: 300 }, lineRects },
+		{ id: "manual", tag: "p", text, style: { ...style, hyphens: "manual" }, rect: { width: 260 }, lineRects },
+		{ tag: "p", text, style, rect: { width: 760 }, lineRects },
+		{ tag: "p", text, style: { ...style, hyphens: "auto" }, rect: { width: 300 }, lineRects },
+		{ tag: "p", text: "永慶房屋專注本業堅持創新提供消費者透明的資訊與安心的服務", style, lineRects },
+		{ tag: "p", text: "การจัดวางข้อความแบบชิดขอบทั้งสองด้านในภาษาไทย", style, lineRects },
+		{ tag: "p", text: "يعتمد ضبط النص في الخط العربي على استطالة الحروف على السطر", style, lineRects },
+		{ tag: "h4", text: "Research topics", style, rect: { width: 300 }, lineRects: [lineRects[0] ?? { x: 0, y: 0, width: 100, height: 18 }] },
+	])
+	expect(justifiedText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#narrow", "#manual"])
+})
+
+test("#given inline text inheriting justification #then the containing block supplies the measure", () => {
+	const text = "Wrapping the whole paragraph in a span changes nothing about the narrow measure it occupies."
+	const style = { "text-align": "justify", "line-height": "24px" }
+	const lineRects = [{ x: 0, y: 0, width: 280, height: 18 }, { x: 0, y: 24, width: 260, height: 18 }]
+	const snapshot = buildSnapshot([
+		{ rect: { width: 280 }, style, children: [{ id: "span", tag: "span", text, style, lineRects }] },
+		{ rect: { width: 760 }, style, text: "A paragraph with text of its own.", children: [{ tag: "a", text, style, lineRects }] },
+	])
+	expect(justifiedText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#span"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/justified-text.ts

@@ -0,0 +1,32 @@
+import { ancestors, fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { letters, visibleText } from "./support/text-context"
+import { mergedLines, phrasingNodes } from "./support/text-lines"
+
+export const justifiedText: PageRule = {
+	meta: {
+		id: "justified-text", name: "Justified text", category: "quality", severity: "warning", engine: "page",
+		description: "Narrow justified columns without automatic hyphenation stretch word spaces into gaps.",
+		fixHint: "Align text left, widen the column, or enable hyphens: auto.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 ||
+			styleOf(element, "text-align") !== "justify" || styleOf(element, "hyphens") === "auto") return []
+		let block = element
+		if (styleOf(element, "display") === "inline") {
+			const ancestor = [...ancestors(snapshot, element)].find(n => ["inline", "contents"].includes(styleOf(n, "display")) === false)
+			if (ancestor === undefined || ancestor.ownText.length > 10) return []
+			block = ancestor
+		}
+		const size = fontSizePx(element)
+		if (size <= 0 || block.rect.width <= 0 || block.rect.width / (size * 0.5) > 45) return []
+		const lines = mergedLines(phrasingNodes(snapshot, block))
+		const first = lines[0]
+		if (first && Math.max(...lines.map(l => l.y + l.height)) - first.y <
+			(px(styleOf(block, "line-height")) ?? size * 1.2) + size * 0.75) return []
+		const chars = letters([...element.ownText].slice(0, 400).join(""))
+		const exempt = chars.filter(c => /[\u0600-\u06ff\u0750-\u077f\u08a0-\u08ff\u0e00-\u0e7f\u1100-\u11ff\u2e80-\u9fff\ua960-\ud7ff\uf900-\ufaff\ufb50-\ufdff\ufe70-\ufeff\uff66-\uff9f\u{20000}-\u{3134f}]/u.test(c)).length
+		if (exempt * 2 > chars.length) return []
+		return [{ element, message: "Narrow justified text without automatic hyphenation", snippet: shortSnippet(element) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/line-length.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { lineLength } from "./line-length"
+
+const text = "Reading copy across a column this wide makes the eye travel far back to the start of every line. ".repeat(3)
+const lines = (widths: readonly number[]) => widths.map((width, i) => ({ x: 0, y: i * 24, width, height: 18 }))
+
+test("#given actual rendered line widths and short tails #then two long lines are required", () => {
+	const snapshot = buildSnapshot([
+		{ id: "wide", tag: "p", text, lineRects: lines([1000, 1000, 900]) },
+		{ tag: "p", text: "An ordinary note that only renders on one line.", lineRects: lines([1100]) },
+		{ tag: "p", text, lineRects: lines([1000, 100]) },
+		{ tag: "p", text, lineRects: lines([500, 500, 500, 500, 500]) },
+		{ tag: "p", text, lineRects: [] },
+	])
+	expect(lineLength.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#wide"])
+})
+
+test("#given inline children, nested lists and hidden source #then only each block's rendered text is counted", () => {
+	const snapshot = buildSnapshot([
+		{ id: "inline", tag: "p", children: [
+			{ tag: "b", text: text.slice(0, 140), style: { display: "inline" }, lineRects: lines([1000, 300]) },
+			{ tag: "i", text: text.slice(140), style: { display: "inline" }, lineRects: [{ x: 300, y: 24, width: 700, height: 18 }, { x: 0, y: 48, width: 900, height: 18 }] },
+		] },
+		{ id: "heading-item", tag: "li", text: "Fast Refresh Fixes", children: [{ tag: "ul", children: [
+			{ tag: "li", text: "One nested item with a single line", lineRects: lines([600]) },
+		] }] },
+		{ tag: "p", text: "A comfortable measure with fewer than eighty characters per line. ".repeat(2), lineRects: lines([500, 500]), children: [
+			{ tag: "span", text: text.repeat(3), style: { display: "none" }, lineRects: lines([1000, 1000]) },
+			{ tag: "style", text: text.repeat(3) },
+		] },
+		{ id: "generic", text, lineRects: lines([1000, 1000, 900]) },
+	])
+	expect(lineLength.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#inline", "#generic"])
+})
+
+test("#given legal blocks and long own list prose #then only the list's own long lines report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "list", tag: "li", text, lineRects: lines([1000, 1000, 900]), children: [{ tag: "ul", children: [{ tag: "li", text: "Nested short item" }] }] },
+		{ tag: "p", text, style: { "font-size": "14px" }, lineRects: lines([1000, 1000, 900]), attributes: { class: "legal" } },
+	])
+	expect(lineLength.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#list"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/line-length.ts

@@ -0,0 +1,28 @@
+import { childrenOf, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { control, finePrintExempt, readingTags, visibleText } from "./support/text-context"
+import { mergedLines, phrasingNodes, renderedCharacters } from "./support/text-lines"
+
+export const lineLength: PageRule = {
+	meta: {
+		id: "line-length", name: "Line length too long", category: "quality", severity: "warning", engine: "page",
+		description: "Multiple rendered lines longer than 80 characters make return sweeps difficult.",
+		fixHint: "Constrain reading copy to a max-width around 65ch to 75ch.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (visibleText(snapshot, element) === false || finePrintExempt(snapshot, element)) return []
+		const generic = ["div", "section", "article", "aside", "main"].includes(element.tag) &&
+			element.ownText.length > 10 && fontSizePx(element) < 24 &&
+			["block", "flow-root"].includes(styleOf(element, "display")) &&
+			styleOf(element, "white-space").startsWith("pre") === false && control(snapshot, element) === false &&
+			childrenOf(snapshot, element).every(n => ["inline", "contents"].includes(styleOf(n, "display")) || ["br", "wbr"].includes(n.tag))
+		if (readingTags.includes(element.tag) === false && generic === false) return []
+		const nodes = phrasingNodes(snapshot, element)
+		const count = renderedCharacters(nodes)
+		if (count <= 80) return []
+		const lines = mergedLines(nodes)
+		const total = lines.reduce((n, l) => n + l.width, 0)
+		if (total <= 0 || lines.filter(l => count * l.width / total > 85).length < 2) return []
+		return [{ element, message: `Rendered lines exceed 80 characters (${Math.round(count * Math.max(...lines.map(l => l.width)) / total)} at widest)`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/oversized-h1.test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { oversizedH1 } from "./oversized-h1"
+
+test("#given long dominant headlines and contained short controls #then only dominant long headings report", () => {
+	const text = "A sweeping product headline that sprawls across the whole viewport and keeps going"
+	const snapshot = buildSnapshot([
+		{ id: "hero", tag: "h1", text, style: { "font-size": "104px" }, rect: { width: 1040, height: 240 } },
+		{ id: "area", tag: "h1", text, style: { "font-size": "72px" }, rect: { width: 1280, height: 210 } },
+		{ tag: "h1", text, style: { "font-size": "83px" }, rect: { width: 1120, height: 90 } },
+		{ tag: "h1", text: "Bold.", style: { "font-size": "168px" }, rect: { height: 300 } },
+		{ tag: "h1", text, style: { "font-size": "40px" }, rect: { height: 300 } },
+		{ tag: "h1", text, style: { "font-size": "104px" }, rect: { y: 800, height: 300 } },
+	])
+	expect(oversizedH1.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#hero", "#area"])
+})
+
+test("#given a rotator with hidden alternatives beside a long hero #then only painted words count", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "h1", text: "Picked you.", style: { "font-size": "120px" }, rect: { height: 300 }, children: [
+			{ text: "Claude AI" }, { text: "Every alternative word in the rotator", style: { opacity: "0" } },
+		] },
+		{ id: "long", tag: "h1", text: "A genuinely long heading that remains on screen.", style: { "font-size": "120px" }, rect: { height: 300 } },
+	])
+	expect(oversizedH1.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#long"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/oversized-h1.ts

@@ -0,0 +1,20 @@
+import { descendants, fontSizePx, shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { visibleText } from "./support/text-context"
+
+export const oversizedH1: PageRule = {
+	meta: {
+		id: "oversized-h1", name: "Oversized hero headline", category: "slop", severity: "warning", engine: "page",
+		description: "A sentence-length display headline consumes too much of the first screen.",
+		fixHint: "Shorten the headline or reduce its font size so supporting content fits above the fold.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (element.tag !== "h1" || visibleText(snapshot, element) === false ||
+			fontSizePx(element) < 72 || element.rect.y >= snapshot.viewport.height) return []
+		const text = [element, ...descendants(snapshot, element)].filter(e => visibleText(snapshot, e)).map(e => e.ownText).join(" ").trim().replace(/\s+/g, " ")
+		const height = element.rect.height / snapshot.viewport.height
+		const area = element.rect.width * element.rect.height / (snapshot.viewport.width * snapshot.viewport.height)
+		if (text.length < 40 || (height < 0.28 && area < 0.25)) return []
+		return [{ element, message: `Long display headline occupies ${Math.round(height * 100)}% of viewport height`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/overused-font.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { overusedFont } from "./overused-font"
+
+const nodes = (font: string, count: number, text = "Feature line set in the primary face") =>
+	Array.from({ length: count }, () => ({ tag: "p", text, style: { "font-family": font } }))
+
+test("#given a dominant overused font and normalized spellings #then one page finding reports", () => {
+	const snapshot = buildSnapshot([...nodes("GeistSans", 12), ...nodes('"Geist Sans"', 11), ...nodes("Georgia", 1)])
+	expect(overusedFont.check({ snapshot, config: {} })).toHaveLength(1)
+	expect(overusedFont.check({ snapshot, config: { allowFonts: ["gEiSt SaNs"] } })).toEqual([])
+})
+
+test("#given ties, small pages, secondary faces and platform stacks #then only the dominant face qualifies", () => {
+	for (const snapshot of [
+		buildSnapshot(nodes("Inter", 19)),
+		buildSnapshot([...nodes("Inter", 10), ...nodes("Georgia", 10)]),
+		buildSnapshot([...nodes("Georgia", 18), ...nodes("Inter", 2)]),
+		buildSnapshot(nodes("-apple-system, BlinkMacSystemFont, Roboto, sans-serif", 22)),
+	]) expect(overusedFont.check({ snapshot, config: {} })).toEqual([])
+	expect(overusedFont.check({ snapshot: buildSnapshot(nodes("Inter", 20)), config: {} })).toHaveLength(1)
+})
+
+test("#given label fonts with negligible character share #then only substantial visible usage reports", () => {
+	const tiny = buildSnapshot([...nodes("Inter", 30, "1"), ...nodes("Georgia", 8, "Long ordinary body copy ".repeat(10))])
+	const substantial = buildSnapshot([...nodes("Inter", 30, "Platform"), ...nodes("Georgia", 8, "Long ordinary body copy ".repeat(10))])
+	expect(overusedFont.check({ snapshot: tiny, config: {} })).toEqual([])
+	expect(overusedFont.check({ snapshot: substantial, config: {} })).toHaveLength(1)
+})
+
+test("#given a brand face on its owner's domain #then only the owning domain is exempt", () => {
+	const snapshot = buildSnapshot(nodes("Geist", 20))
+	expect(overusedFont.check({ snapshot: { ...snapshot, url: "https://vercel.com" }, config: {} })).toEqual([])
+	expect(overusedFont.check({ snapshot: { ...snapshot, url: "https://notvercel.com" }, config: {} })).toHaveLength(1)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/overused-font.ts

@@ -0,0 +1,45 @@
+import { styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { brandDomain, canonicalFont, overusedFonts, primaryFont } from "./support/font-family"
+import { cjkChar, letters, lineage } from "./support/text-context"
+
+export const overusedFont: PageRule = {
+	meta: {
+		id: "overused-font", name: "Overused font", category: "slop", severity: "warning", engine: "page",
+		description: "The page's dominant face comes from a frequently repeated set of interface fonts.",
+		fixHint: "Choose a face suited to the project, or list the intentional choice in allowFonts.",
+	},
+	check: ({ snapshot, config }) => {
+		const usage = new Map<string, { count: number; chars: number; latin: number }>()
+		let total = 0
+		let chars = 0
+		let letterCount = 0
+		let cjkCount = 0
+		for (const e of snapshot.elements) {
+			if (["p", "h1", "h2", "h3", "h4", "h5", "h6", "li", "td", "th", "dd", "blockquote", "figcaption", "a", "button", "label", "span"].includes(e.tag) === false ||
+				e.ownText.trim() === "" || lineage(snapshot, e).some(n => /impeccable-(overlay|label|banner|tooltip)/.test(n.attributes["class"] ?? ""))) continue
+			const font = canonicalFont(primaryFont(styleOf(e, "font-family")))
+			if (font === "") continue
+			const hasBox = lineage(snapshot, e).every(n => n.attributes["hidden"] === undefined &&
+				styleOf(n, "display") !== "none" && ["hidden", "collapse"].includes(styleOf(n, "visibility")) === false &&
+				styleOf(n, "content-visibility") !== "hidden")
+			const weight = hasBox ? [...e.ownText].length : 0
+			const alphabet = hasBox ? letters(e.ownText) : []
+			const cjkLetters = alphabet.filter(cjkChar).length
+			const value = usage.get(font) ?? { count: 0, chars: 0, latin: 0 }
+			usage.set(font, { count: value.count + 1, chars: value.chars + weight, latin: value.latin + alphabet.length - cjkLetters })
+			total++
+			chars += weight
+			letterCount += alphabet.length
+			cjkCount += cjkLetters
+		}
+		const ranked = [...usage].sort((a, b) => b[1].count - a[1].count)
+		const top = ranked[0]
+		if (total < 20 || top === undefined || ranked[1]?.[1].count === top[1].count) return []
+		const [font, value] = top
+		if (overusedFonts.includes(font) === false || config.allowFonts?.some(f => canonicalFont(f) === font) ||
+			brandDomain(font, snapshot.url) || (chars > 0 && value.chars / chars < 0.05) ||
+			(cjkCount * 2 > letterCount && value.latin / letterCount < 0.05)) return []
+		return [{ element: null, message: `Primary font: ${font} (${Math.round(value.count / total * 100)}% of text)`, snippet: font }]
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/support/drawn-enlargement.ts

@@ -0,0 +1,48 @@
+import { ancestors, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+function rotation(value: string): number | null {
+	if (value === "" || value === "none") return 0
+	const parts = value.toLowerCase().trim().split(/\s+/)
+	const angle = parts.length === 1 ? parts[0] : parts.length === 2 && parts[0] === "z" ? parts[1] :
+		parts.length === 4 && Number(parts[0]) === 0 && Number(parts[1]) === 0 && Number(parts[2]) > 0 ? parts[3] : undefined
+	const match = /^([-+]?[\d.]+)(deg|grad|rad|turn)$/.exec(angle ?? "")
+	if (!match) return null
+	const factor = match[2] === "deg" ? Math.PI / 180 : match[2] === "grad" ? Math.PI / 200 : match[2] === "turn" ? Math.PI * 2 : 1
+	const turn = Number(match[1]) * factor
+	return Number.isFinite(turn) ? turn : null
+}
+
+export function drawnEnlargement(s: PageSnapshot, e: ElementSnapshot): number | null {
+	const chain = [e, ...ancestors(s, e)]
+	if (chain.length > 64 || chain.some(n => n.style["scale"] === undefined || n.style["rotate"] === undefined)) return null
+	let a = 1, b = 0, c = 0, d = 1
+	const multiply = (x: number, y: number, z: number, w: number): void => {
+		const nextA = x * a + z * b, nextB = y * a + w * b
+		const nextC = x * c + z * d, nextD = y * c + w * d
+		a = nextA; b = nextB; c = nextC; d = nextD
+	}
+	for (const n of chain) {
+		const transform = styleOf(n, "transform")
+		if (transform !== "" && transform !== "none") {
+			const matrix = /^matrix\(([^)]+)\)$/.exec(transform)
+			if (!matrix) return null
+			const values = (matrix[1] ?? "").split(",").map(Number)
+			const [x, y, z, w] = values
+			if (values.length !== 6 || x === undefined || y === undefined || z === undefined || w === undefined || !values.every(Number.isFinite)) return null
+			multiply(x, y, z, w)
+		}
+		const scale = styleOf(n, "scale")
+		if (scale !== "" && scale !== "none") {
+			const values = scale.trim().split(/\s+/).map(v => v.endsWith("%") ? Number(v.slice(0, -1)) / 100 : Number(v))
+			const x = values[0], y = values[1] ?? x
+			if (values.length > 3 || x === undefined || y === undefined || !values.every(Number.isFinite)) return null
+			multiply(x, 0, 0, y)
+		}
+		const angle = rotation(styleOf(n, "rotate"))
+		if (angle === null) return null
+		multiply(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle))
+	}
+	const scale = Math.min(Math.hypot(a, b), Math.hypot(c, d))
+	return Number.isFinite(scale) && scale > 1.05 ? scale : 1
+}