oh-my-opencode 5.1.51 → 5.1.54

package/dist/skills/browser/runtime/omowright/manifest.json

@@ -1,9 +1,9 @@
 {
   "version": "0.0.1",
-  "sourceDigest": "646863e33d2a1af1fdd3651ee157ada9ba24337e82430edef94342774c80f0f6",
+  "sourceDigest": "c9eaae75e948cc52d5b60bb654a5565869d68627046453d87d6f695a5b618045",
   "files": {
-    "index.js": "d67d3a847fe0bbc43e824feded48b280890d31879538309e671cd5f671133995",
+    "index.js": "8b14c1775f397e36967a0d094c67e2a31f8ae1e92add172925548723ca339046",
     "page-bundle.js": "bfd51e8383cf47200d57387bbbed258bce5a3a3d00c38fc108034d2888e23f0c"
   },
-  "stagedAtUtc": "2026-10-28T22:38:26.463Z"
+  "stagedAtUtc": "2026-10-31T15:59:00.866Z"
 }

package/dist/skills/frontend/ATTRIBUTION.md

@@ -190,7 +190,8 @@ SOFTWARE.
 
 ## 5. Project-original files
 
-`frontend/SKILL.md`, `frontend/references/design/README.md`, `_INDEX.md`, `aside.md`,
+`frontend/SKILL.md` (apart from the browser-surface, type-and-spacing-floor, and generated-scaffold
+rules adapted from Impeccable, section 6), `frontend/references/design/README.md`, `_INDEX.md`, `aside.md`,
 `design-system-architecture.md`, `grounding.md`, `react-dev-tooling-skill.md`,
 `frontend/references/perfection/README.md`, `react-perf-tooling.md`, and
 `frontend/scripts/perfection/lighthouse-audit.py` are original to this project and require
@@ -245,3 +246,105 @@ MIT-licensed `JCodesMore/ai-website-cloner-template` clone-website workflow that
 cites; no source from that template is copied. It carries no third-party attribution beyond
 that lineage note, and it grants no license to copy any target site's trademarks, brand
 assets, or proprietary copy.
+
+---
+
+## 6. Impeccable (Paul Bakaus): craft-floor rules
+
+`frontend/references/perfection/craft-floor.md`, the "Browser surfaces", "Type and spacing
+floor" and "No generated scaffold" rules in `frontend/SKILL.md`, and the matching
+`visual-qa/SKILL.md` checklist items (A3 measure, A13, B8, E7, F8, F9) are adapted from
+`skill/reference/craft-floor.md` of the Impeccable project. Unlike sections 1-4 these files
+are committed: they are rewritten in this project's words, with a few short phrases kept
+close to the source.
+
+- Source: https://github.com/pbakaus/impeccable
+- Adapted from upstream commit: 5e745ace7e151feb2a93d360d0281fe39448b857
+- Copyright 2025 Paul Bakaus
+- Licensed under the Apache License, Version 2.0 (the "License"); you may not use these
+  files except in compliance with the License. You may obtain a copy of the License at:
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software distributed under
+  the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied. See the License for the specific language governing
+  permissions and limitations under the License. A full copy of the Apache-2.0 license
+  text is provided in `LICENSE-Apache-2.0.txt` alongside this notice.
+
+- **Changes (Apache-2.0 §4(b)):** the rules were selected and rewritten. Kept: the
+  browser-surface list, more space above a heading than below it, the 65-75ch body
+  measure, the 6rem display cap, the -0.04em tracking floor, and the scaffold and shadow
+  patterns listed above. Added: a property per browser surface, the 1.25x type-scale step,
+  the 1.5x above-versus-below heading ratio, the 2x between-versus-within group gap, the
+  phone measure floor, the split into floors and route-overridable defaults (the kicker is a
+  default here, not upstream's absolute ban), and the `/visual-qa` item mapping. Dropped
+  because they conflict with this skill: blur and `backdrop-filter` as general motion
+  materials (here they animate only in an ambience reveal the brief asked for), choosing
+  one theme per product category, decorative custom scrollbars, a blanket bounce-easing
+  ban, and the common-typeface ban.
+  The upstream `NOTICE.md` names only the MIT-licensed `platform-design-skills` origin of
+  its iOS and Android references, none of which is used here.
+
+---
+
+## 7. frontend-detect SDK: Impeccable detector logic and a StyleGallery reflow check
+
+`frontend/scripts/detect/` (the SDK, its rules under `rules/`, the CLI, and their tests),
+`frontend/references/perfection/detect.md`, and the development parity scripts
+`packages/shared-skills/scripts/detect-parity.ts`, `detect-source-parity.ts` and `detect-parity-oracle.ts` reimplement in TypeScript the rule logic of
+the Impeccable detector (`crates/core`, `crates/detect`, `crates/foundation/src/registry.rs`)
+at the upstream commit named in section 6. No Rust or JavaScript source is copied; the rule
+ids, thresholds, exemptions and the `data-impeccable-ignore` waiver attribute follow
+upstream so findings stay comparable, and the unit tests model upstream's fixture cases.
+The license, copyright line and license text pointer in section 6 apply to this derived
+work as well. `detect-parity-oracle.ts` is not shipped in the skill: at development time it
+loads the prebuilt in-page detector from a local Impeccable checkout to record reference
+findings, and copies none of it.
+
+- **Changes (Apache-2.0 §4(b)):** a new TypeScript implementation over a browser-captured
+  page snapshot instead of upstream's Rust engine and WASM bundle; every rule description
+  and fix hint is rewritten; `low-contrast` is an error rather than a warning; project
+  allowlists (`allowFonts`, `allowEasings`) and design tokens are configuration rather than
+  files; our own `data-detect-ignore` waiver is added beside upstream's; telemetry, the
+  hosted design-direction service, the edit hook, the live mode and the browser extension
+  are not ported.
+
+The `viewport-reflow` rule and the reflow pass in `detect.ts` (render at 320, 375, 768,
+1024 and 1440 px, append an unbroken stress string at 320 px, report horizontal overflow)
+follow the layout verification matrix and `tests/pattern-runtime.spec.mjs` of StyleGallery.
+
+- Source: https://github.com/changeroa/StyleGallery
+- Adapted from upstream commit: 0bf928f6269b1cb6cf24f04e0bf28a8ce2bbc0ff
+- Code licensed under the MIT License; documentation under CC BY 4.0:
+
+```
+MIT License
+
+Copyright (c) 2026 IYEN
+
+This license applies to the source code in this repository: scripts, CLI and
+MCP server implementations, the website and server code under `site/`,
+validators, and test code. The Markdown documentation, pattern and recipe
+prose, and domain documents are licensed separately under CC BY 4.0; see
+LICENSE-DOCS. Third-party material adapted into this repository keeps its
+original rights; see NOTICE.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/dist/skills/frontend/SKILL.md

@@ -23,7 +23,7 @@ Before the first edit, name the references the request routes to and one reason
 | Interaction or motion: micro-interactions, transitions, gestures, hover/press/state feedback | `references/design/interaction-skill.md`. The beui.dev catalog is the reference: read the nearest pattern's real source through its curl recipe, adapt the mechanism to `DESIGN.md` motion tokens. |
 | Ambience, only when the brief asks: an animated, shader, particle, or grid background; a typographic reveal; scroll storytelling; spotlight, tilt, or glowing-border cards | `references/design/ambience-skill.md`. The react-bits catalog is the reference: nearest pattern, real source, its retrofit checklist (reduced motion, off-screen pause, compositor-only, tokens, budget); never vendor its code. |
 | Tone outside both anchors: AI-agent UI, charts, landing sections, a brutalist or Tailwind-only build, or no nearest pattern | `references/design/component-catalogs.md`: which catalog per tone, the exploration procedure, the licence gate. |
-| Writing or modifying frontend code; auditing performance, SEO, accessibility, quality | `references/perfection/README.md` (+ `react-perf-tooling.md` before any React audit). Lighthouse 100 in every category on real Playwright Chromium, won in the architecture. Design and perfection load together for implementation work. |
+| Writing or modifying frontend code; auditing performance, SEO, accessibility, quality | `references/perfection/README.md`, `references/perfection/craft-floor.md`, and `references/perfection/detect.md` (+ `react-perf-tooling.md` before any React audit). Lighthouse 100 in every category on real Playwright Chromium, won in the architecture. Design and perfection load together for implementation work. |
 | On request, or a greenfield palette, type, chart, or landing-structure question | `references/ui-ux-db/README.md` and its search CLI (library, below). A lookup tool, never the posture. |
 | Creating or updating `DESIGN.md`; personas, critique, debt, handoff, synthetic user testing | `references/designpowers/README.md` + `lane-c-review.md` (lane-c is the Phase Final critique reviewer and fills the accessibility-constraint and accepted-debt sections). |
 | Any code change in a React project | `references/design/README.md` Phase 0.5: the react-grab / react-scan / react-doctor check (a grep), the install when one is missing, and the dev-only gate; `react-dev-tooling-skill.md` for per-framework snippets. |
@@ -56,6 +56,8 @@ Take the branch in `references/design/README.md` Phase 0 first (a small change o
 - **Keyboard.** Every action reachable in reading order with a visible focus ring that no sticky bar or overlay covers; Escape closes the topmost overlay; Enter triggers the non-destructive default; standard shortcuts keep their meaning; icon-only controls carry an accessible name and a tooltip.
 - **Motion.** Only for a cause (an interaction, a state change, an arrival), on `transform`, `opacity`, `filter`; interruptible, never gating input; movement becomes a cross-fade under `prefers-reduced-motion`. A hover that changes nothing or motion on a non-interactive element is slop: leave it out.
 - **Icons.** One SVG set (Lucide, Heroicons, Radix, Phosphor); never an emoji.
+- **Browser surfaces.** Text selection, the caret, visible scrollbars, the focus ring, link underline offset, and tabular numerals are themed from the palette in both themes; none ships as the browser default. `references/perfection/craft-floor.md` has the property for each.
+- **Type and spacing floor.** Each heading step (display to h3, and the smallest heading to body) differs by at least 1.25x, and body-family roles that sit closer also differ by weight, colour or case; the space above a section heading is at least 1.5x the space below it; the gap between groups is at least 2x the gap inside one; body text runs 65-75 characters per line on desktop; display type stays at or under 6rem and tracking at or above -0.04em unless the chosen style route sets its own. Check computed values, not the source.
 - **Concrete reference = contract.** Match its pixels, copy, component structure, and responsive intent unless the user accepts a deviation.
 - **Never weaken UX to buy points.** No dropping animations, hiding content, or simplifying interactions for a Lighthouse score or a deadline.
 
@@ -63,16 +65,18 @@ Take the branch in `references/design/README.md` Phase 0 first (a small change o
 
 Some tells regenerate by default, so they are kept out of the first draft rather than left for QA to find.
 
-- **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.
+- **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), a 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-draft-guard.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, and flags the stripes above plus promotional filler copy, emoji used as icons, hype badges, and hard-coded vanity numbers in stat tiles. Exit 1 means a tell is in the draft: remove it, do not argue with the finding.
+- **Detect after the build renders.** Once the page renders, run the detect SDK on it at 1440 and 390 with reflow on (`references/perfection/detect.md`): `detectPage({ kind: "url", url }, { reflow: true })` from code, or `bun $SKILL_DIR/scripts/detect/cli.ts --reflow <url-or-html-files>`. It reads the rendered page (contrast on the painted background, type scale, heading order, overflow, decoration and copy tells). Fix every error and warning before `/visual-qa`; record a decision for each advisory.
 - **No decorative badge without a state behind it.** A pill, chip, or tag appears only when it carries a value that can change: a status, a count, a category the user filters by. "New", "Pro", or "AI-powered" on a static heading is decoration.
 - **No stat tile without a decision behind it.** A number earns a tile when someone acts on it; four tiles above a table that already holds the numbers are filler.
 - **No invented proof.** Testimonials, quotes, customer logos, ratings, user counts, and prices come from the project or stay out. A section that needs proof the project does not have is cut, or ships as an empty slot labelled for the owner to fill; a "sample" testimonial is still a fabricated one.
 - **No prop decoration.** A device tilted for effect, a floating reassurance card, decorative coordinates, sparkles, and ornaments that say nothing about the product are the generated version of "premium". A product preview shows a real state of the product, with its text readable at the rendered size.
-- **No repeated formula.** A treatment that carries one heading (a serif line with an italic accent phrase, a gradient word, an eyebrow-headline-subtitle stack) becomes a template when every section repeats it; so does one image reused across sections. Use each once, where it means something.
+- **No repeated formula.** A treatment that carries one heading (a serif line with an italic accent phrase, a gradient word, a headline-subtitle pair) becomes a template when every section repeats it; so does one image reused across sections. Use each once, where it means something.
 - **No subtitle under every heading.** A heading explains itself; a one-line description under each one is the generated rhythm. Keep a subtitle only where the heading alone would be misread.
 - **One fact, one place.** A conclusion banner and a callout that restates it, a summary card and a table row with the same figure, a label repeated as its placeholder: keep one.
 - **No dated or borrowed surface.** Glass and blur panels (they read as a clone of a popular open-source chat app), neumorphism, mesh-gradient heroes, heavy drop shadows, and 2019-era SaaS illustration date a draft on sight. Surfaces come from `DESIGN.md` section 7; a material ships only when the brief or a concrete reference supplies it.
+- **No generated scaffold.** No kicker label above a heading, no icon tile stacked over a heading in a grid of same-size cards, no hero metric (a giant number with a small label and supporting stats), no card inside a card, no neutral gray text on a coloured surface, no monospace as a "technical" costume, and no zero-offset coloured glow standing in for a shadow. `references/perfection/craft-floor.md` gives the replacement for each, and says when the brief or its chosen route brings one back.
 - **No promotional copy.** Interface copy states what a thing is or does. "Seamlessly", "effortlessly", "smart", "powerful", "at a glance", "supercharge", and their Korean counterparts ("한눈에", "손쉽게", "스마트한", "효율적으로", "간편하게") are marketing, not interface: rewrite as the plain fact or delete.
 
 ## 3. Subtract

package/dist/skills/frontend/references/design/design-system-architecture.md

@@ -73,11 +73,11 @@ rather than borders, creating layers you feel more than see."
 | H1 | 36px / 2.25rem | 700 | 1.2 | -0.015em | Section headers |
 | H2 | 28px / 1.75rem | 600 | 1.3 | -0.01em | Subsection headers |
 | H3 | 22px / 1.375rem | 600 | 1.4 | 0 | Card titles |
-| Body/lg | 18px / 1.125rem | 400 | 1.6 | 0 | Lead paragraphs |
+| Body/lg | 18px / 1.125rem | 400 | 1.6 | 0 | Lead paragraphs, in the secondary ink |
 | Body | 16px / 1rem | 400 | 1.6 | 0 | Default text |
-| Body/sm | 14px / 0.875rem | 400 | 1.5 | 0 | Secondary info |
+| Body/sm | 14px / 0.875rem | 400 | 1.5 | 0 | Secondary info, in the secondary ink |
 | Caption | 12px / 0.75rem | 500 | 1.4 | 0.02em | Labels, metadata |
-| Overline | 11px / 0.6875rem | 600 | 1.3 | 0.08em | Section labels, uppercase |
+| Overline | 11px / 0.6875rem | 600 | 1.3 | 0.08em | Field, table and metadata labels, uppercase; by default not a label above a heading, unless the chosen route asks for one (`references/perfection/craft-floor.md`) |
 
 ### Font Stack
 - Primary: [specify — e.g. "Inter, system-ui, -apple-system, sans-serif"]

package/dist/skills/frontend/references/perfection/craft-floor.md

@@ -0,0 +1,59 @@
+# Craft floor: the numbers a build must clear
+
+Adapted from the `craft-floor` reference of [pbakaus/impeccable](https://github.com/pbakaus/impeccable) (Apache-2.0, Copyright 2025 Paul Bakaus), rewritten for this skill; see `ATTRIBUTION.md` section 6 for the license and the list of changes.
+
+Read this with `README.md` for any code change. It sets no direction, and it has two kinds of line. Each line is checked on the rendered page by reading computed values, not by looking at the source. `/visual-qa` checks them again (A3, A13, B8, E7, F8, F9).
+
+- **Floors** (marked *floor* below) hold under every style skill and brand. A project's `DESIGN.md` may raise them, never lower them.
+- **Defaults** (every other line) hold until the brief asks otherwise. That means the brief's own words, a concrete reference, or a route the brief chose that names the value or pattern: a Layer A style skill or Layer B brand under `references/design/`, or the ambience route. Brutalist display scale and tracking, a brand's labels above headings, and the ambience route's blur reveals and glowing-border cards are examples. The route wins for that one item only. Record the deviation in the brief or `DESIGN.md` so `/visual-qa` reads it as chosen, not generated.
+
+## Browser surfaces
+
+*Floor.* The parts of a page the browser draws by default ship with no design unless you give them one. Theme every one that the surface has, from the palette tokens, in both themes:
+
+| Surface | What to set |
+|---|---|
+| Text selection | `::selection { background: <accent at low alpha>; color: <ink> }`; the default system blue never shows. |
+| Caret | `caret-color: <accent or ink>` on inputs, textareas and contenteditable. |
+| Scrollbars | `scrollbar-color: <thumb> <track>` and `scrollbar-width: thin` on scroll containers that keep a visible bar. Overlay scrollbars stay overlay (`/visual-qa` A5); this styles the bar, it never adds a gutter. |
+| Focus ring | `:focus-visible { outline: 2px solid <focus token>; outline-offset: 2px }`, visible on every surface colour. |
+| Underlines | `text-underline-offset: 0.15em` to `0.25em` and `text-decoration-thickness` from the type scale on links, so the line clears descenders. |
+| Numerals | `font-variant-numeric: tabular-nums` on every column, counter, timer, price and table cell that changes or aligns. |
+
+Exempt: a surface with no instance of the element (no inputs means no caret), and a native control the brief keeps unstyled on purpose.
+
+## Type and spacing floor
+
+| Rule | Floor | Read from |
+|---|---|---|
+| Type scale steps (*floor*) | Each step of the heading ladder (display, h1, h2, h3) and the step from the smallest heading to body differ by at least 1.25x in size. The body-family roles (lead, body, small, caption, overline or label) may sit closer, but each also differs from its neighbour by weight, colour or case, never by size alone. | computed `font-size` of each role in use |
+| Space around a heading | The space above a section heading is at least 1.5x the space below it, so the heading belongs to the content it introduces. | computed margin/padding plus the parent gap |
+| Group separation | The gap between groups is at least 2x the gap inside a group. | computed `gap` / margins of siblings |
+| Body measure (*floor*) | Body text runs 65-75 characters per line on desktop; 45 is the lower bound on a phone. | rendered line length at 1440 and 390 |
+| Display size | A display heading stays at or under 6rem unless the chosen route sets a larger display scale. | computed `font-size` |
+| Tracking | Letter spacing stays at or above -0.04em unless the chosen route sets tighter display tracking; -0.02em to -0.03em usually reads better on large type. Body text keeps 0. | computed `letter-spacing` / `font-size` |
+
+Run the real copy at every captured width and fix what overflows or wraps a heading to four lines.
+
+## Patterns kept out of the first draft
+
+These extend the Draft guard in `SKILL.md`. Each one is what a generator reaches for when nothing decided otherwise, so the first draft leaves it out. The brief or its chosen route can still ask for one (see the defaults rule above). The hard offset shadow below is narrower than that.
+
+- **Kicker above a heading.** A small uppercase or accent label sitting on top of a heading ("FEATURES", "01 - OVERVIEW"). Delete it; the heading carries its own weight.
+- **Icon in a tile over a heading.** A rounded square holding an icon, stacked above a heading and a line of text, repeated across a grid of same-size cards. Use the content's own structure (a list, a table, a real image) instead of the card formula.
+- **Hero metric.** One giant number with a small label, flanked by supporting stats and an accent. A number earns that size only when it is the decision the screen exists for.
+- **Cards inside cards.** A bordered or shadowed box inside another. Separate inner groups with space or a neutral 1px rule.
+- **Gray text on a coloured surface.** Secondary text on a tinted or coloured background takes a shade of that hue (or the foreground at reduced alpha), never neutral gray, which looks dirty and fails contrast first.
+- **Monospace as a costume.** A monospace face only for code, data, ids and measurements, never to make a heading or a UI read as "technical".
+- **Glow and halo shadows.** A shadow carries a y-offset and a soft blur. A zero-offset coloured glow around a card or button is decoration, unless the brief asked for glowing-border cards through the ambience route. Hard offset shadows with no blur (`4px 4px 0`) only when the brief chose a neobrutalist direction.
+
+## What this skill does not take from the source
+
+The upstream reference disagrees with rules this skill already holds; ours win:
+
+- Blur, `backdrop-filter` and `filter: blur()` are not general motion materials. They animate only in an ambience reveal the brief asked for (`references/design/ambience-skill.md`), and never under `prefers-reduced-motion` (`/visual-qa` G4).
+- A label above a heading is a default to leave out, not an absolute ban: a style route that allows a limited number of them (`taste-skill.md`) is followed.
+- Both light and dark themes ship (`/visual-qa` E1); the theme is not picked per product category.
+- An intentional spring is allowed where `DESIGN.md` names it; bounce easing is a finding only when no token asked for it.
+- A typeface the project chose (for example Inter in a product that matches its platform) is never a finding because it is common.
+- Scrollbars follow the overlay rule above; this skill never asks for a decorative custom scrollbar.

package/dist/skills/frontend/references/perfection/detect.md

@@ -0,0 +1,52 @@
+# frontend-detect: the after-build lint
+
+`scripts/detect/` is a typed TypeScript SDK that renders a page and lints what the browser actually drew: contrast against the painted background, the type scale in use, spacing, overflow, decoration tells, and copy tells. The rule logic is ported from the detector of [pbakaus/impeccable](https://github.com/pbakaus/impeccable) (Apache-2.0, Copyright 2025 Paul Bakaus) plus one reflow check from [changeroa/StyleGallery](https://github.com/changeroa/StyleGallery) (MIT); see `ATTRIBUTION.md` section 7.
+
+It runs after the draft builds and before `/visual-qa`. `check-draft-guard.ts` stays the first lint on source; this one needs a rendered page and catches what source cannot show: a 4.2:1 table header in dark mode, an h1 followed by an h3, a heading that wraps one word onto its last line, a card that overflows at 390.
+
+## Run it
+
+From code (the primary interface). Import `index.ts`; importing does nothing until you call a function:
+
+```ts
+const detect = await import(`${SKILL_DIR}/scripts/detect/index.ts`)
+const findings = await detect.detectPage({ kind: "url", url: "http://localhost:5173/settings" }, {
+  viewports: [{ width: 1440, height: 900 }, { width: 390, height: 844 }],
+  reflow: true,
+  config: { allowFonts: ["Inter"], designTokens: { radii: [8, 12] } },
+})
+if (detect.hasFailures(findings)) console.log(detect.formatFindingsText(findings))
+```
+
+- `detectPage(target, options)`: `target` is `{ kind: "url", url }` or `{ kind: "html", html }`. Renders at each viewport (default 1440 and 390) and returns sorted, de-duplicated findings.
+- `detectFiles(paths, options)`: HTML files are rendered; CSS/SCSS/Less, JSX/TSX, Vue, Svelte and Astro files run the source-text rules.
+- `lintSnapshot(snapshot, options)` / `lintSources(files, options)`: the pure rule engines, for a snapshot you captured yourself with `collectPageSnapshot` in your own Playwright or omowright page.
+- `renderer`: pass your own `Renderer` to reuse a browser you already drive; the default is `Bun.WebView` (system WebKit on macOS, installed Chrome elsewhere; `createWebViewRenderer({ backend: "chrome" })` matches the upstream engine most closely).
+- Every finding carries `ruleId`, `severity` (`error`, `warning`, `advisory`), `category`, `message`, `fixHint`, and a `location`: an element (`selector`, `rect`, `viewport`), a source position (`file`, `line`, `column`), or the page.
+
+From a shell, the CLI is a thin wrapper over the same calls:
+
+```bash
+bun $SKILL_DIR/scripts/detect/cli.ts [--json] [--reflow] [--config detect.json] <file-or-dir-or-url>...
+```
+
+Exit 0: no error or warning findings. Exit 1: at least one. Exit 2: usage error or a page that failed to render.
+
+## Config
+
+`--config` (or `options.config`) takes JSON:
+
+| Key | Meaning |
+|---|---|
+| `rules` | `{ "<rule-id>": "error" \| "warning" \| "advisory" \| "off" }` per rule |
+| `allowFonts` | Families the project chose on purpose (Inter on a product that matches its platform); never reported as overused |
+| `allowEasings` | Timing functions `DESIGN.md` names on purpose, such as an intentional spring |
+| `designTokens` | `{ fonts, colors, radii, fontSizes }`; the `design-system-*` rules report values outside them and stay silent without them |
+
+Waive one element with `data-detect-ignore="<rule-id> <rule-id>"` on it or an ancestor (upstream's `data-impeccable-ignore` is honoured too). A waiver needs the reason in `DESIGN.md`.
+
+## Reading the result
+
+- `error` and `warning` fail the gate: fix them before `/visual-qa`. `low-contrast` is an error here, stricter than upstream, because a contrast failure is never a taste call.
+- `advisory` findings are review prompts (`hard-offset-shadow` on a page that chose neobrutalism, `bounce-easing` on a named spring). Record the decision; do not delete a deliberate choice to silence one.
+- A finding you believe is wrong: rerun at the viewport it names and read the computed values it quotes. Waive it with the attribute only when `DESIGN.md` explains why.

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

@@ -0,0 +1,70 @@
+#!/usr/bin/env bun
+// Thin CLI over the detect SDK (index.ts). Usage:
+//   bun cli.ts [--json] [--reflow] [--config <file.json>] <file-or-dir-or-url>...
+// Exit 0 no error or warning findings, 1 findings that fail the gate, 2 usage or render failure.
+import { readFileSync } from "node:fs"
+import { collectFiles } from "../perfection/collect-files"
+import { type DetectConfig, detectFiles, detectPage, type Finding, formatFindingsText, hasFailures, parseConfig, RenderError, sortFindings } from "./index"
+
+type Args = { readonly json: boolean; readonly reflow: boolean; readonly config: DetectConfig; readonly targets: readonly string[] }
+
+function readConfig(path: string): DetectConfig | string {
+	let raw: unknown
+	try {
+		raw = JSON.parse(readFileSync(path, "utf8"))
+	} catch (error) {
+		// no-excuse-ok: catch (CLI boundary: an unreadable or malformed config file is a usage error reported as exit 2)
+		if (error instanceof Error) return error.message
+		throw error
+	}
+	return parseConfig(raw)
+}
+
+function parseArgs(argv: readonly string[]): Args | string {
+	let json = false
+	let reflow = false
+	let config: DetectConfig = {}
+	const targets: string[] = []
+	for (let i = 0; i < argv.length; i++) {
+		const a = argv[i] ?? ""
+		if (a === "--json") json = true
+		else if (a === "--reflow") reflow = true
+		else if (a === "--config") {
+			const path = argv[++i]
+			if (!path) return "--config needs a file"
+			const parsed = readConfig(path)
+			if (typeof parsed === "string") return `${path}: ${parsed}`
+			config = parsed
+		} else targets.push(a)
+	}
+	return targets.length === 0 ? "no targets" : { json, reflow, config, targets }
+}
+
+async function main(argv: readonly string[]): Promise<number> {
+	const args = parseArgs(argv)
+	if (typeof args === "string") {
+		process.stderr.write(`frontend-detect: ${args}\nusage: cli.ts [--json] [--reflow] [--config <file.json>] <file-or-dir-or-url>...\n`)
+		return 2
+	}
+	const urls = args.targets.filter((t) => /^https?:\/\//.test(t))
+	const { paths, missing } = collectFiles(args.targets.filter((t) => !urls.includes(t)))
+	if (missing.length > 0) {
+		process.stderr.write(`frontend-detect: cannot read ${missing.join(", ")}\n`)
+		return 2
+	}
+	const options = { config: args.config, reflow: args.reflow }
+	const findings: Finding[] = [...(await detectFiles(paths, options))]
+	for (const url of urls) findings.push(...(await detectPage({ kind: "url", url }, { ...options, file: url })))
+	const sorted = sortFindings(findings)
+	process.stdout.write(args.json ? `${JSON.stringify(sorted, null, 2)}\n` : formatFindingsText(sorted))
+	return hasFailures(sorted) ? 1 : 0
+}
+
+try {
+	process.exitCode = await main(process.argv.slice(2))
+} catch (error) {
+	// no-excuse-ok: catch (CLI boundary: a render failure is reported as exit 2, anything else propagates)
+	if (!(error instanceof RenderError)) throw error
+	process.stderr.write(`frontend-detect: ${error.message}\n`)
+	process.exitCode = 2
+}

package/dist/skills/frontend/scripts/detect/config.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from "bun:test"
+import { parseConfig } from "./config"
+import type { DetectConfig } from "./types"
+
+describe("parseConfig (the CLI's --config trust boundary)", () => {
+	test("#given a full valid config #then every field is kept", () => {
+		const input: DetectConfig = {
+			rules: { "low-contrast": "warning", "bounce-easing": "off" },
+			allowFonts: ["Inter"],
+			allowEasings: ["cubic-bezier(0.34, 1.56, 0.64, 1)"],
+			designTokens: { fonts: ["Inter"], colors: ["#111"], radii: [8, 12], fontSizes: [12, 16, 24] },
+		}
+		expect(parseConfig(input)).toEqual(input)
+	})
+
+	test.each([
+		["a non-object", [], "config must be a JSON object"],
+		["an unknown key", { severity: "error" }, "unknown config key 'severity'"],
+		["a bad rule setting", { rules: { "low-contrast": "fatal" } }, "rules.low-contrast must be one of error, warning, advisory, off"],
+		["a non-string font", { allowFonts: [12] }, "allowFonts must be an array of family names"],
+		["an unknown token key", { designTokens: { shadows: [] } }, "unknown designTokens key 'shadows'"],
+		["a non-numeric radius", { designTokens: { radii: ["8px"] } }, "designTokens.radii must be an array of px numbers"],
+	])("#given %s #then it is refused with a message naming the field", (_name, input, message) => {
+		expect(parseConfig(input)).toBe(message)
+	})
+})

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

@@ -0,0 +1,53 @@
+import type { DesignTokens, DetectConfig, RuleSetting } from "./types"
+
+const SETTINGS: readonly RuleSetting[] = ["error", "warning", "advisory", "off"]
+
+const isRecord = (v: unknown): v is Record<string, unknown> => typeof v === "object" && v !== null && !Array.isArray(v)
+const isStringArray = (v: unknown): v is readonly string[] => Array.isArray(v) && v.every((x) => typeof x === "string")
+const isNumberArray = (v: unknown): v is readonly number[] => Array.isArray(v) && v.every((x) => typeof x === "number" && Number.isFinite(x))
+
+function parseTokens(v: unknown): DesignTokens | string {
+	if (!isRecord(v)) return "designTokens must be an object"
+	const { fonts, colors, radii, fontSizes, ...rest } = v
+	const extra = Object.keys(rest)[0]
+	if (extra) return `unknown designTokens key '${extra}'`
+	if (fonts !== undefined && !isStringArray(fonts)) return "designTokens.fonts must be an array of family names"
+	if (colors !== undefined && !isStringArray(colors)) return "designTokens.colors must be an array of CSS colors"
+	if (radii !== undefined && !isNumberArray(radii)) return "designTokens.radii must be an array of px numbers"
+	if (fontSizes !== undefined && !isNumberArray(fontSizes)) return "designTokens.fontSizes must be an array of px numbers"
+	return {
+		...(fonts !== undefined ? { fonts } : {}),
+		...(colors !== undefined ? { colors } : {}),
+		...(radii !== undefined ? { radii } : {}),
+		...(fontSizes !== undefined ? { fontSizes } : {}),
+	}
+}
+
+const isSetting = (v: unknown): v is RuleSetting => SETTINGS.some((s) => s === v)
+
+/** Parses a detect config from untrusted JSON; returns the config or a message naming the first bad field. */
+export function parseConfig(input: unknown): DetectConfig | string {
+	if (!isRecord(input)) return "config must be a JSON object"
+	const known = new Set(["rules", "allowFonts", "allowEasings", "designTokens"])
+	const unknownKey = Object.keys(input).find((k) => !known.has(k))
+	if (unknownKey) return `unknown config key '${unknownKey}'`
+	const { rules, allowFonts, allowEasings, designTokens } = input
+	const tokens = designTokens === undefined ? undefined : parseTokens(designTokens)
+	if (typeof tokens === "string") return tokens
+	const parsedRules: Record<string, RuleSetting> = {}
+	if (rules !== undefined) {
+		if (!isRecord(rules)) return "rules must be an object of rule id -> error|warning|advisory|off"
+		for (const [id, setting] of Object.entries(rules)) {
+			if (!isSetting(setting)) return `rules.${id} must be one of ${SETTINGS.join(", ")}`
+			parsedRules[id] = setting
+		}
+	}
+	if (allowFonts !== undefined && !isStringArray(allowFonts)) return "allowFonts must be an array of family names"
+	if (allowEasings !== undefined && !isStringArray(allowEasings)) return "allowEasings must be an array of timing functions"
+	return {
+		...(rules !== undefined ? { rules: parsedRules } : {}),
+		...(allowFonts !== undefined ? { allowFonts } : {}),
+		...(allowEasings !== undefined ? { allowEasings } : {}),
+		...(tokens !== undefined ? { designTokens: tokens } : {}),
+	}
+}

package/dist/skills/frontend/scripts/detect/core/characters.ts

@@ -0,0 +1,2 @@
+/** The em dash, built from its code point so the character never appears as a copy literal in source. */
+export const EM_DASH = String.fromCharCode(0x2014)

package/dist/skills/frontend/scripts/detect/core/color.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "bun:test"
+import { colorsIn, parseColor } from "./color"
+
+const rgb = (s: string): readonly number[] | null => {
+	const c = parseColor(s)
+	return c ? [c.r, c.g, c.b].map(Math.round) : null
+}
+
+describe("parseColor modern color spaces", () => {
+	test.each([
+		["color(display-p3 0.2 0.5 0.7)", [0, 130, 183]],
+		["color(display-p3 1 0 0)", [255, 0, 0]],
+		["color(srgb-linear 0.2 0.3 0.4)", [124, 149, 170]],
+		["lab(60 -20 30)", [123, 154, 90]],
+		["lab(29.2345% 39.3825 20.0664)", [125, 35, 41]],
+		["lch(50 30 120)", [105, 126, 73]],
+		["oklch(0.7 0.1 200)", [64, 177, 183]],
+	])("#given %s as getComputedStyle reports it #then it converts to the sRGB Chrome paints", (input, expected) => {
+		expect(rgb(input)).toEqual(expected)
+	})
+
+	test("#given an unsupported predefined space #then the color is unknown, not black", () => {
+		expect(parseColor("color(rec2020 0.5 0.5 0.5)")).toBeNull()
+	})
+
+	test("#given a gradient with lab and lch stops #then colorsIn finds every stop", () => {
+		expect(colorsIn("linear-gradient(lab(60 -20 30), lch(50 30 120) 50%, oklab(0.5 0 0))").length).toBe(3)
+	})
+})