1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <!-- Google tag (gtag.js) -->
5 <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEXGHC7V34"></script>
6 <script>
7 window.dataLayer = window.dataLayer || [];
8 function gtag(){dataLayer.push(arguments);}
9 gtag('js', new Date());
10 gtag('config', 'G-TEXGHC7V34');
11 </script>
12
13 <meta charset="UTF-8">
14 <meta name="viewport" content="width=device-width, initial-scale=1.0">
15 <title>Impeccable: The missing upgrade to Anthropic's impeccable skill</title>
16 <meta name="description" content="1 skill, 18 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
17 <meta name="theme-color" content="#fafafa">
18 <link rel="canonical" href="https://impeccable.style">
19
20 <!-- OpenGraph -->
21 <meta property="og:type" content="website">
22 <meta property="og:url" content="https://impeccable.style">
23 <meta property="og:title" content="Impeccable: Design skills for AI harnesses">
24 <meta property="og:description" content="1 skill, 18 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
25 <meta property="og:image" content="https://impeccable.style/og-image.jpg">
26
27 <!-- Twitter -->
28 <meta name="twitter:card" content="summary_large_image">
29 <meta name="twitter:site" content="@pbakaus">
30 <meta name="twitter:creator" content="@pbakaus">
31 <meta name="twitter:title" content="Impeccable: Design skills for AI harnesses">
32 <meta name="twitter:description" content="1 skill, 18 commands, and curated anti-patterns for impeccable frontend design.">
33 <meta name="twitter:image" content="https://impeccable.style/og-image.jpg">
34
35 <link rel="icon" type="image/svg+xml" href="./favicon.svg">
36 <link rel="apple-touch-icon" href="./apple-touch-icon.png">
37 <link rel="preconnect" href="https://fonts.googleapis.com">
38 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
39 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
40 <link rel="stylesheet" href="./css/main.css">
41 <link rel="stylesheet" href="./css/sub-pages.css">
42
43 </head>
44<body>
45 <!-- Skip to main content link for keyboard users -->
46 <a href="#main-content" class="skip-link">Skip to main content</a>
47
48 <!-- Grain Overlay -->
49 <div class="grain-overlay" aria-hidden="true"></div>
50
51 <!-- site-header v1 -->
52 <header class="site-header" data-site-header>
53 <a href="/" class="site-header-brand" aria-label="Impeccable home">
54 <svg class="site-header-brand-logo" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="6" fill="#1a1a1a"/><text x="16" y="24" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="500" fill="#f5f3ef" text-anchor="middle">/</text></svg>
55 <span class="site-header-brand-name">Impeccable</span>
56 </a>
57 <div class="site-header-right">
58 <nav class="site-header-nav" aria-label="Primary">
59 <a href="/" data-nav="home" aria-current="page">Home</a>
60 <a href="/skills" data-nav="docs">Docs</a>
61 <a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
62 <a href="/visual-mode" data-nav="visual-mode">Visual Mode</a>
63 </nav>
64 <a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 18k stars">
65 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
66 <span class="site-header-github-label">18k</span>
67 <svg class="site-header-github-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.76 6.36L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.24-.91L12 2z"/></svg>
68 </a>
69 </div>
70 </header>
71
72 <!-- Sticky Section Nav -->
73 <nav class="section-nav" id="section-nav" aria-label="Page sections">
74 <a href="#foundation" class="section-nav-item" data-section="foundation"><span class="section-nav-num">01</span><span class="section-nav-label">Foundation</span></a>
75 <a href="#language" class="section-nav-item" data-section="language"><span class="section-nav-num">02</span><span class="section-nav-label">Language</span></a>
76 <a href="#antidote" class="section-nav-item" data-section="antidote"><span class="section-nav-num">03</span><span class="section-nav-label">Antidote</span></a>
77 <a href="#visual-mode" class="section-nav-item" data-section="visual-mode"><span class="section-nav-num">04</span><span class="section-nav-label">Visual</span></a>
78 <a href="#downloads" class="section-nav-item" data-section="downloads"><span class="section-nav-num">05</span><span class="section-nav-label">Install</span></a>
79 <a href="#changelog" class="section-nav-item" data-section="changelog"><span class="section-nav-num">06</span><span class="section-nav-label">New</span></a>
80 <a href="#faq" class="section-nav-item" data-section="faq"><span class="section-nav-num">07</span><span class="section-nav-label">FAQ</span></a>
81 </nav>
82
83 <!-- 1. HERO - Combined with Problem Section -->
84 <section id="hero" class="hero-combined">
85 <div class="hero-combined-container">
86 <!-- Left: Title & Info -->
87 <div class="hero-combined-left">
88 <h1 class="hero-title-combined">Impeccable</h1>
89 <p class="hero-tagline-combined">Design fluency for AI harnesses</p>
90
91 <p class="hero-hook-text hero-hook-text--full">Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 18 commands to steer the result.</p>
92 <p class="hero-hook-text hero-hook-text--short">Impeccable teaches your AI real design and gives you 18 commands to steer the result.</p>
93
94 <div class="hero-included-box">
95 <span class="hero-included-title">What's included</span>
96 <div class="hero-included-items">
97 <span>Enhanced <em>impeccable</em> skill + anti-patterns</span>
98 <span class="hero-included-sep">·</span>
99 <span>18 design commands: /polish, /audit, /typeset, /overdrive...</span>
100 </div>
101 </div>
102
103 <div class="hero-cta-group">
104 <a href="#downloads" class="hero-cta-combined">Get Started</a>
105 <div class="hero-logos-inline">
106 <span class="hero-logos-label">Works with</span>
107 <div class="hero-logos-row">
108 <span class="hero-logo-icon has-tooltip" data-tooltip="Cursor"><img src="assets/cursor-logo.png" alt="Cursor" width="24" height="24" loading="lazy"></span>
109 <span class="hero-logo-icon has-tooltip" data-tooltip="Claude Code"><img src="assets/claude-logo.png" alt="Claude Code" width="24" height="24" loading="lazy"></span>
110 <span class="hero-logo-icon has-tooltip" data-tooltip="Gemini CLI"><img src="assets/gemini-logo.png" alt="Gemini CLI" width="20" height="20" loading="lazy"></span>
111 <span class="hero-logo-icon has-tooltip" data-tooltip="Codex CLI"><img src="assets/openai-logo.png" alt="Codex CLI" width="20" height="20" loading="lazy"></span>
112 <span class="hero-logo-icon has-tooltip" data-tooltip="VS Code Copilot"><img src="assets/github-logo.png" alt="VS Code Copilot" width="20" height="20" loading="lazy"></span>
113 <span class="hero-logo-icon has-tooltip" data-tooltip="Antigravity"><img src="assets/antigravity-logo.png" alt="Antigravity" width="20" height="20" loading="lazy"></span>
114 <span class="hero-logo-icon has-tooltip" data-tooltip="Kiro"><img src="assets/kiro-logo.png" alt="Kiro" width="20" height="20" loading="lazy"></span>
115 <span class="hero-logo-icon has-tooltip" data-tooltip="OpenCode"><img src="assets/opencode-logo.png" alt="OpenCode" width="20" height="20" loading="lazy"></span>
116 <span class="hero-logo-icon has-tooltip" data-tooltip="Pi"><img src="assets/pi-logo.svg" alt="Pi" width="20" height="20" loading="lazy" style="background:#1a1a1a;border-radius:50%;padding:3px"></span>
117 </div>
118 </div>
119 </div>
120 <p class="hero-version-link"><a href="#changelog">v2.1: Streamlined from 21 to 18 commands</a></p>
121 </div>
122
123 <!-- Right: Before/After Demo -->
124 <div class="hero-combined-right">
125 <div class="split-comparison" id="lens-comparison">
126 <div class="split-container">
127 <!-- Before: AI Slop -->
128 <div class="split-before">
129 <span class="split-badge split-badge--before">Before</span>
130 <div class="slop-card">
131 <div class="slop-header">
132 <div class="slop-avatar"></div>
133 <div class="slop-text">
134 <div class="slop-title">Welcome to Our Platform</div>
135 <div class="slop-subtitle">The best solution for your needs</div>
136 </div>
137 </div>
138 <p class="slop-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.</p>
139 <button class="slop-button">Get Started</button>
140 </div>
141 <!-- Callout labels pointing to issues -->
142 <div class="slop-callouts">
143 <span class="slop-callout" data-point="font">Inter font</span>
144 <span class="slop-callout" data-point="gradient">Purple gradient</span>
145 <span class="slop-callout" data-point="copy">Generic copy</span>
146 <span class="slop-callout" data-point="rounded">Cards on cards</span>
147 </div>
148 </div>
149 <!-- After: Impeccable (shown through split) -->
150 <div class="split-after">
151 <span class="split-badge split-badge--after">After</span>
152 <div class="impeccable-card">
153 <p class="impeccable-eyebrow">Introducing</p>
154 <p class="impeccable-title">Thoughtful Design</p>
155 <p class="impeccable-body">Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.</p>
156 <button class="impeccable-button">Explore</button>
157 </div>
158 </div>
159 <!-- The Divider -->
160 <div class="split-divider"></div>
161 </div>
162 <div class="split-labels">
163 <div class="split-label-item" data-point="before">
164 <span class="split-label-dot"></span>
165 <span>Generic AI Output</span>
166 </div>
167 <div class="split-label-item" data-point="after">
168 <span class="split-label-dot split-label-dot--accent"></span>
169 <span>With Design Skills</span>
170 </div>
171 </div>
172 </div>
173 </div>
174 </div>
175 </section>
176
177 <main class="site-content" id="main-content">
178
179 <!-- 01. THE FOUNDATION - Design knowledge -->
180 <section class="foundation-section" id="foundation">
181 <div class="section-header" data-reveal>
182 <span class="section-number">01</span>
183 <h2 class="section-title">The Foundation</h2>
184 </div>
185 <div class="foundation-content">
186 <p class="section-lead" data-reveal>Before commands, before detection, Impeccable teaches your AI real design. Deep reference knowledge across 7 dimensions, loaded every time your AI writes code.</p>
187
188 <div class="foundation-grid" data-reveal>
189 <!-- 7 dimension cards, rendered by JS -->
190 </div>
191
192 <div class="foundation-cta" data-reveal>
193 <p class="foundation-cta-text">Run <code><span class="foundation-slash">/</span>impeccable teach</code> once to set your project's design context. Every command benefits.</p>
194 </div>
195 </div>
196 </section>
197
198 <!-- 02. THE LANGUAGE - Commands vocabulary + demos -->
199 <section class="language-section" id="language">
200 <div id="solution" style="height:0;overflow:hidden;visibility:hidden"></div>
201 <div class="section-header" data-reveal>
202 <span class="section-number">02</span>
203 <h2 class="section-title">The Language</h2>
204 </div>
205 <div class="language-content">
206 <p class="section-lead" data-reveal>18 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.</p>
207
208 <div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
209 <!-- Periodic table generated by JS -->
210 </div>
211
212 <div id="commands-section" style="height:0;overflow:hidden;visibility:hidden"></div>
213
214 <div class="commands-subsection">
215 <div class="commands-header" data-reveal>
216 <p class="commands-header-subtitle">Pick any command to see it in action. <a href="/cheatsheet" class="cheatsheet-link">View cheatsheet →</a></p>
217 </div>
218 <div class="commands-gallery">
219 <!-- Rendered by JS -->
220 </div>
221 </div>
222 </div>
223 </section>
224
225 <!-- 03. THE ANTIDOTE - Anti-patterns -->
226 <section class="antidote-section" id="antidote">
227 <div class="section-header" data-reveal>
228 <span class="section-number">03</span>
229 <h2 class="section-title">The Antidote</h2>
230 </div>
231 <div class="antidote-content">
232 <p class="section-lead" data-reveal>Every AI model learned from the same templates. Without intervention, they all produce the same predictable mistakes. Impeccable names them, detects them, and teaches the AI to avoid them.</p>
233
234 <!-- Patterns + Gallery side by side -->
235 <div class="antidote-row" data-reveal>
236 <div class="patterns-tabbed" id="patterns-categories">
237 <!-- Rendered by JS -->
238 </div>
239
240 <div class="gallery-stack-container">
241 <div class="gallery-stack-header">
242 <h3 class="gallery-stack-title">Gallery of Shame</h3>
243 <button class="gallery-stack-btn gallery-stack-prev" aria-label="Previous">←</button>
244 <button class="gallery-stack-btn gallery-stack-next" aria-label="Next">→</button>
245 </div>
246 <div class="gallery-stack" id="gallery-stack">
247 <a href="/antipattern-examples/purple-gradients.html" class="gallery-stack-card">
248 <img src="antipattern-images/purple-gradients.png" alt="Purple gradient UI" loading="lazy">
249 <span class="gallery-stack-label">Purple Gradients</span>
250 </a>
251 <a href="/antipattern-examples/thick-border-cards.html" class="gallery-stack-card">
252 <img src="antipattern-images/thick-border-cards.png" alt="Thick border accent cards" loading="lazy">
253 <span class="gallery-stack-label">Side-Tab Cards</span>
254 </a>
255 <a href="/antipattern-examples/cardocalypse.html" class="gallery-stack-card">
256 <img src="antipattern-images/cardocalypse.png" alt="Cards nested inside cards" loading="lazy">
257 <span class="gallery-stack-label">Cardocalypse</span>
258 </a>
259 <a href="/antipattern-examples/inter-everywhere.html" class="gallery-stack-card">
260 <img src="antipattern-images/inter-everywhere.png" alt="Inter font everywhere" loading="lazy">
261 <span class="gallery-stack-label">Inter Everywhere</span>
262 </a>
263 <a href="/antipattern-examples/layout-templates.html" class="gallery-stack-card">
264 <img src="antipattern-images/layout-templates.png" alt="Generic layout templates" loading="lazy">
265 <span class="gallery-stack-label">Template Layouts</span>
266 </a>
267 <a href="/antipattern-examples/bad-contrast.html" class="gallery-stack-card">
268 <img src="antipattern-images/bad-contrast.png" alt="Low contrast text" loading="lazy">
269 <span class="gallery-stack-label">Bad Contrast</span>
270 </a>
271 </div>
272 <a href="/visual-mode#try-it-live" class="gallery-stack-link">View full gallery →</a>
273 </div>
274 </div>
275
276 <div class="antidote-footer" data-reveal>
277 <a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20" class="antidote-suggest-link">Suggest a pattern →</a>
278 </div>
279 </div>
280 </section>
281
282 <!-- 04. VISUAL MODE - Browser overlay -->
283 <section class="visual-mode-section" id="visual-mode">
284 <div class="section-header" data-reveal>
285 <span class="section-number">04</span>
286 <h2 class="section-title">Visual Mode</h2>
287 </div>
288 <div class="visual-mode-content">
289 <p class="section-lead" data-reveal>See design issues highlighted directly on the page. No screenshots, no guesswork. Impeccable’s overlay shows you exactly what’s wrong and where.</p>
290
291 <div class="visual-mode-demo" data-reveal>
292 <div class="visual-mode-preview">
293 <div class="visual-mode-preview-header">
294 <span class="visual-mode-preview-dot red"></span>
295 <span class="visual-mode-preview-dot yellow"></span>
296 <span class="visual-mode-preview-dot green"></span>
297 <span class="visual-mode-preview-title">Live detection overlay</span>
298 </div>
299 <iframe src="/antipattern-examples/visual-mode-demo.html" class="visual-mode-iframe" loading="lazy" title="Anti-pattern detection overlay demo"></iframe>
300 </div>
301 <div class="visual-mode-details">
302 <div class="visual-mode-feature">
303 <span class="visual-mode-feature-label">25 deterministic checks</span>
304 <p>No LLM needed. Pattern matching catches purple gradients, overused fonts, nested cards, low contrast, and more.</p>
305 </div>
306 <div class="visual-mode-feature">
307 <span class="visual-mode-feature-label">Three ways to use it</span>
308 <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>
309 </div>
310 <a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" class="detection-callout" target="_blank" rel="noopener">
311 <img src="assets/extension-detection.png" alt="Impeccable Chrome extension panel listing detected anti-patterns" class="detection-callout-image" loading="lazy" width="600" height="508">
312 <div class="detection-callout-inner">
313 <span class="detection-eyebrow">Available now</span>
314 <span class="detection-callout-title">Chrome extension</span>
315 <span class="detection-cmd">Install from Chrome Web Store →</span>
316 </div>
317 </a>
318 </div>
319 </div>
320 </div>
321 </section>
322
323 <!-- 05. GET STARTED -->
324 <section class="platforms-section" id="downloads">
325 <div class="section-header" data-reveal>
326 <span class="section-number">05</span>
327 <h2 class="section-title">Get Started</h2>
328 </div>
329
330 <!-- Row 1: Primary install (full width, white card with internal 2-col split) -->
331 <div class="install-row-primary" data-reveal>
332 <div class="install-primary-main">
333 <h3 class="install-path-title"><span class="install-path-step">1</span>Install the skills <span class="install-path-badge">Recommended</span></h3>
334 <p class="install-path-desc">18 commands that steer your AI toward better design, in real time. The full Impeccable experience.</p>
335
336 <div class="install-path-terminal">
337 <div class="glass-terminal">
338 <div class="terminal-header">
339 <span class="terminal-dot red"></span>
340 <span class="terminal-dot yellow"></span>
341 <span class="terminal-dot green"></span>
342 </div>
343 <div class="terminal-body">
344 <div class="install-terminal-row">
345 <div class="install-terminal-cmd">
346 <span class="terminal-prompt">$</span>
347 <code>npx skills add pbakaus/impeccable</code>
348 <button class="copy-btn" aria-label="Copy command" data-copy="npx skills add pbakaus/impeccable">
349 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
350 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
351 <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
352 </svg>
353 </button>
354 </div>
355 <span class="install-terminal-note">Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more.</span>
356 </div>
357 </div>
358 </div>
359 </div>
360
361 <div class="install-path-next">
362 Then run <code><span class="install-path-slash">/</span>impeccable teach</code> to set up your project's design context.
363 </div>
364 </div>
365
366 <!-- Other install methods -->
367 <div class="install-primary-alts">
368 <span class="install-alts-label">Other install methods</span>
369
370 <div class="install-alt-method">
371 <span class="install-alt-label">Claude Code plugin</span>
372 <div class="install-terminal-cmd">
373 <span class="terminal-prompt">$</span>
374 <code>/plugin marketplace add pbakaus/impeccable</code>
375 <button class="copy-btn" aria-label="Copy command" data-copy="/plugin marketplace add pbakaus/impeccable">
376 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
377 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
378 <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
379 </svg>
380 </button>
381 </div>
382 <span class="install-alt-note">Then open <code>/plugin</code> in Claude Code</span>
383 </div>
384
385 <div class="install-alt-method">
386 <span class="install-alt-label">Manual download <span class="install-alt-sublabel">all 11 providers</span></span>
387 <div class="install-zip-links">
388 <button class="install-zip-link" data-bundle="universal" aria-label="Download universal zip with default command names">
389 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
390 <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
391 </svg>
392 <span class="install-zip-link-name">Default zip</span>
393 <span class="install-zip-link-examples"><code>/polish</code> <code>/audit</code></span>
394 </button>
395 <button class="install-zip-link" data-bundle="universal-prefixed" aria-label="Download universal zip with prefixed command names">
396 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
397 <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
398 </svg>
399 <span class="install-zip-link-name">Prefixed zip</span>
400 <span class="install-zip-link-examples"><code>/i-polish</code> <code>/i-audit</code></span>
401 </button>
402 </div>
403 </div>
404 </div>
405 </div>
406
407 <!-- Steps 2-4: vertical accordion, mutually exclusive (only one open at a time) -->
408 <div class="install-accordion" data-reveal>
409 <!-- Step 2: CLI -->
410 <details name="install-steps" class="install-step">
411 <summary class="install-step-summary">
412 <h3 class="install-path-title"><span class="install-path-step">2</span>Add the CLI <span class="install-path-badge install-path-badge-muted">Beta</span></h3>
413 <svg class="install-step-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
414 </summary>
415 <div class="install-step-body">
416 <p class="install-path-desc">Scan any file, directory, or live URL for anti-patterns from the terminal. Catches gradient text, AI color palettes, nested cards, low contrast, and 20+ more rules across HTML, CSS, JSX/TSX, Vue, and Svelte. Use it in CI pipelines, pre-commit hooks, or one-off audits to keep AI slop out of production.</p>
417
418 <div class="install-cmd-block">
419 <div class="install-cmd-line">
420 <span class="terminal-prompt">$</span>
421 <code>npm i -g impeccable</code>
422 <button class="copy-btn" aria-label="Copy command" data-copy="npm i -g impeccable">
423 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
424 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
425 <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
426 </svg>
427 </button>
428 </div>
429 <span class="install-cmd-note">Or use <code>npx impeccable detect src/</code> directly without installing.</span>
430 </div>
431
432 <p class="install-path-link"><a href="https://www.npmjs.com/package/impeccable" target="_blank" rel="noopener">Full command reference on npm →</a></p>
433 </div>
434 </details>
435
436 <!-- Step 3: Browser extension -->
437 <details name="install-steps" class="install-step">
438 <summary class="install-step-summary">
439 <h3 class="install-path-title"><span class="install-path-step">3</span>Browser extension</h3>
440 <svg class="install-step-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
441 </summary>
442 <div class="install-step-body">
443 <p class="install-path-desc">Click the toolbar icon on any page and every anti-pattern lights up right where it lives: gradient text, purple palettes, nested cards, tiny body text, and the rest. Works on your localhost, staging, production, or anyone else's site. Great for spot-checking competitors, reviewing PRs visually, or just browsing the web with a sharper eye.</p>
444 <p class="install-path-link"><a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" target="_blank" rel="noopener">Install from Chrome Web Store →</a></p>
445 </div>
446 </details>
447
448 <!-- Step 4: Stay updated -->
449 <details name="install-steps" class="install-step">
450 <summary class="install-step-summary">
451 <h3 class="install-path-title"><span class="install-path-step">4</span>Stay updated</h3>
452 <svg class="install-step-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
453 </summary>
454 <div class="install-step-body">
455 <p class="install-path-desc">Keep skills current and follow along with new commands, anti-patterns, and the design thinking behind Impeccable.</p>
456
457 <div class="install-cmd-block">
458 <div class="install-cmd-line">
459 <span class="terminal-prompt">$</span>
460 <code>npx impeccable skills update</code>
461 <button class="copy-btn" aria-label="Copy command" data-copy="npx impeccable skills update">
462 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
463 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
464 <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
465 </svg>
466 </button>
467 </div>
468 <span class="install-cmd-note">Run periodically to pull the latest skill definitions.</span>
469 </div>
470
471 <div class="install-updated-subscribe">
472 <iframe class="install-updated-substack" src="https://impeccablestyle.substack.com/embed" width="100%" height="130" frameborder="0" scrolling="no"></iframe>
473 <a href="https://x.com/impeccable_ai" class="install-updated-x" target="_blank" rel="noopener">
474 <svg class="install-updated-x-icon" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
475 <span class="install-updated-x-label">Follow on X</span>
476 <span class="install-updated-x-handle">@impeccable_ai</span>
477 </a>
478 </div>
479 </div>
480 </details>
481 </div>
482 </section>
483
484 <!-- 5+6. CHANGELOG + FAQ (side-by-side on desktop) -->
485 <div class="changelog-faq-row">
486 <!-- 5. CHANGELOG -->
487 <section class="changelog-section" id="changelog">
488 <div class="section-header" data-reveal>
489 <span class="section-number">06</span>
490 <h2 class="section-title">What's New</h2>
491 </div>
492
493 <div class="changelog-list" data-reveal>
494 <div class="changelog-entry">
495 <div class="changelog-version-header">
496 <span class="changelog-version">v2.1</span>
497 <span class="changelog-date">April 9, 2026</span>
498 </div>
499 <ul class="changelog-items">
500 <li><strong>Streamlined from 21 to 18 commands.</strong> Removed overlap and confusion: <code>/arrange</code> renamed to <code>/layout</code>, <code>/normalize</code> merged into <code>/polish</code> (design system alignment is now part of the final pass), <code>/onboard</code> merged into <code>/harden</code> (empty states and first-run experiences are part of production readiness), and <code>/extract</code> became <code>/impeccable extract</code> (a sub-mode alongside craft and teach). Every remaining command has a clearly distinct job.</li>
501 <li><strong>Automatic cleanup of deprecated skills.</strong> On first load after updating, the skill detects and removes leftover files from renamed or merged commands. No manual cleanup needed.</li>
502 </ul>
503 </div>
504
505 <div class="changelog-entry">
506 <div class="changelog-version-header">
507 <span class="changelog-version">v2.0</span>
508 <span class="changelog-date">April 8, 2026</span>
509 </div>
510 <ul class="changelog-items">
511 <li><strong>Renamed <code>frontend-design</code> to <code>impeccable</code>.</strong> The core skill now shares its name with the project, and the teach subcommand moved from <code>/teach-impeccable</code> to <code>/impeccable teach</code>. One skill, one namespace.</li>
512 <li><strong>Data-driven skill rewrite.</strong> The core skill was rebuilt against an internal eval framework that runs the same brief through frontier models with and without the skill loaded, then measures how much the output collapses into monoculture. The result: dramatically more font and color diversity, sharper overall design quality, and much stronger Codex support. The biggest unlock was an anti-attractor procedure that forces the model to enumerate and reject its reflex defaults before picking. Validated on gpt-5.4 and Qwen 3.6 Plus across 15 niches.</li>
513 <li><strong>Anti-pattern detection engine.</strong> 25 deterministic rules across typography, color, layout, motion, and quality. Handles oklch, oklab, lch, and lab color formats, CSS variables inside border shorthands, gradient-backed text, and emoji-only nodes.</li>
514 <li><strong>CLI: <code>npx impeccable detect</code>.</strong> Scans HTML, CSS, JSX/TSX, Vue, Svelte, and CSS-in-JS. Framework detection, multi-file import tracking, Puppeteer-backed live URL scanning, CI-ready JSON output, and a <code>--fast</code> regex mode for huge codebases.</li>
515 <li><strong>Chrome DevTools extension.</strong> One-click detection on any page: yours, staging, production, or someone else's. Reads live computed styles, surfaces findings in an interactive panel, and highlights elements on the page. In Chrome Web Store review.</li>
516 <li><strong><code>/critique</code> got teeth.</strong> Persona sub-agents review in parallel, score against Nielsen's heuristics, run the detector automatically, and open a live browser overlay so you can walk each finding in place.</li>
517 <li><strong>New ways to create with Impeccable.</strong> <code>/shape</code> runs a structured discovery interview about purpose, audience, and goals, then produces a design brief before any code is written. <code>/impeccable craft</code> chains that brief straight into the full implementation flow so you ship a designed feature instead of a reflex card grid.</li>
518 <li><strong>New docs site.</strong> Top-level <a href="/skills">Docs</a>, <a href="/anti-patterns">Anti-Patterns</a>, and <a href="/visual-mode">Visual Mode</a> sections. 18 per-skill pages with before/after demos and the canonical SKILL.md inline, two <a href="/tutorials">tutorials</a>, and 38 rule cards with inline visual examples.</li>
519 <li><strong>New harness: Rovo Dev.</strong> 11 supported AI tools total.</li>
520 </ul>
521 </div>
522
523 <details class="changelog-older">
524 <summary class="changelog-older-toggle">View older releases</summary>
525 <div class="changelog-older-entries">
526 <div class="changelog-entry">
527 <div class="changelog-version-header">
528 <span class="changelog-version">v1.6.0</span>
529 <span class="changelog-date">March 18, 2026</span>
530 </div>
531 <ul class="changelog-items">
532 <li>New provider: <strong>Trae</strong> (China + International)</li>
533 <li><code>/critique</code> now scores against Nielsen's 10 heuristics, tests with persona archetypes, and assesses cognitive load</li>
534 <li><code>/audit</code> now scores 5 dimensions with P0-P3 severity ratings and structured action plans</li>
535 <li>Improved skill descriptions for better agent auto-discovery</li>
536 <li>Fixed invalid YAML frontmatter that broke GitHub preview and Codex loading (<a href="https://github.com/pbakaus/impeccable/issues/67">#67</a>)</li>
537 <li>Codex CLI now uses correct <code>$</code> prefix for command references</li>
538 </ul>
539 </div>
540
541 <div class="changelog-entry">
542 <div class="changelog-version-header">
543 <span class="changelog-version">v1.5.1</span>
544 <span class="changelog-date">March 17, 2026</span>
545 </div>
546 <ul class="changelog-items">
547 <li><code>/typeset</code> now recommends fixed type scales for app UIs, reserving fluid typography for marketing/content pages</li>
548 </ul>
549 </div>
550
551 <div class="changelog-entry">
552 <div class="changelog-version-header">
553 <span class="changelog-version">v1.5.0</span>
554 <span class="changelog-date">March 16, 2026</span>
555 </div>
556 <ul class="changelog-items">
557 <li>3 new skills: <code>/typeset</code> (fix typography), <code>/arrange</code> (fix layout & spacing), <code>/overdrive</code> (technically extraordinary effects, beta)</li>
558 <li>Skills now auto-gather design context via <code>.impeccable.md</code>. Run <code>/teach-impeccable</code> once, all skills benefit</li>
559 <li>Deep linking to commands (<code>#cmd-overdrive</code>, etc.)</li>
560 </ul>
561 </div>
562
563 <div class="changelog-entry">
564 <div class="changelog-version-header">
565 <span class="changelog-version">v1.3.0</span>
566 <span class="changelog-date">March 12, 2026</span>
567 </div>
568 <ul class="changelog-items">
569 <li>Added OpenCode provider support</li>
570 <li>Added Pi provider support</li>
571 <li>Recategorized <code>/onboard</code> as an enhancement command</li>
572 </ul>
573 </div>
574
575 <div class="changelog-entry">
576 <div class="changelog-version-header">
577 <span class="changelog-version">v1.2.0</span>
578 <span class="changelog-date">March 5, 2026</span>
579 </div>
580 <ul class="changelog-items">
581 <li>Added Kiro support (<code>.kiro/skills/</code>)</li>
582 <li>Restored prefix toggle: download <code>i-</code> prefixed bundles to avoid naming conflicts</li>
583 <li>Audit and critique skills only suggest real, installed commands</li>
584 </ul>
585 </div>
586
587 <div class="changelog-entry">
588 <div class="changelog-version-header">
589 <span class="changelog-version">v1.1.0</span>
590 <span class="changelog-date">March 4, 2026</span>
591 </div>
592 <ul class="changelog-items">
593 <li>Unified skills architecture: commands are now skills with <code>user-invocable: true</code></li>
594 <li>Added VS Code Copilot and Google Antigravity support (<code>.agents/skills/</code>)</li>
595 <li>New install flow: <code>npx skills add</code> as primary, universal ZIP as fallback</li>
596 <li>Added universal ZIP containing all 5 provider directories</li>
597 <li>Renamed <code>/simplify</code> to <code>/distill</code> to avoid Claude Code conflict</li>
598 </ul>
599 </div>
600
601 <div class="changelog-entry">
602 <div class="changelog-version-header">
603 <span class="changelog-version">v1.0.0</span>
604 <span class="changelog-date">February 28, 2026</span>
605 </div>
606 <ul class="changelog-items">
607 <li>Initial release with enhanced frontend-design skill</li>
608 <li>17 design commands: /polish, /audit, /distill, /bolder, and more</li>
609 <li>Support for Cursor, Claude Code, Gemini CLI, and Codex CLI</li>
610 <li>Interactive command cheatsheet</li>
611 </ul>
612 </div>
613 </div>
614 </details>
615 </div>
616
617 </section>
618
619 <!-- 6. FAQ -->
620 <section class="faq-section" id="faq">
621 <div class="section-header" data-reveal>
622 <span class="section-number">07</span>
623 <h2 class="section-title">Frequently Asked Questions</h2>
624 </div>
625
626 <div class="faq-list" data-reveal>
627 <details class="faq-item">
628 <summary class="faq-question">Where do I put the downloaded files?</summary>
629 <div class="faq-answer">
630 <p>The easiest way is <code>npx skills add pbakaus/impeccable</code>, which auto-detects your AI harness and places files correctly.</p>
631 <p>If you downloaded the <strong>universal ZIP</strong>, extract it to your <strong>project root</strong> (same level as your <code>package.json</code> or <code>src/</code> folder). It creates hidden folders for each supported tool: <code>.cursor/</code>, <code>.claude/</code>, <code>.gemini/</code>, <code>.codex/</code>, and <code>.agents/</code>.</p>
632 <p>Project-level installation takes precedence and lets you version control your skills.</p>
633 </div>
634 </details>
635
636 <details class="faq-item">
637 <summary class="faq-question">How do I update to the latest version?</summary>
638 <div class="faq-answer">
639 <p>Run <code>npx impeccable skills update</code> from your project root. It downloads the latest skills, cleans up deprecated files, and preserves any prefix you use.</p>
640 <ul>
641 <li><strong>Alternative:</strong> <code>npx skills add pbakaus/impeccable</code> re-installs from scratch.</li>
642 <li><strong>Claude Code plugin:</strong> Open <code>/plugin</code>, go to the Discover tab.</li>
643 <li><strong>Manual ZIP:</strong> Download from above and extract to the project root.</li>
644 </ul>
645 <p>Your <code>.impeccable.md</code> context file is never overwritten.</p>
646 </div>
647 </details>
648
649 <details class="faq-item">
650 <summary class="faq-question">Commands or skills aren't appearing. What do I do?</summary>
651 <div class="faq-answer">
652 <p><strong>For commands:</strong> Type <code>/</code> in your AI harness and look for commands like <code>/audit</code>, <code>/polish</code>, etc. If they don't appear, double-check the files are in the correct location.</p>
653 <p><strong>For skills:</strong> Skills are applied automatically when relevant. To verify, explicitly mention "use the impeccable skill" in your prompt. This forces the AI to acknowledge and apply it.</p>
654 <p><strong>Tool-specific setup:</strong></p>
655 <ul>
656 <li><strong>Cursor:</strong> Requires Nightly channel + Agent Skills enabled in Settings → Rules</li>
657 <li><strong>Gemini CLI:</strong> Requires <code>@google/gemini-cli@preview</code> + Skills enabled via <code>/settings</code></li>
658 </ul>
659 </div>
660 </details>
661
662 <details class="faq-item">
663 <summary class="faq-question">I'm new to AI harnesses. Where do I start?</summary>
664 <div class="faq-answer">
665 <p>Skills and commands are intermediate features. If you're just getting started, learn the basics first:</p>
666 <ul>
667 <li><strong>Claude Code:</strong> <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" rel="noopener">Official Documentation</a></li>
668 <li><strong>Cursor:</strong> <a href="https://docs.cursor.com" target="_blank" rel="noopener">Cursor Docs</a></li>
669 <li><strong>Gemini CLI:</strong> <a href="https://geminicli.com/docs/" target="_blank" rel="noopener">Gemini CLI Docs</a></li>
670 <li><strong>Codex CLI:</strong> <a href="https://github.com/openai/codex" target="_blank" rel="noopener">Codex GitHub</a></li>
671 </ul>
672 <p>Once you're comfortable with basic prompting and code generation, come back and give Impeccable a try.</p>
673 </div>
674 </details>
675
676 <details class="faq-item">
677 <summary class="faq-question">Is Impeccable free?</summary>
678 <div class="faq-answer">
679 <p>Yes. Everything is <strong>Apache 2.0</strong>: skills, commands, CLI, and the detection engine. Fully open source, free for everyone.</p>
680 </div>
681 </details>
682 </div>
683 </section>
684 </div><!-- /.changelog-faq-row -->
685
686 <!-- PARTNERSHIPS -->
687 <section class="consulting-section" id="consulting">
688 <div class="consulting-content" data-reveal>
689 <div class="consulting-text">
690 <h2 class="consulting-title">Work with me</h2>
691 <p class="consulting-desc">Impeccable is built by <a href="https://renaissance-geek.ai" target="_blank" rel="noopener">Renaissance Geek</a>. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.</p>
692 </div>
693 <div class="consulting-actions">
694 <a href="mailto:paul@renaissance-geek.ai" class="btn btn-primary">
695 <span>Get in touch</span>
696 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
697 <path d="M5 12h14M12 5l7 7-7 7"/>
698 </svg>
699 </a>
700 </div>
701 </div>
702 </section>
703 </main>
704
705 <footer class="site-footer">
706 <div class="footer-row">
707 <span class="footer-logo">Impeccable</span>
708 <nav class="footer-links" aria-label="Footer">
709 <a href="#antidote">Anti-Patterns</a>
710 <a href="/visual-mode">Visual Mode</a>
711 <a href="#language">Commands</a>
712 <a href="/cheatsheet">Cheatsheet</a>
713 <a href="/privacy">Privacy</a>
714 <a href="https://github.com/pbakaus/impeccable">GitHub</a>
715 </nav>
716 <div class="footer-credit">
717 <span>Created by <a href="https://x.com/pbakaus" target="_blank" rel="noopener">Paul Bakaus</a></span>
718 <a href="https://x.com/pbakaus" class="footer-social-link" aria-label="Follow on X" target="_blank" rel="noopener">
719 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
720 <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
721 </svg>
722 </a>
723 <a href="https://linkedin.com/in/paulbakaus" class="footer-social-link" aria-label="Connect on LinkedIn" target="_blank" rel="noopener">
724 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
725 <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
726 </svg>
727 </a>
728 </div>
729 </div>
730 </footer>
731
732 <script type="module" src="./app.js"></script>
733</body>
734</html>