mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Paul Bakaus
d58ef7ab5c
process.exit() right after a large piped stdout write truncated JSON output at the pipe buffer boundary; found by the oracle harness. Re-record the six directory-scan goldens that had captured the truncation. Prepared with AI assistance (Claude Code).
8 lines
109 KiB
JSON
8 lines
109 KiB
JSON
{
|
||
"stdout": "",
|
||
"stderr": "\n<REPO>/tests/fixtures/antipatterns/astro-inset-shadow-stripe.astro\n line 52: [side-tab] [data-case=\"Kinpaku Edge\"] — inset box-shadow 3px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 53: [side-tab] [data-case=\"Patina Edge\"] — inset box-shadow 3px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 54: [side-tab] [data-case=\"Accent Edge\"] — inset box-shadow 4px stripe (right)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 55: [side-tab] [data-case=\"Signal Blue Edge\"] — inset box-shadow 5px stripe (top)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 66: [side-tab] [data-case=\"Chromatic Hex Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 67: [side-tab] [data-case=\"Named Red Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 68: [side-tab] [data-case=\"Chromatic Rgb Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 69: [side-tab] [data-case=\"Chromatic Oklch Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 78: [side-tab] [data-case=\"Trailing Inset Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 79: [side-tab] [data-case=\"Trailing Inset Token Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 81: [side-tab] [data-case=\"Inset Named Token Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 86: [side-tab] [data-case=\"Two Length Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 87: [side-tab] [data-case=\"Two Length Trailing Inset Edge\"] — inset box-shadow 5px stripe (top)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 88: [side-tab] [data-case=\"Important Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 89: [side-tab] [data-case=\"Cascade Override Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 91: [side-tab] [data-case=\"Color First Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 92: [side-tab] [data-case=\"Color First Var Edge\"] — inset box-shadow 4px stripe (left)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/blinking-cursor.html\n [pulsing-dot] .pass-round-dot — 8x8px dot with infinite \"blink-anim\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n\n<REPO>/tests/fixtures/antipatterns/border-baseline.html\n [side-tab] border-left: 4px + border-radius: 10px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 5px + border-radius: 10px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [border-accent-on-rounded] border-top: 4px + border-radius: 10px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [border-accent-on-rounded] border-bottom: 3px + border-radius: 10px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [side-tab] border-left: 4px + border-radius: 10px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-top: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-bottom: 3px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/clipped-overflow-container.html\n [cramped-padding] <div> \"pass-split-container\": children flush against border on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [clipped-overflow-container] div.box.flag-overflow-hidden clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overflow-clip clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overflow-negative clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overflow-right clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-shadow-utility clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [clipped-overflow-container] div.box.flag-overlay-surface clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n\n<REPO>/tests/fixtures/antipatterns/color.html\n [gray-on-color] text #969696 on bg #3b82f6\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.2:1 (need 4.5:1) — text #969696 on #3b82f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #b4b4b4 on bg #10b981\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.2:1 (need 4.5:1) — text #b4b4b4 on #10b981\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.7:1 (need 4.5:1) — text #c8c8c8 on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 2.1:1 (need 4.5:1) — text #505050 on #1e1e1e\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #808080 on bg gradient(#3b82f6, #8b5cf6)\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.1:1 (need 3:1) — text #808080 on #8b5cf6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #666666 on bg gradient(#3b82f6, #8b5cf6)\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.4:1 (need 4.5:1) — text #666666 on #8b5cf6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [low-contrast] 2.2:1 (need 4.5:1) — text #5b4f44 on #1f1a15\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 2.1:1 (need 4.5:1) — text #6c7280 on #374151\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text #5c5449 on bg #b6322d\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.2:1 (need 4.5:1) — text #5c5449 on #b6322d\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gray-on-color] text-gray-400 on bg-blue-500\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [gray-on-color] text #9ca3af on bg #3b82f6\n → Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.\n [low-contrast] 1.4:1 (need 4.5:1) — text #9ca3af on #3b82f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [ai-color-palette] Purple/violet text (#a855f7) on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [ai-color-palette] Purple/violet gradient (Tailwind)\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [low-contrast] 4.0:1 (need 4.5:1) — text #ffffff on #a855f7\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #cfc9bd on #e8e2d6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 4.1:1 (need 4.5:1) — text #ffffff on #7d7d7d\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [undersized-ui-text] 8px functional text \"tick\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [skipped-heading] <h1> \"Welcome to Our Platform\" followed by <h3> \"Gradient text\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [skipped-heading] <h1> \"Purple heading text\" followed by <h3> \"Styled <a> and <button> with low contrast\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [skipped-heading] <h1> \"Gradient Clipped Heading Text\" followed by <h3> \"Faint accent-glow gradient (issue #409 Case B — must not fla\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/cramped-padding.html\n [low-contrast] 3.7:1 (need 4.5:1) — text #ffffff on #3b82f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/cream-palette-tailwind.html\n [cream-palette] cream/beige page background (Tailwind bg-amber-50)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n\n<REPO>/tests/fixtures/antipatterns/cream-palette.html\n [cream-palette] cream/beige page background rgb(245, 239, 226)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n\n<REPO>/tests/fixtures/antipatterns/css-in-prose-should-flag.html\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [gradient-text] bg-clip-text + bg-gradient (Tailwind)\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [ai-color-palette] Purple/violet gradient (Tailwind)\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n [gradient-text] bg-clip-text + bg-gradient (Tailwind)\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/cssinjs-should-flag.tsx\n line 8: [side-tab] border-left: 4px solid #3b82f6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 36: [side-tab] border-right: 5px solid #8b5cf6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 42: [side-tab] borderLeft: '4px solid\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 11: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 30: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 31: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n line 22: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/dark-gradient-ground.html\n [low-contrast] 1.0:1 (need 4.5:1) — text #d7d7d7 on #dcdbd8\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.5:1 (need 4.5:1) — text #2e2e2e on #010101\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.7:1 (need 4.5:1) — text #333333 on #010101\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/dark-theme-modern-color.html\n [low-contrast] 1.6:1 (need 4.5:1) — text #35332d on #050403\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.9:1 (need 4.5:1) — text #47474d on #1a1c1f\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 2.7:1 (need 4.5:1) — text #59595c on #121215\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.8:1 (need 4.5:1) — text #56514e on #302b27\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.8:1 (need 4.5:1) — text #bfbdb8 on #faf7f2\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.6:1 (need 4.5:1) — text #c7c4bf on #faf7f2\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.6:1 (need 4.5:1) — text #bfbdb8 on #f0ede8\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/design-system.html\n [low-contrast] 3.6:1 (need 4.5:1) — text #ff00aa on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 3.9:1 (need 4.5:1) — text #d55a42 on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/edge-flush-cards.html\n [cramped-padding] <div> \"scroller\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"scroller\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"scroller\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n\n<REPO>/tests/fixtures/antipatterns/external-styles.css\n line 8: [side-tab] border-left: 4px solid #3b82f6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 17: [border-accent-on-rounded] border-top: 3px solid\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n line 49: [border-accent-on-rounded] border-top: 4px solid\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n line 23: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/extreme-negative-tracking.html\n [extreme-negative-tracking] letter-spacing: -0.06em — \"Tracking crushed em paragraph copy that \"\n → Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.\n [extreme-negative-tracking] letter-spacing: -0.06em — \"Tracking crushed pixels heading line\"\n → Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.\n [extreme-negative-tracking] letter-spacing: -0.07em — \"Tracking crushed heading variant text\"\n → Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.\n\n<REPO>/tests/fixtures/antipatterns/flush-against-border.html\n [cramped-padding] <section> \"flag-frameworks\": children flush against border+bg on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-card-borders\": children flush against border+bg on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-bg-only\": children flush against bg on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-outline-only\": children flush against outline on right/bottom/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <div> \"flag-asym-leftflush\": children flush against border+bg on left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [cramped-padding] <section> \"pass-marquee-shell\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/FeatureGrid.tsx (imported by index.tsx)\n line 13: [side-tab] border-left: 4px solid #8b5cf6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 24: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 18: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/GlobalStyle.tsx (imported by _app.tsx)\n line 13: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/Hero.tsx (imported by index.tsx)\n line 16: [overused-font] font-family: 'Montserrat\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 18: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-cssinjs/components/Testimonials.tsx (imported by index.tsx)\n line 21: [side-tab] border-left: 4px solid #6366f1\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 15: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/app/globals.css (imported by layout.tsx)\n line 10: [overused-font] font-family: 'Roboto\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/app/page.module.css (imported by page.tsx)\n line 16: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/components/Sidebar.module.css (imported by Sidebar.tsx)\n line 4: [side-tab] border-right: 3px solid #4f46e5\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-modules/components/StatsCard.module.css (imported by StatsCard.tsx)\n line 2: [side-tab] border-left: 4px solid #6366f1\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 23: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 10: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/app/globals.css (imported by layout.tsx)\n line 19: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/app/page.tsx\n line 15: [gradient-text] bg-clip-text + bg-gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n line 41: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 15: [ai-color-palette] from-purple-400 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/components/FeatureCard.tsx (imported by page.tsx)\n line 9: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 11: [ai-color-palette] text-purple-600 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 10: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n\n<REPO>/tests/fixtures/antipatterns/framework-next-tailwind/components/PricingCard.tsx (imported by page.tsx)\n line 18: [gradient-text] bg-clip-text + bg-gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n line 18: [ai-color-palette] from-violet-500 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 30: [ai-color-palette] from-purple-500 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/framework-vite/main.tsx\n line 5: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/gemini-tells.html\n [image-hover-transform] img:hover { transform } rule\n → Scaling or rotating an image on hover is a recurring generated-UI signature. Let imagery sit still, or use a subtler, purposeful interaction.\n [image-hover-transform] Tailwind hover transform on <img>\n → Scaling or rotating an image on hover is a recurring generated-UI signature. Let imagery sit still, or use a subtler, purposeful interaction.\n\n<REPO>/tests/fixtures/antipatterns/glow.html\n [dark-glow] Zero-offset box-shadow glow (#3b82f6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#8b5cf6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#06b6d4)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#a855f7)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#ec4899)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#00c0c2)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#3b82f6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#b447eb)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#63d18f)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset text-shadow glow (#22d3ee)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#a46bf5)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [dark-glow] Zero-offset box-shadow glow (#d946ef)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n [flat-type-hierarchy] Sizes: 11px, 12px, 13px, 14px, 16px (ratio 1.5:1)\n → Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).\n [dark-glow] Zero-offset box-shadow glow (#3b82f6)\n → Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default \"cool\" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.\n\n<REPO>/tests/fixtures/antipatterns/gpt-tells.html\n [gpt-thin-border-wide-shadow] 1px border + 24px shadow blur\n → A hairline border paired with a wide, diffuse shadow is a recurring generated-UI signature. Commit to one — a defined edge or a soft elevation — rather than both at once.\n [repeating-stripes-gradient] repeating-gradient decorative stripes\n → Repeating-gradient stripes used as surface decoration are a recurring generated-UI signature. Reach for a deliberate texture or leave the surface plain.\n [codex-grid-background] two-axis grid-line gradient background\n → A decorative grid or line-field background drawn with hairline linear-gradient layers tiled by a fixed pixel cell is a recurring generated-UI signature. Reserve grid overlays for actual canvas, map, blueprint, or measurement surfaces; elsewhere use product structure or a plain surface.\n [theater-slop-phrase] \"growth theater\"\n → Dismissing something as \"theater\" is a recurring generated-copy tic. Say plainly what the thing does or does not do.\n\n<REPO>/tests/fixtures/antipatterns/heading-rhythm.html\n [cramped-padding] <div> \"pass-band\": children flush against bg on right/left (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n\n<REPO>/tests/fixtures/antipatterns/hero-eyebrow-chip.html\n [low-contrast] 2.6:1 (need 4.5:1) — text #94a3b8 on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"AI-NATIVE WORKFLOWS\" above h1 \"Eyebrow Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"NEW IN 2026\" above h1 \"Span Eyebrow Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"FEATURED\" above h1 \"Pill Chip Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"NEW\" above h1 \"Already Uppercase Text\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"A VERY LONG UPPERCASE TABLE OF CONTENTS \" above h1 \"Long Uppercase Sentence Above Hero\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [all-caps-body] text-transform: uppercase on 46 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [kicker-above-heading] kicker \"SECTION KICKER\" above h1 \"Body-Sized Heading Below Eyebrow\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n\n<REPO>/tests/fixtures/antipatterns/hook-inline-ignore.html\n [overused-font] Primary font: roboto\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/icon-tile-stack.html\n [icon-tile-stack] 80x80px icon tile above h3 \"Lightning Fast\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 64x64px icon tile above h3 \"Secure Storage\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 72x72px icon tile above h3 \"Easy Setup\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 96x96px icon tile above h3 \"Powerful Analytics\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [icon-tile-stack] 48x48px icon tile above h3 \"Emoji Inline Icon\"\n → A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.\n [flat-type-hierarchy] Sizes: 14px, 16px, 18px, 24px (ratio 1.7:1)\n → Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n [marketing-buzzword] 1 buzzword phrase: \"ure Storage Enterprise-grade security fo\"\n → Generic SaaS phrases (streamline / empower / supercharge / world-class / enterprise-grade / next-generation / cutting-edge / etc) are instant AI tells. Pick a specific verb and noun that says what the product literally does.\n\n<REPO>/tests/fixtures/antipatterns/image-backed-contrast.html\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/italic-serif-display.html\n [italic-serif-display] italic serif h1 (fraunces) at 88px \"Fraunces 88px italic\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [italic-serif-display] italic serif h1 (recoleta) at 64px \"Recoleta 64px italic\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [italic-serif-display] italic serif h1 (playfair display) at 72px \"Playfair 72px italic\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [italic-serif-display] italic serif h1 (customserifface) at 56px \"Unknown Serif Generic Fallback\"\n → Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.\n [overused-font] Primary font: fraunces\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [overused-font] Primary font: recoleta\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/jsx-should-flag.jsx\n line 8: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 35: [side-tab] borderLeft: '4px solid\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 22: [gradient-text] bg-clip-text + bg-gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n line 10: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 22: [ai-color-palette] from-purple-400 gradient\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 50: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 51: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n\n<REPO>/tests/fixtures/antipatterns/kicker-above-heading.html\n [hero-eyebrow-chip] eyebrow chip (tracked-caps) \"Platform overview\" above h1 \"\"Hero Owned By Hero Rule\"\"\n → A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.\n [wide-tracking] letter-spacing: 0.11em on body text\n → Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [kicker-above-heading] kicker \"Invitation protocol\" above h2 \"A Single Kicker Still Flags\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Output model\" above h2 \"Standard Tracking Kicker\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Preview sequence\" above h3 \"Kicker Above An H3\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Access window\" above h4 \"Kicker Above An H4\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Platform notes\" above h1 \"Sub Hero Heading\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"materials briefing\" above h2 \"Small Caps Kicker\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [kicker-above-heading] kicker \"Field studies\" above div \"Heading Role Kicker\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n [cream-palette] cream/beige page background rgb(246, 242, 236)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n [skipped-heading] <h1> \"\"Page Title After Nav\"\" followed by <h3> \"\"48%\"\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n [skipped-heading] <h1> \"\"Hero Owned By Hero Rule\"\" followed by <h3> \"\"Garden Suite\"\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n\n<REPO>/tests/fixtures/antipatterns/layout.html\n [flat-type-hierarchy] Sizes: 11px, 14px, 16px (ratio 1.5:1)\n → Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n [nested-cards] Card inside card (div)\n → Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.\n\n<REPO>/tests/fixtures/antipatterns/linked-stylesheet.html\n [side-tab] border-left: 4px + border-radius: 12px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [border-accent-on-rounded] border-top: 3px + border-radius: 12px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [side-tab] border-top: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/modern-color-borders.html\n [side-tab] border-left: 3px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 3px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 5px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 4px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 4px + border-radius: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [low-contrast] 4.49:1 (need 4.5:1) — text #64748b on #fef7f2\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [flat-type-hierarchy] Sizes: 13px, 14px, 16px (ratio 1.2:1)\n → Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).\n\n<REPO>/tests/fixtures/antipatterns/motion.html\n [bounce-easing] animation: bounce-keyframe\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n [bounce-easing] cubic-bezier(0.68, -0.55, 0.265, 1.55)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: padding\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: margin\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: max-height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: width, height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n [flat-type-hierarchy] Sizes: 11px, 12px, 13px, 14px, 16px (ratio 1.5:1)\n → Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).\n\n<REPO>/tests/fixtures/antipatterns/multifile/Card.tsx (imported by App.tsx)\n line 11: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 12: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/multifile/styles.css (imported by App.tsx)\n line 3: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 8: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n\n<REPO>/tests/fixtures/antipatterns/multifile/theme.sass\n line 4: [side-tab] border-left: 4px solid $primary\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/multifile/theme.scss\n line 4: [side-tab] border-left: 4px solid $primary\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/named-color-borders.html\n [side-tab] border-left: 4px + border-radius: 8px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 5px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-top: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 3px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 6px + border-radius: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 7px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [low-contrast] 4.4:1 (need 4.5:1) — text #64748b on #f6f6f6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [flat-type-hierarchy] Sizes: 13px, 14px, 16px (ratio 1.2:1)\n → Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).\n\n<REPO>/tests/fixtures/antipatterns/nav-cta-constructions.html\n [low-contrast] 1.3:1 (need 4.5:1) — text #c9d6ea on #e8b84b\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.2:1 (need 4.5:1) — text #b7c6de on #e5a93f\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #cfd9e9 on #f0b64e\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #d3dcec on #f2b854\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.3:1 (need 4.5:1) — text #d0daea on #efb352\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.1:1 (need 4.5:1) — text #b7c6de on #eab04a\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.8:1 (need 4.5:1) — text #d2dcec on #cf9c48\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [low-contrast] 1.0:1 (need 4.5:1) — text #aabfde on #fcb442\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n\n<REPO>/tests/fixtures/antipatterns/nonrendered-text.html\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [undersized-ui-text] 9px functional text \"Rendered Nav Link\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n\n<REPO>/tests/fixtures/antipatterns/numbered-section-labels.html\n [numbered-section-labels] tiny numbered label \"01\" beside h2 \"Alpha ships first\" (4 on page)\n → Small numeric index labels riding next to section headings, repeated section after section, are AI editorial scaffolding — a page numbering its own chapters instead of earning structure. Let hierarchy, content, and rhythm carry the sequence.\n [numbered-section-labels] tiny numbered label \"02\" beside h2 \"Beta earns trust\" (4 on page)\n → Small numeric index labels riding next to section headings, repeated section after section, are AI editorial scaffolding — a page numbering its own chapters instead of earning structure. Let hierarchy, content, and rhythm carry the sequence.\n [numbered-section-labels] tiny numbered label \"03\" beside h2 \"Gamma holds the line\" (4 on page)\n → Small numeric index labels riding next to section headings, repeated section after section, are AI editorial scaffolding — a page numbering its own chapters instead of earning structure. Let hierarchy, content, and rhythm carry the sequence.\n [numbered-section-labels] tiny numbered label \"04 / ROLLOUT\" beside h2 \"Delta closes the loop\" (4 on page)\n → Small numeric index labels riding next to section headings, repeated section after section, are AI editorial scaffolding — a page numbering its own chapters instead of earning structure. Let hierarchy, content, and rhythm carry the sequence.\n\n<REPO>/tests/fixtures/antipatterns/overlay-positioning.html\n [side-tab] border-left: 4px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [low-contrast] 4.2:1 (need 4.5:1) — text #ffffff on #8b5cf6\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 43 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 41 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 45 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 35 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 45 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 46 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 38 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 40 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 42 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 37 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [cramped-padding] <div> \"absolute-container\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [cramped-padding] <div> \"flex-center\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [cramped-padding] <div> \"grid-center\": children flush against bg on all sides (no inset)\n → Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 45 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 33 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 37 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 31 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 39 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 52 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [clipped-overflow-container] div clips a positioned child\n → A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.\n [ai-color-palette] Purple/violet accent colors detected\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n\n<REPO>/tests/fixtures/antipatterns/oversized-h1-browser.html\n [oversized-h1] 104px h1, 82 chars \"A sweeping product headline that sprawls across the whole vi\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n [oversized-h1] 83px h1, 41 chars \"The missing design vocabulary for agents.\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n\n<REPO>/tests/fixtures/antipatterns/oversized-h1.html\n [oversized-h1] 96px h1, 73 chars \"A sweeping product headline that runs on far too long to sit\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n [oversized-h1] 80px h1, 76 chars \"Everything your whole team needs to launch quickly and final\"\n → A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.\n\n<REPO>/tests/fixtures/antipatterns/partial-component.html\n [side-tab] border-left: 4px + border-radius: 8px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/pseudo-stripe.css\n line 16: [side-tab] .card[data-case=\"Inset Shorthand Left Edge\"]::before — absolute 4px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 25: [side-tab] .card[data-case=\"Longhand Left Edge\"]::before — absolute 4px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 36: [side-tab] .card[data-case=\"Bottom Edge\"]::after — absolute 4px pseudo-element stripe (bottom: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 47: [side-tab] .card[data-case=\"Full Height Right Edge\"]::before — absolute 3px pseudo-element stripe (right: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/pseudo-stripe.html\n [side-tab] .card-stripe::before — absolute 5px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] .row-stripe::after — absolute 4px pseudo-element stripe (right: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/pseudo-stripe.vue\n line 13: [side-tab] .card[data-case=\"Component Left Edge\"]::before — absolute 4px pseudo-element stripe (left: 0)\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/pulsing-dot.html\n [pulsing-dot] .live-dot — 7x7px dot with infinite \"pulse\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] .status .dot — 8x8px dot with infinite \"ripple\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] .beacon — 10x10px dot with infinite \"pulse\" animation\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] .rec-mark — 10x10px dot with infinite \"pulse\" animation in header/nav\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n [pulsing-dot] animate-ping on tiny rounded-full element\n → Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.\n\n<REPO>/tests/fixtures/antipatterns/quality.html\n [tight-leading] line-height 1.00x (need >=1.3)\n → Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [justified-text] text-align: justify without hyphens: auto\n → Justified text without hyphenation creates uneven word spacing (\"rivers of white\"). Use text-align: left for body text, or enable hyphens: auto if you must justify.\n [all-caps-body] text-transform: uppercase on 285 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [wide-tracking] letter-spacing: 0.15em on body text\n → Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.\n [skipped-heading] <h1> \"Top heading\" followed by <h3> \"Skips straight to h3\" (missing h2)\n → Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.\n\n<REPO>/tests/fixtures/antipatterns/radial-spotlight-glow.html\n [radial-spotlight-glow] radial-gradient spotlight glow \"Hero Spotlight Blue\" (#506fff a0.26 → transparent) on 360x560 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Section Glow Violet\" (#8b5cf6 a0.30 → transparent) on 900x600 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Overlay Glow Cyan\" (#22d3ee a0.22 → transparent) on 760x480 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Two Stop Soft Glow\" (#ff5a78 a0.28 → transparent) on 640x400 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-spotlight-glow] radial-gradient spotlight glow \"Hex Alpha Glow\" (#506fff a0.24 → transparent) on 700x460 surface\n → A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a \"spotlight.\" It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.\n [radial-halo] radial-gradient halo (#ff0080 → transparent) on dark page\n → A chromatic radial-gradient wash — saturated at the center, fading to transparent — used as a decorative background glow on a dark page. Same tell as glowing shadows, drawn with a gradient instead of a shadow. Ground the surface with a solid or subtly shifted background instead.\n\n<REPO>/tests/fixtures/antipatterns/repeated-container-text.html\n [repeated-container-text] \"Suspended\" rendered 3× in distinct spots inside div.card\n → The same literal text rendered three or more times in structurally different spots inside a single card or panel is redundant messaging — usually a status or label wired into every slot of a template. Say it once, in the slot where it matters most.\n [repeated-container-text] \"Unavailable\" rendered 4× in distinct spots inside div.shadow-card\n → The same literal text rendered three or more times in structurally different spots inside a single card or panel is redundant messaging — usually a status or label wired into every slot of a template. Say it once, in the slot where it matters most.\n\n<REPO>/tests/fixtures/antipatterns/scoped-ignore.html\n [side-tab] border-left: 6px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 8px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 12px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 5px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [overused-font] Primary font: arial\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [cream-palette] cream/beige page background rgb(250, 248, 244)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n [codex-grid-background] two-axis grid-line gradient background\n → A decorative grid or line-field background drawn with hairline linear-gradient layers tiled by a fixed pixel cell is a recurring generated-UI signature. Reserve grid overlays for actual canvas, map, blueprint, or measurement surfaces; elsewhere use product structure or a plain surface.\n\n<REPO>/tests/fixtures/antipatterns/shape-assembled-illustration.html\n [shape-assembled-illustration] inline <svg> scene: 12 primitive shapes, ~640x480px, 6 fill colors\n → A large inline SVG that builds a pictorial scene from a pile of primitive shapes reads as placeholder clip art, not illustration. Icons, logos, and data graphics are fine at their scale; a hero-sized visual deserves real artwork, a photograph, or a deliberately drawn graphic.\n\n<REPO>/tests/fixtures/antipatterns/should-flag.html\n [side-tab] border-left: 4px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 5px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-left: 3px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [side-tab] border-right: 6px + border-radius: 0.375px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n [border-accent-on-rounded] border-top: 4px + border-radius: 12px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [border-accent-on-rounded] border-bottom: 3px + border-radius: 12px\n → Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.\n [side-tab] border-left: 4px + border-radius: 12px\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n\n<REPO>/tests/fixtures/antipatterns/svelte-should-flag.svelte\n line 6: [side-tab] border-r-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 17: [side-tab] border-right: 4px solid #8b5cf6\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 19: [overused-font] font-family: 'Roboto\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 7: [ai-color-palette] text-purple-500 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 10: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 30: [bounce-easing] animation: elastic\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 31: [layout-transition] transition: height\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n line 26: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n<REPO>/tests/fixtures/antipatterns/text-occlusion.html\n [low-contrast] 1.0:1 (need 3:1) — text #ffffff on #ffffff\n → Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.\n [all-caps-body] text-transform: uppercase on 32 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [kicker-above-heading] kicker \"Family Italian on the waterfront\" above h1 \"Trattoria da Nonna Lucia\"\n → A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.\n\n<REPO>/tests/fixtures/antipatterns/typography-should-flag.html\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n [flat-type-hierarchy] Sizes: 13px, 14px, 15px, 16px, 18px (ratio 1.4:1)\n → Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).\n\n<REPO>/tests/fixtures/antipatterns/typography.html\n [tight-leading] line-height 1.05x (need >=1.3)\n → Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.\n [tiny-text] 10px body text\n → Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.\n [all-caps-body] text-transform: uppercase on 159 chars of body text\n → Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.\n [wide-tracking] letter-spacing: 0.08em on body text\n → Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.\n [justified-text] text-align: justify without hyphens: auto\n → Justified text without hyphenation creates uneven word spacing (\"rivers of white\"). Use text-align: left for body text, or enable hyphens: auto if you must justify.\n [overused-font] Primary font: inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n\n<REPO>/tests/fixtures/antipatterns/undersized-ui-text.html\n [undersized-ui-text] 8px functional text \"Flag Nav Link\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 8px functional text \"Flag Category\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 9px functional text \"Flag Meta Row\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 10px functional text \"Flag Button\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 9px functional text \"Flag Table Cell\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 10px functional text \"Flag Caps Label\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n [undersized-ui-text] 8px functional text \"Flag Footer Link\" (below 11px floor)\n → Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.\n\n<REPO>/tests/fixtures/antipatterns/visual-contrast.html\n [cream-palette] cream/beige page background rgb(247, 243, 238)\n → A warm cream or beige page background has become the default \"tasteful\" AI surface, reached for by reflex. Choose a background that comes from a deliberate palette, not the safe warm off-white.\n\n<REPO>/tests/fixtures/antipatterns/vue-should-flag.vue\n line 2: [side-tab] border-l-4\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 20: [side-tab] border-left: 4px solid #6366f1\n → Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.\n line 22: [overused-font] font-family: 'Inter\n → Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.\n line 3: [ai-color-palette] text-purple-600 on heading\n → Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.\n line 5: [bounce-easing] animate-bounce (Tailwind)\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 33: [bounce-easing] animation: bounce\n → Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.\n line 34: [layout-transition] transition: width\n → Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.\n line 28: [gradient-text] background-clip: text + gradient\n → Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.\n\n392 anti-patterns found.\n",
|
||
"exit": 2,
|
||
"signal": null,
|
||
"files": {}
|
||
}
|