lazycodex-ai 5.1.35 → 5.1.38

package/packages/omo-codex/plugin/skills/browser/runtime/omowright/manifest.json

@@ -2,8 +2,8 @@
   "version": "0.0.1",
   "sourceDigest": "646863e33d2a1af1fdd3651ee157ada9ba24337e82430edef94342774c80f0f6",
   "files": {
-    "index.js": "f577c49fe18bcc78293e136e112a83861e86cca5d908ebceaaec524dff8b8ccc",
+    "index.js": "d67d3a847fe0bbc43e824feded48b280890d31879538309e671cd5f671133995",
     "page-bundle.js": "bfd51e8383cf47200d57387bbbed258bce5a3a3d00c38fc108034d2888e23f0c"
   },
-  "stagedAtUtc": "2026-10-17T03:46:57.473Z"
+  "stagedAtUtc": "2026-10-19T10:08:12.859Z"
 }

package/packages/omo-codex/plugin/skills/frontend/SKILL.md

@@ -25,6 +25,13 @@ This file is a router, not a rulebook. The rules live in four rulesets under `re
 
 **For implementation work, design + perfection load together.** Beauty with a 2 MB bundle fails; Lighthouse 100 that looks like AI slop fails. Both win or neither does.
 
+## Draft guard — read before the first line of UI
+
+Some tells regenerate by default, so they are kept out of the first draft rather than left for QA to find.
+
+- **No coloured edge on a rounded surface, decorative or state.** A card, callout, stat tile, testimonial, alert, or list row never carries a coloured stripe on one side: `border-top: 4px solid <accent>` or `border-l-4 border-indigo-500` on a rounded box, a coloured `::before`/`::after` bar inside one, an inset `box-shadow` stripe, or a hard-stop gradient band or gradient `border-image` along one edge. The radius bends the stripe around the corner, and the result reads as generated whether the stripe decorates the card or marks it selected, focused, or active. Give the card its identity another way: a tonal surface (one ink at a low alpha, or the next step of the surface ramp), an eyebrow or heading set in the accent ink, a leading glyph, or more space between groups. Encode state with one ink at many alphas (hover/selected/active washes), a check glyph for selection, and tonal layering for focus. The coloured edges that stay allowed: keyboard `focus-visible` rings, validation states on form inputs, neutral 1px hairlines and dividers, and table rules. This covers pre-existing instances on any surface you touch.
+- **Lint before visual QA.** Run `bun $SKILL_DIR/scripts/perfection/check-accent-stripes.ts <changed files or dirs>` on every stylesheet and component you wrote. It reads CSS/SCSS/Less, HTML, JSX/TSX, Vue, Svelte, Astro, Tailwind classes (including `@apply` and `cva`/`cn` strings), inline styles, and styled-components. Exit 1 means a stripe is in the draft: remove the stripe, do not argue with the finding.
+
 ## Design System and Component Workflow
 
 Every implementation must choose one of these branches before UI code changes:
@@ -138,7 +145,7 @@ Domains: `product` `style` `typography` `color` `landing` `chart` `ux` `react` `
 - **Concrete reference = contract.** When a screenshot, mockup, or annotated reference exists, match its pixels, copy, component structure, and responsive intent unless the user accepts a deviation.
 - **Never weaken UX OR flatten the surface to buy points.** No dropping animations, hiding content, simplifying interactions, or replacing rendered/lit material with flat fills and flat geometric primitives for a Lighthouse score or a deadline. Hit 100 AND keep the surface dimensional — both, or neither.
 - **No emojis as icons.** SVG icon sets only (Lucide, Heroicons, Radix, Phosphor).
-- **No coloured accent borders on rounded surfaces.** A `border-l-2 border-primary` stripe on a selected row, a primary-tinted outline on a focused card — any `border-{side}-{primary|warning|destructive|success}` or accent-width rule used to mark selected/focused/active is the most recognizable AI-slop tell in shipped UI. Encode state the way `DESIGN.md` systems do: one ink at many alphas (hover/selected/active wash ramps), a glyph (check) for selection, tonal layering for focus. Keyboard `focus-visible` rings are the only coloured edge allowed. Applies to code you write AND to pre-existing instances on any surface you touch — sweep them out.
+- **No coloured edges on rounded surfaces.** A decorative accent stripe on a card and a `border-l-2 border-primary` stripe on a selected row are the same tell, and so is a primary-tinted outline on a focused card. The Draft guard above carries the replacements and the allowed exceptions; `check-accent-stripes.ts` must exit 0 before `/visual-qa`. Applies to code you write AND to pre-existing instances on any surface you touch — sweep them out.
 - **GPU-composited animation only** — `transform`, `opacity`, `filter`; never animate layout properties.
 - **Slop animation is forbidden — motion serves meaning.** Every animation or hover must map to a real interaction, state change, or affordance. A hover that changes nothing, motion on a non-interactive element, or a decorative micro-animation with no informational purpose is slop — do not add it.
 - **Done is the `/visual-qa` gate, not your own glance.** A frontend design task is verified through `/visual-qa` - its HIG-based checklist, its capture matrix (every page and every sibling surface, phone and desktop, light and dark, scrolled-end, motion driven and inspected) and its dual-oracle completion gate on fresh evidence. This skill does not keep its own list of visual checks; the verifier owns it.

package/packages/omo-codex/plugin/skills/frontend/references/design/README.md

@@ -202,7 +202,7 @@ Triggers: an animated, shader, particle, or grid background; a hero that must fe
 ## Anti-patterns — do not do these
 
 - **Don't load nothing and just freestyle.** That produces the exact "generic AI SaaS slop" — purple-blue gradient backgrounds, rounded-2xl-on-everything, three feature cards in a grid, generic Inter font, lorem ipsum. The skills exist precisely to prevent this.
-- **Don't mark state with a coloured accent border.** `border-l-2 border-primary` on the selected row, a primary outline on the focused card — on a rounded surface that is the generic AI tell. State is ink-alpha washes, a glyph for selection, tonal layering for focus; `focus-visible` rings are the only coloured edge. Includes pre-existing instances on surfaces you touch.
+- **Don't put a coloured edge on a rounded surface, for decoration or for state.** A feature card with `border-top: 4px solid` accent, a callout with `border-l-4 border-indigo-500`, a stat tile with a coloured `::before` bar, `border-l-2 border-primary` on the selected row, a primary outline on the focused card: the radius bends the stripe and the result is the generic AI tell. Identity comes from a tonal surface, an eyebrow or heading in the accent ink, a glyph, or spacing; state is ink-alpha washes, a glyph for selection, tonal layering for focus. `focus-visible` rings, input validation states, neutral hairlines, and table rules are the only coloured or ruled edges allowed. Includes pre-existing instances on surfaces you touch.
 - **Don't ignore the user's named brand.** If they say "Linear-style" and you build something that doesn't match Linear's actual aesthetic (purple, ultra-tight spacing, mono accents, etc.), you have failed the routing.
 - **Don't apply a Layer B brand verbatim if the project is not that brand.** The DESIGN.md captures *inspiration* — extract the tokens (palette, type scale, component patterns) and apply them to the project's own content. Do not copy logos or trademarked imagery.
 - **Don't use imagegen skills to write code.** They are explicitly image-only. The agent has been observed trying to "describe" the image as React code — that is the wrong skill, switch to `image-to-code-skill.md` instead.
@@ -221,7 +221,8 @@ Once references are loaded, before writing any UI code:
 7. **Match the project's existing patterns FIRST.** If the codebase already uses CSS Modules, don't introduce Tailwind. If it uses styled-components, don't introduce CSS-in-JS variants. The references guide *style*, not *infrastructure*.
 8. **All tokens trace back to `DESIGN.md`.** No orphan hex codes, no magic px values. If you need a new token, update `DESIGN.md` first.
 9. **New reusable patterns (used 2+ times) get documented back into `DESIGN.md` Section 5.**
-10. **No generic-default drift (expressive briefs).** The shipped CSS must use the `DESIGN.md` material, not the model's priors. Load the declared fonts (do not silently fall back to Inter or system fonts), build elevated surfaces from the declared multi-layer recipe (not a lone `backdrop-filter: blur`), and color from the ramp stops (not one tint at varied opacity). Grep your styles before QA: finding `Inter`, a single blur on "glass", one brand hex reused everywhere, or a coloured accent border marking selected/focused state (`border-l-2 border-primary` et al) means you regressed to priors — fix it before declaring done.
+10. **No generic-default drift (expressive briefs).** The shipped CSS must use the `DESIGN.md` material, not the model's priors. Load the declared fonts (do not silently fall back to Inter or system fonts), build elevated surfaces from the declared multi-layer recipe (not a lone `backdrop-filter: blur`), and color from the ramp stops (not one tint at varied opacity). Grep your styles before QA: finding `Inter`, a single blur on "glass", or one brand hex reused everywhere means you regressed to priors — fix it before declaring done.
+11. **No coloured edge stripes.** Run `bun ../../scripts/perfection/check-accent-stripes.ts <changed files or dirs>` (from this directory; `$SKILL_DIR/scripts/perfection/check-accent-stripes.ts` from anywhere). It must exit 0 before Phase Final; every finding is a decorative or state stripe on a rounded surface to replace, per the anti-pattern above.
 
 ## Quick lookup table — most common requests
 

package/packages/omo-codex/plugin/skills/frontend/references/perfection/README.md

@@ -67,7 +67,7 @@ During the audit loop, after Lighthouse scores pass, run a Design System Complia
 - **Spacing**: every margin/padding/gap value must be a multiple of the base unit (4px) and ideally use a declared token.
 - **Components**: any component used 2+ times must be documented in `DESIGN.md` Section 5. If it isn't, add it.
 - **Depth**: if `DESIGN.md` says "borders-only", there must be zero `box-shadow` declarations. If "tonal-shift", zero borders for surface separation.
-- **State borders**: grep for `border(-[trbl])?-(primary|warning|destructive|success)` and accent-width rules (`border-l-2`, `border-l-4`…) used to mark selected/focused/active. Each hit is a violation — state belongs to ink-alpha washes and glyphs. Keyboard `focus-visible` rings are exempt.
+- **Accent stripes**: run `bun ../../scripts/perfection/check-accent-stripes.ts <src dirs>`. It flags a coloured one-side border (including a gradient `border-image`), a coloured `::before`/`::after` bar, an inset `box-shadow` stripe, or a hard-stop gradient band along one edge of a rounded surface, in CSS, Tailwind, inline styles, and styled-components, whether the stripe is decorative or marks selected/focused/active. Each finding is a violation — identity belongs to tonal surfaces, headings, glyphs, and spacing; state belongs to ink-alpha washes and glyphs. Keyboard `focus-visible` rings, input validation states, neutral hairlines, and table rules are exempt, and the script already skips them.
 
 A page that scores Lighthouse 100 but uses 14 undeclared hex codes and 8 magic spacing values is **NOT DONE**. The design system is the architecture — Lighthouse measures the performance of that architecture.
 
@@ -92,6 +92,7 @@ Quick audit via the cross-platform Python CLI (macOS, Linux, Windows):
 uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000
 uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 --threshold 95
 uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 --desktop-only
+bun $SKILL_DIR/scripts/perfection/check-accent-stripes.ts src/   # exit 1 = coloured edge stripe on a rounded surface
 ```
 
 Or use the TypeScript approach directly in your test suite:

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

@@ -0,0 +1,132 @@
+// Colour classification for the accent-stripe linter.
+// "chromatic" = an accent hue the stripe tell is made of; "neutral" = greys,
+// inks, hairline tokens; "unknown" = cannot tell, so never flagged (low false positives).
+
+export type ColorClass = "chromatic" | "neutral" | "unknown"
+
+const HUES = [
+	"red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan",
+	"sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose",
+]
+const STATUS_WORDS = [
+	"accent", "brand", "destructive", "danger", "error", "warning", "warn", "success",
+	"info", "alert", "highlight", "positive", "negative", "critical", "attention", "tint",
+]
+const NEUTRAL_WORDS = [
+	"slate", "gray", "grey", "zinc", "neutral", "stone", "black", "white", "transparent",
+	"current", "currentcolor", "inherit", "initial", "unset", "border", "divider",
+	"separator", "line", "hairline", "muted", "subtle", "input", "surface", "background",
+	"bg", "card", "base", "outline",
+]
+// "primary" names an accent only when it is not the primary ink (--text-primary, --fg-primary).
+const INK_WORDS = ["text", "fg", "foreground", "ink", "content", "label", "body"]
+
+const NAMED_NEUTRAL = new Set([
+	"black", "white", "gray", "grey", "silver", "gainsboro", "whitesmoke", "lightgray",
+	"lightgrey", "darkgray", "darkgrey", "dimgray", "dimgrey", "slategray", "slategrey",
+	"lightslategray", "darkslategray", "snow", "ivory", "linen", "transparent", "currentcolor",
+	"inherit", "initial", "unset", "none",
+])
+const NAMED_CHROMATIC = new Set([
+	"red", "orange", "yellow", "green", "blue", "purple", "violet", "indigo", "teal", "cyan",
+	"magenta", "fuchsia", "pink", "gold", "lime", "navy", "crimson", "tomato", "coral",
+	"royalblue", "dodgerblue", "deepskyblue", "steelblue", "seagreen", "limegreen", "orangered",
+	"hotpink", "deeppink", "darkorange", "goldenrod", "turquoise", "orchid", "salmon", "maroon",
+	"olive", "aqua", "rebeccapurple", "mediumpurple", "slateblue", "tan",
+])
+
+const CHROMA_THRESHOLD = 0.2
+
+export function classifyName(name: string): ColorClass {
+	const parts = name.toLowerCase().replace(/^-+/, "").split(/[-_/.\s]+/).filter(Boolean)
+	if (parts.some((p) => HUES.includes(p) || STATUS_WORDS.includes(p))) return "chromatic"
+	if (parts.includes("primary") || parts.includes("secondary")) {
+		if (parts.some((p) => INK_WORDS.includes(p) || NEUTRAL_WORDS.includes(p))) return "neutral"
+		return parts.includes("primary") ? "chromatic" : "unknown"
+	}
+	if (parts.some((p) => NEUTRAL_WORDS.includes(p) || INK_WORDS.includes(p))) return "neutral"
+	return "unknown"
+}
+
+function chromaFromRgb(r: number, g: number, b: number): ColorClass {
+	const max = Math.max(r, g, b)
+	const min = Math.min(r, g, b)
+	return (max - min) / 255 > CHROMA_THRESHOLD ? "chromatic" : "neutral"
+}
+
+function parseNumbers(args: string): number[] {
+	return args
+		.split(/[\s,/]+/)
+		.filter(Boolean)
+		.map((n) => (n.endsWith("%") ? Number.parseFloat(n) / 100 : Number.parseFloat(n)))
+}
+
+function classifyFunction(fn: string, args: string): ColorClass {
+	const raw = args.split(/[\s,/]+/).filter(Boolean)
+	const n = parseNumbers(args)
+	if (n.some((x) => Number.isNaN(x))) return "unknown"
+	if (fn === "rgb" || fn === "rgba") {
+		const scale = (i: number) => (raw[i]?.endsWith("%") ? (n[i] ?? 0) * 255 : (n[i] ?? 0))
+		return chromaFromRgb(scale(0), scale(1), scale(2))
+	}
+	if (fn === "hsl" || fn === "hsla") {
+		const s = raw[1]?.endsWith("%") ? (n[1] ?? 0) : (n[1] ?? 0) / 100
+		const l = raw[2]?.endsWith("%") ? (n[2] ?? 0) : (n[2] ?? 0) / 100
+		return (1 - Math.abs(2 * l - 1)) * s > CHROMA_THRESHOLD ? "chromatic" : "neutral"
+	}
+	if (fn === "oklch") return (n[1] ?? 0) > 0.05 ? "chromatic" : "neutral"
+	if (fn === "lch") return (n[1] ?? 0) > 20 ? "chromatic" : "neutral"
+	return "unknown"
+}
+
+export function classifyColor(input: string): ColorClass {
+	const value = input.trim().toLowerCase().replace(/\s*!important$/, "")
+	const hex = /^#([0-9a-f]{3,8})$/.exec(value)
+	if (hex?.[1]) {
+		let h = hex[1]
+		if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("")
+		if (h.length !== 6 && h.length !== 8) return "unknown"
+		const [r, g, b] = [0, 2, 4].map((i) => Number.parseInt(h.slice(i, i + 2), 16))
+		return chromaFromRgb(r ?? 0, g ?? 0, b ?? 0)
+	}
+	const varMatch = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/.exec(value)
+	if (varMatch?.[1]) {
+		const byName = classifyName(varMatch[1])
+		if (byName !== "unknown" || !varMatch[2]) return byName
+		return classifyColor(varMatch[2])
+	}
+	const theme = /^theme\(\s*['"]?([\w.-]+)['"]?\s*\)$/.exec(value)
+	if (theme?.[1]) return classifyName(theme[1])
+	const fn = /^([a-z]+)\((.*)\)$/.exec(value)
+	if (fn?.[1] && fn[2] !== undefined) return classifyFunction(fn[1], fn[2])
+	if (NAMED_NEUTRAL.has(value)) return "neutral"
+	if (NAMED_CHROMATIC.has(value)) return "chromatic"
+	return "unknown"
+}
+
+export function looksLikeColor(token: string): boolean {
+	const t = token.toLowerCase()
+	return (
+		t.startsWith("#") ||
+		/^(rgba?|hsla?|oklch|oklab|lch|lab|color-mix|var|theme)\(/.test(t) ||
+		NAMED_NEUTRAL.has(t) ||
+		NAMED_CHROMATIC.has(t)
+	)
+}
+
+const COLOR_IN_VALUE = /#[0-9a-f]{3,8}\b|(?:rgba?|hsla?|oklch|lch)\([^)]*\)|var\(--[\w-]+(?:,[^)]*)?\)|\b[a-z]+\b/gi
+
+export function containsChromatic(value: string): boolean {
+	return (value.match(COLOR_IN_VALUE) ?? []).some((c) => looksLikeColor(c) && classifyColor(c) === "chromatic")
+}
+
+export function classifyUtilityColor(fragment: string): ColorClass {
+	if (fragment.startsWith("[") && fragment.endsWith("]")) {
+		const inner = fragment.slice(1, -1).replace(/^color:/, "").replace(/_/g, " ")
+		return classifyColor(inner)
+	}
+	const bare = fragment.replace(/\/[\w.[\]]+$/, "")
+	const head = bare.split("-")[0] ?? ""
+	if (HUES.includes(head)) return "chromatic"
+	return classifyName(bare)
+}

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

@@ -0,0 +1,103 @@
+export type Declaration = { readonly prop: string; readonly value: string; readonly offset?: number }
+
+export type CssRule = {
+	readonly selector: string
+	readonly declarations: readonly Declaration[]
+	readonly applyClasses: readonly string[]
+	readonly applyOffset?: number
+	readonly offset: number
+}
+
+type Frame = { selector: string; declarations: Declaration[]; applyClasses: string[]; applyOffset?: number; offset: number }
+
+function blankComments(text: string, lineComments: boolean): string {
+	let out = text.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " "))
+	if (lineComments) out = out.replace(/(^|[^:"'])\/\/[^\n]*/g, (m, lead: string) => lead + " ".repeat(m.length - lead.length))
+	return out
+}
+
+export function splitTopLevel(value: string, separator: "," | " "): string[] {
+	const parts: string[] = []
+	let depth = 0
+	let current = ""
+	for (const ch of value) {
+		if (ch === "(" || ch === "[") depth += 1
+		if (ch === ")" || ch === "]") depth -= 1
+		const splits = depth === 0 && (separator === "," ? ch === "," : /\s/.test(ch))
+		if (splits) {
+			if (current.trim()) parts.push(current.trim())
+			current = ""
+		} else current += ch
+	}
+	if (current.trim()) parts.push(current.trim())
+	return parts
+}
+
+function resolveSelector(parent: string | undefined, child: string): string {
+	if (!parent) return child
+	const parents = splitTopLevel(parent, ",")
+	return splitTopLevel(child, ",")
+		.flatMap((c) => parents.map((p) => (c.includes("&") ? c.replaceAll("&", p) : `${p} ${c}`)))
+		.join(", ")
+}
+
+function nearestSelector(stack: readonly Frame[]): string | undefined {
+	for (let i = stack.length - 1; i >= 0; i -= 1) {
+		const frame = stack[i]
+		if (frame && !frame.selector.startsWith("@")) return frame.selector
+	}
+	return undefined
+}
+
+function addStatement(frame: Frame | undefined, statement: string, offset: number): void {
+	const text = statement.trim()
+	if (!frame || !text) return
+	if (text.startsWith("@apply")) {
+		frame.applyOffset ??= offset
+		frame.applyClasses.push(...text.slice("@apply".length).replace(/!important/g, "").split(/\s+/).filter(Boolean))
+		return
+	}
+	const colon = text.indexOf(":")
+	if (colon <= 0) return
+	frame.declarations.push({ prop: text.slice(0, colon).trim().toLowerCase(), value: text.slice(colon + 1).trim(), offset })
+}
+
+export function parseCss(source: string, baseOffset = 0, lineComments = false): CssRule[] {
+	const text = blankComments(source, lineComments)
+	const rules: CssRule[] = []
+	const stack: Frame[] = []
+	let buffer = ""
+	let bufferStart = -1
+	let parens = 0
+	let quote = ""
+	for (let i = 0; i < text.length; i += 1) {
+		const ch = text.charAt(i)
+		if (quote) {
+			buffer += ch
+			if (ch === quote && text.charAt(i - 1) !== "\\") quote = ""
+			continue
+		}
+		if (ch === '"' || ch === "'") quote = ch
+		if (ch === "(") parens += 1
+		if (ch === ")") parens -= 1
+		if (parens > 0 || quote || (ch !== "{" && ch !== "}" && ch !== ";")) {
+			if (bufferStart < 0 && /\S/.test(ch)) bufferStart = i
+			buffer += ch
+			continue
+		}
+		const top = stack[stack.length - 1]
+		if (ch === "{") {
+			const raw = buffer.trim()
+			const selector = raw.startsWith("@") ? raw : resolveSelector(nearestSelector(stack), raw)
+			stack.push({ selector, declarations: [], applyClasses: [], offset: baseOffset + Math.max(bufferStart, 0) })
+		} else if (ch === ";") addStatement(top, buffer, baseOffset + Math.max(bufferStart, 0))
+		else {
+			addStatement(top, buffer, baseOffset + Math.max(bufferStart, 0))
+			const done = stack.pop()
+			if (done && !done.selector.startsWith("@")) rules.push(done)
+		}
+		buffer = ""
+		bufferStart = -1
+	}
+	return rules
+}

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

@@ -0,0 +1,156 @@
+import { type ColorClass, classifyColor, containsChromatic, looksLikeColor } from "./color"
+import { type Declaration, splitTopLevel } from "./css-parse"
+
+export const MIN_STRIPE_PX = 2
+export const MAX_BAR_PX = 8
+
+const SIDES = ["top", "right", "bottom", "left"] as const
+export type Side = (typeof SIDES)[number]
+type Edge = { width?: number; color?: ColorClass; hidden?: boolean }
+
+const LOGICAL_SIDE: Readonly<Record<string, Side>> = {
+	top: "top", right: "right", bottom: "bottom", left: "left",
+	"block-start": "top", "inline-end": "right", "block-end": "bottom", "inline-start": "left",
+}
+
+export function parseLength(token: string): number | undefined {
+	const keyword: Readonly<Record<string, number>> = { thin: 1, medium: 3, thick: 5 }
+	const t = token.trim().toLowerCase()
+	if (t in keyword) return keyword[t]
+	const m = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(t)
+	if (!m?.[1]) return undefined
+	const n = Number.parseFloat(m[1])
+	return m[2] === "rem" || m[2] === "em" ? n * 16 : n
+}
+
+function percent(token: string | undefined): number | undefined {
+	const m = token ? /^(\d*\.?\d+)%$/.exec(token.trim()) : null
+	return m?.[1] ? Number.parseFloat(m[1]) : undefined
+}
+
+function boxValues(value: string): [string, string, string, string] {
+	const v = splitTopLevel(value, " ")
+	const [a = "", b = a, c = a, d = b] = v
+	return [a, b, c, d]
+}
+
+function parseEdgeShorthand(value: string): Edge {
+	const edge: Edge = {}
+	for (const token of splitTopLevel(value, " ")) {
+		if (looksLikeColor(token)) edge.color = classifyColor(token)
+		else if (/^(none|hidden)$/i.test(token)) edge.hidden = true
+		else {
+			const length = parseLength(token)
+			if (length !== undefined) edge.width = length
+		}
+	}
+	return edge
+}
+
+function collectEdges(declarations: readonly Declaration[]): Map<Side, Edge> {
+	const edges = new Map<Side, Edge>(SIDES.map((s) => [s, {}]))
+	const merge = (side: Side, patch: Edge) => edges.set(side, { ...edges.get(side), ...patch })
+	let imageChromatic = false
+	for (const { prop, value } of declarations) {
+		if (prop === "border-image" || prop === "border-image-source") imageChromatic = containsChromatic(value)
+		else if (prop === "border") SIDES.forEach((s) => merge(s, parseEdgeShorthand(value)))
+		else if (prop === "border-width") boxValues(value).forEach((v, i) => merge(SIDES[i] ?? "top", { width: parseLength(v) ?? 0 }))
+		else if (prop === "border-color") boxValues(value).forEach((v, i) => merge(SIDES[i] ?? "top", { color: classifyColor(v) }))
+		else {
+			const m = /^border-(top|right|bottom|left|block-start|block-end|inline-start|inline-end)(?:-(width|color))?$/.exec(prop)
+			const side = m?.[1] ? LOGICAL_SIDE[m[1]] : undefined
+			if (!side) continue
+			if (m?.[2] === "width") merge(side, { width: parseLength(value) ?? 0 })
+			else if (m?.[2] === "color") merge(side, { color: classifyColor(value) })
+			else merge(side, parseEdgeShorthand(value))
+		}
+	}
+	if (imageChromatic) {
+		for (const side of SIDES) if ((edges.get(side)?.width ?? 0) > 0) merge(side, { color: "chromatic" })
+	}
+	return edges
+}
+
+export type Corner = "tl" | "tr" | "br" | "bl"
+export const ALL_CORNERS: ReadonlySet<Corner> = new Set(["tl", "tr", "br", "bl"])
+export const SIDE_CORNERS: Readonly<Record<Side, readonly [Corner, Corner]>> = {
+	top: ["tl", "tr"], right: ["tr", "br"], bottom: ["br", "bl"], left: ["tl", "bl"],
+}
+const CORNER_LONGHAND: Readonly<Record<string, Corner>> = {
+	"top-left": "tl", "top-right": "tr", "bottom-right": "br", "bottom-left": "bl",
+	"start-start": "tl", "start-end": "tr", "end-end": "br", "end-start": "bl",
+}
+
+const nonZero = (token: string) => (parseLength(token) ?? percent(token) ?? 1) > 0
+
+export function roundedCorners(declarations: readonly Declaration[]): Set<Corner> {
+	const corners = new Set<Corner>()
+	for (const { prop, value } of declarations) {
+		if (prop === "border-radius") {
+			const [tl, tr, br, bl] = boxValues(value.split("/")[0] ?? "")
+			const values: Array<[Corner, string]> = [["tl", tl], ["tr", tr], ["br", br], ["bl", bl]]
+			for (const [corner, v] of values) {
+				if (nonZero(v)) corners.add(corner)
+				else corners.delete(corner)
+			}
+			continue
+		}
+		const m = /^border-([a-z]+-[a-z]+)-radius$/.exec(prop)
+		const corner = m?.[1] ? CORNER_LONGHAND[m[1]] : undefined
+		if (!corner) continue
+		if (nonZero(splitTopLevel(value, " ")[0] ?? "0")) corners.add(corner)
+		else corners.delete(corner)
+	}
+	return corners
+}
+
+export function hasEdgeStripe(declarations: readonly Declaration[], corners: ReadonlySet<Corner> = ALL_CORNERS): boolean {
+	const bySide = collectEdges(declarations)
+	const edges = [...bySide.values()]
+	const isStripe = (e: Edge) => !e.hidden && (e.width ?? 0) >= MIN_STRIPE_PX && e.color === "chromatic"
+	const bent = SIDES.some((s) => {
+		const edge = bySide.get(s)
+		return edge !== undefined && isStripe(edge) && SIDE_CORNERS[s].some((c) => corners.has(c))
+	})
+	if (!bent) return false
+	const first = edges[0]
+	const uniform = edges.every((e) => e.width === first?.width && e.color === first?.color && e.hidden === first?.hidden)
+	return !uniform
+}
+
+export function hasRadius(declarations: readonly Declaration[]): boolean {
+	return roundedCorners(declarations).size > 0
+}
+
+export function isInsetShadowStripe(value: string): boolean {
+	return splitTopLevel(value, ",").some((layer) => {
+		const tokens = splitTopLevel(layer, " ")
+		if (!tokens.some((t) => t.toLowerCase() === "inset")) return false
+		const lengths = tokens.map(parseLength).filter((n): n is number => n !== undefined)
+		const [x = 0, y = 0, blur = 0] = lengths
+		const oneSided = (Math.abs(x) >= MIN_STRIPE_PX) !== (Math.abs(y) >= MIN_STRIPE_PX) && (x === 0 || y === 0)
+		return oneSided && blur === 0 && tokens.some((t) => looksLikeColor(t) && classifyColor(t) === "chromatic")
+	})
+}
+
+export function hasInsetShadowStripe(declarations: readonly Declaration[]): boolean {
+	return declarations.some(({ prop, value }) => prop === "box-shadow" && isInsetShadowStripe(value))
+}
+
+export const isBackground = (prop: string) => prop === "background" || prop === "background-color" || prop === "background-image"
+
+function backgroundIsChromatic(declarations: readonly Declaration[]): boolean {
+	return declarations.some(({ prop, value }) => isBackground(prop) && containsChromatic(value))
+}
+
+export function isPseudoBar(declarations: readonly Declaration[]): boolean {
+	if (!backgroundIsChromatic(declarations)) return false
+	const get = (name: string) => declarations.findLast((d) => d.prop === name)?.value
+	const has = (name: string) => get(name) !== undefined
+	const thin = (name: string) => {
+		const n = parseLength(get(name) ?? "")
+		return n !== undefined && n > 0 && n <= MAX_BAR_PX
+	}
+	const long = (name: string, a: string, b: string) => (percent(get(name)) ?? 0) >= 50 || (has(a) && has(b)) || has("inset")
+	return (thin("width") && long("height", "top", "bottom")) || (thin("height") && long("width", "left", "right"))
+}

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

@@ -0,0 +1,34 @@
+export type RuleId = "edge-stripe" | "pseudo-bar" | "inset-shadow-stripe" | "gradient-stripe"
+
+export type Finding = {
+	readonly file: string
+	readonly line: number
+	readonly column: number
+	readonly rule: RuleId
+	readonly excerpt: string
+}
+
+export const RULE_MESSAGES: Readonly<Record<RuleId, string>> = {
+	"edge-stripe": "coloured one-side border on a rounded surface; the corners bend the stripe",
+	"pseudo-bar": "coloured ::before/::after bar on a rounded surface",
+	"inset-shadow-stripe": "inset box-shadow stripe on a rounded surface",
+	"gradient-stripe": "hard-stop gradient band along one edge of a rounded surface",
+}
+
+export const FIX_HINT =
+	"drop the stripe: separate with a tonal surface (one ink at a low alpha), an eyebrow or heading, a leading glyph, or spacing"
+
+export function lineLocator(text: string): (offset: number) => { line: number; column: number } {
+	const starts = [0]
+	for (let i = 0; i < text.length; i += 1) if (text.charAt(i) === "\n") starts.push(i + 1)
+	return (offset) => {
+		let lo = 0
+		let hi = starts.length - 1
+		while (lo < hi) {
+			const mid = (lo + hi + 1) >> 1
+			if ((starts[mid] ?? 0) <= offset) lo = mid
+			else hi = mid - 1
+		}
+		return { line: lo + 1, column: offset - (starts[lo] ?? 0) + 1 }
+	}
+}

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

@@ -0,0 +1,70 @@
+import { classifyColor, looksLikeColor } from "./color"
+import { type Declaration, splitTopLevel } from "./css-parse"
+import { isBackground, MAX_BAR_PX, parseLength } from "./declarations"
+
+type Stop = { readonly chromatic: boolean; readonly positions: readonly string[] }
+type Edge = { readonly near: number } | { readonly far: number }
+
+function linearGradientBodies(value: string): string[] {
+	const bodies: string[] = []
+	for (const m of value.matchAll(/(?<![\w-])linear-gradient\(/gi)) {
+		const start = (m.index ?? 0) + m[0].length
+		let depth = 1
+		let i = start
+		for (; i < value.length && depth > 0; i += 1) {
+			if (value.charAt(i) === "(") depth += 1
+			if (value.charAt(i) === ")") depth -= 1
+		}
+		bodies.push(value.slice(start, i - 1))
+	}
+	return bodies
+}
+
+function stopsOf(body: string): Stop[] {
+	return splitTopLevel(body, ",").flatMap((arg) => {
+		const [color = "", ...positions] = splitTopLevel(arg, " ")
+		if (!looksLikeColor(color)) return []
+		return [{ chromatic: classifyColor(color) === "chromatic", positions }]
+	})
+}
+
+function edgeOf(position: string | undefined): Edge | undefined {
+	if (position === undefined) return undefined
+	const far = /^calc\(\s*100%\s*-\s*([\d.]+(?:px|rem|em)?)\s*\)$/i.exec(position)
+	if (far?.[1]) {
+		const px = parseLength(far[1])
+		return px === undefined ? undefined : { far: px }
+	}
+	const px = parseLength(position)
+	return px === undefined ? undefined : { near: px }
+}
+
+const nearPx = (edge: Edge | undefined): number | undefined => (edge && "near" in edge ? edge.near : undefined)
+const farPx = (edge: Edge | undefined): number | undefined => (edge && "far" in edge ? edge.far : undefined)
+const isBand = (px: number | undefined): px is number => px !== undefined && px > 0 && px <= MAX_BAR_PX
+
+function isEdgeBand(stops: readonly Stop[]): boolean {
+	return stops.some((stop, i) => {
+		if (!stop.chromatic) return false
+		const end = nearPx(edgeOf(stop.positions.at(-1)))
+		const nextStart = nearPx(edgeOf(stops[i + 1]?.positions[0]))
+		if (isBand(end) && nextStart !== undefined && nextStart <= end) return true
+		const start = farPx(edgeOf(stop.positions[0]))
+		const prevEnd = farPx(edgeOf(stops[i - 1]?.positions.at(-1)))
+		return isBand(start) && prevEnd !== undefined && prevEnd <= start
+	})
+}
+
+function isTiled(declarations: readonly Declaration[]): boolean {
+	return declarations.some(
+		({ prop, value }) =>
+			prop === "background-size" && splitTopLevel(value, ",").some((layer) => splitTopLevel(layer, " ").some((t) => parseLength(t) !== undefined)),
+	)
+}
+
+export function hasGradientEdgeBand(declarations: readonly Declaration[]): boolean {
+	if (isTiled(declarations)) return false
+	return declarations.some(
+		({ prop, value }) => isBackground(prop) && linearGradientBodies(value).some((body) => isEdgeBand(stopsOf(body))),
+	)
+}