mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-16 08:06:24 +03:00
Paul BakausandClaude Opus 4.6
72b9ca2941
Four new layout detections: - nested-cards: jsdom DOM walk finds card-like elements (shadow + rounded + bg) nested inside other card-like elements. Excludes dropdowns (absolute/fixed), form inputs, code blocks, badges (<20 chars), and known component classes. - identical-card-grid: detects grid/flex parents with 3+ children sharing the same structural fingerprint (icon + heading + paragraph template pattern). - monotonous-spacing: regex on raw HTML collects padding/margin/gap values (px, rem, Tailwind classes), rounds to nearest 4px, flags when >60% use the same value with <=3 distinct values. - everything-centered: regex counts text-align:center and Tailwind text-center on text elements, flags when >70% of 5+ text elements are centered. Also narrowed pure-black-white to only flag #000 as background color — text-black, text-white, bg-white, and #fff are no longer flagged (too common, per user feedback). Extensive should-pass fixture covers: shadcn card sub-components, cards with form inputs/dropdowns/code blocks/badges/accordions/tabs/images, pricing cards, varied spacing, mixed centered/left-aligned layouts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
138 lines
7.9 KiB
HTML
138 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Layout Anti-Patterns — Should Flag</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
|
p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Layout Anti-Patterns</h1>
|
|
<p class="intro">These should all be flagged by the detector.</p>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 1. NESTED CARDS — Cardocalypse -->
|
|
<!-- ============================================================ -->
|
|
<h2>Nested Cards (Cardocalypse)</h2>
|
|
|
|
<!-- Classic: card inside card, both with shadow + rounded + bg -->
|
|
<div class="bg-white rounded-lg shadow-md p-6 max-w-md mb-4">
|
|
<h3 class="text-lg font-semibold mb-3">Outer Card</h3>
|
|
<div class="bg-white rounded-lg shadow-md p-4">
|
|
<h4 class="font-medium">Inner Card</h4>
|
|
<p class="text-sm text-gray-600">Card inside card — the classic cardocalypse.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Three levels deep -->
|
|
<div class="bg-white rounded-xl shadow-lg p-6 max-w-md mb-4">
|
|
<h3 class="text-lg font-semibold mb-3">Level 1</h3>
|
|
<div class="bg-gray-50 rounded-lg shadow-sm p-4 mb-3">
|
|
<h4 class="font-medium mb-2">Level 2</h4>
|
|
<div class="bg-white rounded-md shadow-sm p-3">
|
|
<p class="text-sm">Level 3 — nesting inception.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSS variant: border + bg + shadow nesting -->
|
|
<div style="background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 1.5rem; max-width: 28rem; margin-bottom: 1rem;">
|
|
<h3 style="font-weight: 600; margin-bottom: 0.75rem;">Outer (CSS)</h3>
|
|
<div style="background: #f9fafb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1rem;">
|
|
<p style="font-size: 0.875rem; color: #6b7280;">Inner card via CSS.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- shadcn-style Card nesting (Card inside Card, not Card sub-components) -->
|
|
<div class="rounded-lg border bg-white shadow-sm p-6 max-w-md mb-4" data-component="card">
|
|
<h3 class="font-semibold mb-3">shadcn-style Outer Card</h3>
|
|
<div class="rounded-lg border bg-white shadow-sm p-4" data-component="card">
|
|
<p class="text-sm text-gray-600">Another shadcn Card nested inside — still bad.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 2. IDENTICAL CARD GRIDS -->
|
|
<!-- ============================================================ -->
|
|
<h2>Identical Card Grid</h2>
|
|
|
|
<!-- Classic: 4 identical cards with icon + heading + text -->
|
|
<div class="grid grid-cols-2 gap-4 max-w-2xl mb-4">
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Fast Performance</h3>
|
|
<p class="text-sm text-gray-600">Lightning fast response times with optimized infrastructure.</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Reliable Uptime</h3>
|
|
<p class="text-sm text-gray-600">99.99% uptime guarantee with automatic failover.</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Bank-Level Security</h3>
|
|
<p class="text-sm text-gray-600">Enterprise-grade encryption and security controls.</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
|
|
<svg class="w-6 h-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</div>
|
|
<h3 class="font-semibold mb-2">Team Collaboration</h3>
|
|
<p class="text-sm text-gray-600">Built for teams with real-time collaboration tools.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 3. MONOTONOUS SPACING -->
|
|
<!-- ============================================================ -->
|
|
<h2>Monotonous Spacing</h2>
|
|
|
|
<!-- Everything padded with the same value, same gaps -->
|
|
<div style="max-width: 28rem; margin-bottom: 1rem;">
|
|
<div style="background: white; padding: 16px; margin-bottom: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="margin-bottom: 16px; font-weight: 600;">Section One</h3>
|
|
<p style="margin-bottom: 16px; font-size: 0.875rem; color: #6b7280;">Every margin and padding is exactly 16px.</p>
|
|
<div style="padding: 16px; background: #f3f4f6; border-radius: 8px;">
|
|
<p style="font-size: 0.875rem; color: #6b7280; margin-bottom: 16px;">Even the inner padding is 16px.</p>
|
|
</div>
|
|
</div>
|
|
<div style="background: white; padding: 16px; margin-bottom: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="margin-bottom: 16px; font-weight: 600;">Section Two</h3>
|
|
<p style="margin-bottom: 16px; font-size: 0.875rem; color: #6b7280;">No rhythm, no variation, just 16px everywhere.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- 4. EVERYTHING CENTERED -->
|
|
<!-- ============================================================ -->
|
|
<h2>Everything Centered</h2>
|
|
|
|
<div style="text-align: center; max-width: 32rem; margin: 0 auto 1rem;">
|
|
<h3 style="text-align: center; font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem;">Welcome to Our Platform</h3>
|
|
<p style="text-align: center; color: #6b7280; margin-bottom: 1rem;">We provide the best solutions for your business needs.</p>
|
|
<div style="text-align: center; display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem;">
|
|
<button style="text-align: center; padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 6px;">Get Started</button>
|
|
<button style="text-align: center; padding: 0.5rem 1rem; background: white; color: #374151; border: 1px solid #d1d5db; border-radius: 6px;">Learn More</button>
|
|
</div>
|
|
<p style="text-align: center; font-size: 0.75rem; color: #9ca3af;">Trusted by over 10,000 companies worldwide.</p>
|
|
<div style="text-align: center; padding: 1rem; background: #f3f4f6; border-radius: 8px; margin-top: 1rem;">
|
|
<p style="text-align: center; font-size: 0.875rem; color: #6b7280;">Every. Single. Element. Is. Centered.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|