mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Move generated browser script to .claude/skills/critique/scripts/
The generated browser detector now lives alongside the CLI script in .claude/skills/critique/scripts/ — clearly a build artifact, not a hand-maintained source file in public/js/. - build-browser-detector.js outputs to .claude/ instead of public/js/ - Dev server serves .claude/skills/* for local testing - All fixture and antipattern-example HTML files updated to new path - Puppeteer detectUrl reads browser script from same directory - Browser parity test server updated to serve from .claude/ - Deleted public/js/detect-antipatterns-browser.js Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
623a8a8375
commit
fbfe525f4f
@@ -480,9 +480,10 @@ async function detectUrl(url) {
|
||||
}
|
||||
|
||||
// Read the browser detection script — reuse it instead of reimplementing
|
||||
// The generated browser script lives alongside this file after build
|
||||
const browserScriptPath = path.resolve(
|
||||
path.dirname(new URL(import.meta.url).pathname),
|
||||
'..', '..', '..', '..', 'public', 'js', 'detect-antipatterns-browser.js'
|
||||
'detect-antipatterns-browser.js'
|
||||
);
|
||||
let browserScript;
|
||||
try {
|
||||
|
||||
@@ -202,6 +202,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -370,6 +370,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -312,6 +312,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -317,6 +317,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -315,6 +315,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -373,6 +373,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -194,6 +194,6 @@
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -431,6 +431,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -236,6 +236,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -202,6 +202,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -200,6 +200,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,623 +0,0 @@
|
||||
/**
|
||||
* Anti-Pattern Browser Detector for Impeccable
|
||||
* GENERATED — do not edit. Source: detect-antipatterns-core.mjs + this wrapper.
|
||||
* Rebuild: node scripts/build-browser-detector.js
|
||||
*
|
||||
* Usage: <script src="detect-antipatterns-browser.js"></script>
|
||||
* Re-scan: window.impeccableScan()
|
||||
*/
|
||||
(function () {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
const LABEL_BG = 'oklch(55% 0.25 350)';
|
||||
const OUTLINE_COLOR = 'oklch(60% 0.25 350)';
|
||||
|
||||
// ===========================================================================
|
||||
// Core detection logic (injected from detect-antipatterns-core.mjs at build)
|
||||
// ===========================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Constants
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const SAFE_TAGS = new Set([
|
||||
'blockquote', 'nav', 'a', 'input', 'textarea', 'select',
|
||||
'pre', 'code', 'span', 'th', 'td', 'tr', 'li', 'label',
|
||||
'button', 'hr', 'html', 'head', 'body', 'script', 'style',
|
||||
'link', 'meta', 'title', 'br', 'img', 'svg', 'path', 'circle',
|
||||
'rect', 'line', 'polyline', 'polygon', 'g', 'defs', 'use',
|
||||
]);
|
||||
|
||||
const OVERUSED_FONTS = new Set([
|
||||
'inter', 'roboto', 'open sans', 'lato', 'montserrat', 'arial', 'helvetica',
|
||||
]);
|
||||
|
||||
const GENERIC_FONTS = new Set([
|
||||
'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy',
|
||||
'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded',
|
||||
'-apple-system', 'blinkmacsystemfont', 'segoe ui',
|
||||
'inherit', 'initial', 'unset', 'revert',
|
||||
]);
|
||||
|
||||
const ANTIPATTERNS = [
|
||||
{
|
||||
id: 'side-tab',
|
||||
name: 'Side-tab accent border',
|
||||
description:
|
||||
'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.',
|
||||
},
|
||||
{
|
||||
id: 'border-accent-on-rounded',
|
||||
name: 'Border accent on rounded element',
|
||||
description:
|
||||
'Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.',
|
||||
},
|
||||
{
|
||||
id: 'overused-font',
|
||||
name: 'Overused font',
|
||||
description:
|
||||
'Inter, Roboto, Open Sans, Lato, Montserrat, and Arial are used on millions of sites. Choose a distinctive font that gives your interface personality.',
|
||||
},
|
||||
{
|
||||
id: 'single-font',
|
||||
name: 'Single font for everything',
|
||||
description:
|
||||
'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
|
||||
},
|
||||
{
|
||||
id: 'flat-type-hierarchy',
|
||||
name: 'Flat type hierarchy',
|
||||
description:
|
||||
'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).',
|
||||
},
|
||||
{
|
||||
id: 'pure-black-white',
|
||||
name: 'Pure black background',
|
||||
description:
|
||||
'Pure #000000 as a background color looks harsh and unnatural. Tint it slightly toward your brand hue (e.g., oklch(12% 0.01 250)) for a more refined feel.',
|
||||
},
|
||||
{
|
||||
id: 'gray-on-color',
|
||||
name: 'Gray text on colored background',
|
||||
description:
|
||||
'Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.',
|
||||
},
|
||||
{
|
||||
id: 'low-contrast',
|
||||
name: 'Low contrast text',
|
||||
description:
|
||||
'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.',
|
||||
},
|
||||
{
|
||||
id: 'gradient-text',
|
||||
name: 'Gradient text',
|
||||
description:
|
||||
'Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.',
|
||||
},
|
||||
{
|
||||
id: 'ai-color-palette',
|
||||
name: 'AI color palette',
|
||||
description:
|
||||
'Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.',
|
||||
},
|
||||
{
|
||||
id: 'nested-cards',
|
||||
name: 'Nested cards',
|
||||
description:
|
||||
'Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.',
|
||||
},
|
||||
{
|
||||
id: 'monotonous-spacing',
|
||||
name: 'Monotonous spacing',
|
||||
description:
|
||||
'The same spacing value used everywhere — no rhythm, no variation. Use tight groupings for related items and generous separations between sections.',
|
||||
},
|
||||
{
|
||||
id: 'everything-centered',
|
||||
name: 'Everything centered',
|
||||
description:
|
||||
'Every text element is center-aligned. Left-aligned text with asymmetric layouts feels more designed. Center only hero sections and CTAs.',
|
||||
},
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Color utilities
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function isNeutralColor(color) {
|
||||
if (!color || color === 'transparent') return true;
|
||||
const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
||||
if (!m) return true;
|
||||
return (Math.max(+m[1], +m[2], +m[3]) - Math.min(+m[1], +m[2], +m[3])) < 30;
|
||||
}
|
||||
|
||||
function parseRgb(color) {
|
||||
if (!color || color === 'transparent') return null;
|
||||
const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
|
||||
if (!m) return null;
|
||||
return { r: +m[1], g: +m[2], b: +m[3], a: m[4] !== undefined ? +m[4] : 1 };
|
||||
}
|
||||
|
||||
function relativeLuminance({ r, g, b }) {
|
||||
const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(c =>
|
||||
c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
|
||||
);
|
||||
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
||||
}
|
||||
|
||||
function contrastRatio(c1, c2) {
|
||||
const l1 = relativeLuminance(c1);
|
||||
const l2 = relativeLuminance(c2);
|
||||
return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
|
||||
}
|
||||
|
||||
function hasChroma(c, threshold = 30) {
|
||||
if (!c) return false;
|
||||
return (Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b)) >= threshold;
|
||||
}
|
||||
|
||||
function getHue(c) {
|
||||
if (!c) return 0;
|
||||
const r = c.r / 255, g = c.g / 255, b = c.b / 255;
|
||||
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||
if (max === min) return 0;
|
||||
const d = max - min;
|
||||
let h;
|
||||
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
|
||||
else if (max === g) h = ((b - r) / d + 2) / 6;
|
||||
else h = ((r - g) / d + 4) / 6;
|
||||
return Math.round(h * 360);
|
||||
}
|
||||
|
||||
function colorToHex(c) {
|
||||
if (!c) return '?';
|
||||
return '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Element-level detection (pure: takes data, not DOM elements)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Check border widths/colors/radius for side-tab and accent-on-rounded patterns.
|
||||
* @param {string} tag Element tag name (lowercase)
|
||||
* @param {{ Top: number, Right: number, Bottom: number, Left: number }} widths Border widths in px
|
||||
* @param {{ Top: string, Right: string, Bottom: string, Left: string }} colors Border colors as rgb() strings
|
||||
* @param {number} radius Border radius in px
|
||||
* @returns {Array<{ id: string, snippet: string }>}
|
||||
*/
|
||||
function checkBorders(tag, widths, colors, radius) {
|
||||
if (SAFE_TAGS.has(tag)) return [];
|
||||
const findings = [];
|
||||
const sides = ['Top', 'Right', 'Bottom', 'Left'];
|
||||
|
||||
for (const side of sides) {
|
||||
const w = widths[side];
|
||||
if (w < 1 || isNeutralColor(colors[side])) continue;
|
||||
|
||||
const otherSides = sides.filter(s => s !== side);
|
||||
const maxOther = Math.max(...otherSides.map(s => widths[s]));
|
||||
if (!(w >= 2 && (maxOther <= 1 || w >= maxOther * 2))) continue;
|
||||
|
||||
const sn = side.toLowerCase();
|
||||
const isSide = side === 'Left' || side === 'Right';
|
||||
|
||||
if (isSide) {
|
||||
if (radius > 0) findings.push({ id: 'side-tab', snippet: `border-${sn}: ${w}px + border-radius: ${radius}px` });
|
||||
else if (w >= 3) findings.push({ id: 'side-tab', snippet: `border-${sn}: ${w}px` });
|
||||
} else {
|
||||
if (radius > 0 && w >= 2) findings.push({ id: 'border-accent-on-rounded', snippet: `border-${sn}: ${w}px + border-radius: ${radius}px` });
|
||||
}
|
||||
}
|
||||
|
||||
return findings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check colors for anti-patterns given pre-extracted data.
|
||||
* @param {object} opts
|
||||
* @param {string} opts.tag
|
||||
* @param {object|null} opts.textColor Parsed RGB
|
||||
* @param {object|null} opts.bgColor Parsed RGB (direct background)
|
||||
* @param {object} opts.effectiveBg Resolved background (walked ancestors)
|
||||
* @param {number} opts.fontSize In px
|
||||
* @param {number} opts.fontWeight
|
||||
* @param {boolean} opts.hasDirectText
|
||||
* @param {string} opts.bgClip Computed background-clip value
|
||||
* @param {string} opts.bgImage Computed background-image value
|
||||
* @param {string} opts.classList Raw class attribute string
|
||||
* @returns {Array<{ id: string, snippet: string }>}
|
||||
*/
|
||||
function checkColors(opts) {
|
||||
const { tag, textColor, bgColor, effectiveBg, fontSize, fontWeight, hasDirectText, bgClip, bgImage, classList } = opts;
|
||||
if (SAFE_TAGS.has(tag)) return [];
|
||||
const findings = [];
|
||||
|
||||
// Pure black background
|
||||
if (bgColor && bgColor.a > 0.1 && bgColor.r === 0 && bgColor.g === 0 && bgColor.b === 0) {
|
||||
findings.push({ id: 'pure-black-white', snippet: '#000000 background' });
|
||||
}
|
||||
|
||||
if (hasDirectText && textColor) {
|
||||
// Gray on colored background
|
||||
const textLum = relativeLuminance(textColor);
|
||||
const isGray = !hasChroma(textColor, 20) && textLum > 0.05 && textLum < 0.85;
|
||||
if (isGray && hasChroma(effectiveBg, 40)) {
|
||||
findings.push({ id: 'gray-on-color', snippet: `text ${colorToHex(textColor)} on bg ${colorToHex(effectiveBg)}` });
|
||||
}
|
||||
|
||||
// Low contrast (WCAG AA)
|
||||
const ratio = contrastRatio(textColor, effectiveBg);
|
||||
const isHeading = ['h1', 'h2', 'h3'].includes(tag);
|
||||
const isLargeText = fontSize >= 18 || (fontSize >= 14 && fontWeight >= 700) || isHeading;
|
||||
const threshold = isLargeText ? 3.0 : 4.5;
|
||||
if (ratio < threshold) {
|
||||
findings.push({ id: 'low-contrast', snippet: `${ratio.toFixed(1)}:1 (need ${threshold}:1) — text ${colorToHex(textColor)} on ${colorToHex(effectiveBg)}` });
|
||||
}
|
||||
|
||||
// AI palette: purple/violet on headings
|
||||
if (hasChroma(textColor, 50)) {
|
||||
const hue = getHue(textColor);
|
||||
if (hue >= 260 && hue <= 310 && (['h1', 'h2', 'h3'].includes(tag) || fontSize >= 20)) {
|
||||
findings.push({ id: 'ai-color-palette', snippet: `Purple/violet text (${colorToHex(textColor)}) on heading` });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient text
|
||||
if (bgClip === 'text' && bgImage && bgImage.includes('gradient')) {
|
||||
findings.push({ id: 'gradient-text', snippet: 'background-clip: text + gradient' });
|
||||
}
|
||||
|
||||
// Tailwind class checks
|
||||
if (classList) {
|
||||
if (/\bbg-black\b/.test(classList)) {
|
||||
findings.push({ id: 'pure-black-white', snippet: 'bg-black' });
|
||||
}
|
||||
|
||||
const grayMatch = classList.match(/\btext-(?:gray|slate|zinc|neutral|stone)-\d+\b/);
|
||||
const colorBgMatch = classList.match(/\bbg-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d+\b/);
|
||||
if (grayMatch && colorBgMatch) {
|
||||
findings.push({ id: 'gray-on-color', snippet: `${grayMatch[0]} on ${colorBgMatch[0]}` });
|
||||
}
|
||||
|
||||
if (/\bbg-clip-text\b/.test(classList) && /\bbg-gradient-to-/.test(classList)) {
|
||||
findings.push({ id: 'gradient-text', snippet: 'bg-clip-text + bg-gradient (Tailwind)' });
|
||||
}
|
||||
|
||||
const purpleText = classList.match(/\btext-(?:purple|violet|indigo)-\d+\b/);
|
||||
if (purpleText && (['h1', 'h2', 'h3'].includes(tag) || /\btext-(?:[2-9]xl)\b/.test(classList))) {
|
||||
findings.push({ id: 'ai-color-palette', snippet: `${purpleText[0]} on heading` });
|
||||
}
|
||||
|
||||
if (/\bfrom-(?:purple|violet|indigo)-\d+\b/.test(classList) && /\bto-(?:purple|violet|indigo|blue|cyan|pink|fuchsia)-\d+\b/.test(classList)) {
|
||||
findings.push({ id: 'ai-color-palette', snippet: 'Purple/violet gradient (Tailwind)' });
|
||||
}
|
||||
}
|
||||
|
||||
return findings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if an element's properties make it "card-like".
|
||||
*/
|
||||
function isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg) {
|
||||
if (!hasShadow && !hasBorder) return false;
|
||||
return hasRadius || hasBg;
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// Browser-specific: DOM element adapters
|
||||
// ===========================================================================
|
||||
|
||||
function resolveBackground(el) {
|
||||
let current = el;
|
||||
while (current && current.nodeType === 1) {
|
||||
const bg = parseRgb(getComputedStyle(current).backgroundColor);
|
||||
if (bg && bg.a > 0.1) return bg;
|
||||
current = current.parentElement;
|
||||
}
|
||||
return { r: 255, g: 255, b: 255 };
|
||||
}
|
||||
|
||||
function checkElementBordersDOM(el) {
|
||||
const tag = el.tagName.toLowerCase();
|
||||
if (SAFE_TAGS.has(tag)) return [];
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.width < 20 || rect.height < 20) return [];
|
||||
const style = getComputedStyle(el);
|
||||
const sides = ['Top', 'Right', 'Bottom', 'Left'];
|
||||
const widths = {}, colors = {};
|
||||
for (const s of sides) {
|
||||
widths[s] = parseFloat(style[`border${s}Width`]) || 0;
|
||||
colors[s] = style[`border${s}Color`] || '';
|
||||
}
|
||||
return checkBorders(tag, widths, colors, parseFloat(style.borderRadius) || 0);
|
||||
}
|
||||
|
||||
function checkElementColorsDOM(el) {
|
||||
const tag = el.tagName.toLowerCase();
|
||||
if (SAFE_TAGS.has(tag)) return [];
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.width < 10 || rect.height < 10) return [];
|
||||
const style = getComputedStyle(el);
|
||||
const hasDirectText = [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim());
|
||||
return checkColors({
|
||||
tag,
|
||||
textColor: parseRgb(style.color),
|
||||
bgColor: parseRgb(style.backgroundColor),
|
||||
effectiveBg: resolveBackground(el),
|
||||
fontSize: parseFloat(style.fontSize) || 16,
|
||||
fontWeight: parseInt(style.fontWeight) || 400,
|
||||
hasDirectText,
|
||||
bgClip: style.webkitBackgroundClip || style.backgroundClip || '',
|
||||
bgImage: style.backgroundImage || '',
|
||||
classList: el.getAttribute('class') || '',
|
||||
});
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// Browser-specific: Page-level checks
|
||||
// ===========================================================================
|
||||
|
||||
function checkTypography() {
|
||||
const findings = [];
|
||||
const fonts = new Set();
|
||||
const overusedFound = new Set();
|
||||
|
||||
for (const sheet of document.styleSheets) {
|
||||
let rules;
|
||||
try { rules = sheet.cssRules || sheet.rules; } catch { continue; }
|
||||
if (!rules) continue;
|
||||
for (const rule of rules) {
|
||||
if (rule.type !== 1) continue;
|
||||
const ff = rule.style?.fontFamily;
|
||||
if (!ff) continue;
|
||||
const stack = ff.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '').toLowerCase());
|
||||
const primary = stack.find(f => f && !GENERIC_FONTS.has(f));
|
||||
if (primary) {
|
||||
fonts.add(primary);
|
||||
if (OVERUSED_FONTS.has(primary)) overusedFound.add(primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const html = document.documentElement.outerHTML;
|
||||
const gfRe = /fonts\.googleapis\.com\/css2?\?family=([^&"'\s]+)/gi;
|
||||
let m;
|
||||
while ((m = gfRe.exec(html)) !== null) {
|
||||
for (const f of m[1].split('|').map(f => f.split(':')[0].replace(/\+/g, ' ').toLowerCase())) {
|
||||
fonts.add(f);
|
||||
if (OVERUSED_FONTS.has(f)) overusedFound.add(f);
|
||||
}
|
||||
}
|
||||
|
||||
for (const font of overusedFound) {
|
||||
findings.push({ type: 'overused-font', detail: `Primary font: ${font}` });
|
||||
}
|
||||
if (fonts.size === 1 && document.querySelectorAll('*').length >= 20) {
|
||||
findings.push({ type: 'single-font', detail: `Only font: ${[...fonts][0]}` });
|
||||
}
|
||||
|
||||
const sizes = new Set();
|
||||
for (const el of document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,span,a,li,td,th,label,button,div')) {
|
||||
const fs = parseFloat(getComputedStyle(el).fontSize);
|
||||
if (fs > 0 && fs < 200) sizes.add(Math.round(fs * 10) / 10);
|
||||
}
|
||||
if (sizes.size >= 3) {
|
||||
const sorted = [...sizes].sort((a, b) => a - b);
|
||||
const ratio = sorted[sorted.length - 1] / sorted[0];
|
||||
if (ratio < 2.0) {
|
||||
findings.push({ type: 'flat-type-hierarchy', detail: `Sizes: ${sorted.map(s => s + 'px').join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
|
||||
}
|
||||
}
|
||||
|
||||
return findings;
|
||||
}
|
||||
|
||||
function isCardLikeDOM(el) {
|
||||
const tag = el.tagName.toLowerCase();
|
||||
if (SAFE_TAGS.has(tag) || ['input','select','textarea','img','video','canvas','picture'].includes(tag)) return false;
|
||||
const style = getComputedStyle(el);
|
||||
const cls = el.getAttribute('class') || '';
|
||||
const hasShadow = (style.boxShadow && style.boxShadow !== 'none') || /\bshadow(?:-sm|-md|-lg|-xl|-2xl)?\b/.test(cls);
|
||||
const hasBorder = /\bborder\b/.test(cls);
|
||||
const hasRadius = parseFloat(style.borderRadius) > 0 || /\brounded(?:-sm|-md|-lg|-xl|-2xl|-full)?\b/.test(cls);
|
||||
const hasBg = (style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)') || /\bbg-(?:white|gray-\d+|slate-\d+)\b/.test(cls);
|
||||
return isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg);
|
||||
}
|
||||
|
||||
function checkLayout() {
|
||||
const findings = [];
|
||||
const flaggedEls = new Set();
|
||||
|
||||
for (const el of document.querySelectorAll('*')) {
|
||||
if (!isCardLikeDOM(el) || flaggedEls.has(el)) continue;
|
||||
const cls = el.getAttribute('class') || '';
|
||||
const style = getComputedStyle(el);
|
||||
if (style.position === 'absolute' || style.position === 'fixed') continue;
|
||||
if (/\b(?:dropdown|popover|tooltip|menu|modal|dialog)\b/i.test(cls)) continue;
|
||||
if ((el.textContent?.trim().length || 0) < 10) continue;
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.width < 50 || rect.height < 30) continue;
|
||||
|
||||
let parent = el.parentElement;
|
||||
while (parent) {
|
||||
if (isCardLikeDOM(parent)) { flaggedEls.add(el); break; }
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
for (const el of flaggedEls) {
|
||||
let isAncestor = false;
|
||||
for (const other of flaggedEls) {
|
||||
if (other !== el && el.contains(other)) { isAncestor = true; break; }
|
||||
}
|
||||
if (!isAncestor) findings.push({ type: 'nested-cards', detail: 'Card inside card', el });
|
||||
}
|
||||
|
||||
return findings;
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// Highlighting & UI
|
||||
// ===========================================================================
|
||||
|
||||
const overlays = [];
|
||||
const TYPE_LABELS = {};
|
||||
for (const ap of ANTIPATTERNS) {
|
||||
TYPE_LABELS[ap.id] = ap.name.toLowerCase().substring(0, 20);
|
||||
}
|
||||
|
||||
function highlight(el, findings) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const outline = document.createElement('div');
|
||||
outline.className = 'impeccable-overlay';
|
||||
Object.assign(outline.style, {
|
||||
position: 'absolute',
|
||||
top: `${rect.top + scrollY - 2}px`, left: `${rect.left + scrollX - 2}px`,
|
||||
width: `${rect.width + 4}px`, height: `${rect.height + 4}px`,
|
||||
border: `2px solid ${OUTLINE_COLOR}`, borderRadius: '4px',
|
||||
pointerEvents: 'none', zIndex: '99999', boxSizing: 'border-box',
|
||||
});
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'impeccable-label';
|
||||
label.textContent = findings.map(f => TYPE_LABELS[f.type || f.id] || f.type || f.id).join(', ');
|
||||
Object.assign(label.style, {
|
||||
position: 'absolute', top: '-20px', left: '0',
|
||||
background: LABEL_BG, color: 'white',
|
||||
fontSize: '11px', fontFamily: 'system-ui, sans-serif', fontWeight: '600',
|
||||
padding: '2px 8px', borderRadius: '3px', whiteSpace: 'nowrap',
|
||||
lineHeight: '16px', letterSpacing: '0.02em',
|
||||
});
|
||||
outline.appendChild(label);
|
||||
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'impeccable-tooltip';
|
||||
tooltip.innerHTML = findings.map(f => f.detail || f.snippet).join('<br>');
|
||||
Object.assign(tooltip.style, {
|
||||
position: 'absolute', bottom: '-28px', left: '0',
|
||||
background: 'rgba(0,0,0,0.85)', color: '#e5e5e5',
|
||||
fontSize: '11px', fontFamily: 'ui-monospace, monospace',
|
||||
padding: '4px 8px', borderRadius: '3px', whiteSpace: 'nowrap',
|
||||
lineHeight: '16px', display: 'none', zIndex: '100000',
|
||||
});
|
||||
outline.appendChild(tooltip);
|
||||
|
||||
outline.addEventListener('mouseenter', () => {
|
||||
outline.style.pointerEvents = 'auto';
|
||||
tooltip.style.display = 'block';
|
||||
outline.style.background = 'oklch(60% 0.25 350 / 0.08)';
|
||||
});
|
||||
outline.addEventListener('mouseleave', () => {
|
||||
outline.style.pointerEvents = 'none';
|
||||
tooltip.style.display = 'none';
|
||||
outline.style.background = 'none';
|
||||
});
|
||||
|
||||
document.body.appendChild(outline);
|
||||
overlays.push(outline);
|
||||
}
|
||||
|
||||
function showPageBanner(findings) {
|
||||
if (!findings.length) return;
|
||||
const banner = document.createElement('div');
|
||||
banner.className = 'impeccable-overlay';
|
||||
Object.assign(banner.style, {
|
||||
position: 'fixed', top: '0', left: '0', right: '0', zIndex: '100000',
|
||||
background: LABEL_BG, color: 'white',
|
||||
fontFamily: 'system-ui, sans-serif', fontSize: '13px',
|
||||
padding: '8px 16px', display: 'flex', flexWrap: 'wrap',
|
||||
gap: '12px', alignItems: 'center', pointerEvents: 'auto',
|
||||
});
|
||||
for (const f of findings) {
|
||||
const tag = document.createElement('span');
|
||||
tag.textContent = `${TYPE_LABELS[f.type] || f.type}: ${f.detail}`;
|
||||
Object.assign(tag.style, {
|
||||
background: 'rgba(255,255,255,0.15)', padding: '2px 8px',
|
||||
borderRadius: '3px', fontSize: '12px', fontFamily: 'ui-monospace, monospace',
|
||||
});
|
||||
banner.appendChild(tag);
|
||||
}
|
||||
const close = document.createElement('button');
|
||||
close.textContent = '\u00d7';
|
||||
Object.assign(close.style, {
|
||||
marginLeft: 'auto', background: 'none', border: 'none',
|
||||
color: 'white', fontSize: '18px', cursor: 'pointer', padding: '0 4px',
|
||||
});
|
||||
close.addEventListener('click', () => banner.remove());
|
||||
banner.appendChild(close);
|
||||
document.body.appendChild(banner);
|
||||
overlays.push(banner);
|
||||
}
|
||||
|
||||
function printSummary(allFindings) {
|
||||
if (allFindings.length === 0) {
|
||||
console.log('%c[impeccable] No anti-patterns found.', 'color: #22c55e; font-weight: bold');
|
||||
return;
|
||||
}
|
||||
console.group(
|
||||
`%c[impeccable] ${allFindings.length} anti-pattern${allFindings.length === 1 ? '' : 's'} found`,
|
||||
'color: oklch(60% 0.25 350); font-weight: bold'
|
||||
);
|
||||
for (const { el, findings } of allFindings) {
|
||||
for (const f of findings) {
|
||||
console.log(`%c${f.type || f.id}%c ${f.detail || f.snippet}`,
|
||||
'color: oklch(55% 0.25 350); font-weight: bold', 'color: inherit', el);
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// Main scan
|
||||
// ===========================================================================
|
||||
|
||||
function scan() {
|
||||
for (const o of overlays) o.remove();
|
||||
overlays.length = 0;
|
||||
const allFindings = [];
|
||||
|
||||
for (const el of document.querySelectorAll('*')) {
|
||||
if (el.classList.contains('impeccable-overlay') ||
|
||||
el.classList.contains('impeccable-label') ||
|
||||
el.classList.contains('impeccable-tooltip')) continue;
|
||||
|
||||
const findings = [
|
||||
...checkElementBordersDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
|
||||
...checkElementColorsDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
|
||||
];
|
||||
|
||||
if (findings.length > 0) {
|
||||
highlight(el, findings);
|
||||
allFindings.push({ el, findings });
|
||||
}
|
||||
}
|
||||
|
||||
const typoFindings = checkTypography();
|
||||
if (typoFindings.length > 0) {
|
||||
showPageBanner(typoFindings);
|
||||
allFindings.push({ el: document.body, findings: typoFindings });
|
||||
}
|
||||
|
||||
const layoutFindings = checkLayout();
|
||||
for (const f of layoutFindings) {
|
||||
const el = f.el || document.body;
|
||||
delete f.el;
|
||||
highlight(el, [f]);
|
||||
allFindings.push({ el, findings: [f] });
|
||||
}
|
||||
|
||||
printSummary(allFindings);
|
||||
return allFindings;
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => setTimeout(scan, 100));
|
||||
} else {
|
||||
setTimeout(scan, 100);
|
||||
}
|
||||
|
||||
window.impeccableScan = scan;
|
||||
})();
|
||||
@@ -18,7 +18,7 @@ const ROOT = path.resolve(__dirname, '..');
|
||||
|
||||
const CORE_PATH = path.join(ROOT, 'source/skills/critique/scripts/detect-antipatterns-core.mjs');
|
||||
const WRAPPER_PATH = path.join(ROOT, 'source/skills/critique/scripts/detect-antipatterns-browser-wrapper.js');
|
||||
const OUTPUT_PATH = path.join(ROOT, 'public/js/detect-antipatterns-browser.js');
|
||||
const OUTPUT_PATH = path.join(ROOT, '.claude/skills/critique/scripts/detect-antipatterns-browser.js');
|
||||
|
||||
// Read and strip exports from core
|
||||
let core = fs.readFileSync(CORE_PATH, 'utf-8');
|
||||
|
||||
@@ -19,6 +19,19 @@ const server = serve({
|
||||
"/cheatsheet": cheatsheet,
|
||||
"/gallery": gallery,
|
||||
|
||||
// Built skill scripts (.claude/skills/)
|
||||
"/.claude/skills/*": async (req) => {
|
||||
const url = new URL(req.url);
|
||||
if (url.pathname.includes('..')) return new Response("Bad Request", { status: 400 });
|
||||
const filePath = `.${url.pathname}`;
|
||||
const assetFile = file(filePath);
|
||||
if (await assetFile.exists()) {
|
||||
return new Response(assetFile, {
|
||||
headers: { "Content-Type": "application/javascript", "X-Content-Type-Options": "nosniff" }
|
||||
});
|
||||
}
|
||||
return new Response("Not Found", { status: 404 });
|
||||
},
|
||||
// Static assets - all public subdirectories
|
||||
"/assets/*": async (req) => {
|
||||
const url = new URL(req.url);
|
||||
|
||||
@@ -480,9 +480,10 @@ async function detectUrl(url) {
|
||||
}
|
||||
|
||||
// Read the browser detection script — reuse it instead of reimplementing
|
||||
// The generated browser script lives alongside this file after build
|
||||
const browserScriptPath = path.resolve(
|
||||
path.dirname(new URL(import.meta.url).pathname),
|
||||
'..', '..', '..', '..', 'public', 'js', 'detect-antipatterns-browser.js'
|
||||
'detect-antipatterns-browser.js'
|
||||
);
|
||||
let browserScript;
|
||||
try {
|
||||
|
||||
@@ -38,8 +38,8 @@ describeIf('browser script parity with CLI', () => {
|
||||
let filePath;
|
||||
if (req.url.startsWith('/fixtures/')) {
|
||||
filePath = path.join(${JSON.stringify(path.join(import.meta.dir))}, req.url);
|
||||
} else if (req.url.startsWith('/js/')) {
|
||||
filePath = path.join(${JSON.stringify(path.join(import.meta.dir, '..', 'public'))}, req.url);
|
||||
} else if (req.url.startsWith('/.claude/')) {
|
||||
filePath = path.join(${JSON.stringify(path.join(import.meta.dir, '..'))}, req.url);
|
||||
} else {
|
||||
res.writeHead(404); res.end(); return;
|
||||
}
|
||||
|
||||
+1
-1
@@ -75,6 +75,6 @@
|
||||
<p>Purple-to-indigo gradient</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -44,6 +44,6 @@
|
||||
<h3 style="color: rgb(220, 38, 38); font-size: 1.5rem;">Red heading — not AI purple</h3>
|
||||
<h3 style="color: rgb(180, 83, 9); font-size: 1.5rem;">Amber heading — distinctive</h3>
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -132,6 +132,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -237,6 +237,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -108,6 +108,6 @@
|
||||
<strong>Warning:</strong> Your trial expires in 3 days. <a href="#" style="color: #d97706;">Upgrade now</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -43,6 +43,6 @@
|
||||
<p style="font-size: 0.875rem; color: #6b7280;">Uniform 1px border — should NOT flag.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -8,4 +8,4 @@
|
||||
<p style="font-size: 15px; color: #6b7280;">Card description with close font sizes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
|
||||
+1
-1
@@ -131,6 +131,6 @@
|
||||
<p style="font-size: 0.8125rem; color: #9ca3af;">Inline dark card with side-tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -79,6 +79,6 @@
|
||||
<p style="font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem;">Shadow only. Clean.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -34,6 +34,6 @@
|
||||
|
||||
<h3>A Subheading</h3>
|
||||
<p>Can you tell this is a subheading? Exactly.</p>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -40,6 +40,6 @@
|
||||
<h3>Strong Size Hierarchy</h3>
|
||||
<p>Sizes range from 12px to 48px — a 4:1 ratio with clear visual steps.</p>
|
||||
<p class="caption">Caption text is clearly distinct from body.</p>
|
||||
<script src="/js/detect-antipatterns-browser.js"></script>
|
||||
<script src="/.claude/skills/critique/scripts/detect-antipatterns-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user