oh-my-opencode 5.1.48 → 5.1.54

package/dist/skills/frontend/scripts/detect/rules/typography/undersized-ui-text.test.ts

@@ -0,0 +1,98 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { undersizedUiText } from "./undersized-ui-text"
+test("#given captured opacity motion and held endpoints #then only permanent replacing fades leave size scoring", () => {
+	const animation = {
+		"font-size": "9px", "animation-name": "out", "animation-iteration-count": "1",
+		"animation-duration": "10s", "animation-delay": "40s", "animation-fill-mode": "forwards",
+		"animation-direction": "normal", "animation-play-state": "running", "animation-composition": "replace",
+	}
+	const cases = [
+		{ id: "out", style: {} },
+		{ id: "returns", style: { "animation-fill-mode": "none" } },
+		{ id: "paused", style: { "animation-play-state": "paused" } },
+		{ id: "endless", style: { "animation-iteration-count": "infinite" } },
+		{ id: "fraction", style: { "animation-iteration-count": "1.5" } },
+		{ id: "long", style: { "animation-delay": "51s" } },
+		{ id: "reverse", style: { "animation-direction": "reverse" } },
+		{ id: "alternate", style: { "animation-direction": "alternate", "animation-iteration-count": "2" } },
+		{ id: "reverse-alternate", style: { "animation-direction": "alternate-reverse", "animation-iteration-count": "2" } },
+		{ id: "add", style: { "animation-composition": "add" } },
+		{ id: "scroll", style: { "animation-timeline": "scroll()" } },
+		{ id: "unknown", style: { "animation-name": "out, unavailable" } },
+		{ id: "competing", style: { "animation-name": "out, in" } },
+		{ id: "no-endpoint", style: { "animation-name": "middle" } },
+		{ id: "near-end", style: { "animation-name": "near" } },
+	]
+	const nodes = cases.map(({ id, style }) => ({
+		id, tag: "a", text: "Calendar", attributes: { href: "#" }, style: { ...animation, ...style }, motion: ["opacity"],
+	}))
+	const snapshot = buildSnapshot([
+		...nodes,
+		{ id: "no-motion", tag: "a", text: "Calendar", attributes: { href: "#" }, style: animation },
+		{ id: "missing-composition", tag: "a", text: "Calendar", attributes: { href: "#" }, style: {
+			...animation, "animation-composition": "",
+		}, motion: ["opacity"] },
+		{ style: animation, motion: ["opacity"], children: [
+			{ id: "child", tag: "a", text: "Calendar", attributes: { href: "#" }, style: { "font-size": "9px" } },
+		] },
+	], { cssText: [
+		"@keyframes out { from {opacity:1} 35%, to {opacity:0} } @keyframes in {from {opacity:0}to {opacity:1}}" +
+		"@keyframes middle {50% {opacity:0}} @keyframes near {from {opacity:1}to {opacity:1%}}",
+	] })
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual([
+		"#returns", "#paused", "#endless", "#fraction", "#long", "#reverse", "#alternate",
+		"#add", "#scroll", "#unknown", "#competing", "#no-endpoint", "#no-motion", "#missing-composition",
+	])
+})
+
+test("#given functional text, legal floors and tolerant fluid sizes #then only undersized labels report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "button", tag: "button", text: "Learn more", style: { "font-size": "10px" } },
+		{ id: "floor", tag: "button", text: "Learn more", style: { "font-size": "10.9px" } },
+		{ tag: "button", text: "Learn more", style: { "font-size": "10.9688px" } },
+		{ tag: "button", text: "Learn more", style: { "font-size": "11px" } },
+		{ tag: "footer", children: [
+			{ text: "Copyright", style: { "font-size": "10px" } },
+			{ id: "legal", text: "Copyright", style: { "font-size": "9.9px" } },
+			{ id: "footer-link", tag: "a", text: "Privacy", attributes: { href: "#" }, style: { "font-size": "10px" } },
+		] },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#button", "#floor", "#legal", "#footer-link"])
+})
+
+test("#given footnote links, code and nonfunctional prose #then ordinary short labels alone report", () => {
+	const style = { "font-size": "8px" }
+	const snapshot = buildSnapshot([
+		{ id: "label", text: "Short label", style },
+		{ tag: "sup", children: [{ tag: "a", text: "[7]", style, attributes: { href: "#" } }] },
+		{ tag: "code", text: "const x = 1", style },
+		{ text: "A long paragraph of body copy belongs to the tiny-text check.", style },
+		{ text: "const result = { count: 3 };", style: { ...style, "font-family": "IBM Plex Mono", "white-space": "pre-wrap" } },
+		{ text: "Hidden label", style, attributes: { class: "sr-only" } },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#label"])
+})
+
+test("#given furniture class parts and button groups #then only real furniture and button labels report", () => {
+	const style = { "font-size": "9.5px" }
+	const text = "A content-bearing label longer than twenty characters"
+	const snapshot = buildSnapshot([
+		...["taglist", "hero-tagline", "footer-subnav"].map((name, i) => ({ attributes: { class: name }, children: [{ id: `furniture-${i}`, text, style }] })),
+		...["px-stage-compact", "instagram-feed", "pillars", "navy"].map(name => ({ attributes: { class: name }, children: [{ text, style }] })),
+		{ id: "button", text, style, attributes: { class: "demo__btn" } },
+		{ attributes: { class: "hero-btns btn-group" }, children: [
+			{ text, style }, { text: "*Offer valid for new customers only. Terms and conditions apply to every plan.", style, attributes: { class: "offer-terms" } },
+		] },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#furniture-0", "#furniture-1", "#furniture-2", "#button"])
+})
+
+test("#given JSON runs and monospace pricing #then punctuation identifies code rather than prices", () => {
+	const style = { "font-size": "8px", "font-family": "IBM Plex Mono", "white-space": "pre-wrap" }
+	const snapshot = buildSnapshot([
+		{ text: '"data": {', style }, { text: '"id": 7,', style }, { text: '"title": "Introducing Directus",', style }, { text: "},", style },
+		{ id: "price", text: "$50/seat", style }, { id: "count", text: "200+", style },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#price", "#count"])
+})

package/dist/skills/frontend/scripts/detect/rules/typography/undersized-ui-text.ts

@@ -0,0 +1,28 @@
+import { fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { buttonBox, className, codeContext, control, furnitureClass, lineage, mono, smallprint, visibleText } from "./support/text-context"
+import { textPainted } from "./support/painted-text"
+
+export const undersizedUiText: PageRule = {
+	meta: {
+		id: "undersized-ui-text", name: "Undersized functional text", category: "quality", severity: "warning", engine: "page",
+		description: "Functional labels below 11px are difficult to read and use.",
+		fixHint: "Use at least 11px for functional text and at least 10px for noninteractive small print.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		const interactive = control(snapshot, element)
+		const floor = interactive === false && smallprint(snapshot, element) ? 10 : 11
+		const chain = lineage(snapshot, element)
+		const furniture = chain.some(n => ["nav", "td", "th", "caption", "figcaption", "dt", "dd", "footer"].includes(n.tag) ||
+			["navigation", "gridcell", "cell"].includes(n.attributes["role"] ?? "") ||
+			(n.tag !== "html" && furnitureClass(className(n))))
+		const codeRun = mono(element) && styleOf(element, "white-space").startsWith("pre") && /[{}[\]<>=;"`\\_]/.test(element.ownText)
+		if (visibleText(snapshot, element) === false || !textPainted(snapshot, element) || size <= 0 || Math.round((floor - size) * 1000) < 100 ||
+			element.ownText.trim().length < 2 || ["sub", "sup", "option"].includes(element.tag) ||
+			chain.some(n => ["sub", "sup"].includes(n.tag)) || codeContext(snapshot, element) || codeRun ||
+			(interactive === false && furniture === false &&
+				(buttonBox(snapshot, element) === false || smallprint(snapshot, element)) && element.ownText.length > 20)) return []
+		return [{ element, message: `${size}px functional text below ${floor}px floor`, snippet: shortSnippet(element) }]
+	}),
+}

package/dist/skills/frontend/scripts/detect/rules/typography/wide-tracking.test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { wideTracking } from "./wide-tracking"
+
+test("#given tracked prose, capitals, CJK and control labels #then reading text alone reports", () => {
+	const style = { "font-size": "16px", "letter-spacing": "2px" }
+	const snapshot = buildSnapshot([
+		{ id: "prose", text: "Letter spacing this wide breaks natural word shapes.", style },
+		{ id: "mixed", tag: "span", text: "Fall 2026 technology preview", style },
+		{ id: "caps-sentence", text: "SUPPORT HOURS RUN MONDAY TO FRIDAY, FROM NINE IN THE MORNING UNTIL SIX IN THE EVENING, EXCEPT ON PUBLIC HOLIDAYS.", style },
+		{ text: "NOW AVAILABLE ACROSS THE UNITED STATES, CANADA AND NEW ZEALAND", style },
+		{ text: "Short capitals label made from mixed source text", style: { ...style, "text-transform": "uppercase" } },
+		{ text: "台風が近づいているときに気をつけることは何ですか？", style },
+		{ tag: "button", text: "A compact action label", style },
+		{ text: "Reading copy at the exact tracking floor.", style: { ...style, "letter-spacing": "0.8px" } },
+	])
+	expect(wideTracking.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#prose", "#mixed", "#caps-sentence"])
+})
+
+test("#given typed capitals forced lowercase beside normal capitals #then the lowercase run reports", () => {
+	const snapshot = buildSnapshot([
+		{ id: "lower", text: "LIMITED EDITION RELEASE 2026", style: { "letter-spacing": "2px", "text-transform": "lowercase" } },
+		{ text: "LIMITED EDITION RELEASE 2026", style: { "letter-spacing": "2px" } },
+	])
+	expect(wideTracking.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#lower"])
+})

package/dist/skills/frontend/scripts/detect/rules/typography/wide-tracking.ts

@@ -0,0 +1,26 @@
+import { fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { caps, cjk, letters, lineage, visibleText } from "./support/text-context"
+import { shownLines } from "./support/text-lines"
+
+export const wideTracking: PageRule = {
+	meta: {
+		id: "wide-tracking", name: "Wide letter spacing on body text", category: "quality", severity: "warning", engine: "page",
+		description: "Widely tracked reading text splits words into individual characters.",
+		fixHint: "Keep body tracking at or below 0.05em; reserve wider spacing for capital labels.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 || element.text.length <= 20 ||
+			size <= 0 || (px(styleOf(element, "letter-spacing")) ?? 0) / size <= 0.05) return []
+		const transform = styleOf(element, "text-transform")
+		const count = shownLines(snapshot, element, px(styleOf(element, "line-height")) ?? size * 1.2)
+		const capsLabel = transform === "uppercase" || (transform !== "lowercase" && caps(element.text) &&
+			(element.text.length < 80 || (letters(element.text).length <= 40 && count <= 1)))
+		const trackedControl = lineage(snapshot, element).some(n => n.tag === "button" ||
+			(n.tag === "a" && n.attributes["href"] !== undefined) ||
+			["button", "link", "tab"].includes(n.attributes["role"] ?? ""))
+		if (capsLabel || (trackedControl && letters(element.text).length <= 40 && count <= 1) || cjk(element.ownText)) return []
+		return [{ element, message: "Letter spacing exceeds 0.05em on reading text", snippet: shortSnippet(element) }]
+	}),
+}

package/dist/skills/frontend/scripts/detect/snapshot/collect.ts

@@ -0,0 +1,158 @@
+import type { ElementSnapshot, PageSnapshot, PseudoSnapshot, Rect } from "../types"
+
+// Runs inside the page: the renderer serializes this function with toString() and evaluates it there,
+// so it must stay self-contained (no imports at runtime, no references to module scope).
+export function collectPageSnapshot(props: readonly string[], maxElements: number): PageSnapshot {
+	const collapse = (s: string): string => s.replace(/\s+/g, " ").trim()
+	const toRect = (r: DOMRect): Rect => ({
+		x: Math.round(r.x * 100) / 100,
+		y: Math.round(r.y * 100) / 100,
+		width: Math.round(r.width * 100) / 100,
+		height: Math.round(r.height * 100) / 100,
+	})
+	const readStyle = (style: CSSStyleDeclaration): Record<string, string> => {
+		const out: Record<string, string> = {}
+		for (const p of props) out[p] = style.getPropertyValue(p)
+		return out
+	}
+	const pseudo = (el: Element, which: "::before" | "::after"): PseudoSnapshot | null => {
+		const style = getComputedStyle(el, which)
+		const content = style.getPropertyValue("content")
+		if (content === "none" || content === "normal" || content === "") return null
+		return { style: readStyle(style), rect: null }
+	}
+	const cssEscape = (s: string): string => (typeof CSS !== "undefined" && CSS.escape ? CSS.escape(s) : s)
+	const selectorOf = (el: Element): string => {
+		const parts: string[] = []
+		let node: Element | null = el
+		while (node && node.nodeType === 1 && parts.length < 6) {
+			if (node.id) {
+				parts.unshift(`#${cssEscape(node.id)}`)
+				break
+			}
+			const tag = node.tagName.toLowerCase()
+			const parentEl: Element | null = node.parentElement
+			if (!parentEl) {
+				parts.unshift(tag)
+				break
+			}
+			const current: Element = node
+			const same = Array.from(parentEl.children).filter((c) => c.tagName === current.tagName)
+			parts.unshift(same.length > 1 ? `${tag}:nth-of-type(${same.indexOf(current) + 1})` : tag)
+			node = parentEl
+		}
+		return parts.join(" > ")
+	}
+	const lineRectsOf = (el: Element): Rect[] => {
+		const rects: Rect[] = []
+		for (const child of Array.from(el.childNodes)) {
+			if (child.nodeType !== 3 || !child.textContent || child.textContent.trim() === "") continue
+			const range = document.createRange()
+			range.selectNodeContents(child)
+			for (const r of Array.from(range.getClientRects())) {
+				if (r.width === 0 && r.height === 0) continue
+				const last = rects[rects.length - 1]
+				if (last && Math.abs(last.y - r.y) < 2) {
+					const right = Math.max(last.x + last.width, r.x + r.width)
+					const x = Math.min(last.x, r.x)
+					rects[rects.length - 1] = { x, y: last.y, width: right - x, height: Math.max(last.height, r.height) }
+				} else rects.push(toRect(r))
+			}
+		}
+		return rects
+	}
+	const kebab = (p: string): string => (p === "cssOffset" ? "offset" : p.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`))
+	const motionOf = (el: Element): string[] => {
+		const moving = new Set<string>()
+		for (const anim of el.getAnimations()) {
+			if (anim.playState !== "running") continue
+			if (typeof CSSTransition !== "undefined" && anim instanceof CSSTransition) moving.add(anim.transitionProperty)
+			const effect = anim.effect
+			if (!(effect instanceof KeyframeEffect)) continue
+			for (const frame of effect.getKeyframes()) {
+				for (const key of Object.keys(frame)) if (!["offset", "computedOffset", "easing", "composite"].includes(key)) moving.add(kebab(key))
+			}
+		}
+		return [...moving].sort()
+	}
+	const all = Array.from(document.querySelectorAll("body, body *"))
+		.filter((el) => !["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "HEAD", "META", "LINK"].includes(el.tagName))
+		.slice(0, maxElements)
+	const indexOf = new Map<Element, number>()
+	all.forEach((el, i) => indexOf.set(el, i))
+	const elements: ElementSnapshot[] = all.map((el, index) => {
+		const attributes: Record<string, string> = {}
+		for (const a of Array.from(el.attributes)) attributes[a.name] = a.value.slice(0, 500)
+		const parentIndex = el.parentElement ? indexOf.get(el.parentElement) : undefined
+		const ownText = collapse(
+			Array.from(el.childNodes)
+				.filter((n) => n.nodeType === 3)
+				.map((n) => n.textContent ?? "")
+				.join(" "),
+		)
+		return {
+			index,
+			parent: parentIndex === undefined ? null : parentIndex,
+			children: Array.from(el.children)
+				.map((c) => indexOf.get(c))
+				.filter((i): i is number => i !== undefined),
+			tag: el.tagName.toLowerCase(),
+			selector: selectorOf(el),
+			attributes,
+			rect: toRect(el.getBoundingClientRect()),
+			ownText,
+			textRuns: Array.from(el.childNodes)
+				.filter((n) => n.nodeType === 3)
+				.map((n) => collapse(n.textContent ?? ""))
+				.filter((t) => t !== ""),
+			text: collapse(el.textContent ?? "").slice(0, 2000),
+			lineRects: ownText === "" ? [] : lineRectsOf(el),
+			style: readStyle(getComputedStyle(el)),
+			before: pseudo(el, "::before"),
+			after: pseudo(el, "::after"),
+			scroll: { scrollWidth: el.scrollWidth, clientWidth: el.clientWidth, scrollHeight: el.scrollHeight, clientHeight: el.clientHeight },
+			motion: motionOf(el),
+			placeholder: el.matches(":placeholder-shown") ? { style: readStyle(getComputedStyle(el, "::placeholder")), rect: null } : null,
+			modal: (() => {
+				try {
+					return el.matches(":modal")
+				} catch (error) {
+					if (error instanceof DOMException) return false
+					throw error
+				}
+			})(),
+		}
+	})
+	const cssText: string[] = []
+	for (const sheet of Array.from(document.styleSheets)) {
+		const rules = (() => {
+			try {
+				return Array.from(sheet.cssRules)
+			} catch (error) {
+				if (error instanceof DOMException) return []
+				throw error
+			}
+		})()
+		cssText.push(rules.map((r) => r.cssText).join("\n"))
+	}
+	const root = document.documentElement
+	const errors: unknown = Reflect.get(globalThis, "__detectScriptErrors")
+	return {
+		viewport: { width: window.innerWidth, height: window.innerHeight },
+		url: location.href,
+		title: document.title,
+		lang: root.lang,
+		document: { scrollWidth: root.scrollWidth, clientWidth: root.clientWidth, scrollHeight: root.scrollHeight },
+		elements,
+		cssText,
+		scriptErrors: Array.isArray(errors) ? errors.filter((e): e is string => typeof e === "string") : [],
+		scriptErrorsCaptured: Array.isArray(errors),
+	}
+}
+
+/** Installed before page scripts run, so errors thrown during load reach the snapshot's scriptErrors. */
+export const SCRIPT_ERROR_PROBE = `(() => {
+	const sink = (globalThis.__detectScriptErrors = []);
+	addEventListener("error", (e) => sink.push(String(e.message || e.error || "error")));
+	addEventListener("unhandledrejection", (e) => sink.push(String(e.reason && e.reason.message || e.reason)));
+})();`

package/dist/skills/frontend/scripts/detect/snapshot/style-props.ts

@@ -0,0 +1,25 @@
+export const STYLE_PROPS = [
+	"display", "position", "visibility", "opacity", "z-index", "overflow-x", "overflow-y", "transform", "contain",
+	"top", "left", "right", "bottom", "width", "height", "max-width", "min-width", "max-height",
+	"color", "background-color", "background-image", "background-clip", "-webkit-background-clip", "-webkit-text-fill-color",
+	"background-size", "background-repeat", "background-position",
+	"font-family", "font-size", "font-weight", "font-style", "line-height", "letter-spacing", "word-spacing",
+	"text-transform", "text-align", "text-align-last", "text-decoration-line", "text-decoration-thickness", "text-underline-offset",
+	"text-overflow", "text-wrap", "white-space", "word-break", "overflow-wrap", "hyphens", "font-variant-numeric", "font-feature-settings",
+	"-webkit-line-clamp", "overflow-clip-margin", "font-variant", "font-variant-caps", "background-blend-mode", "mix-blend-mode", "scale", "rotate", "translate", "will-change",
+	"border-top-width", "border-right-width", "border-bottom-width", "border-left-width",
+	"border-top-style", "border-right-style", "border-bottom-style", "border-left-style",
+	"border-top-color", "border-right-color", "border-bottom-color", "border-left-color",
+	"border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius",
+	"border-image-source", "outline-style", "outline-width", "outline-color", "outline-offset",
+	"box-shadow", "text-shadow", "filter", "backdrop-filter", "-webkit-backdrop-filter", "clip-path", "mask-image", "-webkit-mask-image",
+	"padding-top", "padding-right", "padding-bottom", "padding-left",
+	"margin-top", "margin-right", "margin-bottom", "margin-left",
+	"row-gap", "column-gap", "grid-template-columns", "flex-direction", "flex-wrap", "justify-content", "align-items", "column-count",
+	"animation-name", "animation-duration", "animation-iteration-count", "animation-timing-function", "animation-direction",
+	"animation-delay", "animation-fill-mode", "animation-play-state", "animation-composition",
+	"transition-property", "transition-duration", "transition-timing-function",
+	"object-fit", "caret-color", "content", "list-style-type", "cursor", "pointer-events",
+] as const
+
+export type StyleProp = (typeof STYLE_PROPS)[number]

package/dist/skills/frontend/scripts/detect/testing/build-snapshot.ts

@@ -0,0 +1,78 @@
+import type { ElementSnapshot, PageSnapshot, PseudoSnapshot, Rect, Viewport } from "../types"
+
+// Computed-style defaults a Chromium page reports for an unstyled element; a node spec overrides only what it sets.
+const DEFAULT_STYLE: Readonly<Record<string, string>> = {
+	display: "block", position: "static", visibility: "visible", opacity: "1", "z-index": "auto",
+	"overflow-x": "visible", "overflow-y": "visible", transform: "none",
+	color: "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)", "background-image": "none", "background-clip": "border-box",
+	"-webkit-background-clip": "border-box", "-webkit-text-fill-color": "rgb(0, 0, 0)",
+	"font-family": "Georgia, serif", "font-size": "16px", "font-weight": "400", "font-style": "normal", "line-height": "24px",
+	"letter-spacing": "normal", "word-spacing": "0px", "text-transform": "none", "text-align": "start", "text-align-last": "auto",
+	"text-decoration-line": "none", "text-overflow": "clip", "text-wrap": "wrap", "white-space": "normal",
+	"border-top-width": "0px", "border-right-width": "0px", "border-bottom-width": "0px", "border-left-width": "0px",
+	"border-top-style": "none", "border-right-style": "none", "border-bottom-style": "none", "border-left-style": "none",
+	"border-top-color": "rgb(0, 0, 0)", "border-right-color": "rgb(0, 0, 0)", "border-bottom-color": "rgb(0, 0, 0)", "border-left-color": "rgb(0, 0, 0)",
+	"border-top-left-radius": "0px", "border-top-right-radius": "0px", "border-bottom-right-radius": "0px", "border-bottom-left-radius": "0px",
+	"border-image-source": "none", "outline-style": "none", "box-shadow": "none", "text-shadow": "none", filter: "none",
+	"backdrop-filter": "none", "clip-path": "none", "mask-image": "none",
+	"padding-top": "0px", "padding-right": "0px", "padding-bottom": "0px", "padding-left": "0px",
+	"margin-top": "0px", "margin-right": "0px", "margin-bottom": "0px", "margin-left": "0px",
+	"row-gap": "normal", "column-gap": "normal", "animation-name": "none", "animation-duration": "0s",
+	"animation-iteration-count": "1", "animation-timing-function": "ease", "transition-property": "all",
+	"transition-duration": "0s", "transition-timing-function": "ease", "object-fit": "fill", content: "normal",
+}
+
+export type NodeSpec = {
+	readonly tag?: string
+	readonly id?: string
+	readonly attributes?: Readonly<Record<string, string>>
+	readonly style?: Readonly<Record<string, string>>
+	readonly text?: string
+	readonly textRuns?: readonly string[]
+	readonly rect?: Partial<Rect>
+	readonly lineRects?: readonly Rect[]
+	readonly before?: Readonly<Record<string, string>>
+	readonly after?: Readonly<Record<string, string>>
+	readonly scroll?: Partial<ElementSnapshot["scroll"]>
+	readonly motion?: readonly string[]
+	readonly modal?: boolean
+	readonly placeholder?: Readonly<Record<string, string>>
+	readonly children?: readonly NodeSpec[]
+}
+
+const pseudo = (style: Readonly<Record<string, string>> | undefined): PseudoSnapshot | null =>
+	style ? { style: { ...DEFAULT_STYLE, content: '""', ...style }, rect: null } : null
+
+/** Builds a PageSnapshot from a tree of node specs under <body>, filling Chromium's default computed values. */
+export function buildSnapshot(body: readonly NodeSpec[], options: { readonly viewport?: Viewport; readonly cssText?: readonly string[]; readonly scriptErrors?: readonly string[]; readonly scriptErrorsCaptured?: boolean } = {}): PageSnapshot {
+	const viewport = options.viewport ?? { width: 1280, height: 800 }
+	const elements: ElementSnapshot[] = []
+	const add = (spec: NodeSpec, parent: number | null, path: string): number => {
+		const index = elements.length
+		const tag = spec.tag ?? "div"
+		const selector = spec.id ? `#${spec.id}` : `${path} > ${tag}:nth-of-type(${index})`
+		const placeholder: ElementSnapshot = {
+			index, parent, children: [], tag, selector,
+			attributes: { ...(spec.id ? { id: spec.id } : {}), ...spec.attributes },
+			rect: { x: 0, y: 0, width: 200, height: 40, ...spec.rect },
+			ownText: spec.text ?? "", textRuns: spec.textRuns ?? (spec.text ? [spec.text] : []), text: "", lineRects: spec.lineRects ?? (spec.text ? [{ x: 0, y: 0, width: 160, height: 24, ...spec.rect }] : []),
+			style: { ...DEFAULT_STYLE, ...(tag === "span" || tag === "a" ? { display: "inline" } : {}), ...spec.style },
+			before: pseudo(spec.before), after: pseudo(spec.after),
+			scroll: { scrollWidth: 200, clientWidth: 200, scrollHeight: 40, clientHeight: 40, ...spec.scroll },
+			motion: spec.motion ?? [],
+			modal: spec.modal ?? false,
+			placeholder: spec.placeholder ? { style: { ...DEFAULT_STYLE, ...spec.placeholder }, rect: null } : null,
+		}
+		elements.push(placeholder)
+		const children = (spec.children ?? []).map((c) => add(c, index, selector))
+		const text = [spec.text ?? "", ...children.map((i) => elements[i]?.text ?? "")].filter(Boolean).join(" ")
+		elements[index] = { ...placeholder, children, text }
+		return index
+	}
+	add({ tag: "body", rect: { width: viewport.width, height: viewport.height }, children: body }, null, "html")
+	return {
+		viewport, url: "about:blank", title: "", lang: "en",
+		document: { scrollWidth: viewport.width, clientWidth: viewport.width, scrollHeight: viewport.height },
+		elements, cssText: options.cssText ?? [], scriptErrors: options.scriptErrors ?? [], scriptErrorsCaptured: options.scriptErrorsCaptured ?? true,
+	}
+}

package/dist/skills/frontend/scripts/detect/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["bun-types"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["./**/*.ts"]
+}

package/dist/skills/frontend/scripts/detect/types.ts

@@ -0,0 +1,124 @@
+// Public types of the frontend detect SDK: rules, findings, snapshots, options.
+// Rule semantics are adapted from Impeccable's detector (Apache-2.0, Copyright 2025 Paul Bakaus); see ATTRIBUTION.md sections 6-7.
+
+export type Severity = "error" | "warning" | "advisory"
+export type RuleCategory = "slop" | "quality"
+export type RuleSetting = Severity | "off"
+
+/** Where a rule reads from: the rendered page, or raw source text with no rendering. */
+export type RuleEngine = "page" | "source"
+
+export type RuleMeta = {
+	readonly id: string
+	readonly name: string
+	readonly category: RuleCategory
+	readonly severity: Severity
+	readonly engine: RuleEngine
+	readonly description: string
+	readonly fixHint: string
+}
+
+export type Rect = { readonly x: number; readonly y: number; readonly width: number; readonly height: number }
+
+export type ElementLocation = {
+	readonly kind: "element"
+	readonly file?: string
+	readonly selector: string
+	readonly rect: Rect
+	readonly viewport: Viewport
+}
+
+export type SourceLocation = {
+	readonly kind: "source"
+	readonly file: string
+	readonly line: number
+	readonly column: number
+}
+
+export type PageLocation = { readonly kind: "page"; readonly file?: string; readonly viewport: Viewport }
+
+export type FindingLocation = ElementLocation | SourceLocation | PageLocation
+
+export type Finding = {
+	readonly ruleId: string
+	readonly name: string
+	readonly category: RuleCategory
+	readonly severity: Severity
+	readonly message: string
+	readonly fixHint: string
+	readonly location: FindingLocation
+	readonly snippet: string
+}
+
+export type Viewport = { readonly width: number; readonly height: number }
+
+/** Computed style values, keyed by CSS property name (kebab-case), as getComputedStyle reports them. */
+export type ComputedStyle = Readonly<Record<string, string>>
+
+export type PseudoSnapshot = { readonly style: ComputedStyle; readonly rect: Rect | null }
+
+export type ElementSnapshot = {
+	readonly index: number
+	readonly parent: number | null
+	readonly children: readonly number[]
+	readonly tag: string
+	readonly selector: string
+	readonly attributes: Readonly<Record<string, string>>
+	readonly rect: Rect
+	/** Text of this element's own direct text nodes, whitespace-collapsed. */
+	readonly ownText: string
+	/** Each non-empty direct text node of this element, trimmed and whitespace-collapsed, in document order. */
+	readonly textRuns: readonly string[]
+	/** Full text content, whitespace-collapsed, capped at 2000 characters. */
+	readonly text: string
+	/** Rendered line boxes of the element's own text nodes, top-down. */
+	readonly lineRects: readonly Rect[]
+	readonly style: ComputedStyle
+	readonly before: PseudoSnapshot | null
+	readonly after: PseudoSnapshot | null
+	readonly scroll: { readonly scrollWidth: number; readonly clientWidth: number; readonly scrollHeight: number; readonly clientHeight: number }
+	/** CSS properties a running animation or transition on this element is moving at capture time (kebab-case, deduplicated). */
+	readonly motion: readonly string[]
+	/** True when the element is in the top layer as a modal (matches `:modal`: a modal dialog or a fullscreen element). */
+	readonly modal: boolean
+	/** Computed `::placeholder` style of an input or textarea while it shows its placeholder (`:placeholder-shown`); null otherwise. */
+	readonly placeholder: PseudoSnapshot | null
+}
+
+export type PageSnapshot = {
+	readonly viewport: Viewport
+	readonly url: string
+	readonly title: string
+	readonly lang: string
+	readonly document: { readonly scrollWidth: number; readonly clientWidth: number; readonly scrollHeight: number }
+	readonly elements: readonly ElementSnapshot[]
+	/** Text of every same-origin stylesheet, in document order (for @keyframes, @font-face, raw declarations). */
+	readonly cssText: readonly string[]
+	/** Errors thrown by page scripts while the snapshot was taken. */
+	readonly scriptErrors: readonly string[]
+	/** False when the renderer could not install the error probe before page scripts (WebKit on an http(s) URL), so scriptErrors is not evidence of a clean load. */
+	readonly scriptErrorsCaptured: boolean
+}
+
+export type SourceFile = { readonly path: string; readonly text: string }
+
+export type DetectConfig = {
+	/** Per-rule override: a severity, or "off". */
+	readonly rules?: Readonly<Record<string, RuleSetting>>
+	/** Typefaces the project chose on purpose; never reported as overused. Case-insensitive family names. */
+	readonly allowFonts?: readonly string[]
+	/** Timing functions the project's design tokens name on purpose (for example an intentional spring). */
+	readonly allowEasings?: readonly string[]
+	/** The project's design-system tokens; the design-system-* rules report values outside them and stay silent without them. */
+	readonly designTokens?: DesignTokens
+}
+
+export type DesignTokens = {
+	readonly fonts?: readonly string[]
+	/** CSS colors (any form parseColor accepts). */
+	readonly colors?: readonly string[]
+	/** Border radii in px. */
+	readonly radii?: readonly number[]
+	/** Font sizes in px. */
+	readonly fontSizes?: readonly number[]
+}