mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
b8f09c8142
* feat(site): scaffold Astro migration, convert 3 pages Phase 1+2 of the Astro migration: - Astro v6.2.1 installed, srcDir: 'site', static output to build/ - Shared layout: Base.astro (head, fonts, meta, slots), Header.astro (star count in one place: 23k), Footer.astro - CSS moved from public/css/ to site/styles/ (9 files, @import chains resolve via Vite) - Three pages converted: privacy, cases/neo-mirai, live-mode (all return 200 on astro dev) Remaining: designing, slop, homepage, content collections (docs), JS migration, server/index.js deletion, build.js cleanup. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): migrate all 6 main pages to Astro Converts the remaining pages: - designing/index.html → site/pages/designing/index.astro (551 lines) - slop/index.html → site/pages/slop/index.astro (909 lines) - index.html → site/pages/index.astro (1278 lines, the homepage) Base.astro gains OG meta tag props, before-header/after-header slots (for grain overlay and section nav), and configurable mainId. Homepage uses link tags to public/css/ instead of frontmatter CSS imports to avoid esbuild choking on :has() in main.css. Curly braces inside <code> elements (CSS snippets in changelog) escaped with HTML entities to prevent Astro JSX expression parsing. All 6 pages return 200 on astro dev. Branch: feat/astro-migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): content collections for docs and tutorials Replaces the 1532-line build-sub-pages.js generator with Astro v6 content collections: - 24 skill editorial files move to site/content/skills/ - 4 tutorial files move to site/content/tutorials/ - site/content.config.ts defines both collections with glob loaders - site/pages/docs/[...slug].astro reads skills collection + command metadata from source/skills/ at build time - site/pages/docs/index.astro renders the command grid grouped by category (create, evaluate, refine, simplify, harden, system) - site/pages/tutorials/ mirrors the pattern with ordered index - Doc.astro layout provides sidebar nav, breadcrumbs, and related- command chips from the COMMAND_RELATIONSHIPS data - Category/relationship data extracted to site/data/sub-pages-data.ts All 15 tested pages return 200: 6 main pages + 5 docs + 2 tutorials + 2 index pages. The old generator is not yet deleted (Task #6). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): move JS source from public/js/ to site/scripts/ Moves all 49 JS files (app.js + 48 in js/) into site/scripts/. Vite now processes them through its module bundler instead of serving them raw from public/. app.js import paths updated from ./js/X to ./X (the js/ nesting is gone since app.js now lives alongside the subdirectories). Homepage and live-mode page switch from <script is:inline src="/app.js"> to Vite-processed <script> imports, so tree-shaking, bundling, and minification happen automatically at build time. public/js/ still exists for now (cleanup in Task #6) and the generated/counts.js build output path needs updating there too. @paper-design/shaders added to npm dependencies (was missing). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(site): delete old Bun server, generator, and duplicated files Cleanup after the Astro migration: Deleted: - server/index.js (233 lines, replaced by `astro dev`) - scripts/build-sub-pages.js (1532 lines, replaced by content collections) - scripts/lib/render-page.js (247 lines, replaced by Base.astro layout) - content/site/partials/header.html (replaced by Header.astro component) - public/index.html, privacy.html, designing/, live-mode/, cases/ (replaced by .astro pages in site/pages/) - public/css/ (moved to site/styles/) - public/js/ old source files (moved to site/scripts/) - public/app.js (moved to site/scripts/app.js) Kept in public/: - antipattern-examples/ (standalone HTML demos, not Astro pages) - antipattern-images/, assets/, neo-mirai/ (static assets) - js/detect-antipatterns-browser.js (referenced by antipattern examples) - js/generated/counts.js (build output from scripts/build.js) - _data/api/ (generated API data, now written to public/ so Astro passes it through to build/) Updated: - astro.config.mjs: added redirects (skills->docs, cheatsheet->docs, gallery->slop, neon-mirai->neo-mirai, etc.) - package.json: dev->astro dev, build->build:skills+build:site, preview->astro preview - scripts/build.js: removed buildStaticSite(), generateSubPages(), static-asset copying. API data writes to public/_data/ instead of build/_data/. Site-header validator is a no-op (shared component). Em-dash validator scans site/components + site/layouts, not pages (pages contain content from other sources like detector descriptions). - .gitignore: removed public/slop/ entry Tests: 186/186 pass. Skills build: clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): fix redirect config for Astro compatibility Move the dynamic /skills/:id -> /docs/:id redirect to public/_redirects (Cloudflare Pages native format) since Astro's redirect config can't handle dynamic routes that don't match existing page patterns. Remove duplicate trailing-slash redirect entries that caused warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): switch remaining pages from /css/ link tags to frontmatter imports Doc.astro, docs/index, tutorials/index, and tutorials/[slug] were still using <link href="/css/sub-pages.css"> which pointed at the deleted public/css/ directory. Switched to frontmatter CSS imports (import '../../styles/sub-pages.css') which Vite resolves from site/styles/. Homepage also switches from link tags to frontmatter imports for main.css and sub-pages.css — the esbuild error that originally forced the link-tag workaround was caused by unescaped curly braces in the HTML content (since fixed), not by the CSS itself. All pages verified visually in Chrome: homepage hero, foundation grid, docs index (card grid with categories), docs detail (sidebar + editorial content + visual mockups), designing (core loop diagram), privacy, tutorials. Header renders with 23k stars on every page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): fix edge-to-edge sections, broken API paths, CSS links Three fixes: 1. Homepage sections sat on the viewport edge because Base.astro's <main> lacked the site-content class (provides max-width + padding). Added mainClass prop to Base.astro; homepage sets mainClass="site-content". 2. "Failed to load commands" because app.js fetched /api/commands which only existed in the old Bun server's routing. Updated to fetch from /_data/api/commands.json (the static JSON files that build:skills writes to public/_data/). 3. CSS reference fix (previous commit was incomplete): Doc.astro, docs/index, tutorials pages all used <link href="/css/sub-pages.css"> pointing at deleted public/css/. Switched to frontmatter imports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): add sidebar to docs index page The docs index was using Base.astro directly without the skills-layout grid, so it rendered without a sidebar. Added the same sidebar structure from Doc.astro (category-grouped command list) and wrapped the content in the skills-layout grid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): extract footer CSS to shared file, import in Base.astro Footer was unstyled on sub-pages because footer CSS lived only in main.css (loaded by the homepage) not in sub-pages.css. Extracted the 95 lines of footer rules into site/styles/footer.css and imported it in Base.astro so every page gets footer styles regardless of which page-specific CSS it loads. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(demos): move landing-demo into repo, add as slop specimens Moves ~/code/landing-demo/ into demos/landing-demo/ (without node_modules or the redundant .claude/.agents skill copies — the repo root's skill is found by walking up). PRODUCT.md, DESIGN.md, DESIGN.json, PROMPT.md, and SCRIPT.md stay in place so running Claude from demos/landing-demo/ picks up the project context. Also copies both pages as slop specimens to public/antipattern-examples/ with the detector script baked in: - new-slop-2026.html (Fraunces + warm cream editorial monoculture) - old-slop-2022.html (purple gradient + glassmorphism + neon glow) These can be linked from the slop page gallery alongside the existing 11 synthetic specimens. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(slop): replace single demo iframe with Then vs Now comparison The "See it" section (01) on the slop page now shows two side-by-side browser frames: 2022 slop (purple gradients, glassmorphism, neon glow) and 2026 slop (Fraunces, warm cream, editorial restraint). Both run the detector overlay live — hover either to see which rules fire. Replaces the single visual-mode-demo.html iframe. Responsive: stacks vertically on viewports below 900px. Caption: "Same engine, different decade, both flagged." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): switch to single-frame era toggle, center the section Replaces the side-by-side dual-iframe layout with a single large frame and a segmented 2022/2026 toggle. Clicking the toggle swaps which iframe is visible (both pre-loaded, instant switch). Browser chrome title updates to match the active era. Centers the lede text and toggle above the frame for visual cohesion with the full-width iframe below. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): left-align See It section, toggle inline with lede Moves the era toggle to the right of the lede paragraph using a flex row (align-items: flex-end). Left-aligned text + right-docked toggle matches the rest of the page's flow instead of standing out as a centered island. Stacks vertically on narrow viewports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): left-align iframe, remove max-width and auto margin The visual-mode-preview had max-width: 1040px + margin: 0 auto which centered it within the column. Override both in the .slop-then-now context so the frame fills the full content width flush with the text above. Caption left-aligned to match. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore(site): update star count to 24k (24,062) One file, one edit. The Astro migration working as intended. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): regenerate pnpm-lock.yaml for astro + shaders deps Cloudflare Pages uses pnpm with frozen-lockfile. The lockfile was stale after adding astro, @astrojs/cloudflare, and @paper-design/shaders via npm. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): resolve 3 bugbot review issues 1. Restore public/slop/ to .gitignore — prevents accidental legacy generator output from conflicting with the Astro page. 2. Move astro and @paper-design/shaders to devDependencies — these are site-build tools, not CLI runtime deps. Removes @astrojs/cloudflare entirely (unused; static output mode needs no adapter). 3. Fix Astro wiping build:skills output — CF config (_headers, _redirects, _routes.json) and API data now write to public/ so Astro copies them through. Dist ZIPs copy to build/_data/dist/ as a post-build step (after Astro finishes). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): merge duplicate devDependencies, use npx for astro CLI The previous commit created a second devDependencies key in package.json. JSON doesn't support duplicate keys — pnpm ignored the first block (with astro), so `astro build` wasn't found. Merged astro and @paper-design/shaders into the existing devDependencies block. Changed `astro build/dev/preview` to `npx astro build/dev/preview` so pnpm finds the local binary on Cloudflare Pages (which doesn't add node_modules/.bin to PATH by default). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(demos): remove private demo script and prompt from public repo SCRIPT.md contained a detailed conference talk script with personal delivery strategies, rehearsed Q&A answers, and venue details. PROMPT.md contained the origin brief for the demo page. Neither belongs in a public repo. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): gitignore generated public/ artifacts, consolidate redirects 1. Generated files written to public/ by build:skills (API data, CF config, browser detector, counts.js) are now gitignored. Prevents noisy diffs and merge conflicts from committed build artifacts. 2. Removed duplicate redirects from astro.config.mjs. All redirects now live in one place: the _redirects file generated by scripts/build.js (which Cloudflare Pages processes natively). Eliminates the dual-maintenance risk where the two sources could drift apart. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1284 lines
93 KiB
Plaintext
1284 lines
93 KiB
Plaintext
---
|
||
import Base from '../layouts/Base.astro';
|
||
import '../styles/main.css';
|
||
import '../styles/sub-pages.css';
|
||
---
|
||
|
||
<Base
|
||
title="Impeccable: The missing upgrade to Anthropic's impeccable skill"
|
||
description="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI."
|
||
activeNav="home"
|
||
canonicalPath="/"
|
||
mainId="main-content"
|
||
mainClass="site-content"
|
||
ogTitle="Impeccable: Design skills for AI harnesses"
|
||
ogDescription="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI."
|
||
ogImage="https://impeccable.style/og-image.jpg"
|
||
twitterSite="@pbakaus"
|
||
twitterCreator="@pbakaus"
|
||
>
|
||
|
||
<Fragment slot="head">
|
||
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-TEXGHC7V34"></script>
|
||
<script is:inline>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'G-TEXGHC7V34');
|
||
</script>
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||
</Fragment>
|
||
|
||
<Fragment slot="before-header">
|
||
<div class="grain-overlay" aria-hidden="true"></div>
|
||
</Fragment>
|
||
|
||
<Fragment slot="after-header">
|
||
<!-- Sticky Section Nav -->
|
||
<nav class="section-nav" id="section-nav" aria-label="Page sections">
|
||
<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>
|
||
<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>
|
||
<a href="#why" class="section-nav-item" data-section="why"><span class="section-nav-num">03</span><span class="section-nav-label">Case</span></a>
|
||
<a href="#live-mode" class="section-nav-item" data-section="live-mode"><span class="section-nav-num">04</span><span class="section-nav-label">Live</span></a>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</nav>
|
||
|
||
<!-- 1. HERO - Combined with Problem Section -->
|
||
<section id="hero" class="hero-combined">
|
||
<div class="hero-combined-container">
|
||
<!-- Left: Title & Info -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="hero-combined-left">
|
||
<h1 class="hero-title-combined">Impeccable</h1>
|
||
<p class="hero-tagline-combined">Design fluency for AI harnesses</p>
|
||
|
||
<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 23 commands to steer the result.</p>
|
||
<p class="hero-hook-text hero-hook-text--short">Impeccable teaches your AI real design and gives you 23 commands to steer the result.</p>
|
||
|
||
<div class="hero-included-box">
|
||
<span class="hero-included-title">What's included</span>
|
||
<div class="hero-included-items">
|
||
<span><em>Impeccable</em> agent skill with 23 design commands</span>
|
||
<span class="hero-included-sep">·</span>
|
||
<span>Optional CLI + Chrome extension</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-cta-group">
|
||
<a href="#downloads" class="hero-cta-combined">Get Started</a>
|
||
|
||
|
||
<div class="hero-logos-inline">
|
||
<span class="hero-logos-label">Works with</span>
|
||
<div class="hero-logos-row">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<p class="hero-version-link"><a href="#changelog">v3.0.6: live mode preserves identity, departure mode derives from brand voice</a></p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Right: Before/After Demo -->
|
||
<div class="hero-combined-right">
|
||
<div class="split-comparison" id="lens-comparison">
|
||
<div class="split-container">
|
||
<!-- Before: AI Slop -->
|
||
<div class="split-before">
|
||
<span class="split-badge split-badge--before">Before</span>
|
||
<div class="slop-card">
|
||
<div class="slop-header">
|
||
<div class="slop-avatar"></div>
|
||
<div class="slop-text">
|
||
<div class="slop-title">Welcome to Our Platform</div>
|
||
<div class="slop-subtitle">The best solution for your needs</div>
|
||
</div>
|
||
</div>
|
||
<p class="slop-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.</p>
|
||
<button class="slop-button">Get Started</button>
|
||
</div>
|
||
<!-- Callout labels pointing to issues -->
|
||
<div class="slop-callouts">
|
||
<span class="slop-callout" data-point="font">Inter font</span>
|
||
<span class="slop-callout" data-point="gradient">Purple gradient</span>
|
||
<span class="slop-callout" data-point="copy">Generic copy</span>
|
||
<span class="slop-callout" data-point="rounded">Cards on cards</span>
|
||
</div>
|
||
</div>
|
||
<!-- After: Impeccable (shown through split) -->
|
||
<div class="split-after">
|
||
<span class="split-badge split-badge--after">After</span>
|
||
<div class="impeccable-card">
|
||
<p class="impeccable-eyebrow">Introducing</p>
|
||
<p class="impeccable-title">Thoughtful Design</p>
|
||
<p class="impeccable-body">Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.</p>
|
||
<button class="impeccable-button">Explore</button>
|
||
</div>
|
||
</div>
|
||
<!-- The Divider -->
|
||
<div class="split-divider"></div>
|
||
</div>
|
||
<div class="split-labels">
|
||
<div class="split-label-item" data-point="before">
|
||
<span class="split-label-dot"></span>
|
||
<span>Generic AI Output</span>
|
||
</div>
|
||
<div class="split-label-item" data-point="after">
|
||
<span class="split-label-dot split-label-dot--accent"></span>
|
||
<span>With Design Skills</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Fragment>
|
||
|
||
|
||
<!-- 01. THE FOUNDATION - Design knowledge -->
|
||
<section class="foundation-section" id="foundation">
|
||
<div class="section-header" data-reveal>
|
||
<span class="section-number">01</span>
|
||
<h2 class="section-title">The Foundation</h2>
|
||
</div>
|
||
<div class="foundation-content">
|
||
<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>
|
||
|
||
<div class="foundation-grid" data-reveal>
|
||
<!-- 7 dimension cards, rendered by JS -->
|
||
</div>
|
||
|
||
<div class="foundation-cta" data-reveal>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 02. THE LANGUAGE - Commands vocabulary + demos -->
|
||
<section class="language-section" id="language">
|
||
<div id="solution" style="height:0;overflow:hidden;visibility:hidden"></div>
|
||
<div class="section-header" data-reveal>
|
||
<span class="section-number">02</span>
|
||
<h2 class="section-title">The Language</h2>
|
||
</div>
|
||
<div class="language-content">
|
||
<div class="language-intro-row" data-reveal>
|
||
<p class="section-lead">23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision. Pick any to see it in action, or <a href="/docs" class="cheatsheet-link">browse the full reference →</a></p>
|
||
<div class="language-view-toggle" role="tablist" aria-label="Commands view">
|
||
<button type="button" role="tab" class="language-view-tab is-active" data-view="palette" aria-selected="true">Palette</button>
|
||
<button type="button" role="tab" class="language-view-tab" data-view="periodic" aria-selected="false">Periodic</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="commands-section" style="height:0;overflow:hidden;visibility:hidden"></div>
|
||
|
||
<div class="language-view language-view--palette is-active" data-view-panel="palette">
|
||
<div class="commands-subsection">
|
||
<div class="commands-gallery">
|
||
<!-- Rendered by JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="language-view language-view--periodic" data-view-panel="periodic" hidden>
|
||
<div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
|
||
<!-- Periodic table generated by JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 04. WHY IMPECCABLE - Feature loop -->
|
||
<section class="why-section" id="why">
|
||
<div class="why-content" data-reveal>
|
||
<div class="section-header">
|
||
<span class="section-number">03</span>
|
||
<h2 class="section-title">The Case</h2>
|
||
</div>
|
||
<div class="why-layout">
|
||
<div class="why-left">
|
||
<ol class="why-tabs" role="tablist" aria-label="Reasons Impeccable is different">
|
||
<li><button role="tab" class="why-tab is-active" data-index="vz" aria-selected="true" aria-controls="why-panel-vz"><span class="why-tab-num">01</span><span class="why-tab-label">Visualize, then ship</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="0" aria-selected="false" aria-controls="why-panel-0"><span class="why-tab-num">02</span><span class="why-tab-label">Intentional design</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="1" aria-selected="false" aria-controls="why-panel-1"><span class="why-tab-num">03</span><span class="why-tab-label">Prevents AI slop</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="2" aria-selected="false" aria-controls="why-panel-2"><span class="why-tab-num">04</span><span class="why-tab-label">Production codebases</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="3" aria-selected="false" aria-controls="why-panel-3"><span class="why-tab-num">05</span><span class="why-tab-label">Brand + Product design</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="4" aria-selected="false" aria-controls="why-panel-4"><span class="why-tab-num">06</span><span class="why-tab-label">Ships code, not mockups</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="5" aria-selected="false" aria-controls="why-panel-5"><span class="why-tab-num">07</span><span class="why-tab-label">Fluent in DESIGN.md</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="6" aria-selected="false" aria-controls="why-panel-6"><span class="why-tab-num">08</span><span class="why-tab-label">CI/CD-ready</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
<li><button role="tab" class="why-tab" data-index="7" aria-selected="false" aria-controls="why-panel-7"><span class="why-tab-num">09</span><span class="why-tab-label">Chrome extension</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="why-panels">
|
||
<article class="why-panel" id="why-panel-0" role="tabpanel" data-index="0" hidden>
|
||
<h3 class="why-panel-title">Design that knows who it's for.</h3>
|
||
<p class="why-panel-body">Most AI tools one-shot a plausible-looking mock. Impeccable starts with a conversation: audience, brand personality, anti-references, aesthetic direction. It captures the answer in <code>PRODUCT.md</code> and <code>DESIGN.md</code> and loads them on every command. The output is design that fits the actual business, not a generic impression of one.</p>
|
||
<div class="why-visual why-visual--productmd">
|
||
<div class="why-productmd-file">
|
||
<div class="why-productmd-header">
|
||
<span class="why-productmd-filename">PRODUCT.md</span>
|
||
<span class="why-productmd-status">Loaded on every command</span>
|
||
</div>
|
||
<div class="why-productmd-body">
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Users</span>
|
||
<span class="why-productmd-v">SREs on call, reading fast, often in the dark.</span>
|
||
</div>
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Register</span>
|
||
<span class="why-productmd-v">Product. Design serves the task.</span>
|
||
</div>
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Brand voice</span>
|
||
<span class="why-productmd-v">Calm, clinical, no hype.</span>
|
||
</div>
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Anti-references</span>
|
||
<span class="why-productmd-v">Purple gradients. Glassmorphism. "Boost your productivity."</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<aside class="why-productmd-commands">
|
||
<span class="why-productmd-commands-label">Commands</span>
|
||
<code>/impeccable teach</code>
|
||
<code>/impeccable document</code>
|
||
<code>/impeccable shape</code>
|
||
</aside>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="why-panel why-panel--vizfirst is-active" id="why-panel-vz" role="tabpanel" data-index="vz">
|
||
<h3 class="why-panel-title">Picture it. Build it. Ship the page.</h3>
|
||
<p class="why-panel-body">Neo Mirai started as generated reference images: a brand toolkit and a hi-fi conference mock. <code>/impeccable craft</code> turned them into a real responsive website, then iterated in the browser until the live page matched the direction.</p>
|
||
<div class="why-visual why-visual--vizfirst">
|
||
<figure class="why-vz-plate why-vz-plate--hifi">
|
||
<span class="why-vz-plate-kind">01 · Visualize</span>
|
||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo Mirai case study">
|
||
<img src="assets/openai_image_2_hifi.jpg" alt="Auto-generated hi-fi landing-page mock in editorial warm-paper style." loading="lazy" width="864" height="1821" />
|
||
</a>
|
||
</figure>
|
||
<figure class="why-vz-plate why-vz-plate--brand">
|
||
<span class="why-vz-plate-kind">02 · Shape</span>
|
||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo Mirai case study">
|
||
<img src="assets/openai_image_2_brand.jpg" alt="Auto-generated brand toolkit: identity lockups, palette, type, icon system, and application mocks for a fictional AI design conference." loading="lazy" width="1536" height="1024" />
|
||
</a>
|
||
</figure>
|
||
<figure class="why-vz-plate why-vz-plate--live">
|
||
<span class="why-vz-plate-kind">03 · Live build</span>
|
||
<a class="why-vz-plate-frame" href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
|
||
<img src="assets/cases/neo-mirai/live-fold.png" alt="Finished Neo Mirai website hero and agenda, implemented from the generated conference mock." loading="lazy" width="1440" height="1100" />
|
||
</a>
|
||
</figure>
|
||
</div>
|
||
<p class="why-panel-meta">A generated reference became shipped HTML, CSS, assets, responsive fixes, and interaction polish. · <a href="/cases/neo-mirai">Read the case →</a> · <a href="/neo-mirai/">Open the live build →</a></p>
|
||
</article>
|
||
|
||
<article class="why-panel why-panel--antidote" id="why-panel-1" role="tabpanel" data-index="1" hidden>
|
||
<h3 class="why-panel-title">Every model learned from the same slop.</h3>
|
||
<p class="why-panel-body">Without intervention, they all produce the same predictable mistakes: purple gradients, nested cards, gradient text, low-contrast labels. Impeccable names 25 of them, detects them in your code and in the browser, and teaches the AI to avoid them.</p>
|
||
<div class="why-visual why-visual--antidote">
|
||
<div class="patterns-tabbed" id="patterns-categories">
|
||
<!-- Rendered by app.js from /api/patterns -->
|
||
</div>
|
||
<div class="gallery-stack-container">
|
||
<div class="gallery-stack-header">
|
||
<h4 class="gallery-stack-title">Gallery of Shame</h4>
|
||
<button class="gallery-stack-btn gallery-stack-prev" aria-label="Previous">←</button>
|
||
<button class="gallery-stack-btn gallery-stack-next" aria-label="Next">→</button>
|
||
</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>
|
||
<a class="gallery-stack-link" href="/slop">Browse the full catalog →</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="why-panel" id="why-panel-2" role="tabpanel" data-index="2" hidden>
|
||
<h3 class="why-panel-title">Built to live in your production codebase.</h3>
|
||
<p class="why-panel-body">Impeccable isn't a sketchpad. It reads your existing tokens, components, and rendered output; polishes what's there; flags regressions; iterates with your design system rather than around it. Daily-driver for real work on real apps, not a one-shot mock factory.</p>
|
||
<div class="why-visual why-visual--terminal">
|
||
<div class="why-terminal">
|
||
<div class="why-terminal-header">
|
||
<span class="why-terminal-dot"></span>
|
||
<span class="why-terminal-dot"></span>
|
||
<span class="why-terminal-dot"></span>
|
||
<span class="why-terminal-title">/impeccable polish : scanning codebase</span>
|
||
</div>
|
||
<div class="why-terminal-body">
|
||
<div class="why-terminal-line why-terminal-line--prompt"><span class="why-terminal-prompt">›</span> Walking src/…</div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">src/styles/tokens.css</span> <span class="why-terminal-meta">14 colors, 6 font sizes, 7 spacing steps</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">tailwind.config.ts</span> <span class="why-terminal-meta">theme.extend merged</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">src/components/</span> <span class="why-terminal-meta">34 components</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-meta">· Button: primary, secondary, ghost, destructive</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-meta">· Card: 3 variants, 8px / 16px radii</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-meta">· Input, Select, Dialog, Toast, Table…</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">DESIGN.md</span> <span class="why-terminal-meta">brand rules loaded</span></div>
|
||
<div class="why-terminal-line why-terminal-line--hint"><span class="why-terminal-arrow">→</span> Matching your system. Not inventing one.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why-panel-meta">Scans your tokens, respects your components, grows with your system.</p>
|
||
</article>
|
||
|
||
<article class="why-panel" id="why-panel-3" role="tabpanel" data-index="3" hidden>
|
||
<h3 class="why-panel-title">Brand work is not product UI.</h3>
|
||
<p class="why-panel-body">Most design skills, including Anthropic's own frontend-design skill, collapse everything into one vocabulary. But a landing page and a dashboard live by contradictory rules. Impeccable runs in two modes: <em>brand</em> (design IS the product: marketing, portfolios, editorial) and <em>product</em> (design SERVES the product: app UI, tools, dashboards). Commands like <code>typeset</code>, <code>animate</code>, <code>colorize</code>, <code>bolder</code>, <code>quieter</code>, <code>layout</code>, and <code>delight</code> adjust their choices to match.</p>
|
||
<div class="why-visual why-visual--registers">
|
||
<div class="why-register why-register--brand">
|
||
<span class="why-register-label">Brand mode</span>
|
||
<div class="why-register-mock why-register-mock--brand">
|
||
<span class="why-brand-hero-mono">Issue 04</span>
|
||
<div class="why-brand-hero-title"><em>Shape</em> the story.</div>
|
||
</div>
|
||
</div>
|
||
<div class="why-register why-register--product">
|
||
<span class="why-register-label">Product mode</span>
|
||
<div class="why-register-mock why-register-mock--product">
|
||
<div class="why-product-row"><span class="why-product-k">Users</span><span class="why-product-v">12,482</span></div>
|
||
<div class="why-product-row"><span class="why-product-k">Active now</span><span class="why-product-v">1,207</span></div>
|
||
<div class="why-product-row"><span class="why-product-k">Conversion</span><span class="why-product-v">4.8%</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why-panel-meta">The mode is inferred from your task and confirmed in <code>PRODUCT.md</code>.</p>
|
||
</article>
|
||
|
||
<article class="why-panel" id="why-panel-4" role="tabpanel" data-index="4" hidden>
|
||
<h3 class="why-panel-title">Design where the work actually happens.</h3>
|
||
<p class="why-panel-body">The waterfall era (designer in canvas, throws a mock over the wall) is over. Most product work now starts directly in Claude Code, Cursor, Codex, Gemini, or Copilot, on the real codebase, in the browser. Impeccable is native to that world. No canvas. No handoff. Open your AI harness, type a command, ship the change.</p>
|
||
<div class="why-visual why-visual--v2">
|
||
<div class="v2-side v2-side--old">
|
||
<span class="v2-label">The old way</span>
|
||
<div class="v2-canvas-chrome">
|
||
<span class="v2-canvas-tool">Move</span>
|
||
<span class="v2-canvas-tool">Frame</span>
|
||
<span class="v2-canvas-tool">Comment</span>
|
||
</div>
|
||
<div class="v2-canvas-art">
|
||
<span class="v2-canvas-file">Checkout v7 (final) final FINAL.fig</span>
|
||
<div class="v2-canvas-mock"></div>
|
||
<span class="v2-canvas-stamp">last touched Q3 2025</span>
|
||
</div>
|
||
</div>
|
||
<div class="v2-side v2-side--new">
|
||
<span class="v2-label">With Impeccable</span>
|
||
<div class="v2-new-surface">
|
||
<div class="v2-new-line">impeccable craft checkout</div>
|
||
<div class="v2-new-browser">
|
||
<div class="v2-new-browser-dots">
|
||
<span class="v2-new-browser-dot"></span>
|
||
<span class="v2-new-browser-dot"></span>
|
||
<span class="v2-new-browser-dot"></span>
|
||
</div>
|
||
<div class="v2-new-browser-frame"></div>
|
||
</div>
|
||
<span class="v2-new-bar">pick · prompt · accept</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="why-panel" id="why-panel-5" role="tabpanel" data-index="5" hidden>
|
||
<h3 class="why-panel-title">Your design system in a portable file.</h3>
|
||
<p class="why-panel-body"><code>/impeccable document</code> scans your codebase and writes a <code>DESIGN.md</code> that follows the <a href="https://stitch.withgoogle.com/docs/design-md/format/" target="_blank" rel="noopener">Google Stitch DESIGN.md format</a>, the emerging standard. Six fixed sections in a fixed order, parseable by every other DESIGN.md-aware tool. Your visual system travels. Impeccable also consumes DESIGN.md on every command, so it stays on brand without being told twice.</p>
|
||
<div class="why-visual why-visual--designmd-v2">
|
||
<div class="why-dm-header">
|
||
<span class="why-dm-filename">DESIGN.md</span>
|
||
<span class="why-dm-badge">Google Stitch spec</span>
|
||
</div>
|
||
<div class="why-dm-grid">
|
||
<div class="why-dm-tile why-dm-tile--color" style="--c: oklch(60% 0.25 350);">
|
||
<div class="why-dm-tile-meta"><span>Accent</span><span>oklch(60% .25 350)</span></div>
|
||
<div class="why-dm-color-hero"></div>
|
||
<div class="why-dm-color-ramp">
|
||
<span style="background: oklch(20% .25 350)"></span>
|
||
<span style="background: oklch(32% .25 350)"></span>
|
||
<span style="background: oklch(44% .25 350)"></span>
|
||
<span style="background: oklch(56% .25 350)"></span>
|
||
<span style="background: oklch(68% .22 350)"></span>
|
||
<span style="background: oklch(80% .15 350)"></span>
|
||
<span style="background: oklch(90% .08 350)"></span>
|
||
<span style="background: oklch(96% .02 350)"></span>
|
||
</div>
|
||
</div>
|
||
<div class="why-dm-tile why-dm-tile--type">
|
||
<div class="why-dm-tile-meta"><span>Display</span><span>Italic 400</span></div>
|
||
<div class="why-dm-type-specimen">Aa</div>
|
||
<div class="why-dm-type-family">Cormorant Garamond</div>
|
||
</div>
|
||
<div class="why-dm-tile why-dm-tile--type">
|
||
<div class="why-dm-tile-meta"><span>Body</span><span>Regular 400</span></div>
|
||
<div class="why-dm-type-specimen why-dm-type-specimen--sans">Aa</div>
|
||
<div class="why-dm-type-family">Instrument Sans</div>
|
||
</div>
|
||
<div class="why-dm-tile why-dm-tile--components">
|
||
<div class="why-dm-tile-meta"><span>Components</span><span>34</span></div>
|
||
<div class="why-dm-comp-row">
|
||
<span class="why-dm-comp-chip why-dm-comp-chip--primary">Primary</span>
|
||
<span class="why-dm-comp-chip">Ghost</span>
|
||
</div>
|
||
<div class="why-dm-comp-input">Email address</div>
|
||
</div>
|
||
</div>
|
||
<div class="why-dm-foot">Readable by every DESIGN.md-aware tool.</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="why-panel" id="why-panel-6" role="tabpanel" data-index="6" hidden>
|
||
<h3 class="why-panel-title">Block AI slop before it ships.</h3>
|
||
<p class="why-panel-body">Run <code>npx impeccable detect src/</code> on a PR branch and get JSON output with every purple gradient, nested card, low-contrast label, and gradient-text heading caught. Fail the build on severity. 25 deterministic checks, no LLM required, no API key, no flaky scoring. Gate your PRs the same way you gate lint and types.</p>
|
||
<div class="why-visual why-visual--ci">
|
||
<div class="why-ci-window">
|
||
<div class="why-ci-header">
|
||
<span class="why-ci-branch">feat/pricing-page</span>
|
||
<span class="why-ci-status why-ci-status--fail">✗ failing</span>
|
||
</div>
|
||
<div class="why-ci-body">
|
||
<div class="why-ci-line"><span class="why-ci-cmd">$</span> npx impeccable detect src/</div>
|
||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Hero.tsx:42</code> gradient-text</div>
|
||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Card.tsx:8</code> side-stripe-border</div>
|
||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Button.tsx:17</code> ai-color-palette</div>
|
||
<div class="why-ci-summary">3 anti-patterns · exit 1</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why-panel-meta">25 rules · <code>--json</code> · <code>--fast</code> · exit codes for CI.</p>
|
||
</article>
|
||
|
||
<article class="why-panel" id="why-panel-7" role="tabpanel" data-index="7" hidden>
|
||
<h3 class="why-panel-title">One click on any site.</h3>
|
||
<p class="why-panel-body">The Impeccable Chrome extension runs the same 25-rule detector on every page you visit, in-browser, with zero setup. Audit your own staging. Audit the design your PM showed in Slack. Audit your competitor on a Tuesday. The overlay highlights each issue in place so you never have to map a JSON report back to a DOM node.</p>
|
||
<div class="why-visual why-visual--extension">
|
||
<div class="why-browser">
|
||
<div class="why-browser-chrome">
|
||
<span class="why-browser-dot"></span>
|
||
<span class="why-browser-dot"></span>
|
||
<span class="why-browser-dot"></span>
|
||
<span class="why-browser-url">example.com</span>
|
||
</div>
|
||
<div class="why-browser-body">
|
||
<div class="why-ext-popup">
|
||
<div class="why-ext-popup-header">Impeccable · 4 issues</div>
|
||
<div class="why-ext-popup-row"><span class="why-ext-sev">✗</span>Purple gradient hero</div>
|
||
<div class="why-ext-popup-row"><span class="why-ext-sev">✗</span>Low contrast label</div>
|
||
<div class="why-ext-popup-row"><span class="why-ext-sev">✗</span>Nested card</div>
|
||
<div class="why-ext-popup-row"><span class="why-ext-sev">✗</span>Gradient text heading</div>
|
||
</div>
|
||
<div class="why-ext-overlay-a"></div>
|
||
<div class="why-ext-overlay-b"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why-panel-meta"><a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" target="_blank" rel="noopener">Install from the Chrome Web Store →</a></p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 05. LIVE MODE - Interactive demo -->
|
||
<section class="live-section" id="live-mode">
|
||
<div class="section-header" data-reveal>
|
||
<span class="section-number">04</span>
|
||
<h2 class="section-title">Live Mode <span class="beta-badge">ALPHA</span></h2>
|
||
</div>
|
||
<div class="live-content" data-reveal>
|
||
<p class="section-lead">Pick any element in the browser. Drop a comment or a stroke. Hit Go. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.</p>
|
||
|
||
<div class="live-demo" id="live-demo" aria-label="Live Mode interactive demo loop">
|
||
<div class="live-demo-frame-col"><div class="live-demo-frame">
|
||
<div class="live-demo-chrome">
|
||
<span class="live-demo-dot"></span>
|
||
<span class="live-demo-dot"></span>
|
||
<span class="live-demo-dot"></span>
|
||
<span class="live-demo-url">localhost:3000</span>
|
||
</div>
|
||
|
||
<div class="live-demo-stage">
|
||
<!-- Skeleton: the rest of the page around the target card -->
|
||
<div class="live-demo-skeleton" aria-hidden="true">
|
||
<div class="live-demo-skel-nav">
|
||
<span class="live-demo-skel-logo"></span>
|
||
<span class="live-demo-skel-link"></span>
|
||
<span class="live-demo-skel-link"></span>
|
||
<span class="live-demo-skel-link"></span>
|
||
<span class="live-demo-skel-cta"></span>
|
||
</div>
|
||
<div class="live-demo-skel-heading"></div>
|
||
<div class="live-demo-skel-line"></div>
|
||
<div class="live-demo-skel-line live-demo-skel-line--short"></div>
|
||
</div>
|
||
|
||
<!-- Target element that gets picked + iterated -->
|
||
<div class="live-demo-target" data-demo-target>
|
||
<div class="live-demo-variant is-active" data-variant="original">
|
||
<div class="live-demo-card live-demo-card--plain">
|
||
<span class="live-demo-card-kicker">Newsletter</span>
|
||
<h3>Subscribe for updates</h3>
|
||
<p>Monthly-ish design notes.</p>
|
||
<button type="button">Subscribe</button>
|
||
</div>
|
||
</div>
|
||
<div class="live-demo-variant" data-variant="1">
|
||
<div class="live-demo-card live-demo-card--v1">
|
||
<span class="live-demo-card-kicker">No. 04</span>
|
||
<h3>Letters, <em>occasionally</em>.</h3>
|
||
<p>A postcard from the editor, about once a month. No tracking pixels, no "just checking in."</p>
|
||
<button type="button">Send me one</button>
|
||
</div>
|
||
</div>
|
||
<div class="live-demo-variant" data-variant="2">
|
||
<div class="live-demo-card live-demo-card--v2">
|
||
<div class="live-demo-card-stamp">☞</div>
|
||
<span class="live-demo-card-kicker">Dispatch</span>
|
||
<h3>Design notes, <br>every other<br>Thursday.</h3>
|
||
<button type="button">Join the list →</button>
|
||
</div>
|
||
</div>
|
||
<div class="live-demo-variant" data-variant="3">
|
||
<div class="live-demo-card live-demo-card--v3">
|
||
<div class="live-demo-card-sticker"><span>☆</span><span>☆</span><span>☆</span></div>
|
||
<span class="live-demo-card-kicker">Field Notes</span>
|
||
<h3>A monthly letter, for people who still read email for pleasure.</h3>
|
||
<button type="button">Receive the letter <span aria-hidden="true">✺</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Highlight rectangle that outlines the target -->
|
||
<div class="live-demo-outline" data-demo-outline aria-hidden="true"></div>
|
||
|
||
<!-- Annotation layer (stroke + comment) drawn on the page -->
|
||
<div class="live-demo-annotations" data-demo-annotations aria-hidden="true">
|
||
<svg class="live-demo-stroke" viewBox="0 0 300 60" preserveAspectRatio="none" aria-hidden="true">
|
||
<path d="M 10,40 Q 60,10 110,38 T 210,32 T 290,20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" pathLength="1"/>
|
||
</svg>
|
||
<div class="live-demo-comment">more playful</div>
|
||
</div>
|
||
|
||
<!-- Contextual bar (LIGHT pill, floats near the picked element) -->
|
||
<div class="live-demo-ctx" data-demo-ctx data-phase="hidden">
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--configure">
|
||
<button type="button" class="live-demo-ctx-pill" data-demo-ctx-pill>
|
||
<span data-demo-cmd-name>delight</span>
|
||
<span class="live-demo-ctx-pill-caret" aria-hidden="true">▾</span>
|
||
</button>
|
||
<span class="live-demo-ctx-input" data-demo-input>
|
||
<span data-demo-input-text></span><span class="live-demo-ctx-caret"></span>
|
||
</span>
|
||
<button type="button" class="live-demo-ctx-count">×3</button>
|
||
<button type="button" class="live-demo-ctx-go" data-demo-go>Go <span aria-hidden="true">→</span></button>
|
||
</div>
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--generating">
|
||
<span class="live-demo-ctx-spinner" aria-hidden="true"></span>
|
||
<span>Generating variants…</span>
|
||
</div>
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--cycling">
|
||
<button type="button" class="live-demo-ctx-nav" aria-label="Previous variant">‹</button>
|
||
<span class="live-demo-ctx-counter" data-demo-counter>1 / 3</span>
|
||
<button type="button" class="live-demo-ctx-nav" aria-label="Next variant">›</button>
|
||
<span class="live-demo-ctx-divider"></span>
|
||
<button type="button" class="live-demo-ctx-discard" aria-label="Discard">✕</button>
|
||
<button type="button" class="live-demo-ctx-accept" data-demo-accept>Accept</button>
|
||
</div>
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--accepted">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span>Variant 3 written to source</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Simulated cursor -->
|
||
<div class="live-demo-cursor" data-demo-cursor aria-hidden="true">
|
||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
|
||
<path d="M1 1 L1 17 L5 13 L8 20 L11 19 L7.5 12 L13 12 Z" fill="#111" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Global bar: persistent dark pill at the bottom of every session -->
|
||
<div class="live-demo-gbar" data-demo-gbar>
|
||
<span class="live-demo-gbar-brand">/</span>
|
||
<button type="button" class="live-demo-gbar-btn is-active" data-demo-gbar-pick>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>
|
||
<span>Pick</span>
|
||
</button>
|
||
<button type="button" class="live-demo-gbar-btn">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
</button>
|
||
<button type="button" class="live-demo-gbar-btn">
|
||
<span class="live-demo-gbar-dmd" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
|
||
</button>
|
||
<span class="live-demo-gbar-divider"></span>
|
||
<button type="button" class="live-demo-gbar-x" aria-label="Exit live mode">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Supporting list sits to the right of the frame on desktop -->
|
||
<div class="live-demo-support">
|
||
<div class="live-demo-support-cell">
|
||
<span class="live-demo-support-k">Start</span>
|
||
<span class="live-demo-support-v"><code>/impeccable live</code> to open, then stop live mode when you're done. That's the whole invocation.</span>
|
||
</div>
|
||
<div class="live-demo-support-cell">
|
||
<span class="live-demo-support-k">Your agent, your code</span>
|
||
<span class="live-demo-support-v">The same AI you've been working with, reading your real project context. Variants are generated as actual edits, not mocks.</span>
|
||
</div>
|
||
<div class="live-demo-support-cell">
|
||
<span class="live-demo-support-k">Accept = write</span>
|
||
<span class="live-demo-support-v">An accepted variant lands in your source file. Canvas-like iteration, production output.</span>
|
||
</div>
|
||
<div class="live-demo-support-cell">
|
||
<span class="live-demo-support-k">Skill-native</span>
|
||
<span class="live-demo-support-v">No external tools or IDE extensions. Works across Claude Code, Cursor, Codex, Gemini, and every harness the skill targets.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 05. GET STARTED -->
|
||
<section class="platforms-section" id="downloads">
|
||
<div class="section-header" data-reveal>
|
||
<span class="section-number">05</span>
|
||
<h2 class="section-title">Get Started</h2>
|
||
</div>
|
||
|
||
<!-- Row 1: Primary install + How to use (50/50 split) -->
|
||
<div class="install-row-primary" data-reveal>
|
||
<!-- Left: Install the skill and CLI -->
|
||
<div class="install-primary-main">
|
||
<h3 class="install-path-title"><span class="install-path-step">1</span>Install the skill</h3>
|
||
<p class="install-path-desc">One agent skill that teaches your AI to design, with 23 commands bundled inside. Works in every major AI coding harness.</p>
|
||
|
||
<div class="install-path-terminal">
|
||
<div class="glass-terminal">
|
||
<div class="terminal-header">
|
||
<span class="terminal-dot red"></span>
|
||
<span class="terminal-dot yellow"></span>
|
||
<span class="terminal-dot green"></span>
|
||
</div>
|
||
<div class="terminal-body">
|
||
<div class="install-terminal-row">
|
||
<div class="install-terminal-cmd">
|
||
<span class="terminal-prompt">$</span>
|
||
<code>npx skills add pbakaus/impeccable</code>
|
||
<button class="copy-btn" aria-label="Copy command" data-copy="npx skills add pbakaus/impeccable">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<span class="install-terminal-note">Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Other install methods, collapsed by default -->
|
||
<details class="install-primary-alts">
|
||
<summary class="install-alts-summary">
|
||
<span class="install-alts-label">Other install methods</span>
|
||
<svg class="install-alts-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
|
||
</summary>
|
||
|
||
<div class="install-alt-method">
|
||
<span class="install-alt-label">Claude Code plugin</span>
|
||
<div class="install-terminal-cmd">
|
||
<span class="terminal-prompt">$</span>
|
||
<code>/plugin marketplace add pbakaus/impeccable</code>
|
||
<button class="copy-btn" aria-label="Copy command" data-copy="/plugin marketplace add pbakaus/impeccable">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<span class="install-alt-note">Then open <code>/plugin</code> in Claude Code</span>
|
||
</div>
|
||
|
||
<div class="install-alt-method">
|
||
<span class="install-alt-label">Manual download <span class="install-alt-sublabel">all 12 providers</span></span>
|
||
<button class="install-zip-link" data-bundle="universal" aria-label="Download universal zip">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||
</svg>
|
||
<span class="install-zip-link-name">Download universal zip</span>
|
||
<span class="install-zip-link-examples"><code>/impeccable polish</code> <code>/impeccable audit</code></span>
|
||
</button>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<!-- Right: How to use -->
|
||
<div class="install-primary-howto">
|
||
<h3 class="install-path-title"><span class="install-path-step">2</span>Use it</h3>
|
||
<p class="install-path-desc">Impeccable gives you a shared design vocabulary with your AI. 23 commands (<em>polish</em>, <em>audit</em>, <em>critique</em>, <em>typeset</em>, and more) that each encode a specific design discipline, so you can steer with precision.</p>
|
||
|
||
<dl class="install-howto-rows">
|
||
<div class="install-howto-row">
|
||
<dt><code><span class="install-path-slash">/</span>impeccable redo this hero</code></dt>
|
||
<dd>Let the skill pick the approach. No names to memorize.</dd>
|
||
</div>
|
||
<div class="install-howto-row">
|
||
<dt><code><span class="install-path-slash">/</span>impeccable audit checkout</code></dt>
|
||
<dd>Reach for a command by name. Type <code><span class="install-path-slash">/</span>impeccable</code> alone to see all 23.</dd>
|
||
</div>
|
||
<div class="install-howto-row">
|
||
<dt><code><span class="install-path-slash">/</span>impeccable pin audit</code></dt>
|
||
<dd>Pin your favorites. <code><span class="install-path-slash">/</span>audit</code> becomes a standalone shortcut.</dd>
|
||
</div>
|
||
</dl>
|
||
|
||
<div class="install-howto-footer">
|
||
<a href="/tutorials/getting-started" class="install-howto-link">Full walkthrough <span aria-hidden="true">→</span></a>
|
||
<a href="/docs" class="install-howto-link">Browse the vocabulary <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Steps 3-4: vertical accordion, mutually exclusive (only one open at a time) -->
|
||
<div class="install-accordion" data-reveal>
|
||
<!-- Step 3: Chrome extension -->
|
||
<details name="install-steps" class="install-step">
|
||
<summary class="install-step-summary">
|
||
<h3 class="install-path-title"><span class="install-path-step">3</span>Add the Chrome extension <span class="install-path-badge install-path-badge-muted">Optional</span></h3>
|
||
<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>
|
||
</summary>
|
||
<div class="install-step-body">
|
||
<p class="install-path-desc">Click the toolbar icon on any page and every anti-pattern lights up right where it lives. Catches gradient text, AI color palettes, nested cards, low contrast, and 20+ more rules. Works on localhost, staging, production, or anyone else's site.</p>
|
||
|
||
<div class="install-tool install-tool--solo">
|
||
<a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" target="_blank" rel="noopener" class="install-tool-preview" aria-label="Install Impeccable from the Chrome Web Store">
|
||
<img src="assets/extension-detection.png" alt="Screenshot of the Impeccable Chrome extension highlighting anti-patterns on a webpage" width="600" height="508" loading="lazy">
|
||
<span class="install-tool-preview-caption">Live detection on any webpage</span>
|
||
</a>
|
||
<a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" target="_blank" rel="noopener" class="btn btn-primary install-tool-cta">
|
||
<span>Install from Chrome Web Store →</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Step 4: Install the CLI -->
|
||
<details name="install-steps" class="install-step">
|
||
<summary class="install-step-summary">
|
||
<h3 class="install-path-title"><span class="install-path-step">4</span>Install the CLI <span class="install-path-badge install-path-badge-muted">Optional</span></h3>
|
||
<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>
|
||
</summary>
|
||
<div class="install-step-body">
|
||
<p class="install-path-desc">Run anti-pattern scans outside the skill: in CI, in a PR check, or against a whole directory. 25 deterministic rules, no LLM required, JSON output ready for build gates.</p>
|
||
|
||
<div class="install-cmd-block">
|
||
<div class="install-cmd-line">
|
||
<span class="terminal-prompt">$</span>
|
||
<code>npm i -g impeccable</code>
|
||
<button class="copy-btn" aria-label="Copy command" data-copy="npm i -g impeccable">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<span class="install-cmd-note">Then <code>impeccable detect src/</code> to scan a project, or <code>npx impeccable detect</code> without installing. <a href="https://www.npmjs.com/package/impeccable" target="_blank" rel="noopener">View on npm →</a></span>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Step 5: Stay updated -->
|
||
<details name="install-steps" class="install-step">
|
||
<summary class="install-step-summary">
|
||
<h3 class="install-path-title"><span class="install-path-step">5</span>Stay updated</h3>
|
||
<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>
|
||
</summary>
|
||
<div class="install-step-body">
|
||
<p class="install-path-desc">Keep skills current and follow along with new commands, anti-patterns, and the design thinking behind Impeccable.</p>
|
||
|
||
<div class="install-cmd-block">
|
||
<div class="install-cmd-line">
|
||
<span class="terminal-prompt">$</span>
|
||
<code>npx impeccable skills update</code>
|
||
<button class="copy-btn" aria-label="Copy command" data-copy="npx impeccable skills update">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<span class="install-cmd-note">Run periodically to pull the latest skill definitions.</span>
|
||
</div>
|
||
|
||
<div class="install-updated-subscribe">
|
||
<iframe class="install-updated-substack" src="https://impeccablestyle.substack.com/embed" width="100%" height="130" frameborder="0" scrolling="no"></iframe>
|
||
<a href="https://x.com/impeccable_ai" class="install-updated-x" target="_blank" rel="noopener">
|
||
<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>
|
||
<span class="install-updated-x-label">Follow on X</span>
|
||
<span class="install-updated-x-handle">@impeccable_ai</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5+6. CHANGELOG + FAQ (side-by-side on desktop) -->
|
||
<div class="changelog-faq-row">
|
||
<!-- 5. CHANGELOG -->
|
||
<section class="changelog-section" id="changelog">
|
||
<div class="section-header" data-reveal>
|
||
<span class="section-number">06</span>
|
||
<h2 class="section-title">What's New</h2>
|
||
</div>
|
||
|
||
<div class="changelog-highlights" data-reveal>
|
||
<p class="changelog-highlights-label">Highlights since v3.0 <span class="changelog-date">April 10 – 30, 2026</span></p>
|
||
<ul class="changelog-items">
|
||
<li><strong>Live mode preserves identity by default.</strong> Variants stay on-brand for the existing surface and explore different expression axes within that identity. Departure from the current aesthetic only triggers when PRODUCT.md anti-references explicitly reject the current surface, or the user asks for it. Departure directions derive from brand voice, not a fixed catalog.</li>
|
||
<li><strong>Detector flags the new monoculture.</strong> The overused-font rule now catches Fraunces, Geist, Mona Sans, Plus Jakarta Sans, Space Grotesk, Recoleta, and Instrument Sans. Contrast checks run on styled <code><a></code> and <code><button></code> elements. Brand exceptions for Vercel, Next.js, and GitHub on their own domains.</li>
|
||
<li><strong>Live mode works everywhere.</strong> Strict-CSP apps, modal hosts (Radix, Headless UI, vaul), React/TSX projects, and repeated identical-class siblings all handle cleanly through the wrap, preview, accept, and carbonize loop.</li>
|
||
<li><strong>PRODUCT.md + DESIGN.md as shared context.</strong> A strategic file (who, what, why) and a visual file (colors, typography, components in the <a href="https://stitch.withgoogle.com/docs/design-md/format/" target="_blank" rel="noopener">Google Stitch format</a>) that every command reads before generating. Created via <code>/impeccable teach</code> and <code>/impeccable document</code>.</li>
|
||
<li><strong>18 skills became 1 skill with 23 commands.</strong> One <code>/impeccable</code> entry in the menu, shared design vocabulary, and <code>/impeccable pin</code> to promote favorites back as standalone shortcuts.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<details class="changelog-older" data-reveal>
|
||
<summary class="changelog-older-toggle">Full version history</summary>
|
||
<div class="changelog-older-entries">
|
||
<div class="changelog-list">
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v3.0.6</span>
|
||
<span class="changelog-date">April 30, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Live mode preserves identity by default.</strong> Variants now stay on-brand for the existing surface (same palette, same type pairing, same visual rhetoric) and explore different expression axes within that identity. Departure from the existing aesthetic only triggers when PRODUCT.md anti-references explicitly call out the current surface, or the user asks for it.</li>
|
||
<li><strong>Departure mode derives from brand voice, not a fixed catalog.</strong> The old lane list (Swiss-grid, Terminal, Industrial-signage, etc.) caused the model to converge on the same three directions every time. Replaced with a brand-voice derivation process: read personality words, imagine physical experiences, derive visual directions. Each run produces directions specific to the brand.</li>
|
||
<li><strong>Parameters ship consistently on large surfaces.</strong> Planning params is now part of variant planning, not a separate step. The freeform bias aligns with the budget table: 2-3 knobs per variant for heroes and sections, with 0-param heroes flagged as mistakes rather than judgment calls.</li>
|
||
<li><strong>Reflex-reject aesthetic lanes.</strong> Parallel to the font reflex-reject list in <code>brand.md</code>. Editorial-typographic is the first entry, catching the second-order training reflex where every departure from SaaS-cream defaults to magazine-cover aesthetics.</li>
|
||
<li><strong>Two-altitude category-reflex check.</strong> The shared design laws now catch both first-order reflexes (theme + palette from category alone) and second-order reflexes (aesthetic family from category + anti-references).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">Extension v1.0.3</span>
|
||
<span class="changelog-date">April 29, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Contrast checks now run on styled buttons.</strong> A styled <code><a></code> or <code><button></code> with its own opaque background was silently skipped by the contrast rule, so a "Get started" pill with charcoal text on a near-black background read as fine to the detector. Buttons with their own background and direct text now flow through the same contrast and palette checks as every other text element. Inline links inside paragraphs continue to skip, as before.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">Extension v1.0.2</span>
|
||
<span class="changelog-date">April 29, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Popup scan no longer hangs after a page reload.</strong> The toolbar-icon flow worked the first time but got stuck on "Scanning…" on subsequent clicks if the page had been reloaded in between. The service worker only cleared its content-script-injected flag when DevTools was open, so the popup-only path saw a stale flag and silently sent its scan request to a tab whose content script had already been wiped. Reset is now unconditional; auto-rescan stays gated to DevTools.</li>
|
||
<li><strong>Detector flags the new monoculture.</strong> The overused-font rule now catches Fraunces, Geist, Mona Sans, Plus Jakarta Sans, Space Grotesk, Recoleta, and Instrument Sans alongside Inter and the older defaults. Brand exceptions for Vercel, Next.js, and GitHub on their own domains.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">CLI v2.1.8</span>
|
||
<span class="changelog-date">April 28, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Detector runs on Windows.</strong> CLI path resolution used <code>new URL(...).pathname</code>, which prepends a slash to drive letters (<code>/C:/...</code>) and breaks <code>fs</code> on Windows. Switched to <code>fileURLToPath</code> across the board. Reported in <a href="https://github.com/pbakaus/impeccable/issues/95" target="_blank" rel="noopener">#95</a>, contributed by <a href="https://github.com/voidborne-d" target="_blank" rel="noopener">@voidborne-d</a>.</li>
|
||
<li><strong>Border-radius detection no longer flickers under jsdom.</strong> The pill-button rule was missing real cases when jsdom returned a percent radius without an explicit width, and over-reporting when CSS shorthand left individual corners unset. The reader now preserves the percent signal and resolves shorthand consistently across the browser and jsdom paths, so CLI scans match what the live overlay sees.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v3.0.5</span>
|
||
<span class="changelog-date">April 28, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Live mode lands valid TSX through the wrap → preview → accept → carbonize loop on Vite/Next React/TSX projects.</strong> The wrapper now keeps a single JSX-slot child instead of three adjacent siblings, so it round-trips cleanly inside <code>return (...)</code>, array <code>.map(...)</code>, and <code>asChild</code> parents like Radix's <code><DialogPrimitive.Title></code>. Carbonize stopped double-wrapping CSS in nested template literals on TSX targets, accept and discard restore the picked element at its original indent (with relative depth between lines preserved), and the screenshot overlay no longer flashes solid black on default-background pages. Closes <a href="https://github.com/pbakaus/impeccable/issues/114" target="_blank" rel="noopener">#114</a>, with thanks again to <a href="https://github.com/dergachoff" target="_blank" rel="noopener">@dergachoff</a> for the detailed bug report.</li>
|
||
<li><strong>Wrap correctly disambiguates repeated identical-class siblings.</strong> A list of <code><Card className="card"></code> rendered three times with the same classes used to land on the first one regardless of which the user picked. <code>live-wrap.mjs</code> now accepts <code>--text TEXT</code> (the picked element's <code>textContent</code>) and narrows candidates accordingly, falling back to first-match when the text is too short or doesn't appear literally in source (data-driven children like <code>{title}</code>), and erroring with <code>element_ambiguous</code> when multiple branches still match equally.</li>
|
||
<li><strong><code>live-inject</code> CSP-meta unwrap now byte-for-byte preserves self-closing tag whitespace.</strong> The patch+revert cycle on a <code><meta http-equiv="Content-Security-Policy" ... /></code> tag was eating the space before <code>/></code> via a double-space artifact in the marker insertion path; common Vite shapes that ship a CSP meta now round-trip cleanly.</li>
|
||
<li><strong><code>live.md</code> spec gained explicit guidance for three real authoring traps.</strong> Variant CSS must use a descendant combinator (<code>:scope > .card</code>, not bare <code>:scope</code>) or it lands on the wrapper instead of the picked element. JSX <code><style></code> bodies need <code>{`...`}</code> template-literal wrapping. Aborting an in-flight session uses <code>live-poll --reply EVENT_ID error "msg"</code>, not <code>live-accept --discard</code>; the latter only mutates source while the bar stays stuck on GENERATING dots forever.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v3.0.4</span>
|
||
<span class="changelog-date">April 28, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong><code>/impeccable craft</code> now treats approved mocks as visual contracts.</strong> The craft flow requires a mock fidelity inventory before build, maps major visible ingredients to code or assets, and flags missing hero objects, imagery, section structure, nav/CTA treatment, and distinctive motifs as blocking defects unless the user accepted the deviation.</li>
|
||
<li><strong>Image-led brand surfaces can no longer degrade into abstract panels.</strong> Travel, editorial, portfolio, venue, product showcase, entertainment, and education work now requires credible imagery, generated plates, illustrations, maps, renders, or destination scenes when the approved mock or subject matter calls for them.</li>
|
||
<li><strong><code>/impeccable craft</code> and <code>/impeccable shape</code> hardened against autonomous agents.</strong> Codex-class harnesses had started writing files before the user confirmed a design brief, treating their own summary as the brief. Setup now ships a preflight checklist (context, product, command reference, shape, image gate, mutation), and craft enforces an explicit build gate: <code>shape=pass</code> only counts when the user separately approves the brief or supplies a pre-confirmed one. Self-authored briefs and "the implementation will be semantic anyway" no longer skip the visual probe.</li>
|
||
<li><strong>Live picker plays nice with modal hosts.</strong> Inside Radix Dialog, Headless UI, vaul, and other portals that lock <code>body { pointer-events: none }</code> or attach outside-click dismissers, the picker chrome had become unclickable, and any click that did land would dismiss the host dialog. The bar, picker, params panel, annotation overlay, and design panel now defang outside-handlers at the chrome boundary and force <code>pointer-events: auto</code> on themselves. Theme detection also stopped misreading a transparent body as black. Closes <a href="https://github.com/pbakaus/impeccable/issues/113" target="_blank" rel="noopener">#113</a>, with thanks to <a href="https://github.com/dergachoff" target="_blank" rel="noopener">@dergachoff</a> for the thoughtful bug report.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v3.0.2</span>
|
||
<span class="changelog-date">April 27, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Claude Code plugin install shrunk by 380×.</strong> The marketplace now ships only the runtime payload (~770 KB) instead of the entire monorepo (291 MB). Plugin source moved from <code>./</code> to <code>./plugin</code>, so the cache no longer copies <code>node_modules</code>, build scripts, tests, or the other harness directories. Reported in <a href="https://github.com/pbakaus/impeccable/issues/107" target="_blank" rel="noopener">#107</a>.</li>
|
||
<li><strong>Slash commands now register reliably on Claude Code.</strong> The <code>skills</code> field in <code>plugin.json</code> was missing the trailing slash that the documented schema expects (<code>"./skills/"</code>, not <code>"./skills"</code>), which caused Claude Code's plugin loader to skip command registration on some setups. Reported by three users in <a href="https://github.com/pbakaus/impeccable/issues/86" target="_blank" rel="noopener">#86</a>.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v3.0.1</span>
|
||
<span class="changelog-date">April 24, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Live mode runs in strict-CSP apps.</strong> When your HTML carries a Content-Security-Policy meta tag, <code>/impeccable live</code> now silently appends the live-server origin to <code>script-src</code> and <code>connect-src</code> (and <code>blob:</code> to <code>img-src</code> for the screenshot overlay) on session start, and reverts the patch verbatim on stop. Header-based CSP setups still get the existing detect-and-suggest path.</li>
|
||
<li><strong>Live mode survives conditional-render content.</strong> Picking an element inside a closed modal, an inactive tab, or a collapsible panel used to wedge live mode when Vite Fast Refresh remounted the parent and reset state. Now: a brief upfront heads-up at pick time, plus a contextual toast after Go ("retrace the path that revealed it") so variants land the moment the element is back in the DOM. No more force-reload that masked the issue.</li>
|
||
<li><strong>Live mode no longer breaks JSX projects.</strong> Three round-trip bugs in <code>/impeccable live</code>'s accept path are fixed: the carbonize stash now uses JSX-syntax style attributes and template-literal CSS, and the post-accept rewrite no longer leaks template-literal punctuation into the file. SvelteKit and other frameworks that hydrate after HTML parse now also resume cleanly post-reload.</li>
|
||
<li><strong><code>/impeccable polish</code> now a true superset of the retired <code>/normalize</code>.</strong> Aligning to the design system is non-optional, drift is named by root cause (missing token, one-off implementation, or conceptual misalignment), and a new Information Architecture & Flow dimension covers progressive disclosure, established user-flow shapes, and naming consistency. Cosmetic-vs-functional triage helps order work when polish time is short.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v3.0</span>
|
||
<span class="changelog-date">April 10, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><strong>Live Mode (Alpha).</strong> Run <code>/impeccable live</code> and iterate on your UI in the browser: pick any element, drop a comment or stroke, hit Go, get three production-quality variants swapped in via your framework's HMR, accept the one you want and it writes back to source. Works on Vite, Next.js (including monorepos), SvelteKit, Astro, Nuxt. Detects your project's Content Security Policy and offers a one-time, dev-only patch so it runs in strict-CSP apps too.</li>
|
||
<li><strong>Visualize, then build.</strong> Image gen crossed the reference-quality threshold with GPT Image 2, Nano Banana Pro, and Imagen 4 Ultra. <code>/impeccable shape</code> drafts a brand toolkit (color, typography, mood board) as real images; <code>/impeccable craft</code> pre-renders the hi-fi mock to code toward. Strongest in Codex with GPT 5.5.</li>
|
||
<li><strong>PRODUCT.md, shared design memory for your AI.</strong> A single file at your project root that names the audience, brand personality, anti-references, and register (brand vs product). Every command reads it before generating, so output stops drifting into generic "modern SaaS" territory and starts sounding like your product. Created in one step via <code>/impeccable teach</code>.</li>
|
||
<li><strong>DESIGN.md generation, spec-compliant and interoperable.</strong> <code>/impeccable document</code> scans your tokens, components, and rendered output and writes a DESIGN.md that follows the <a href="https://stitch.withgoogle.com/docs/design-md/format/" target="_blank" rel="noopener">Google Stitch DESIGN.md format</a>. Colors, typography, elevation, components, do's and don'ts, in the exact six sections other DESIGN.md-aware tools expect. Your visual system travels with you.</li>
|
||
<li><strong>Brand and product registers.</strong> Design work splits cleanly into two worlds: brand (marketing sites, landing pages, portfolios, where design IS the product) and product (app UI, dashboards, tools, where design SERVES the product). Register-aware commands (<code>typeset</code>, <code>animate</code>, <code>bolder</code>, <code>quieter</code>, <code>colorize</code>, <code>layout</code>, <code>delight</code>) each adjust their vocabulary to match, so brand work isn't critiqued for breaking product-UI conventions and vice versa.</li>
|
||
<li><strong>18 skills became 1 skill with 23 commands.</strong> Every command now lives under <code>/impeccable</code>: <code>/impeccable audit</code>, <code>/impeccable polish</code>, <code>/impeccable critique</code>, and the rest. One entry in your <code>/</code> menu instead of 18, a shared design vocabulary between you and your AI, and far less namespace pollution as the plugin ecosystem grows. The autocomplete shows the full list the moment you type <code>/impeccable</code>.</li>
|
||
<li><strong>Pin your favorites back as shortcuts.</strong> Run <code>/impeccable pin audit</code> and <code>/audit</code> becomes a standalone command again, without reversing the consolidation. Under the hood it writes a lightweight redirect skill that delegates to <code>/impeccable audit</code>, so updates to the parent skill flow through automatically. <code>/impeccable unpin audit</code> removes it.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="changelog-older">
|
||
<summary class="changelog-older-toggle">View older releases</summary>
|
||
<div class="changelog-older-entries">
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v2.1</span>
|
||
<span class="changelog-date">April 9, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<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>
|
||
<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>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v2.0</span>
|
||
<span class="changelog-date">April 8, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<li><strong>New docs site.</strong> Top-level <a href="/docs">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>
|
||
<li><strong>New harness: Rovo Dev.</strong> 11 supported AI tools total.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v1.6.0</span>
|
||
<span class="changelog-date">March 18, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li>New provider: <strong>Trae</strong> (China + International)</li>
|
||
<li><code>/critique</code> now scores against Nielsen's 10 heuristics, tests with persona archetypes, and assesses cognitive load</li>
|
||
<li><code>/audit</code> now scores 5 dimensions with P0-P3 severity ratings and structured action plans</li>
|
||
<li>Improved skill descriptions for better agent auto-discovery</li>
|
||
<li>Fixed invalid YAML frontmatter that broke GitHub preview and Codex loading (<a href="https://github.com/pbakaus/impeccable/issues/67">#67</a>)</li>
|
||
<li>Codex CLI now uses correct <code>$</code> prefix for command references</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v1.5.1</span>
|
||
<span class="changelog-date">March 17, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li><code>/typeset</code> now recommends fixed type scales for app UIs, reserving fluid typography for marketing/content pages</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v1.5.0</span>
|
||
<span class="changelog-date">March 16, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li>3 new skills: <code>/typeset</code> (fix typography), <code>/arrange</code> (fix layout & spacing), <code>/overdrive</code> (technically extraordinary effects, beta)</li>
|
||
<li>Skills now auto-gather design context via <code>.impeccable.md</code>. Run <code>/teach-impeccable</code> once, all skills benefit</li>
|
||
<li>Deep linking to commands (<code>#cmd-overdrive</code>, etc.)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v1.3.0</span>
|
||
<span class="changelog-date">March 12, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li>Added OpenCode provider support</li>
|
||
<li>Added Pi provider support</li>
|
||
<li>Recategorized <code>/onboard</code> as an enhancement command</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v1.2.0</span>
|
||
<span class="changelog-date">March 5, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li>Added Kiro support (<code>.kiro/skills/</code>)</li>
|
||
<li>Restored prefix toggle: download <code>i-</code> prefixed bundles to avoid naming conflicts</li>
|
||
<li>Audit and critique skills only suggest real, installed commands</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v1.1.0</span>
|
||
<span class="changelog-date">March 4, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li>Unified skills architecture: commands are now skills with <code>user-invocable: true</code></li>
|
||
<li>Added VS Code Copilot and Google Antigravity support</li>
|
||
<li>New install flow: <code>npx skills add</code> as primary, universal ZIP as fallback</li>
|
||
<li>Added universal ZIP containing all 5 provider directories</li>
|
||
<li>Renamed <code>/simplify</code> to <code>/distill</code> to avoid Claude Code conflict</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="changelog-entry">
|
||
<div class="changelog-version-header">
|
||
<span class="changelog-version">v1.0.0</span>
|
||
<span class="changelog-date">February 28, 2026</span>
|
||
</div>
|
||
<ul class="changelog-items">
|
||
<li>Initial release with enhanced frontend-design skill</li>
|
||
<li>17 design commands: /polish, /audit, /distill, /bolder, and more</li>
|
||
<li>Support for Cursor, Claude Code, Gemini CLI, and Codex CLI</li>
|
||
<li>Interactive command cheatsheet</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
</section>
|
||
|
||
<!-- 8. FAQ -->
|
||
<section class="faq-section" id="faq">
|
||
<div class="section-header" data-reveal>
|
||
<span class="section-number">07</span>
|
||
<h2 class="section-title">Frequently Asked Questions</h2>
|
||
</div>
|
||
|
||
<div class="faq-list" data-reveal>
|
||
<details class="faq-item">
|
||
<summary class="faq-question">Where do I put the downloaded files?</summary>
|
||
<div class="faq-answer">
|
||
<p>The easiest way is <code>npx skills add pbakaus/impeccable</code>, which auto-detects your AI harness and places files correctly.</p>
|
||
<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>, <code>.agents/</code>, and <code>.github/</code>.</p>
|
||
<p>Project-level installation takes precedence and lets you version control your skills.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-item">
|
||
<summary class="faq-question">How do I update to the latest version?</summary>
|
||
<div class="faq-answer">
|
||
<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>
|
||
<ul>
|
||
<li><strong>Alternative:</strong> <code>npx skills add pbakaus/impeccable</code> re-installs from scratch.</li>
|
||
<li><strong>Claude Code plugin:</strong> Open <code>/plugin</code>, go to the Discover tab.</li>
|
||
<li><strong>Manual ZIP:</strong> Download from above and extract to the project root.</li>
|
||
</ul>
|
||
<p>Your <code>PRODUCT.md</code> and <code>DESIGN.md</code> context files are never overwritten.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-item">
|
||
<summary class="faq-question">I used to type <code>/critique</code> directly. How do I get that back?</summary>
|
||
<div class="faq-answer">
|
||
<p>Pinning is built in. Run <code>/impeccable pin critique</code> and <code>/critique</code> becomes a standalone shortcut again, without reversing the consolidation.</p>
|
||
<p>Under the hood it writes a lightweight redirect skill that delegates to <code>/impeccable critique</code>, so updates to the parent skill flow through automatically. It works for every command.</p>
|
||
<p><strong>Examples:</strong></p>
|
||
<ul>
|
||
<li><code>/impeccable pin polish</code> → <code>/polish</code> works again</li>
|
||
<li><code>/impeccable pin audit</code> → <code>/audit</code> works again</li>
|
||
<li><code>/impeccable pin live</code> → <code>/live</code> works again</li>
|
||
</ul>
|
||
<p>To remove: <code>/impeccable unpin critique</code>. To see your current pins, check your harness skills directory (<code>.claude/skills/</code>, <code>.cursor/skills/</code>, etc.) for directories prefixed with <code>i-</code>.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-item">
|
||
<summary class="faq-question">Commands or skills aren't appearing. What do I do?</summary>
|
||
<div class="faq-answer">
|
||
<p><strong>For commands:</strong> Type <code>/impeccable</code> in your AI harness and look for commands like <code>/impeccable audit</code>, <code>/impeccable polish</code>, etc. If they don't appear, double-check the files are in the correct location.</p>
|
||
<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>
|
||
<p><strong>Tool-specific setup:</strong></p>
|
||
<ul>
|
||
<li><strong>Cursor:</strong> Requires Nightly channel + Agent Skills enabled in Settings → Rules</li>
|
||
<li><strong>Gemini CLI:</strong> Requires <code>@google/gemini-cli@preview</code> + Skills enabled via <code>/settings</code></li>
|
||
<li><strong>Codex:</strong> Skills do not appear in the normal <code>/</code> command picker. Open <code>/skills</code> or type <code>$</code>. Repo installs live in <code>.agents/skills/</code>, user installs live in <code>~/.agents/skills/</code>. Restart Codex if a new skill does not show up.</li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-item">
|
||
<summary class="faq-question">I'm new to AI harnesses. Where do I start?</summary>
|
||
<div class="faq-answer">
|
||
<p>Skills and commands are intermediate features. If you're just getting started, learn the basics first:</p>
|
||
<ul>
|
||
<li><strong>Claude Code:</strong> <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" rel="noopener">Official Documentation</a></li>
|
||
<li><strong>Cursor:</strong> <a href="https://docs.cursor.com" target="_blank" rel="noopener">Cursor Docs</a></li>
|
||
<li><strong>Gemini CLI:</strong> <a href="https://geminicli.com/docs/" target="_blank" rel="noopener">Gemini CLI Docs</a></li>
|
||
<li><strong>Codex CLI:</strong> <a href="https://github.com/openai/codex" target="_blank" rel="noopener">Codex GitHub</a></li>
|
||
</ul>
|
||
<p>Once you're comfortable with basic prompting and code generation, come back and give Impeccable a try.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-item">
|
||
<summary class="faq-question">Is Impeccable free?</summary>
|
||
<div class="faq-answer">
|
||
<p>Yes. Everything is <strong>Apache 2.0</strong>: skills, commands, CLI, and the detection engine. Fully open source, free for everyone.</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
</div><!-- /.changelog-faq-row -->
|
||
|
||
<!-- PARTNERSHIPS -->
|
||
<section class="consulting-section" id="consulting">
|
||
<div class="consulting-content" data-reveal>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="consulting-text">
|
||
<h2 class="consulting-title">Work with me</h2>
|
||
<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>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="consulting-actions">
|
||
<a href="mailto:paul@renaissance-geek.ai" class="btn btn-primary">
|
||
<span>Get in touch</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Fragment slot="scripts">
|
||
<script>
|
||
import '../scripts/app.js';
|
||
</script>
|
||
</Fragment>
|
||
|
||
</Base>
|