skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 00:26:41 +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/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;