lazycodex-ai 5.1.40 → 5.1.42

package/packages/shared-skills/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 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 put a coloured bar on one side of a box, rounded or square, or an accent outline on a rounded card, for decoration or for state.** A feature card with `border-top: 4px solid` accent, a callout or cover block 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 2px primary outline on the focused card: each 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, table rules, and a blockquote's neutral rule 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.
@@ -222,7 +222,7 @@ Once references are loaded, before writing any UI code:
 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", 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.
+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, or an accent outline, to replace, per the anti-pattern above.
 
 ## Quick lookup table — most common requests
 

package/packages/shared-skills/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.
-- **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.
+- **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 any box, rounded or square, and a 2px-or-wider accent outline (border or inset ring) on a rounded card, 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, table rules, and a blockquote's neutral rule 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,7 +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
+bun $SKILL_DIR/scripts/perfection/check-accent-stripes.ts src/   # exit 1 = coloured one-side bar, or accent outline on a rounded card
 ```
 
 Or use the TypeScript approach directly in your test suite:

package/packages/shared-skills/skills/frontend/scripts/perfection/accent-stripes/declarations.ts

@@ -72,10 +72,6 @@ function collectEdges(declarations: readonly Declaration[]): Map<Side, Edge> {
 }
 
 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",
@@ -104,20 +100,33 @@ export function roundedCorners(declarations: readonly Declaration[]): Set<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 isStripe = (e: Edge) => !e.hidden && (e.width ?? 0) >= MIN_STRIPE_PX && e.color === "chromatic"
+
+export function hasEdgeStripe(declarations: readonly Declaration[]): boolean {
+	const edges = [...collectEdges(declarations).values()]
+	if (!edges.some(isStripe)) 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
 }
 
+function isInsetRing(value: string): boolean {
+	return splitTopLevel(value, ",").some((layer) => {
+		const tokens = splitTopLevel(layer, " ")
+		if (!tokens.some((t) => t.toLowerCase() === "inset")) return false
+		const [x = 0, y = 0, blur = 0, spread = 0] = tokens.map(parseLength).filter((n): n is number => n !== undefined)
+		return x === 0 && y === 0 && blur === 0 && spread >= MIN_STRIPE_PX && tokens.some((t) => looksLikeColor(t) && classifyColor(t) === "chromatic")
+	})
+}
+
+/** A uniform accent border (not a gradient border-image) or inset ring of MIN_STRIPE_PX or more. */
+export function hasAccentOutline(declarations: readonly Declaration[]): boolean {
+	const image = declarations.some(({ prop }) => prop === "border-image" || prop === "border-image-source")
+	const edges = [...collectEdges(declarations).values()]
+	const frame = !image && edges.every((e) => isStripe(e) && e.width === edges[0]?.width)
+	return frame || declarations.some(({ prop, value }) => prop === "box-shadow" && isInsetRing(value))
+}
+
 export function hasRadius(declarations: readonly Declaration[]): boolean {
 	return roundedCorners(declarations).size > 0
 }

package/packages/shared-skills/skills/frontend/scripts/perfection/accent-stripes/findings.ts

@@ -1,4 +1,4 @@
-export type RuleId = "edge-stripe" | "pseudo-bar" | "inset-shadow-stripe" | "gradient-stripe"
+export type RuleId = "edge-stripe" | "pseudo-bar" | "inset-shadow-stripe" | "gradient-stripe" | "accent-outline"
 
 export type Finding = {
 	readonly file: string
@@ -9,14 +9,15 @@ export type Finding = {
 }
 
 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",
+	"edge-stripe": "coloured one-side border on a box, rounded or square",
+	"pseudo-bar": "coloured ::before/::after bar along one side of a box",
+	"inset-shadow-stripe": "inset box-shadow stripe along one side of a box",
+	"gradient-stripe": "hard-stop gradient band along one edge of a box",
+	"accent-outline": "accent-tinted full outline on a rounded card",
 }
 
 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"
+	"drop the stripe or outline: 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]

package/packages/shared-skills/skills/frontend/scripts/perfection/accent-stripes/lint.ts

@@ -1,9 +1,9 @@
 import { type CssRule, type Declaration, parseCss } from "./css-parse"
-import { ALL_CORNERS, type Corner, hasEdgeStripe, hasInsetShadowStripe, hasRadius, isPseudoBar, roundedCorners } from "./declarations"
+import { hasAccentOutline, 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 { type Compound, compoundCovers, isExemptSelector, isExemptTag, parseCompound, selectorParts } from "./selector"
 import { checkClassSet } from "./tailwind"
 
 export type SourceFile = { readonly path: string; readonly text: string }
@@ -25,18 +25,14 @@ 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
+function isRoundedHost(part: string, rule: CssRule, index: readonly Compound[]): boolean {
+	if (ruleHasRadius(rule)) return true
+	const host = parseCompound(part)
+	return index.some((general) => compoundCovers(general, host))
 }
 
 const EDGE_PROP = /^border(?:-(?:top|right|bottom|left|block|inline|width|color|image)(?:-[\w-]+)?)?$/
+const OUTLINE_PROP = /^(?:border(?:-width|-color)?|box-shadow)$/
 const BACKGROUND_PROP = /^background(?:-color|-image)?$/
 
 function declarationOffset(declarations: readonly Declaration[], prop: RegExp, fallback: number): number {
@@ -45,9 +41,10 @@ function declarationOffset(declarations: readonly Declaration[], prop: RegExp, f
 
 type Hit = { readonly id: RuleId; readonly offset: number }
 
-function declarationHits(declarations: readonly Declaration[], corners: ReadonlySet<Corner>, fallback: number): Hit[] {
+function declarationHits(declarations: readonly Declaration[], rounded: boolean, fallback: number): Hit[] {
 	const hits: Hit[] = []
-	if (hasEdgeStripe(declarations, corners)) hits.push({ id: "edge-stripe", offset: declarationOffset(declarations, EDGE_PROP, fallback) })
+	if (hasEdgeStripe(declarations)) hits.push({ id: "edge-stripe", offset: declarationOffset(declarations, EDGE_PROP, fallback) })
+	else if (rounded && hasAccentOutline(declarations)) hits.push({ id: "accent-outline", offset: declarationOffset(declarations, OUTLINE_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
@@ -57,17 +54,14 @@ 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 (isExemptSelector(part)) 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 })
-		}
+		const rounded = isRoundedHost(part, rule, index)
+		declarationHits(rule.declarations, rounded, rule.offset).forEach(add)
+		for (const id of checkClassSet(rule.applyClasses, rounded)) add({ id, offset: rule.applyOffset ?? rule.offset })
 	}
 	return [...found].map(([id, offset]) => ({ id, offset }))
 }
@@ -97,13 +91,13 @@ export function lintFiles(files: readonly SourceFile[]): Finding[] {
 		}
 		if (STYLESHEET.test(file.path)) continue
 		for (const group of classGroups(file.text, SCRIPT.test(file.path))) {
+			if (isExemptTag(group.tag)) continue
 			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)
+			if (isExemptTag(style.tag)) continue
+			const rounded = style.tagRounded || roundedCorners(style.declarations).size > 0
+			for (const hit of declarationHits(style.declarations, rounded, 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/shared-skills/skills/frontend/scripts/perfection/accent-stripes/markup.ts

@@ -1,8 +1,8 @@
 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 ClassGroup = { readonly tokens: readonly string[]; readonly offset: number; readonly tag: string }
+export type InlineStyle = { readonly declarations: readonly Declaration[]; readonly offset: number; readonly tagRounded: boolean; readonly tag: string }
 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"])
@@ -51,6 +51,13 @@ function stripInterpolation(literal: string): string {
 	return literal.replace(/\$\{[^}]*\}/g, " ")
 }
 
+/** Name of the element whose open tag contains `offset` ("" outside a tag, e.g. a cva string). */
+function tagNameAt(text: string, offset: number): string {
+	const open = text.lastIndexOf("<", offset)
+	if (open < 0 || text.slice(open, offset).includes(">")) return ""
+	return /^<([A-Za-z][\w.-]*)/.exec(text.slice(open))?.[1] ?? ""
+}
+
 function tokensOf(text: string): string[] {
 	return text.split(/\s+/).filter(Boolean)
 }
@@ -83,11 +90,11 @@ export function classGroups(text: string, scanLiterals: boolean): ClassGroup[] {
 		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 })
+			groups.push({ tokens: tokensOf(text.slice(start + 1, close)), offset: start, tag: tagNameAt(text, start) })
 			covered.push([start, close])
 		} else if (ch === "{") {
 			const { end, literals } = readBalanced(text, start)
-			groups.push({ tokens: literals.flatMap(tokensOf), offset: start })
+			groups.push({ tokens: literals.flatMap(tokensOf), offset: start, tag: tagNameAt(text, start) })
 			covered.push([start, end])
 		}
 	}
@@ -96,7 +103,7 @@ export function classGroups(text: string, scanLiterals: boolean): ClassGroup[] {
 		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 })
+		if (looksLikeClassList(body)) groups.push({ tokens: tokensOf(body), offset, tag: "" })
 	}
 	return groups
 }
@@ -136,13 +143,13 @@ export function inlineStyles(text: string): 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) })
+		styles.push({ declarations: objectDeclarations(m[1] ?? ""), offset, tagRounded: tagIsRounded(text, offset, end), tag: tagNameAt(text, offset) })
 	}
 	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) })
+		styles.push({ declarations, offset, tagRounded: tagIsRounded(text, offset, offset + m[0].length), tag: tagNameAt(text, offset) })
 	}
 	return styles
 }

package/packages/shared-skills/skills/frontend/scripts/perfection/accent-stripes/selector.ts

@@ -27,9 +27,13 @@ export function parseCompound(part: string): Compound {
 	}
 }
 
+export function isExemptTag(tag: string): boolean {
+	return EXEMPT_TAGS.has(tag.toLowerCase())
+}
+
 export function isExemptSelector(part: string): boolean {
 	if (EXEMPT_STATE.test(part)) return true
-	return EXEMPT_TAGS.has(parseCompound(part).tag)
+	return isExemptTag(parseCompound(part).tag)
 }
 
 export function selectorParts(selector: string): string[] {

package/packages/shared-skills/skills/frontend/scripts/perfection/accent-stripes/tailwind.ts

@@ -43,11 +43,15 @@ const SIDE_TOUCHES: Readonly<Record<string, readonly Corner[]>> = {
 }
 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]] ?? []) : []
+const SIDE = /^(?:[tlrbsexy]|bs|be)-/
+
+function isWide(width: string | undefined): boolean {
+	if (!width) return false
+	return ((/^\d+$/.test(width) ? Number.parseInt(width, 10) : arbitraryPx(width)) ?? 0) >= MIN_STRIPE_PX
+}
+
+function isWideSide(util: string): boolean {
+	return isWide(/^border-(?:[tlrbsexy]|bs|be)-(\d+|\[[^\]]+\])$/.exec(util)?.[1])
 }
 
 function roundedCorners(utils: readonly string[]): Set<Corner> {
@@ -65,14 +69,30 @@ function roundedCorners(utils: readonly string[]): Set<Corner> {
 	return corners
 }
 
-function borderColorIsChromatic(util: string): boolean {
-	const m = /^border(?:-(?:[tlrbsexy]|bs|be))?-(.+)$/.exec(util)
-	const fragment = m?.[1]
+function colorIsChromatic(fragment: string | undefined): boolean {
 	if (!fragment || BORDER_STYLE.has(fragment) || /^\d+$/.test(fragment)) return false
 	if (fragment.startsWith("[") && arbitraryPx(fragment) !== undefined) return false
 	return classifyUtilityColor(fragment) === "chromatic"
 }
 
+function borderColorIsChromatic(util: string): boolean {
+	return colorIsChromatic(/^border(?:-(?:[tlrbsexy]|bs|be))?-(.+)$/.exec(util)?.[1])
+}
+
+function hasOutline(utils: readonly string[]): boolean {
+	const border = utils.some((u) => isWide(/^border-(\d+|\[[^\]]+\])$/.exec(u)?.[1]))
+	const borderColor = utils.some((u) => {
+		const fragment = /^border-(.+)$/.exec(u)?.[1]
+		return fragment !== undefined && !SIDE.test(fragment) && colorIsChromatic(fragment)
+	})
+	const ring = utils.some((u) => isWide(/^ring-(\d+|\[[^\]]+\])$/.exec(u)?.[1]))
+	const ringColor = utils.some((u) => {
+		const fragment = /^ring-(.+)$/.exec(u)?.[1]
+		return fragment !== undefined && !/^(?:inset|offset-)/.test(fragment) && colorIsChromatic(fragment)
+	})
+	return (border && borderColor) || (ring && ringColor)
+}
+
 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)
@@ -93,14 +113,12 @@ function isPseudoBar(utils: readonly string[]): boolean {
 	return chromaticBg && ((thinBar(utils, "w") && longBar(utils, "h")) || (thinBar(utils, "h") && longBar(utils, "w")))
 }
 
-export function checkClassSet(tokens: readonly string[]): RuleId[] {
+export function checkClassSet(tokens: readonly string[], hostRounded = false): 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")
+	if (base.some(isWideSide) && base.some(borderColorIsChromatic)) found.push("edge-stripe")
+	else if ((hostRounded || roundedCorners(base).size > 0) && hasOutline(base)) found.push("accent-outline")
 	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")
@@ -113,5 +131,5 @@ export function checkClassSet(tokens: readonly string[]): RuleId[] {
 }
 
 export function looksLikeClassList(text: string): boolean {
-	return /(?:^|\s)(?:[\w-]+:)*rounded/.test(text)
+	return /(?:^|\s)(?:[\w-]+:)*(?:rounded|border-|ring-|shadow-\[|(?:before|after):)/.test(text)
 }

package/packages/shared-skills/skills/frontend/scripts/perfection/check-accent-stripes.test.ts

@@ -22,6 +22,11 @@ const EXPECTED: Readonly<Record<string, ReadonlyArray<[number, RuleId]>>> = {
 	"gradient-edges.css": [[3, "gradient-stripe"], [8, "edge-stripe"], [20, "pseudo-bar"], [25, "gradient-stripe"]],
 	"non-visible-focus-and-nested.tsx": [[2, "edge-stripe"], [3, "edge-stripe"], [6, "edge-stripe"]],
 	"styled-components.tsx": [[6, "edge-stripe"], [12, "edge-stripe"]],
+	"flat-stripe-side.tsx": [[2, "edge-stripe"], [7, "edge-stripe"], [8, "edge-stripe"], [9, "edge-stripe"], [10, "edge-stripe"], [11, "edge-stripe"]],
+	"report-callouts.html": [[3, "edge-stripe"], [5, "edge-stripe"]],
+	"square-surfaces.css": [[1, "edge-stripe"], [4, "pseudo-bar"], [6, "inset-shadow-stripe"], [8, "gradient-stripe"]],
+	"accent-outlines.css": [[1, "accent-outline"], [2, "accent-outline"], [4, "accent-outline"]],
+	"accent-outlines.tsx": [[3, "accent-outline"], [4, "accent-outline"], [5, "accent-outline"], [6, "accent-outline"]],
 }
 
 function lintFixture(dir: string, name: string) {
@@ -29,7 +34,7 @@ function lintFixture(dir: string, name: string) {
 	return lintFiles([{ path, text: readFileSync(path, "utf8") }])
 }
 
-describe("#given a positive fixture with a coloured edge on a rounded surface", () => {
+describe("#given a positive fixture with a coloured one-side bar or an accent outline on a rounded card", () => {
 	test("#then every positive fixture has an expectation", () => {
 		expect(readdirSync(join(FIXTURES, "positive")).sort()).toEqual(Object.keys(EXPECTED).sort())
 	})
@@ -42,7 +47,7 @@ describe("#given a positive fixture with a coloured edge on a rounded surface",
 	}
 })
 
-describe("#given a negative fixture (neutral hairlines, flat edges, focus rings, validation, tables, overlays)", () => {
+describe("#given a negative fixture (neutral hairlines and rules, thin outlines, focus rings, validation, tables, overlays)", () => {
 	for (const name of readdirSync(join(FIXTURES, "negative"))) {
 		test(`#when ${name} is linted #then it reports nothing`, () => {
 			expect(lintFixture("negative", name)).toEqual([])
@@ -50,13 +55,17 @@ describe("#given a negative fixture (neutral hairlines, flat edges, focus rings,
 	}
 })
 
-describe("#given the radius and the stripe live in different stylesheets", () => {
-	test("#when both files are linted together #then the stripe rule is flagged in its own file", () => {
+describe("#given the radius and the accent outline live in different stylesheets", () => {
+	test("#when both files are linted together #then the outline rule is flagged in its own file", () => {
 		const findings = lintFiles([
 			{ path: "base.css", text: ".card { border-radius: 12px; }\n" },
-			{ path: "feature.css", text: "\n.card.card--promo { border-top: 4px solid #f97316; }\n" },
+			{ path: "feature.css", text: "\n.card.card--promo { border: 2px solid #f97316; }\n" },
 		])
-		expect(findings.map((f) => [f.file, f.line, f.rule])).toEqual([["feature.css", 2, "edge-stripe"]])
+		expect(findings.map((f) => [f.file, f.line, f.rule])).toEqual([["feature.css", 2, "accent-outline"]])
+	})
+
+	test("#when the outline rule is linted without the radius stylesheet #then a square box is not flagged", () => {
+		expect(lintFiles([{ path: "feature.css", text: ".card.card--promo { border: 2px solid #f97316; }\n" }])).toEqual([])
 	})
 })
 

package/packages/shared-skills/skills/frontend/scripts/perfection/check-accent-stripes.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-// Flags the "coloured accent edge on a rounded card" slop tell in CSS, Tailwind and JSX.
+// Flags coloured one-side bars on any box and accent outlines on rounded cards 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"

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

@@ -3,5 +3,6 @@ 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>
+    <table><tbody><tr><td style={{ borderLeft: "4px solid #6366f1" }}>Sorted</td></tr></tbody></table>
   </>
 )

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

@@ -1,6 +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; }
+blockquote { border-left: 3px solid #d4d4d8; padding-left: 16px; }
 .token { border-radius: 8px; border-left: 2px solid var(--color-border); }
 .ink { border-radius: 8px; border-left: 2px solid var(--text-primary); }

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

@@ -4,8 +4,11 @@ export const Ok = () => (
     <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>
+    <blockquote className="border-l-2 border-zinc-300 pl-4">Neutral quote rule</blockquote>
+    <button className="rounded-md border border-indigo-500 px-3">Outline button</button>
     <div className="rounded-lg bg-blue-50 p-4 text-blue-900">Tonal surface</div>
+    <input className="border-b-2 border-indigo-500" />
+    <select className="rounded-md border-2 border-indigo-500" />
+    <table><tbody><tr><td className="border-l-4 border-indigo-500">Sorted</td></tr></tbody></table>
   </div>
 )

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

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

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/accent-outlines.css

@@ -0,0 +1,4 @@
+.selected { border-radius: 8px; border: 2px solid #6366f1; }
+.plan { border-radius: 16px; box-shadow: inset 0 0 0 2px #6366f1; }
+.card { border-radius: 12px; }
+.card.is-active { border-width: 2px; border-style: solid; border-color: var(--primary); }

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/accent-outlines.tsx

@@ -0,0 +1,8 @@
+export const Plans = () => (
+  <>
+    <div className="rounded-xl border-2 border-indigo-500 p-6">Pro</div>
+    <div className="rounded-2xl p-6 ring-2 ring-primary">Team</div>
+    <div className="rounded-lg focus:ring-2 focus:ring-blue-500">Focused</div>
+    <div style={{ borderRadius: 12, border: "2px solid #6366f1" }}>Inline</div>
+  </>
+)

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/{negative → positive}/flat-stripe-side.tsx

@@ -1,4 +1,4 @@
-const css = `
+const styles = css`
   .alert { border-left: 4px solid #dc2626; border-radius: 0 6px 6px 0; }
 `
 
@@ -7,5 +7,7 @@ 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>
+    <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>
   </>
 )

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/report-callouts.html

@@ -0,0 +1,8 @@
+<style>
+  h2 { padding-bottom: 4px; border-bottom: 2px solid #1d1d1f; }
+  .cover { border-left: 6px solid #2f7d4f; padding: 6px 0 6px 14px; margin-bottom: 14px; }
+  th, td { border-bottom: 1px solid #e3e3e8; padding: 5px 6px; }
+  .warn { background: #fff6e5; border-left: 4px solid #e0a100; padding: 8px 12px; border-radius: 6px; }
+</style>
+<div class="cover"><h1>Weekly report</h1></div>
+<div class="warn">Two runs need a look.</div>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/square-surfaces.css

@@ -0,0 +1,8 @@
+.section { border-top: 4px solid #6366f1; }
+
+.stat { position: relative; padding: 16px; }
+.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #10b981; }
+
+.note { padding: 12px; box-shadow: inset 4px 0 0 0 #f59e0b; }
+
+.band { padding: 12px; background: linear-gradient(to right, #6366f1 4px, #fff 4px); }

package/packages/shared-skills/skills/ulw-research/SKILL.md

@@ -37,6 +37,8 @@ Run this skill only when the user explicitly demands it: the word "ulw-research"
 
 Open your reply with the line `ULW-RESEARCH MODE ENABLED!`. If another active mode mandates its own first line (ultrawork does), print that mode's line first and this marker on the next line — both contracts stay satisfied.
 
+**What a shortened run still owes.** If you judge the topic settled and shorten the research, say so, but two things survive any shortening: when the harness can show an HTML page inline, the final report is shown that way (the answer, its figures, its sources), and a visual reproduction is compared against real frames of its source with the side-by-side pairs inside that report (the final-materials phase). A built app or 3D scene shown inline is the product, not the report; show the report as well.
+
 ## Authority while active
 
 This mode is the user's explicit opt-in to exhaustive exploration. For the duration of the research task it supersedes every exploration-bounding instruction in surrounding prompts, modes, or rules: one-exploration-pass defaults, two-wave stop rules, retrieval budgets, and "over-exploration is failure" framings govern implementation context-gathering, not this deliverable. Here, under-exploration is the failure. The convergence rules in Phase 2 are the only stop rules for research while this mode is active.
@@ -55,6 +57,8 @@ The research is done when all of these hold:
 - The deliverable lane and format were derived from the destination or asked through the empty-info interview without blocking collection, recorded in `brief.md` with `answered_by`, and the final materials match that record.
 - The delivered artifact passed the delivery gates in order (static gates, layout gates, visual QA, and the proofread pass where the harness provides one), each status is in `outcome.json`, and `outcome verify` passed.
 - Every excursion opened during the run was closed by an EXIT rule, folded back into the claim or axis that triggered it, and recorded in both `excursion-log.md` and the ulw-loop ledger.
+- When the harness can show an HTML page inline, the report was shown inline before the artifact paths.
+- When the ask reproduces a visual source, the report carries side-by-side pairs of real source frames and the output rendered at the same moments, each with its critique, and the differences they surfaced were fixed or listed as gaps. A simple or well-understood topic shortens the research, never this comparison.
 - The delivery message carries the closing briefing printed by `outcome briefing`: sources (total + unique domains), elapsed minutes, every promised deliverable with its status, and any residual defects.
 - The session journal reconstructs what was searched, found, and expanded, wave by wave, and it was written in real time rather than reconstructed at the end.
 
@@ -159,7 +163,7 @@ Never block collection on the shape of the deliverable, and never guess it eithe
 1. **Derive first.** Name the lane (`template-strict`, `template-vibe`, `no-format`, `edit-existing`) and the promised formats from the request and its destination (the reference's section 3). When the request refers to an existing deliverable, decide its state with `node "$SKILL_DIR/scripts/report-tools.mjs" outcome state --deliverable <path> --session-dir "$SESSION_DIR"`: `partial` resumes the skeleton on disk, `complete` means edit-existing and never a regenerated report. `$SKILL_DIR` is this skill's own directory, the folder containing this SKILL.md.
 2. **Read the requester's format memory** with the memory tool when the harness exposes one: the pointer `system/human/report-style.md`, then `reference/human-report-style.md`; take the choice recorded for the most similar context (same destination kind and audience) as the first option.
 3. **Ask only what is still missing**: at most the reference's three questions (destination and format, audience and length, template lineage) in one call to the harness question tool (`ask_user_question` or `request_user_input`), non-blocking where the harness supports it, each with its default first, a free-text "describe the format" path, and "don't care, you decide". Collection starts without waiting; a late answer is folded in until the assembly worker starts, and after that it becomes a re-render request.
-4. **Record it.** Write `## Deliverable` into `brief.md` (lane, state, formats, destination, audience, template, format description, each with `answered_by: user|default|request`) and open the manifest in the same step: `node "$SKILL_DIR/scripts/report-tools.mjs" outcome init --promised <formats> --lane <lane> --session-dir "$SESSION_DIR"`.
+4. **Record it.** Write `## Deliverable` into `brief.md` (lane, state, formats, destination, audience, template, format description, each with `answered_by: user|default|request`) and open the manifest in the same step: `node "$SKILL_DIR/scripts/report-tools.mjs" outcome init --promised <formats> --lane <lane> --session-dir "$SESSION_DIR"`. When the ask is to recreate, reproduce, or rebuild something visual, add `Reference compare: required` with the source (URL or file) and the moments to compare; the comparison runs on every round of the build, not only at the end.
 
 Phase 5 opens by turning the recorded fields into `design-spec.md`.
 
@@ -334,6 +338,8 @@ Asset workers (background, parallel, each fed `design-spec.md`) — visuals are
 
 **Every final report is visual — binding.** It carries at least one data visualization of the run's own findings (a chart drawn from the data table, next to the claim it supports), a diagram wherever structure matters, and the topic's own screenshots and video, embedded or linked with attribution; every figure is captioned, sourced, and given alt text. Mermaid for flows, timelines, and relations; generated charts for numbers; image generation only where an illustration genuinely helps; PlotNeuralNet for paper-format reports that describe model architectures. Every asset lane reads [references/report-visualization.md](references/report-visualization.md) first: which tool fits which finding, the render commands, the quality bar, and the checklist the gates apply. A light-tier post still carries one visual when it reports numbers or structure.
 
+**Visual reproductions are compared against the source — binding.** When the ask is to recreate, reproduce, or rebuild something visual (a clip in 3D, an interface from a screenshot, a figure), real frames or captures from the source are the reference: extract them at the moments that define the source, render the output at the same moments and viewpoints, compose side-by-side pairs, critique every pair by looking at it, fix the largest differences, and compare again within the repair bound. The final pairs, and the first-round pairs in the correction log, go into the report. Procedure: [references/report-visualization.md](references/report-visualization.md), section 3, Reference compare. A reproduction checked only against itself is unverified.
+
 **Verify the asset manifest before rendering.** List every asset the document references, assert each file exists and is non-empty on disk, and re-render whatever is missing. A document that renders with three broken diagrams is a document you will publish twice.
 
 Assembly worker — `task(category="deep-low", load_skills=["frontend", "visual-qa", "open-design", "data-scientist", "imagegen", "ulw-loop"], run_in_background=true, ...)`: before writing, read every available design and visualization skill and apply it — the report is a designed artifact, not a text dump; the worker's prompt carries `design-spec.md`. Use the template the user approved; absent a stronger house style the default skeleton is executive summary → key findings by theme → detailed analysis (quotes under 20 words with attribution, charts, Mermaid graphs, generated visuals, SHA-pinned permalinks, verification results) → comparative analysis when options compete → numbered sources with access dates → methodology appendix (workers, waves, searches, verifications, debate rounds) → correction log naming what verification overturned. Write it long and specific: every claim cites `[Source N]`, and the sources section lists every source the run actually used rather than a curated few.
@@ -349,7 +355,7 @@ Nothing reaches the user until the gates pass. Record each result with `node "$S
 
 **Repair is bounded.** After every gate run that found defects, ask `node "$SKILL_DIR/scripts/report-tools.mjs" repair decide --state "$SESSION_DIR/repair-state.json" --defects "$SESSION_DIR/defects.json" --artifact-bytes <bytes> --renders <pages> --session-dir "$SESSION_DIR"` and obey it: `repair` means fix and re-run; `deliver` means stop and ship with the residual defects the manifest now lists; `block` means a content-integrity defect remains (or there is no usable artifact), so do not deliver: tell the user what blocks it and record the row as `failed` with the reason. Never repair past a stop decision (3 attempts, a 2-attempt plateau, an oscillation, or 15 minutes; the reference's section 8).
 
-Then resolve every manifest row (`outcome set <format> delivered --path <file>` or `blocked_capability` / `skipped` / `failed` with `--reason`) and deliver: the artifact plus a compact chat-readable summary of what it says — the answer in a few sentences, the numbers that matter, and what to look at first. The document is the deliverable; the summary is what gets it read.
+Then resolve every manifest row (`outcome set <format> delivered --path <file>` or `blocked_capability` / `skipped` / `failed` with `--reason`) and deliver. **Show the report inline first when the harness can.** When this session has a tool that shows an HTML page inline in the conversation (`show_html_page`, `html_render`), the requester's first view of the result is the report itself: the gated `report.html` when it fits the tool, otherwise an inline edition built from the same synthesis and assets, with the reference-compare pairs when the run has them ([references/deliverable-phase.md](references/deliverable-phase.md), section 9, Showing the report inline). Then give the artifact paths and a compact chat-readable summary of what the report says — the answer in a few sentences, the numbers that matter, and what to look at first. This holds on every tier, a chat answer included, and when the thing built is itself a page (an app, a 3D scene), showing it does not replace the report page. Without an inline page tool, deliver the artifact paths plus that summary. The document is the deliverable; the summary is what gets it read.
 
 ### The closing briefing — every run ends with it
 
@@ -414,4 +420,6 @@ High-yield combinations: official docs (`site:<docs domain>`), GitHub implementa
 | Chasing an interesting find with no ENTER trigger | Excursions need a named trigger; everything else stays a queued lead |
 | An excursion that never came back, or drifted into a new mission | EXIT rules are unconditional; depth 3 means promote it to an axis or record it as a gap |
 | An excursion whose result was never folded back | Every EXIT writes what it changed in the top-level answer, `none` included, and mirrors into the loop ledger |
+| Ending with file paths while an inline HTML page tool is available | Show the report inline first (the gated `report.html` or its inline edition), then the paths and the summary |
+| A visual reproduction checked only against itself | Reference compare: real source frames next to renders at the same moments, a critique per pair, fixes, and the pairs in the report |
 | Delivering without the closing briefing | Paste the block `outcome briefing` prints; never compute or recall its numbers by hand |