skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-11 21:57:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refocus Visual Mode section on the Chrome extension

Browse Source 
The CLI command `npx impeccable detect src/` was promoted in the
"New!" callout but it scans static source files — that's a separate
feature, not visual mode. Replaces it with a "Get the Chrome
extension" CTA which is the actual way users get visual mode in
their browser.

Also updates the lead text to drop the /critique-specific framing
and reframes the second feature blurb to mention all three usage
modes (Chrome extension, /critique embed, npx impeccable live).

The .detection-cmd class is restyled from a code-block-with-arrow
to a proper link/button with hover state, since it's now a CTA
rather than a shell prompt.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-07 01:37:54 -07:00
co-authored by Claude Opus 4.6
parent b54c46cac7
commit 89f4ec41d7
3 changed files with 61 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+29 -13
View File
@@ -2619,19 +2619,40 @@ code {
}
/* Detection callout — horizontal below cards */
/* Detection callout — image hero with NEW badge + CTA below.
The whole callout is a single anchor so the entire card is clickable. */
.detection-callout {
display: block;
margin-bottom: var(--spacing-xl);
border: 1px solid var(--color-mist);
border-radius: 8px;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 12px;
overflow: hidden;
background: var(--color-paper);
text-decoration: none;
color: inherit;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.detection-callout:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 12px 32px -8px var(--color-accent-dim);
}
.detection-callout-image {
display: block;
width: 100%;
height: auto;
background: var(--color-cream);
border-bottom: 1px solid var(--color-mist);
}
.detection-callout-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
flex-wrap: wrap;
padding: var(--spacing-sm) var(--spacing-md);
}
.detection-badge {
@@ -2664,20 +2685,15 @@ code {
.detection-cmd {
flex-shrink: 0;
font-family: var(--font-body);
font-size: 0.8125rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-ink);
background: oklch(96% 0.005 350);
padding: 6px 14px;
border-radius: 6px;
white-space: nowrap;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
transition: color 0.15s ease;
}
a.detection-cmd:hover {
background: var(--color-accent);
color: white;
.detection-callout:hover .detection-cmd {
color: var(--color-accent);
}
/* Antidote footer */
public/css/styles.css
+25 -12
View File
@@ -4710,16 +4710,34 @@ code {
font-weight: 600;
}
.detection-callout {
display: block;
margin-bottom: var(--spacing-xl);
border: 1px solid var(--color-mist);
border-radius: 8px;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 12px;
overflow: hidden;
background: var(--color-paper);
text-decoration: none;
color: inherit;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.detection-callout:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 12px 32px -8px var(--color-accent-dim);
}
.detection-callout-image {
display: block;
width: 100%;
height: auto;
background: var(--color-cream);
border-bottom: 1px solid var(--color-mist);
}
.detection-callout-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
flex-wrap: wrap;
padding: var(--spacing-sm) var(--spacing-md);
}
.detection-badge {
font-family: var(--font-mono);
@@ -4748,19 +4766,14 @@ code {
.detection-cmd {
flex-shrink: 0;
font-family: var(--font-body);
font-size: 0.8125rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-ink);
background: oklch(96% 0.005 350);
padding: 6px 14px;
border-radius: 6px;
white-space: nowrap;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
transition: color 0.15s ease;
}
a.detection-cmd:hover {
background: var(--color-accent);
color: white;
.detection-callout:hover .detection-cmd {
color: var(--color-accent);
}
.antidote-footer {
text-align: center;
public/index.html
+7 -6
View File
@@ -268,7 +268,7 @@
<h2 class="section-title">Visual Mode</h2>
</div>
<div class="visual-mode-content">
<p class="section-lead" data-reveal>See design issues highlighted directly in your browser. When you run <code>/critique</code>, Impeccable injects a diagnostic overlay onto your live page. No screenshots, no guesswork.</p>
<p class="section-lead" data-reveal>See design issues highlighted directly on the page. No screenshots, no guesswork — Impeccable&rsquo;s overlay shows you exactly what&rsquo;s wrong and where.</p>
<div class="visual-mode-demo" data-reveal>
<div class="visual-mode-preview">
@@ -286,15 +286,16 @@
<p>No LLM needed. Pattern matching catches purple gradients, overused fonts, nested cards, low contrast, and more.</p>
</div>
<div class="visual-mode-feature">
<span class="visual-mode-feature-label">Any workflow</span>
<p>Embedded in <code>/critique</code>, or run standalone via the CLI.</p>
<span class="visual-mode-feature-label">Three ways to use it</span>
<p>The <strong>Chrome extension</strong> on any site, embedded in <code>/critique</code> during an AI design review, or standalone via <code>npx impeccable live</code>.</p>
</div>
<div class="detection-callout">
<a href="https://chromewebstore.google.com/" class="detection-callout" target="_blank" rel="noopener">
<img src="assets/extension-detection.png" alt="Impeccable Chrome extension flagging anti-patterns on a live page" class="detection-callout-image" loading="lazy" width="1200" height="652">
<div class="detection-callout-inner">
<span class="detection-badge">New!</span>
<code class="detection-cmd">npx impeccable detect src/</code>
<span class="detection-cmd">Get the Chrome extension &rarr;</span>
</div>
</div>
</a>
</div>
</div>
</div>