mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 07:36:50 +03:00
Paul BakausandClaude Opus 4.6
3c9cc86061
Merges the impeccable-detect CLI repo (pbakaus/impeccable-cli@831a6cc) into this repo. The BSL-1.1 license that motivated the split is gone; everything is now Apache 2.0. - Add bin/, src/, detection tests and fixtures from CLI repo - Merge package.json: name → "impeccable", add bin/exports/files fields - Internal refs now read from local src/ instead of node_modules/ - Update SPDX headers, NOTICE.md, CLAUDE.md, FAQ, npm README - Add prepack/postpack scripts for CLI-focused README on npm - Remove terminal license labels (no longer needed) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
137 lines
5.8 KiB
HTML
137 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anti-Patterns That Should Be Flagged</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; }
|
|
.cards { display: grid; gap: 1rem; max-width: 28rem; }
|
|
.card { background: white; padding: 1rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
.card h3 { font-weight: 600; color: #111827; font-size: 0.875rem; }
|
|
.card p { font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; }
|
|
|
|
/* CSS side-tab variants */
|
|
.card-shorthand-left { border-left: 4px solid #3b82f6; }
|
|
.card-shorthand-right { border-right: 5px solid #8b5cf6; }
|
|
.card-longhand-left { border-left-width: 3px; border-left-style: solid; border-left-color: #10b981; }
|
|
.card-longhand-right { border-right-width: 6px; border-right-style: solid; border-right-color: #ef4444; }
|
|
.card-logical-start { border-inline-start: 4px solid #f59e0b; }
|
|
.card-logical-end { border-inline-end: 3px solid #ec4899; }
|
|
.card-logical-start-width { border-inline-start-width: 5px; border-inline-start-style: solid; border-inline-start-color: #06b6d4; }
|
|
|
|
/* CSS top/bottom + border-radius */
|
|
.card-css-top { border-radius: 12px; border-top: 4px solid #3b82f6; }
|
|
.card-css-bottom { border-radius: 12px; border-bottom: 3px solid #8b5cf6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Anti-Patterns: Should Flag</h1>
|
|
<p class="intro">Every example on this page should be detected by the anti-pattern scanner.</p>
|
|
|
|
<!-- TAILWIND SIDE-TAB -->
|
|
<h2>Tailwind Side-Tab</h2>
|
|
<div class="cards">
|
|
<div class="border-l-4 border-blue-500 bg-white p-4 rounded-r shadow-sm">
|
|
<h3>border-l-4 + rounded-r</h3>
|
|
<p>The classic AI tell.</p>
|
|
</div>
|
|
<div class="border-l-2 border-emerald-500 bg-white p-4 rounded-r shadow-sm">
|
|
<h3>border-l-2 + rounded-r</h3>
|
|
<p>Thin but still recognizable with rounded corners.</p>
|
|
</div>
|
|
<div class="border-r-4 border-purple-500 bg-white p-4 rounded-l shadow-sm">
|
|
<h3>border-r-4 + rounded-l</h3>
|
|
<p>Right side variant.</p>
|
|
</div>
|
|
<div class="border-s-3 border-amber-500 bg-white p-4 rounded-r shadow-sm">
|
|
<h3>border-s-3 + rounded-r</h3>
|
|
<p>Logical inline-start.</p>
|
|
</div>
|
|
<div class="border-e-8 border-red-500 bg-white p-4 rounded-l shadow-sm">
|
|
<h3>border-e-8 + rounded-l</h3>
|
|
<p>Logical inline-end, extra thick.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSS SIDE-TAB -->
|
|
<h2>CSS Side-Tab</h2>
|
|
<div class="cards">
|
|
<div class="card card-shorthand-left">
|
|
<h3>border-left: 4px solid</h3>
|
|
<p>CSS shorthand.</p>
|
|
</div>
|
|
<div class="card card-shorthand-right">
|
|
<h3>border-right: 5px solid</h3>
|
|
<p>CSS shorthand right.</p>
|
|
</div>
|
|
<div class="card card-longhand-left">
|
|
<h3>border-left-width: 3px</h3>
|
|
<p>CSS longhand.</p>
|
|
</div>
|
|
<div class="card card-longhand-right">
|
|
<h3>border-right-width: 6px</h3>
|
|
<p>CSS longhand right.</p>
|
|
</div>
|
|
<div class="card card-logical-start">
|
|
<h3>border-inline-start: 4px solid</h3>
|
|
<p>CSS logical start.</p>
|
|
</div>
|
|
<div class="card card-logical-end">
|
|
<h3>border-inline-end: 3px solid</h3>
|
|
<p>CSS logical end.</p>
|
|
</div>
|
|
<div class="card card-logical-start-width">
|
|
<h3>border-inline-start-width: 5px</h3>
|
|
<p>CSS logical longhand.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TOP/BOTTOM + ROUNDED -->
|
|
<h2>Top/Bottom + Rounded</h2>
|
|
<div class="cards">
|
|
<div class="border-t-4 border-blue-500 rounded-lg bg-white p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm">border-t-4 + rounded-lg</h3>
|
|
<p class="text-sm text-gray-600">Top accent on rounded card.</p>
|
|
</div>
|
|
<div class="border-b-4 border-purple-500 rounded-xl bg-white p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm">border-b-4 + rounded-xl</h3>
|
|
<p class="text-sm text-gray-600">Bottom accent on rounded card.</p>
|
|
</div>
|
|
<div class="border-t-2 border-emerald-500 rounded-md bg-white p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm">border-t-2 + rounded-md</h3>
|
|
<p class="text-sm text-gray-600">Even thin top border on rounded.</p>
|
|
</div>
|
|
<div class="card card-css-top">
|
|
<h3>CSS border-top + border-radius</h3>
|
|
<p>Top border from style block.</p>
|
|
</div>
|
|
<div class="card card-css-bottom">
|
|
<h3>CSS border-bottom + border-radius</h3>
|
|
<p>Bottom border from style block.</p>
|
|
</div>
|
|
</div>
|
|
<!-- DARK MODE VARIANTS -->
|
|
<h2>Dark Mode</h2>
|
|
<div class="cards">
|
|
<div class="border-l-4 border-cyan-400 rounded-lg bg-gray-800 p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm text-white">Dark card + border-l-4 + rounded</h3>
|
|
<p class="text-sm text-gray-400">Dark background doesn't make the side-tab OK.</p>
|
|
</div>
|
|
<div class="border-t-2 border-violet-500 rounded-xl bg-slate-900 p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm text-white">Dark card + border-t-2 + rounded</h3>
|
|
<p class="text-sm text-gray-400">Top accent on dark rounded card.</p>
|
|
</div>
|
|
<div style="background: #1f2937; padding: 1rem; border-radius: 12px; border-left: 4px solid #f472b6; max-width: 28rem;">
|
|
<h3 style="font-weight: 600; font-size: 0.875rem; color: white;">Dark CSS card + side border + radius</h3>
|
|
<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>
|
|
</body>
|
|
</html>
|