mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-22 02:56:52 +03:00
Paul BakausandClaude Opus 4.6
f9bfe18d26
- Anti-pattern detector script (source/skills/critique/scripts/detect-antipatterns.mjs): CLI tool that scans files/dirs for UI anti-patterns via regex. Detects side-tab accent borders and border-accent-on-rounded patterns across Tailwind, CSS, JSX. Context-aware: skips safe elements (blockquotes, nav, inputs, code), neutral colors, and adjusts thresholds based on border-radius co-occurrence. - Browser visualizer (public/js/detect-antipatterns-browser.js): Drop-in script that highlights anti-patterns directly in the browser with labeled overlays. Two modes: "static" (regex, matches CLI) and "computed" (getComputedStyle, catches CSS cascade). Scans both inline styles and <style> blocks. - Gallery of Shame (public/gallery.html): Standalone page showcasing 11 AI anti-pattern examples with thumbnails and links. Anti-pattern example pages updated from 1080x1080 Twitter format to responsive layouts, labels removed, screenshots retaken at 16:10. - Critique skill updated to run detector before manual review. - Build system: skills now support scripts/ directories alongside reference/. All 8 provider transformers refactored to use shared.js (DRY). - 58 new tests covering detection logic, fixtures, CLI integration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
85 lines
4.3 KiB
HTML
85 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clean Patterns — Should NOT Flag</title>
|
|
<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; }
|
|
.section { max-width: 28rem; }
|
|
.card-rounded { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }
|
|
.card-rounded h3 { font-weight: 600; color: #111827; }
|
|
.card-rounded p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
|
|
.card-flat { background: white; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }
|
|
.badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #dbeafe; color: #1d4ed8; }
|
|
|
|
/* Below-threshold side borders without radius */
|
|
.thin-left { border-left: 1px solid #3b82f6; }
|
|
.thin-right { border-right: 2px solid #8b5cf6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Clean Patterns: Should Pass</h1>
|
|
<p class="intro">None of these should be flagged. They're all intentional, well-established web patterns.</p>
|
|
|
|
<!-- CLEAN CARDS -->
|
|
<h2>Clean Cards</h2>
|
|
<div class="section">
|
|
<div class="card-rounded" style="border: 1px solid #e5e7eb;">
|
|
<h3>Full border card</h3>
|
|
<p>Subtle 1px border all around. Clean and intentional.</p>
|
|
</div>
|
|
|
|
<div style="max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-top: 3px solid #3b82f6; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="font-weight: 600; color: #111827;">Top border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">Top accent without rounded corners is a clean section divider.</p>
|
|
</div>
|
|
|
|
<div style="max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-bottom: 2px solid #10b981; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="font-weight: 600; color: #111827;">Bottom border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">Bottom accent without rounded corners is also clean.</p>
|
|
</div>
|
|
|
|
<div class="card-rounded">
|
|
<span class="badge">New</span>
|
|
<h3>No border at all</h3>
|
|
<p>Just a shadow. Simple and effective.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BELOW THRESHOLD -->
|
|
<h2>Below Threshold (Thin, No Radius)</h2>
|
|
<div class="section">
|
|
<div class="card-flat thin-left">
|
|
<p>border-left: 1px solid, no radius — not flagged</p>
|
|
</div>
|
|
<div class="card-flat thin-right">
|
|
<p>border-right: 2px solid, no radius — not flagged</p>
|
|
</div>
|
|
<div class="card-flat" style="border-left: 1px solid #10b981;">
|
|
<p>1px inline border-left, no radius — not flagged</p>
|
|
</div>
|
|
</div>
|
|
<!-- DARK MODE CLEAN -->
|
|
<h2>Dark Mode (Clean)</h2>
|
|
<div class="section">
|
|
<div style="background: #1f2937; padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #374151; max-width: 28rem; margin-bottom: 1rem;">
|
|
<h3 style="font-weight: 600; color: white;">Dark card, full border</h3>
|
|
<p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Uniform 1px border all around. Clean.</p>
|
|
</div>
|
|
<div style="background: #111827; padding: 1.5rem; max-width: 28rem; margin-bottom: 1rem; border-bottom: 2px solid #6366f1;">
|
|
<h3 style="font-weight: 600; color: white;">Dark section, bottom border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Bottom accent without radius is fine.</p>
|
|
</div>
|
|
<div style="background: #1e293b; padding: 1.5rem; border-radius: 0.5rem; max-width: 28rem; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">
|
|
<h3 style="font-weight: 600; color: white;">Dark card, no border</h3>
|
|
<p style="font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem;">Shadow only. Clean.</p>
|
|
</div>
|
|
</div>
|
|
<script src="../../../public/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|