lazycodex-ai 5.1.35 → 5.1.38

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/lint.ts

@@ -0,0 +1,110 @@
+import { type CssRule, type Declaration, parseCss } from "./css-parse"
+import { ALL_CORNERS, type Corner, hasEdgeStripe, hasInsetShadowStripe, hasRadius, isPseudoBar, roundedCorners } from "./declarations"
+import { type Finding, lineLocator, type RuleId } from "./findings"
+import { hasGradientEdgeBand } from "./gradient"
+import { classGroups, cssTemplates, inlineStyles, styleBlocks } from "./markup"
+import { type Compound, compoundCovers, isExemptSelector, parseCompound, selectorParts } from "./selector"
+import { checkClassSet } from "./tailwind"
+
+export type SourceFile = { readonly path: string; readonly text: string }
+
+const STYLESHEET = /\.(?:css|scss|less|pcss|postcss)$/i
+const SCRIPT = /\.(?:[cm]?[jt]sx?)$/i
+
+function cssRulesOf(file: SourceFile): CssRule[] {
+	if (STYLESHEET.test(file.path)) return parseCss(file.text, 0, !/\.css$/i.test(file.path))
+	const blocks = SCRIPT.test(file.path) ? cssTemplates(file.text) : styleBlocks(file.text)
+	return blocks.flatMap((b) => parseCss(b.css, b.offset, true))
+}
+
+function ruleHasRadius(rule: CssRule): boolean {
+	return hasRadius(rule.declarations) || rule.applyClasses.some((c) => /^rounded(?:-|$)/.test(c) && !/none$/.test(c))
+}
+
+function radiusIndex(rules: readonly CssRule[]): Compound[] {
+	return rules.filter(ruleHasRadius).flatMap((r) => selectorParts(r.selector).map(parseCompound))
+}
+
+const NO_CORNERS: ReadonlySet<Corner> = new Set()
+
+function hostCorners(part: string, rule: CssRule, index: readonly Compound[]): ReadonlySet<Corner> {
+	if (!parseCompound(part).pseudoElement) {
+		if (hasRadius(rule.declarations)) return roundedCorners(rule.declarations)
+		if (ruleHasRadius(rule)) return ALL_CORNERS
+	}
+	const host = parseCompound(part.replace(/::?(before|after)\b/gi, ""))
+	return index.some((general) => compoundCovers(general, host)) ? ALL_CORNERS : NO_CORNERS
+}
+
+const EDGE_PROP = /^border(?:-(?:top|right|bottom|left|block|inline|width|color|image)(?:-[\w-]+)?)?$/
+const BACKGROUND_PROP = /^background(?:-color|-image)?$/
+
+function declarationOffset(declarations: readonly Declaration[], prop: RegExp, fallback: number): number {
+	return declarations.find((d) => prop.test(d.prop) && !d.prop.endsWith("radius"))?.offset ?? fallback
+}
+
+type Hit = { readonly id: RuleId; readonly offset: number }
+
+function declarationHits(declarations: readonly Declaration[], corners: ReadonlySet<Corner>, fallback: number): Hit[] {
+	const hits: Hit[] = []
+	if (hasEdgeStripe(declarations, corners)) hits.push({ id: "edge-stripe", offset: declarationOffset(declarations, EDGE_PROP, fallback) })
+	if (hasInsetShadowStripe(declarations)) hits.push({ id: "inset-shadow-stripe", offset: declarationOffset(declarations, /^box-shadow$/, fallback) })
+	if (hasGradientEdgeBand(declarations)) hits.push({ id: "gradient-stripe", offset: declarationOffset(declarations, BACKGROUND_PROP, fallback) })
+	return hits
+}
+
+function checkRule(rule: CssRule, index: readonly Compound[]): Hit[] {
+	const found = new Map<RuleId, number>()
+	const add = (hit: Hit) => found.set(hit.id, found.get(hit.id) ?? hit.offset)
+	for (const part of selectorParts(rule.selector)) {
+		const corners = isExemptSelector(part) ? NO_CORNERS : hostCorners(part, rule, index)
+		if (corners.size === 0) continue
+		if (parseCompound(part).pseudoElement) {
+			if (isPseudoBar(rule.declarations)) add({ id: "pseudo-bar", offset: declarationOffset(rule.declarations, BACKGROUND_PROP, rule.offset) })
+			continue
+		}
+		declarationHits(rule.declarations, corners, rule.offset).forEach(add)
+		const ownRounding = rule.applyClasses.some((c) => c.startsWith("rounded"))
+		for (const id of checkClassSet(ownRounding ? rule.applyClasses : ["rounded", ...rule.applyClasses])) {
+			add({ id, offset: rule.applyOffset ?? rule.offset })
+		}
+	}
+	return [...found].map(([id, offset]) => ({ id, offset }))
+}
+
+function excerptAt(text: string, offset: number): string {
+	const lineStart = text.lastIndexOf("\n", offset - 1) + 1
+	const lineEnd = text.indexOf("\n", offset)
+	return text.slice(lineStart, lineEnd < 0 ? undefined : lineEnd).trim().slice(0, 140)
+}
+
+export function lintFiles(files: readonly SourceFile[]): Finding[] {
+	const rulesByFile = new Map(files.map((f) => [f.path, cssRulesOf(f)]))
+	const index = radiusIndex([...rulesByFile.values()].flat())
+	const findings: Finding[] = []
+	for (const file of files) {
+		const locate = lineLocator(file.text)
+		const seen = new Set<string>()
+		const report = (offset: number, rule: RuleId) => {
+			const at = locate(offset)
+			const key = `${at.line}:${rule}`
+			if (seen.has(key)) return
+			seen.add(key)
+			findings.push({ file: file.path, ...at, rule, excerpt: excerptAt(file.text, offset) })
+		}
+		for (const rule of rulesByFile.get(file.path) ?? []) {
+			for (const hit of checkRule(rule, index)) report(hit.offset, hit.id)
+		}
+		if (STYLESHEET.test(file.path)) continue
+		for (const group of classGroups(file.text, SCRIPT.test(file.path))) {
+			for (const id of checkClassSet(group.tokens)) report(group.offset, id)
+		}
+		for (const style of inlineStyles(file.text)) {
+			const own = roundedCorners(style.declarations)
+			const corners = own.size > 0 ? own : style.tagRounded ? ALL_CORNERS : NO_CORNERS
+			if (corners.size === 0) continue
+			for (const hit of declarationHits(style.declarations, corners, style.offset)) report(style.offset, hit.id)
+		}
+	}
+	return findings.sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line || a.column - b.column)
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/markup.ts

@@ -0,0 +1,148 @@
+import type { Declaration } from "./css-parse"
+import { looksLikeClassList } from "./tailwind"
+
+export type ClassGroup = { readonly tokens: readonly string[]; readonly offset: number }
+export type InlineStyle = { readonly declarations: readonly Declaration[]; readonly offset: number; readonly tagRounded: boolean }
+export type StyleBlock = { readonly css: string; readonly offset: number }
+
+const UNITLESS = new Set(["opacity", "z-index", "flex", "flex-grow", "flex-shrink", "font-weight", "line-height", "order"])
+const ROUNDED_CLASS = /(?:^|[\s"'`:])rounded(?:-(?!none\b)[\w[\]./-]+)?(?=[\s"'`]|$)/
+
+export function styleBlocks(text: string): StyleBlock[] {
+	return [...text.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => ({
+		css: m[1] ?? "",
+		offset: (m.index ?? 0) + m[0].indexOf(">") + 1,
+	}))
+}
+
+const CSS_TEMPLATE_TAG = /(?:\bstyled(?:\.\w+|\([^()]*\))(?:\.attrs\([^)]*\))?|\bcss|\bcreateGlobalStyle|\binjectGlobal|<style[^>]*>\s*\{)\s*$/
+const CSS_TEMPLATE_HOST = ".css-in-js-host"
+
+function blankInterpolations(body: string): string {
+	let out = ""
+	let depth = 0
+	for (let i = 0; i < body.length; i += 1) {
+		const ch = body.charAt(i)
+		if (depth === 0 && ch === "$" && body.charAt(i + 1) === "{") {
+			depth = 1
+			out += "  "
+			i += 1
+		} else if (depth > 0) {
+			if (ch === "{") depth += 1
+			else if (ch === "}") depth -= 1
+			out += ch === "\n" ? "\n" : " "
+		} else out += ch
+	}
+	return out
+}
+
+export function cssTemplates(text: string): StyleBlock[] {
+	const blocks: StyleBlock[] = []
+	for (const m of text.matchAll(/`((?:\\.|[^`\\])*)`/g)) {
+		const start = m.index ?? 0
+		if (!CSS_TEMPLATE_TAG.test(text.slice(Math.max(0, start - 120), start))) continue
+		const prefix = `${CSS_TEMPLATE_HOST}{`
+		blocks.push({ css: `${prefix}${blankInterpolations(m[1] ?? "")}}`, offset: start + 1 - prefix.length })
+	}
+	return blocks
+}
+
+function stripInterpolation(literal: string): string {
+	return literal.replace(/\$\{[^}]*\}/g, " ")
+}
+
+function tokensOf(text: string): string[] {
+	return text.split(/\s+/).filter(Boolean)
+}
+
+function readBalanced(text: string, start: number): { end: number; literals: string[] } {
+	const literals: string[] = []
+	let depth = 0
+	for (let i = start; i < text.length; i += 1) {
+		const ch = text.charAt(i)
+		if (ch === '"' || ch === "'" || ch === "`") {
+			const close = text.indexOf(ch, i + 1)
+			if (close < 0) return { end: text.length, literals }
+			literals.push(stripInterpolation(text.slice(i + 1, close)))
+			i = close
+		} else if (ch === "{") depth += 1
+		else if (ch === "}") {
+			depth -= 1
+			if (depth === 0) return { end: i + 1, literals }
+		}
+	}
+	return { end: text.length, literals }
+}
+
+export function classGroups(text: string, scanLiterals: boolean): ClassGroup[] {
+	const groups: ClassGroup[] = []
+	const covered: Array<[number, number]> = []
+	for (const m of text.matchAll(/(?:^|[\s{(,])(?::class|class:list|className|class|tw)\s*=\s*/g)) {
+		const start = (m.index ?? 0) + m[0].length
+		const ch = text.charAt(start)
+		if (ch === '"' || ch === "'") {
+			const close = text.indexOf(ch, start + 1)
+			if (close < 0) continue
+			groups.push({ tokens: tokensOf(text.slice(start + 1, close)), offset: start })
+			covered.push([start, close])
+		} else if (ch === "{") {
+			const { end, literals } = readBalanced(text, start)
+			groups.push({ tokens: literals.flatMap(tokensOf), offset: start })
+			covered.push([start, end])
+		}
+	}
+	if (!scanLiterals) return groups
+	for (const m of text.matchAll(/(["'`])((?:\\.|(?!\1)[^\\\n])*)\1/g)) {
+		const offset = m.index ?? 0
+		if (covered.some(([a, b]) => offset >= a && offset <= b)) continue
+		const body = stripInterpolation(m[2] ?? "")
+		if (looksLikeClassList(body)) groups.push({ tokens: tokensOf(body), offset })
+	}
+	return groups
+}
+
+function kebab(key: string): string {
+	return key.replace(/^["']|["']$/g, "").replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)
+}
+
+function objectDeclarations(source: string): Declaration[] {
+	const pattern = /([A-Za-z]+|"[\w-]+"|'[\w-]+')\s*:\s*("[^"]*"|'[^']*'|`[^`$]*`|-?\d+(?:\.\d+)?)/g
+	return [...source.matchAll(pattern)].map((m) => {
+		const prop = kebab(m[1] ?? "")
+		const raw = m[2] ?? ""
+		const numeric = /^-?\d/.test(raw)
+		const value = numeric ? (UNITLESS.has(prop) ? raw : `${raw}px`) : raw.slice(1, -1)
+		return { prop, value }
+	})
+}
+
+function cssDeclarations(source: string): Declaration[] {
+	return source
+		.split(";")
+		.map((d) => d.split(/:(.*)/s))
+		.filter((p): p is [string, string, ...string[]] => p.length >= 2 && Boolean(p[0]?.trim()))
+		.map(([prop, value]) => ({ prop: prop.trim().toLowerCase(), value: value.trim() }))
+}
+
+function tagIsRounded(text: string, offset: number, end: number): boolean {
+	const open = text.lastIndexOf("<", offset)
+	const close = text.indexOf(">", end)
+	if (open < 0) return false
+	return ROUNDED_CLASS.test(text.slice(open, close < 0 ? end : close))
+}
+
+export function inlineStyles(text: string): InlineStyle[] {
+	const styles: InlineStyle[] = []
+	for (const m of text.matchAll(/\bstyle\s*=\s*\{\{([\s\S]*?)\}\}/g)) {
+		const offset = m.index ?? 0
+		const end = offset + m[0].length
+		styles.push({ declarations: objectDeclarations(m[1] ?? ""), offset, tagRounded: tagIsRounded(text, offset, end) })
+	}
+	for (const m of text.matchAll(/\bstyle\s*=\s*(["'])([\s\S]*?)\1/g)) {
+		const offset = m.index ?? 0
+		const body = (m[2] ?? "").trim()
+		const declarations = body.startsWith("{") ? objectDeclarations(body) : cssDeclarations(body)
+		styles.push({ declarations, offset, tagRounded: tagIsRounded(text, offset, offset + m[0].length) })
+	}
+	return styles
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/selector.ts

@@ -0,0 +1,46 @@
+import { splitTopLevel } from "./css-parse"
+
+export type Compound = {
+	readonly tag: string
+	readonly classes: readonly string[]
+	readonly ids: readonly string[]
+	readonly pseudoElement: boolean
+}
+
+const EXEMPT_STATE = /:(focus-visible|invalid|user-invalid)\b|\[aria-invalid|\.(is-invalid|has-error|was-validated)\b/i
+const EXEMPT_TAGS = new Set(["table", "thead", "tbody", "tfoot", "tr", "th", "td", "hr", "input", "select", "textarea"])
+
+function lastCompound(part: string): string {
+	const pieces = part.replace(/[>+~]/g, " ").split(/\s+(?![^[(]*[\])])/).filter(Boolean)
+	return pieces[pieces.length - 1] ?? ""
+}
+
+export function parseCompound(part: string): Compound {
+	const raw = lastCompound(part)
+	const pseudoElement = /::?(before|after)\b/i.test(raw)
+	const bare = raw.replace(/::?[\w-]+(\([^)]*\))?/g, "").replace(/\[[^\]]*\]/g, "")
+	return {
+		tag: (/^[a-z][\w-]*/i.exec(bare)?.[0] ?? "").toLowerCase(),
+		classes: [...bare.matchAll(/\.([\w-]+)/g)].map((m) => m[1] ?? ""),
+		ids: [...bare.matchAll(/#([\w-]+)/g)].map((m) => m[1] ?? ""),
+		pseudoElement,
+	}
+}
+
+export function isExemptSelector(part: string): boolean {
+	if (EXEMPT_STATE.test(part)) return true
+	return EXEMPT_TAGS.has(parseCompound(part).tag)
+}
+
+export function selectorParts(selector: string): string[] {
+	return splitTopLevel(selector, ",")
+}
+
+export function compoundCovers(general: Compound, specific: Compound): boolean {
+	if (general.pseudoElement) return false
+	if (general.classes.length + general.ids.length === 0 && !general.tag) return false
+	if (general.tag && general.tag !== specific.tag) return false
+	return (
+		general.classes.every((c) => specific.classes.includes(c)) && general.ids.every((id) => specific.ids.includes(id))
+	)
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/accent-stripes/tailwind.ts

@@ -0,0 +1,117 @@
+import { classifyUtilityColor } from "./color"
+import { type Corner, isInsetShadowStripe, MAX_BAR_PX, MIN_STRIPE_PX, parseLength } from "./declarations"
+import type { RuleId } from "./findings"
+
+const EXEMPT_VARIANT = /^(?:[\w-]+-)?(focus-visible|invalid|user-invalid|aria-invalid|aria-\[invalid[^\]]*\])$/
+const BORDER_STYLE = new Set(["solid", "dashed", "dotted", "double", "hidden", "none"])
+const SPACING_PX: Readonly<Record<string, number>> = { px: 1, "0.5": 2, "1": 4, "1.5": 6, "2": 8 }
+
+type Utility = { readonly util: string; readonly layer: "base" | "before" | "after" }
+
+function splitVariants(token: string): string[] {
+	const parts: string[] = []
+	let depth = 0
+	let current = ""
+	for (const ch of token) {
+		if (ch === "[") depth += 1
+		if (ch === "]") depth -= 1
+		if (ch === ":" && depth === 0) {
+			parts.push(current)
+			current = ""
+		} else current += ch
+	}
+	parts.push(current)
+	return parts
+}
+
+function toUtility(token: string): Utility | undefined {
+	const parts = splitVariants(token.trim())
+	const util = (parts.pop() ?? "").replace(/^!|!$/g, "").replace(/^-/, "")
+	if (!util || parts.some((v) => EXEMPT_VARIANT.test(v))) return undefined
+	const layer = parts.includes("before") ? "before" : parts.includes("after") ? "after" : "base"
+	return { util, layer }
+}
+
+function arbitraryPx(value: string): number | undefined {
+	return value.startsWith("[") && value.endsWith("]") ? parseLength(value.slice(1, -1)) : undefined
+}
+
+const SIDE_TOUCHES: Readonly<Record<string, readonly Corner[]>> = {
+	t: ["tl", "tr"], r: ["tr", "br"], b: ["br", "bl"], l: ["tl", "bl"], s: ["tl", "bl"], e: ["tr", "br"],
+	x: ["tl", "tr", "br", "bl"], y: ["tl", "tr", "br", "bl"], bs: ["tl", "tr"], be: ["br", "bl"],
+	tl: ["tl"], tr: ["tr"], br: ["br"], bl: ["bl"], ss: ["tl"], se: ["tr"], ee: ["br"], es: ["bl"],
+}
+const ALL: readonly Corner[] = ["tl", "tr", "br", "bl"]
+
+function wideSideCorners(util: string): readonly Corner[] {
+	const m = /^border-([tlrbsexy]|bs|be)-(\d+|\[[^\]]+\])$/.exec(util)
+	if (!m?.[1] || !m[2]) return []
+	const width = /^\d+$/.test(m[2]) ? Number.parseInt(m[2], 10) : arbitraryPx(m[2])
+	return (width ?? 0) >= MIN_STRIPE_PX ? (SIDE_TOUCHES[m[1]] ?? []) : []
+}
+
+function roundedCorners(utils: readonly string[]): Set<Corner> {
+	const corners = new Set<Corner>()
+	for (const util of utils) {
+		const m = /^rounded(?:-(tl|tr|br|bl|ss|se|ee|es|[trblse]))?(?:-(.+))?$/.exec(util)
+		if (!m) continue
+		const touched = m[1] ? (SIDE_TOUCHES[m[1]] ?? []) : ALL
+		const off = m[2] === "none" || m[2] === "0" || m[2] === "[0]" || m[2] === "[0px]"
+		for (const c of touched) {
+			if (off) corners.delete(c)
+			else corners.add(c)
+		}
+	}
+	return corners
+}
+
+function borderColorIsChromatic(util: string): boolean {
+	const m = /^border(?:-(?:[tlrbsexy]|bs|be))?-(.+)$/.exec(util)
+	const fragment = m?.[1]
+	if (!fragment || BORDER_STYLE.has(fragment) || /^\d+$/.test(fragment)) return false
+	if (fragment.startsWith("[") && arbitraryPx(fragment) !== undefined) return false
+	return classifyUtilityColor(fragment) === "chromatic"
+}
+
+function thinBar(utils: readonly string[], axis: "w" | "h"): boolean {
+	return utils.some((u) => {
+		const m = new RegExp(`^${axis}-(px|0\\.5|1|1\\.5|2|\\[[^\\]]+\\])$`).exec(u)
+		if (!m?.[1]) return false
+		const px = SPACING_PX[m[1]] ?? arbitraryPx(m[1])
+		return px !== undefined && px > 0 && px <= MAX_BAR_PX
+	})
+}
+
+function longBar(utils: readonly string[], axis: "w" | "h"): boolean {
+	const full = axis === "h" ? ["h-full", "inset-y-0", "inset-0"] : ["w-full", "inset-x-0", "inset-0"]
+	const pair = axis === "h" ? ["top-0", "bottom-0"] : ["left-0", "right-0"]
+	return utils.some((u) => full.includes(u)) || pair.every((p) => utils.includes(p))
+}
+
+function isPseudoBar(utils: readonly string[]): boolean {
+	const chromaticBg = utils.some((u) => u.startsWith("bg-") && classifyUtilityColor(u.slice(3)) === "chromatic")
+	return chromaticBg && ((thinBar(utils, "w") && longBar(utils, "h")) || (thinBar(utils, "h") && longBar(utils, "w")))
+}
+
+export function checkClassSet(tokens: readonly string[]): RuleId[] {
+	const utilities = tokens.map(toUtility).filter((u): u is Utility => u !== undefined)
+	const base = utilities.filter((u) => u.layer === "base").map((u) => u.util)
+	const corners = roundedCorners(base)
+	if (corners.size === 0) return []
+	const found: RuleId[] = []
+	const bent = base.some((u) => wideSideCorners(u).some((c) => corners.has(c)))
+	if (bent && base.some(borderColorIsChromatic)) found.push("edge-stripe")
+	const shadows = base.filter((u) => u.startsWith("shadow-[") && u.endsWith("]"))
+	if (shadows.some((u) => isInsetShadowStripe(u.slice("shadow-[".length, -1).replace(/_/g, " ")))) {
+		found.push("inset-shadow-stripe")
+	}
+	for (const layer of ["before", "after"] as const) {
+		const utils = utilities.filter((u) => u.layer === layer).map((u) => u.util)
+		if (isPseudoBar(utils) && !found.includes("pseudo-bar")) found.push("pseudo-bar")
+	}
+	return found
+}
+
+export function looksLikeClassList(text: string): boolean {
+	return /(?:^|\s)(?:[\w-]+:)*rounded/.test(text)
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/check-accent-stripes.ts

@@ -0,0 +1,50 @@
+#!/usr/bin/env bun
+// Flags the "coloured accent edge on a rounded card" slop tell in CSS, Tailwind and JSX.
+// Usage: bun check-accent-stripes.ts [--json] <file-or-dir>...   Exit 0 clean, 1 findings, 2 usage.
+import { readdirSync, readFileSync, statSync } from "node:fs"
+import { join } from "node:path"
+import { FIX_HINT, RULE_MESSAGES } from "./accent-stripes/findings"
+import { lintFiles, type SourceFile } from "./accent-stripes/lint"
+
+const SCANNED = /\.(?:css|scss|less|pcss|postcss|html?|[cm]?[jt]sx?|vue|svelte|astro)$/i
+const SKIPPED_DIRS = new Set([
+	"node_modules", ".git", "dist", "build", "out", ".next", ".nuxt", ".svelte-kit", ".astro",
+	".turbo", ".cache", "coverage", "vendor", ".vercel", ".output",
+])
+const MAX_BYTES = 1_000_000
+
+function collect(path: string, into: string[]): void {
+	const stat = statSync(path)
+	if (stat.isDirectory()) {
+		for (const entry of readdirSync(path)) {
+			if (!SKIPPED_DIRS.has(entry)) collect(join(path, entry), into)
+		}
+		return
+	}
+	const minified = /\.min\.[a-z]+$/i.test(path) || path.endsWith(".d.ts")
+	if (SCANNED.test(path) && !minified && stat.size <= MAX_BYTES) into.push(path)
+}
+
+function main(argv: readonly string[]): number {
+	const json = argv.includes("--json")
+	const targets = argv.filter((a) => a !== "--json")
+	if (targets.length === 0) {
+		process.stderr.write("usage: check-accent-stripes.ts [--json] <file-or-dir>...\n")
+		return 2
+	}
+	const paths: string[] = []
+	for (const target of targets) collect(target, paths)
+	const files: SourceFile[] = paths.map((path) => ({ path, text: readFileSync(path, "utf8") }))
+	const findings = lintFiles(files)
+	if (json) process.stdout.write(`${JSON.stringify(findings, null, 2)}\n`)
+	else {
+		for (const f of findings) {
+			process.stdout.write(`${f.file}:${f.line}:${f.column}  ${f.rule}  ${RULE_MESSAGES[f.rule]}\n    > ${f.excerpt}\n`)
+		}
+		const summary = findings.length === 0 ? "no accent stripes" : `${findings.length} accent stripe(s); ${FIX_HINT}`
+		process.stdout.write(`check-accent-stripes: ${paths.length} file(s), ${summary}\n`)
+	}
+	return findings.length === 0 ? 0 : 1
+}
+
+process.exitCode = main(process.argv.slice(2))

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/exempt-states.css

@@ -0,0 +1,4 @@
+.card:focus-visible { border-radius: 12px; border-left: 3px solid var(--accent); }
+input:invalid { border-radius: 6px; border-bottom: 2px solid #dc2626; }
+.field[aria-invalid="true"] { border-radius: 6px; border-bottom: 2px solid #dc2626; }
+table td.sorted { border-radius: 4px; border-left: 3px solid #3b82f6; }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/flat-stripe-side.tsx

@@ -0,0 +1,11 @@
+const css = `
+  .alert { border-left: 4px solid #dc2626; border-radius: 0 6px 6px 0; }
+`
+
+export const Quotes = () => (
+  <>
+    <blockquote className="rounded-r-lg border-l-4 border-blue-500 pl-4">Square on the stripe side</blockquote>
+    <aside className="rounded-xl rounded-l-none border-l-4 border-sky-500">Left corners squared</aside>
+    <style>{`.note { border-left: 4px solid #16a34a; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }`}</style>
+  </>
+)

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/full-surface-gradients.css

@@ -0,0 +1,34 @@
+.hero {
+  border-radius: 16px;
+  background: linear-gradient(135deg, #6366f1, #a855f7);
+}
+
+.fade {
+  border-radius: 12px;
+  background-image: linear-gradient(to bottom, rgba(99, 102, 241, 0.12), transparent 60%);
+}
+
+.uniform-image {
+  border-radius: 12px;
+  border: 2px solid;
+  border-image: linear-gradient(#6366f1, #a855f7) 1;
+}
+
+.soft-edge {
+  border-radius: 12px;
+  background: linear-gradient(to right, #6366f1 4px, #fff);
+}
+
+.two-tone {
+  border-radius: 12px;
+  background: linear-gradient(to right, #6366f1 40px, #fff 40px);
+}
+
+.grid-texture {
+  border-radius: 12px;
+  background:
+    linear-gradient(rgba(3, 158, 179, 0.4) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(3, 158, 179, 0.4) 1px, transparent 1px),
+    #0b1220;
+  background-size: 28px 28px, 28px 28px, auto;
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/inline-ok.tsx

@@ -0,0 +1,7 @@
+export const Ok = () => (
+  <>
+    <div style={{ borderRadius: 8, border: "1px solid #e5e7eb" }}>Card</div>
+    <div style={{ borderRadius: 8, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)" }}>Ring</div>
+    <p>Don't stripe {"rounded"} cards.</p>
+  </>
+)

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/neutral-and-flat.css

@@ -0,0 +1,6 @@
+.list-item { border-bottom: 1px solid #e5e7eb; }
+.panel { border-radius: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
+.quiet { border-radius: 12px; border-left: 4px solid #e5e7eb; }
+.section { border-top: 4px solid #6366f1; }
+.token { border-radius: 8px; border-left: 2px solid var(--color-border); }
+.ink { border-radius: 8px; border-left: 2px solid var(--text-primary); }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/pseudo-overlays.css

@@ -0,0 +1,3 @@
+.card { position: relative; border-radius: 16px; }
+.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#6366f1, #a855f7); opacity: 0.1; }
+.rule::after { content: ""; display: block; height: 1px; width: 100%; background: #e5e7eb; }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/tailwind-ok.tsx

@@ -0,0 +1,11 @@
+export const Ok = () => (
+  <div>
+    <div className="rounded-lg border border-zinc-200 p-4">Plain</div>
+    <div className="rounded-xl border-l-4 border-l-zinc-300 p-4">Neutral edge</div>
+    <button className="rounded-md focus-visible:ring-2 focus-visible:ring-blue-500">Go</button>
+    <input className="rounded-md border-b-2 aria-invalid:border-b-red-500 invalid:border-red-500" />
+    <div className="border-l-4 border-blue-500 pl-4">Flat quote, no corners</div>
+    <div className="rounded-none border-l-4 border-blue-500">Square</div>
+    <div className="rounded-lg bg-blue-50 p-4 text-blue-900">Tonal surface</div>
+  </div>
+)

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/uniform-and-rings.css

@@ -0,0 +1,3 @@
+.selected { border-radius: 8px; border: 2px solid #6366f1; }
+.chip { border-radius: 999px; box-shadow: inset 0 0 0 2px #6366f1; }
+.lift { border-radius: 12px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/negative/wide-blocks-and-hairlines.css

@@ -0,0 +1,3 @@
+.media-card { position: relative; border-radius: 16px; overflow: hidden; }
+.media-card::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 120px; background: #6366f1; }
+.subtle { border-radius: 8px; border-left: 1px solid #6366f1; }

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/apply.css

@@ -0,0 +1,3 @@
+.tile {
+  @apply rounded-xl border-l-4 border-sky-500 bg-white p-6;
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/border-top-card.css

@@ -0,0 +1,5 @@
+.feature-card {
+  padding: 24px;
+  border-radius: 12px;
+  border-top: 4px solid #6366f1;
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/cva-variant.ts

@@ -0,0 +1 @@
+export const card = cva("rounded-xl bg-white p-6 border-l-4 border-rose-500")

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/gradient-edges.css

@@ -0,0 +1,26 @@
+.hard-stop {
+  border-radius: 12px;
+  background: linear-gradient(to right, #6366f1 4px, #fff 4px);
+}
+
+.image-border {
+  border-radius: 12px;
+  border-left: 4px solid;
+  border-image: linear-gradient(#6366f1, #a855f7) 1;
+}
+
+.glow { position: relative; border-radius: 12px; }
+.glow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 3px;
+  background: linear-gradient(to bottom, #6366f1, #a855f7);
+}
+
+.end-band {
+  border-radius: 12px;
+  background-image: linear-gradient(to right, #fff calc(100% - 4px), #f43f5e calc(100% - 4px));
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/inline-styles.tsx

@@ -0,0 +1,6 @@
+export const Tip = () => (
+  <>
+    <div style={{ borderRadius: 12, borderLeft: "4px solid #ef4444" }}>Careful</div>
+    <div className="rounded-lg" style={{ borderTop: '3px solid var(--brand)' }}>New</div>
+  </>
+)

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/inset-shadow.css

@@ -0,0 +1,4 @@
+.note {
+  border-radius: 8px;
+  box-shadow: inset 4px 0 0 0 oklch(0.65 0.2 250), 0 1px 2px rgb(0 0 0 / 0.06);
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/non-visible-focus-and-nested.tsx

@@ -0,0 +1,6 @@
+const css = css`
+  .card:focus-within { border-radius: 12px; border-left: 3px solid #6366f1; }
+  td .promo-card { border-radius: 8px; border-left: 4px solid #f43f5e; }
+`
+
+export const Focused = () => <div className="rounded-xl focus:border-l-4 focus:border-indigo-500">Card</div>

package/packages/omo-codex/plugin/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/pseudo-bar.css

@@ -0,0 +1,13 @@
+.stat {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.stat::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: #10b981;
+}