lazycodex-ai 5.1.40 → 5.1.41

package/packages/omo-codex/scripts/install-dist/install-local.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-// omo-codex-install:b408b576ee9f2c827cd2733d966cd724fd27f029332824185037c443d3f8dd57:45ee374af9a88da9712fc3e3f8e220dbdc302cebb6f4025884612f07180b8a02
+// omo-codex-install:b93c8a23ccfb735feb527d0eb908268e037e0bf2991d36923501d67a335c7f6e:6062641acd173ed604879322dfb8008ad35f96a8286ebc8dfecd7cc90bd35467
 var __esm = (fn, res, err) => () => {
   if (fn)
     try {
@@ -10036,7 +10036,7 @@ var package_default;
 var init_package = __esm(() => {
   package_default = {
     name: "@oh-my-opencode/omo-codex",
-    version: "5.1.40",
+    version: "5.1.41",
     type: "module",
     private: true,
     description: "Codex harness adapter for oh-my-openagent. Vendored Codex plugin namespace (omo) + TypeScript installer + telemetry.",
@@ -19486,6 +19486,19 @@ var OmoHarnessIdSchema = _enum(OMO_CONFIG_HARNESS_IDS);
 var OMO_CONFIG_LEGACY_HARNESS_ALIASES = { senpi: "native" };
 var OMO_CONFIG_LEGACY_HARNESS_IDS = Object.keys(OMO_CONFIG_LEGACY_HARNESS_ALIASES);
 
+// packages/omo-config-core/src/schema/memory-agreements.ts
+var OMO_MEMORY_AGREEMENTS_DEFAULTS = { enabled: true, needs_human_threshold: 3, max_items: 64 };
+var OmoMemoryAgreementsSchema = object({
+  enabled: boolean2().default(OMO_MEMORY_AGREEMENTS_DEFAULTS.enabled),
+  needs_human_threshold: number2().int().min(1).default(OMO_MEMORY_AGREEMENTS_DEFAULTS.needs_human_threshold),
+  max_items: number2().int().min(8).max(256).default(OMO_MEMORY_AGREEMENTS_DEFAULTS.max_items)
+}).strict();
+var OmoMemoryAgreementsLayerSchema = object({
+  enabled: boolean2().optional(),
+  needs_human_threshold: number2().int().min(1).optional(),
+  max_items: number2().int().min(8).max(256).optional()
+}).strict();
+
 // packages/omo-config-core/src/schema/memory.ts
 var OmoMemoryReflectionTriggerSchema = object({
   step_count: number2().int().nonnegative().default(25),
@@ -19629,6 +19642,7 @@ var OmoMemoryAgentOverridesSchema = object({
   facts: OmoMemoryFactsLayerSchema.optional(),
   dream: OmoMemoryDreamLayerSchema.optional(),
   people: OmoMemoryPeopleLayerSchema.optional(),
+  agreements: OmoMemoryAgreementsLayerSchema.optional(),
   soul: OmoMemorySoulLayerSchema.optional(),
   write_notice: OmoMemoryWriteNoticeLayerSchema.optional(),
   sync: OmoMemorySyncLayerSchema.optional(),
@@ -19659,6 +19673,7 @@ var OmoMemorySettingsSchema = object({
     auto_select_max_chars: 150000
   }),
   people: OmoMemoryPeopleSchema.default({ enabled: true, max_entries: 40, max_entry_chars: 200 }),
+  agreements: OmoMemoryAgreementsSchema.default(OMO_MEMORY_AGREEMENTS_DEFAULTS),
   soul: OmoMemorySoulSchema.default({ edit_notice: true }),
   write_notice: OmoMemoryWriteNoticeSchema.default({ enabled: true }),
   sync: OmoMemorySyncSchema.default({ enabled: true }),
@@ -19685,6 +19700,7 @@ var OmoMemorySettingsLayerSchema = object({
   facts: OmoMemoryFactsLayerSchema.optional(),
   dream: OmoMemoryDreamLayerSchema.optional(),
   people: OmoMemoryPeopleLayerSchema.optional(),
+  agreements: OmoMemoryAgreementsLayerSchema.optional(),
   soul: OmoMemorySoulLayerSchema.optional(),
   write_notice: OmoMemoryWriteNoticeLayerSchema.optional(),
   sync: OmoMemorySyncLayerSchema.optional(),

package/packages/shared-skills/skills/browser/runtime/omowright/manifest.json

@@ -5,5 +5,5 @@
     "index.js": "d67d3a847fe0bbc43e824feded48b280890d31879538309e671cd5f671133995",
     "page-bundle.js": "bfd51e8383cf47200d57387bbbed258bce5a3a3d00c38fc108034d2888e23f0c"
   },
-  "stagedAtUtc": "2026-10-20T14:11:05.519Z"
+  "stagedAtUtc": "2026-10-22T12:33:03.780Z"
 }

package/packages/shared-skills/skills/frontend/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: frontend
-description: "Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way."
+description: "Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain way."
 ---
 
 # Frontend
@@ -25,12 +25,12 @@ 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
+## Draft guard — read before the first line of HTML or CSS
 
 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.
+- **No coloured bar on one side of a box, rounded or square, and no accent outline on a rounded card, decorative or state.** A card, callout, warning, cover block, stat tile, testimonial, alert, or list row never carries a coloured stripe on one side: `border-left: 4px solid <accent>` or `border-l-4 border-indigo-500`, a coloured `::before`/`::after` bar inside it, an inset `box-shadow` stripe, or a hard-stop gradient band or gradient `border-image` along one edge. A rounded card never wears a 2px-or-wider accent outline either (`border: 2px solid var(--primary)`, `ring-2 ring-indigo-500`, an inset ring). Both read as generated whether they decorate the box or mark it selected, focused, or active, and an accent underline under a heading, tab, or link counts too: use a neutral 1px rule, or set the text itself in the accent ink. 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 between rows or sections, table rules, and a blockquote's neutral rule. 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, component, and HTML file you wrote, including a report or figure you will print, screenshot, or render to an image. 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
 
@@ -145,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 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.
+- **No coloured edge bars, no accent outlines on cards.** A decorative accent stripe on a callout, rounded or square, 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.
@@ -160,4 +160,4 @@ Domains: `product` `style` `typography` `color` `landing` `chart` `ux` `react` `
 
 ## Activation
 
-Use for any frontend, web UI, UX, visual, design, styling, layout, animation, performance, accessibility, or SEO work — building, redesigning, auditing, or generating mockups. Not for backend, CLI, or pure-logic tasks with no visual surface.
+Use for any frontend, web UI, UX, visual, design, styling, layout, animation, performance, accessibility, or SEO work, and for every HTML/CSS/SVG artifact that ends up as a PDF, print page, report, figure, diagram, slide, or image — building, redesigning, auditing, or generating mockups. Not for backend, CLI, or pure-logic tasks with no visual surface.

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>
+  </>
+)