mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 17:16:46 +03:00
Paul BakausandClaude Opus 4.6
37393f1793
Architecture simplified to two paths: - HTML files: jsdom with getComputedStyle (resolves linked CSS, cascade) - Non-HTML files: regex fallback (CSS, JSX, TSX, etc.) - URLs: Puppeteer (unchanged) - --fast flag forces regex-only for all files Removed --deep flag (jsdom is now the default). Removed static mode from browser script (always uses getComputedStyle — it's in a real browser). Anti-pattern definitions split into: - checkElementBorders() — shared element-level computed style checker - checkPageTypography() — shared page-level checker - REGEX_MATCHERS/REGEX_ANALYZERS — regex fallback for non-HTML Browser script simplified from 470 lines to 250. CLI script reduced from 810 lines to 440. Detection logic is now single-source for jsdom/puppeteer/browser. Fixtures now served via /fixtures/* route in dev server for proper CORS handling of linked stylesheets. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
40 lines
1.5 KiB
HTML
40 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Typography Anti-Patterns — Should Flag</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #f9fafb;
|
|
padding: 2rem;
|
|
}
|
|
h1 { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 16px; font-weight: 600; margin: 2rem 0 0.75rem; color: #6b7280; }
|
|
h3 { font-size: 15px; font-weight: 600; }
|
|
p { font-size: 14px; color: #6b7280; margin-top: 0.25rem; }
|
|
.caption { font-size: 13px; color: #9ca3af; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Typography Anti-Patterns</h1>
|
|
<p>This page triggers three typography detections:</p>
|
|
|
|
<h2>1. Overused Font</h2>
|
|
<p>Inter is loaded from Google Fonts and set as the only font-family. It's the most common AI default.</p>
|
|
|
|
<h2>2. Single Font</h2>
|
|
<p>There's no second font for headings or display text. Everything uses Inter — no typographic variety.</p>
|
|
|
|
<h2>3. Flat Type Hierarchy</h2>
|
|
<p>The font sizes are 13px, 14px, 15px, 16px, 18px — all crammed into a 5px range. No visual contrast between heading and body.</p>
|
|
<p class="caption">This caption is barely distinguishable from body text.</p>
|
|
|
|
<h3>A Subheading</h3>
|
|
<p>Can you tell this is a subheading? Exactly.</p>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|