Detector: add italic-serif display headline + hero eyebrow chip rules (#127)

[vinaypokharkar]

Closes #127.

Summary

Two new structural anti-pattern rules covering the category-defining tells of late-2025/early-2026 AI-generated marketing pages, both visible side-by-side on the Lumina demo page referenced in the issue.

Rule	Catches
italic-serif-display	Oversized italic serif (Fraunces / Recoleta / Newsreader / Playfair / Cormorant / Tiempos / ...) as the primary hero h1.
hero-eyebrow-chip	A tiny uppercase letter-spaced label (AI-NATIVE WORKFLOWS) — or pill-chip variant — sitting as previousElementSibling of a hero h1.

Both follow the existing icon-tile-stack pattern: pure check function + browser DOM adapter + jsdom adapter, wired into both element loops. Two-column fixtures drive the jsdom tests.

Implementation map

File	Change
src/detect-antipatterns.mjs	KNOWN_SERIF_FONTS constant; two ANTIPATTERNS entries; pure checkItalicSerif / checkHeroEyebrow + resolveSerif helper; browser adapters (checkElementItalicSerifDOM, checkElementHeroEyebrowDOM); jsdom adapters (checkElementItalicSerif, checkElementHeroEyebrow); wired into both element loops (if (IS_BROWSER) ... ~L2562 and detectHtml(...) ~L2969).
tests/fixtures/antipatterns/italic-serif-display.html	New fixture, 4 flag cases, 6 pass cases. Two-column layout per repo convention.
tests/fixtures/antipatterns/hero-eyebrow-chip.html	New fixture, 4 flag cases, 6 pass cases.
tests/detect-antipatterns-fixtures.test.mjs	Two new describe blocks, snippet-extraction pattern matches existing icon-tile-stack test.
source/skills/impeccable/reference/typography.md	New "Hero anti-patterns" section names both patterns; flags editorial/magazine register exception for italic-serif.
source/skills/impeccable/reference/critique.md	Visual-tells checklist now calls out both patterns by name. Detector rule count 25 → 27.
public/index.html, README.npm.md, public/js/generated/counts.js	Build validator demands count consistency 25 → 27 across all surfaces.
14 harness mirror dirs (.claude/, .cursor/, .gemini/, ...)	Auto-regenerated by bun run build from the source skill files above.
src/detect-antipatterns-browser.js	Auto-regenerated by bun run build:browser to include the new browser DOM adapters.

Detection gates

italic-serif-display

• Tag is h1, OR h2 with computed font-size >= 48px.
• Computed font-style === 'italic'.
• Computed font-size >= 48px.
• Primary face (first non-generic token) is in KNOWN_SERIF_FONTS, OR the stack ends in the generic serif token.

hero-eyebrow-chip

Anchored on a hero h1 (font-size >= 48px), gates on previousElementSibling:

• text.length between 2 and 30 chars.
• Uppercase via text-transform: uppercase OR content typed uppercase.
• Computed letter-spacing >= 1.6px (jsdom path resolves em → px via existing resolveLengthPx helper).
• Computed font-size <= 14px.
• Sibling tag is not itself a heading.

Test plan

• node --test tests/detect-antipatterns-fixtures.test.mjs — 22/22 passing (includes two new describe blocks).
• bun test tests/detect-antipatterns.test.js — 160/160 passing, no regressions.
• bun run build — clean, generates 27 detection rules, all build validators pass (counts, em-dashes, site headers).
• bun run build:browser — clean output, browser DOM adapters present.
• bun run build:extension — extension reports 27 rules.
• Manual smoke test: live overlay against both fixtures via bun run dev + browser inject — every left-column case gets a labeled overlay, every right-column case stays clean.
• Manual smoke test: live overlay against the impeccable homepage — hero-eyebrow-chip does not fire on any of the uppercase tracked labels in nav/section kickers (no false positives).

Notes for review

• italic-serif-display flags the impeccable homepage's own Cormorant-Garamond italic hero. This is a true positive on the pattern matcher — the homepage uses the exact pattern the rule catches. Whether to (a) accept the self-reflexive flag, (b) update the homepage hero, or (c) add the impeccable domain to a register-allowed list (mirroring BRAND_FONT_DOMAINS at src/detect-antipatterns.mjs:77) is a maintainer call I deliberately left open.
• hero-eyebrow-chip is DOM/jsdom-only. Same as icon-tile-stack — sibling-relationship rules need DOM context that regex on raw source can't reliably reconstruct. --fast mode and JSX/Vue/Svelte source scans don't fire this rule, consistent with existing precedent.
• Out of scope for v1 (per the issue's "Out of scope" section): italic <em> inside an otherwise-roman h1 (would need richer DOM walking), mesh / radial gradient hero backgrounds, border-radius monotony.

---

Note

Medium Risk
Adds two new DOM-based detection rules and wires them into both the jsdom and browser scanning paths, which can change scan output and introduce false positives/negatives. Updates multiple generated/docs surfaces and counts, so regressions are mostly around detector behavior and consistency checks rather than runtime safety.

Overview
Adds two new deterministic anti-pattern rules to the detector: italic-serif-display (hero-scale italic serif headlines using a known/serif-fallback font stack) and hero-eyebrow-chip (small uppercase, tracked eyebrow/pill immediately preceding a hero h1), including font-stack parsing via KNOWN_SERIF_FONTS/resolveSerif.

Wires both rules into the browser overlay scanner and the jsdom detectHtml path, with new fixtures and fixture tests to lock expected flag/pass behavior. Updates rule-count references across docs/site/README/generated counts (25 → 27) and adds sandbox workflow notes in AGENTS.md.

^{Reviewed by Cursor Bugbot for commit 4807abb. Bugbot is set up for automated code reviews on this repo. Configure here.}

[pbakaus]

Nice addition, thank you! I merged in the latest from main (did a big refactor to Astro for the site), and I removed the new sections in the skill files - those were too verbose. Otherwise excellent.

Flags Impeccable's own branding of course, but I think that's OK. there will always be legitimate reasons to use italic (Impeccable's brand is inspired by "Devil Wears Prada" fashion/editorial aesthetic).

[vinaypokharkar]

Thanks for the merge
Also spotted #99 feels like it might need your call.
Let me know what you think, I can pick it up if needed.