skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-18 17:16:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

refine(site): Antidote as a visual wall of three anti-pattern examples

Browse Source 
Previous layout was a wall of text (three numbered stat rows plus a
side gallery). User feedback: "seeing is believing." Drop the stats
entirely, lead with three big anti-pattern screenshots in a 3-up grid
(Purple Gradients / Cardocalypse / Hero-Metric Template), tight
one-line lead above, footer row with "Browse all 25" link + a small
mono meta line that still carries the key claims (deterministic rules,
LLM layer, browser overlay) in a single sentence.

Images use 4:3 aspect, hover lifts them slightly with a magenta-soft
outline glow, labels are italic display face + mono accent number.
The whole section now reads at a glance: headline + three pictures +
one link.
This commit is contained in:
Paul Bakaus
2026-04-22 14:33:15 -07:00
parent bae622107a
commit 826c6cda05
2 changed files with 138 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/workflow.css
+106
View File
@@ -3654,3 +3654,109 @@
font-size: 12px;
margin-top: 6px;
}
/* ============================================
ANTIDOTE — visual-first wall of three
============================================ */
.antidote-content .section-lead {
max-width: 54ch;
margin-bottom: var(--spacing-xl);
}
.antidote-wall {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.antidote-wall-card {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
text-decoration: none;
color: inherit;
transition: transform 260ms var(--ease-out);
}
.antidote-wall-card:hover {
transform: translateY(-4px);
}
.antidote-wall-image {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 8px;
background: var(--color-paper);
border: 1px solid var(--color-mist);
box-shadow: 0 12px 32px oklch(0% 0 0 / 0.08);
transition: box-shadow 260ms var(--ease-out);
}
.antidote-wall-card:hover .antidote-wall-image {
box-shadow: 0 20px 40px oklch(0% 0 0 / 0.14), 0 0 0 1px var(--color-accent-soft);
}
.antidote-wall-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.antidote-wall-caption {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
padding: 0 2px;
}
.antidote-wall-num {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
}
.antidote-wall-label {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.375rem;
line-height: 1.1;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.antidote-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-mist);
flex-wrap: wrap;
}
.antidote-foot-meta {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-ash);
}
@media (max-width: 820px) {
.antidote-wall {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.antidote-foot {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
}
public/index.html
+32 -52
View File
@@ -244,61 +244,41 @@
<h2 class="section-title">The Antidote</h2>
</div>
<div class="antidote-content">
<div class="antidote-row antidote-row--split" data-reveal>
<div class="antidote-intro">
<p class="section-lead">Every AI model learned from the same templates. Most design skills list a handful of don'ts in a document and hope the model remembers. Impeccable names 25 of them, catalogues them, and actively detects them, on your code and in your browser.</p>
<p class="section-lead" data-reveal>25 named anti-patterns, detected on your code and in your browser. These are three of them.</p>
<dl class="antidote-stats">
<div class="antidote-stat">
<dt>25</dt>
<dd><strong>Named anti-patterns</strong>, each with a visual example and a detection rule. Comparable skills (Anthropic's frontend-design, assorted "AI design" skills) list a short set in prose and hope for the best.</dd>
</div>
<div class="antidote-stat">
<dt>2</dt>
<dd><strong>Detection layers.</strong> A deterministic pass catches the 25 rules via source and DOM analysis: no LLM, no API keys, no flaky scoring. <code>/impeccable critique</code> layers an LLM semantic pass on top for the things patterns can't see.</dd>
</div>
<div class="antidote-stat">
<dt>3</dt>
<dd><strong>Surfaces.</strong> The <code>impeccable detect</code> CLI gates your PRs. The Chrome extension flags issues on any page. The overlay lives inside <code>/impeccable critique</code> during AI design review.</dd>
</div>
</dl>
<a href="/anti-patterns" class="antidote-catalog-link">Browse the full catalog &rarr;</a>
</div>
<div class="gallery-stack-container">
<div class="gallery-stack-header">
<h3 class="gallery-stack-title">Gallery of Shame</h3>
<button class="gallery-stack-btn gallery-stack-prev" aria-label="Previous">&larr;</button>
<button class="gallery-stack-btn gallery-stack-next" aria-label="Next">&rarr;</button>
<div class="antidote-wall" data-reveal>
<a href="/antipattern-examples/purple-gradients.html" class="antidote-wall-card">
<div class="antidote-wall-image">
<img src="antipattern-images/purple-gradients.png" alt="Purple gradient hero UI" loading="lazy">
</div>
<div class="gallery-stack" id="gallery-stack">
<a href="/antipattern-examples/purple-gradients.html" class="gallery-stack-card">
<img src="antipattern-images/purple-gradients.png" alt="Purple gradient UI" loading="lazy">
<span class="gallery-stack-label">Purple Gradients</span>
</a>
<a href="/antipattern-examples/thick-border-cards.html" class="gallery-stack-card">
<img src="antipattern-images/thick-border-cards.png" alt="Thick border accent cards" loading="lazy">
<span class="gallery-stack-label">Side-Tab Cards</span>
</a>
<a href="/antipattern-examples/cardocalypse.html" class="gallery-stack-card">
<img src="antipattern-images/cardocalypse.png" alt="Cards nested inside cards" loading="lazy">
<span class="gallery-stack-label">Cardocalypse</span>
</a>
<a href="/antipattern-examples/inter-everywhere.html" class="gallery-stack-card">
<img src="antipattern-images/inter-everywhere.png" alt="Inter font everywhere" loading="lazy">
<span class="gallery-stack-label">Inter Everywhere</span>
</a>
<a href="/antipattern-examples/layout-templates.html" class="gallery-stack-card">
<img src="antipattern-images/layout-templates.png" alt="Generic layout templates" loading="lazy">
<span class="gallery-stack-label">Template Layouts</span>
</a>
<a href="/antipattern-examples/bad-contrast.html" class="gallery-stack-card">
<img src="antipattern-images/bad-contrast.png" alt="Low contrast text" loading="lazy">
<span class="gallery-stack-label">Bad Contrast</span>
</a>
<div class="antidote-wall-caption">
<span class="antidote-wall-num">01</span>
<span class="antidote-wall-label">Purple Gradients</span>
</div>
</div>
</a>
<a href="/antipattern-examples/cardocalypse.html" class="antidote-wall-card">
<div class="antidote-wall-image">
<img src="antipattern-images/cardocalypse.png" alt="Cards nested inside cards" loading="lazy">
</div>
<div class="antidote-wall-caption">
<span class="antidote-wall-num">02</span>
<span class="antidote-wall-label">Cardocalypse</span>
</div>
</a>
<a href="/antipattern-examples/layout-templates.html" class="antidote-wall-card">
<div class="antidote-wall-image">
<img src="antipattern-images/layout-templates.png" alt="Hero-metric template layout" loading="lazy">
</div>
<div class="antidote-wall-caption">
<span class="antidote-wall-num">03</span>
<span class="antidote-wall-label">Hero-Metric Template</span>
</div>
</a>
</div>
<div class="antidote-foot" data-reveal>
<a href="/anti-patterns" class="antidote-catalog-link">Browse all 25 anti-patterns &rarr;</a>
<span class="antidote-foot-meta">Detected by deterministic rules. Flagged by the LLM layer. Visualized in your browser.</span>
</div>
<div class="antidote-footer" data-reveal>