Redesign antidote section with detector summary and gallery link

Replace the buried "Gallery of Shame" inline link with a compact
detector summary card showing all 16 auto-detected anti-patterns
as chips grouped by category (Borders, Typography, Color, Layout,
Motion). Prominent gallery link in the footer. Revised lead copy
to mention the automated detector.

Keeps the tabbed Do/Don't pattern reference below unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/css/main.css

@@ -1982,6 +1982,114 @@ code {
   text-decoration: underline;
 }
 
+/* Detector summary */
+.detector-summary {
+  margin-bottom: var(--spacing-xl);
+  border: 1px solid var(--color-mist);
+  border-radius: 6px;
+  background: white;
+  overflow: hidden;
+}
+
+.detector-header {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-mist);
+  background: var(--color-cream);
+}
+
+.detector-label {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-accent);
+}
+
+.detector-label code {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--color-accent);
+}
+
+.detector-categories {
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.detector-category {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-sm);
+}
+
+.detector-category-name {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-ash);
+  min-width: 5.5rem;
+  flex-shrink: 0;
+}
+
+.detector-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.detector-chip {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  color: var(--color-charcoal);
+  background: var(--color-cream);
+  padding: 3px 10px;
+  border-radius: 3px;
+  border: 1px solid var(--color-mist);
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+.detector-footer {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-top: 1px solid var(--color-mist);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+.detector-count {
+  font-size: 0.8125rem;
+  color: var(--color-ash);
+}
+
+.detector-gallery-link {
+  font-size: 0.8125rem;
+  color: var(--color-accent);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.detector-gallery-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .detector-category {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .detector-category-name {
+    min-width: auto;
+  }
+}
+
 /* ============================================
    SOLUTION SECTION ENHANCEMENTS
    ============================================ */

public/index.html

@@ -144,14 +144,68 @@
         <h2 class="section-title">The Antidote</h2>
       </div>
       <div class="antidote-content">
-        <p class="section-lead" data-reveal>Anthropic's original frontend-design skill laid the foundation. Impeccable builds on it with curated patterns and anti-patterns across typography, color, layout, motion, and more.</p>
+        <p class="section-lead" data-reveal>AI-generated UIs share the same tells. Impeccable curates the patterns and anti-patterns across typography, color, layout, motion, and more &mdash; plus an automated detector that catches 16 of them in your code.</p>
+
+        <!-- Detector summary -->
+        <div class="detector-summary" data-reveal>
+          <div class="detector-header">
+            <span class="detector-label">Auto-detected by <code>/critique</code></span>
+          </div>
+          <div class="detector-categories">
+            <div class="detector-category">
+              <span class="detector-category-name">Borders</span>
+              <div class="detector-chips">
+                <span class="detector-chip">Side-tab accent</span>
+                <span class="detector-chip">Border on rounded</span>
+              </div>
+            </div>
+            <div class="detector-category">
+              <span class="detector-category-name">Typography</span>
+              <div class="detector-chips">
+                <span class="detector-chip">Overused font</span>
+                <span class="detector-chip">Single font</span>
+                <span class="detector-chip">Flat hierarchy</span>
+              </div>
+            </div>
+            <div class="detector-category">
+              <span class="detector-category-name">Color</span>
+              <div class="detector-chips">
+                <span class="detector-chip">Pure black bg</span>
+                <span class="detector-chip">Gray on color</span>
+                <span class="detector-chip">Low contrast</span>
+                <span class="detector-chip">Gradient text</span>
+                <span class="detector-chip">AI palette</span>
+                <span class="detector-chip">Dark glow</span>
+              </div>
+            </div>
+            <div class="detector-category">
+              <span class="detector-category-name">Layout</span>
+              <div class="detector-chips">
+                <span class="detector-chip">Nested cards</span>
+                <span class="detector-chip">Monotonous spacing</span>
+                <span class="detector-chip">Everything centered</span>
+              </div>
+            </div>
+            <div class="detector-category">
+              <span class="detector-category-name">Motion</span>
+              <div class="detector-chips">
+                <span class="detector-chip">Bounce easing</span>
+                <span class="detector-chip">Layout animation</span>
+              </div>
+            </div>
+          </div>
+          <div class="detector-footer">
+            <span class="detector-count">16 anti-patterns caught automatically</span>
+            <a href="/gallery" class="detector-gallery-link">See them in the wild &rarr;</a>
+          </div>
+        </div>
 
         <!-- Patterns by category with tabs -->
         <div class="patterns-categories" id="patterns-categories">
           <!-- Rendered by JS -->
         </div>
 
-        <p class="contribute-inline">Want to see these in action? <a href="/gallery" class="cheatsheet-link">Gallery of Shame &rarr;</a> &nbsp;Missing something? <a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20">Suggest a pattern &rarr;</a></p>
+        <p class="contribute-inline">Missing something? <a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20">Suggest a pattern &rarr;</a></p>
       </div>
     </section>