mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 16:46:31 +03:00
Paul BakausandClaude Fable 5
90f9eeb99b
The public repo keeps the OSS promise surface: skill, CLI, extension, tests, and the provider build. The site, labs, concept/composition catalogs, image pipeline, Cloudflare functions, and authoring guide move to pbakaus/impeccable-site. concept-seed tests run against a synthetic fixture catalog; the plugin icon and skill categories moved in-repo; build validation narrows to README prose and non-site counts; release notes read from a sibling impeccable-site checkout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
584 lines
31 KiB
HTML
584 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>/impeccable audit | Impeccable</title>
|
|
<meta name="description" content="Five-dimension technical quality check with P0 to P3 severity.">
|
|
<meta name="theme-color" content="#fafafa">
|
|
<link rel="canonical" href="https://impeccable.style/docs/audit">
|
|
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/sub-pages.css">
|
|
|
|
</head>
|
|
<body class="sub-page skills-layout-page">
|
|
<a href="#main" class="skip-link">Skip to content</a>
|
|
<!-- site-header v1 -->
|
|
<header class="site-header" data-site-header>
|
|
<a href="/" class="site-header-brand" aria-label="Impeccable home">
|
|
<svg class="site-header-brand-logo" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="6" fill="#1a1a1a"/><text x="16" y="24" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="500" fill="#f5f3ef" text-anchor="middle">/</text></svg>
|
|
<span class="site-header-brand-name">Impeccable</span>
|
|
</a>
|
|
<div class="site-header-right">
|
|
<nav class="site-header-nav" aria-label="Primary">
|
|
<a href="/" data-nav="home">Home</a>
|
|
<a href="/designing" data-nav="designing">Designing</a>
|
|
<a href="/docs" data-nav="docs" aria-current="page">Docs</a>
|
|
<a href="/slop" data-nav="slop">Slop</a>
|
|
<a href="/live-mode" data-nav="live">Live</a>
|
|
</nav>
|
|
<a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 21k stars">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
|
|
<span class="site-header-github-label">21k</span>
|
|
<svg class="site-header-github-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.76 6.36L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.24-.91L12 2z"/></svg>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<main id="main">
|
|
|
|
<div class="skills-layout">
|
|
|
|
<aside class="skills-sidebar" aria-label="Documentation">
|
|
<button class="skills-sidebar-toggle" type="button" aria-expanded="false" aria-controls="skills-sidebar-inner">
|
|
<span class="skills-sidebar-toggle-label">/audit</span>
|
|
<svg class="skills-sidebar-toggle-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
|
|
</button>
|
|
<div class="skills-sidebar-inner" id="skills-sidebar-inner">
|
|
<p class="skills-sidebar-label">Docs</p>
|
|
|
|
<div class="skills-sidebar-group" data-category="tutorials">
|
|
<p class="skills-sidebar-group-title">Tutorials</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/tutorials/getting-started">Getting started</a></li>
|
|
<li><a href="/tutorials/iterate-live">Iterate on UI with Live Mode</a></li>
|
|
<li><a href="/tutorials/brand-vs-product">Brand vs product, pick a register</a></li>
|
|
<li><a href="/tutorials/critique-with-overlay">Critique with the visual overlay</a></li>
|
|
</ul>
|
|
</div>
|
|
<hr class="skills-sidebar-divider">
|
|
|
|
<div class="skills-sidebar-group" data-category="create">
|
|
<p class="skills-sidebar-group-title">Create</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/impeccable">/impeccable</a></li>
|
|
<li><a href="/docs/craft">craft</a></li>
|
|
<li><a href="/docs/shape">shape</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="evaluate">
|
|
<p class="skills-sidebar-group-title">Evaluate</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/audit" aria-current="page">audit</a></li>
|
|
<li><a href="/docs/critique">critique</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="refine">
|
|
<p class="skills-sidebar-group-title">Refine</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/animate">animate</a></li>
|
|
<li><a href="/docs/bolder">bolder</a></li>
|
|
<li><a href="/docs/colorize">colorize</a></li>
|
|
<li><a href="/docs/delight">delight</a></li>
|
|
<li><a href="/docs/layout">layout</a></li>
|
|
<li><a href="/docs/overdrive">overdrive</a></li>
|
|
<li><a href="/docs/quieter">quieter</a></li>
|
|
<li><a href="/docs/typeset">typeset</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="simplify">
|
|
<p class="skills-sidebar-group-title">Simplify</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/adapt">adapt</a></li>
|
|
<li><a href="/docs/clarify">clarify</a></li>
|
|
<li><a href="/docs/distill">distill</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="harden">
|
|
<p class="skills-sidebar-group-title">Harden</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/harden">harden</a></li>
|
|
<li><a href="/docs/onboard">onboard</a></li>
|
|
<li><a href="/docs/optimize">optimize</a></li>
|
|
<li><a href="/docs/polish">polish</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skills-sidebar-group" data-category="system">
|
|
<p class="skills-sidebar-group-title">System</p>
|
|
<ul class="skills-sidebar-list">
|
|
<li><a href="/docs/document">document</a></li>
|
|
<li><a href="/docs/extract">extract</a></li>
|
|
<li><a href="/docs/live">live</a></li>
|
|
<li><a href="/docs/teach">teach</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</aside>
|
|
<div class="skills-main">
|
|
|
|
<article class="skill-detail">
|
|
<div class="skill-detail-hero skill-detail-hero--has-demo">
|
|
<header class="skill-detail-header">
|
|
<p class="skill-detail-eyebrow"><a href="/docs">Docs</a> / Evaluate</p>
|
|
<h1 class="skill-detail-title"><span class="skill-detail-title-namespace"><span class="skill-detail-title-slash">/</span>impeccable</span>audit</h1>
|
|
<p class="skill-detail-tagline">Five-dimension technical quality check with P0 to P3 severity.</p>
|
|
|
|
<div class="skill-meta-strip">
|
|
<span class="skill-meta-chip skill-meta-category" data-category="evaluate">Evaluate</span>
|
|
<span class="skill-meta-chip">User-invocable</span>
|
|
<span class="skill-meta-chip skill-meta-args">[area (feature, page, component...)]</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="skill-demo" aria-label="Before and after demo">
|
|
<div class="split-comparison" data-demo="skill-audit">
|
|
<p class="skill-demo-eyebrow">Drag or hover to compare</p>
|
|
<div class="split-container">
|
|
<div class="split-before">
|
|
<div class="split-content">
|
|
<div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px;">
|
|
<div style="padding: 12px; background: #f8f8f8; border-radius: 4px;">
|
|
<div style="font-size: 12px; color: #aaa;">Welcome message</div>
|
|
<button style="margin-top: 8px; padding: 4px 8px; font-size: 11px; background: #ddd; border: none; border-radius: 2px; color: #888;">click here</button>
|
|
</div>
|
|
<div style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px;">
|
|
<div style="font-size: 15px; color: rgba(255,255,255,0.7);">Featured Item</div>
|
|
</div>
|
|
<div style="display: flex; gap: 4px;">
|
|
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">←</button>
|
|
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">→</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="split-after">
|
|
<div class="split-content">
|
|
<div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px;">
|
|
<div style="padding: 12px; background: #fff8f8; border: 1px solid #ffcccc; border-radius: 4px; position: relative;">
|
|
<div style="position: absolute; top: -8px; right: 8px; background: #ff4444; color: white; font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 600;">CONTRAST</div>
|
|
<div style="font-size: 12px; color: #aaa;">Welcome message</div>
|
|
<button style="margin-top: 8px; padding: 4px 8px; font-size: 11px; background: #ddd; border: none; border-radius: 2px; color: #888;">click here</button>
|
|
</div>
|
|
<div style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; border: 2px solid #ff9800; position: relative;">
|
|
<div style="position: absolute; top: -8px; right: 8px; background: #ff9800; color: white; font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 600;">READABILITY</div>
|
|
<div style="font-size: 15px; color: rgba(255,255,255,0.7);">Featured Item</div>
|
|
</div>
|
|
<div style="display: flex; gap: 4px; padding: 4px; background: #fff3e0; border: 1px solid #ffcc80; border-radius: 4px; position: relative;">
|
|
<div style="position: absolute; top: -8px; right: 8px; background: #ff9800; color: white; font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 600;">TOUCH TARGET</div>
|
|
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">←</button>
|
|
<button style="width: 20px; height: 20px; font-size: 10px; background: #eee; border: none;">→</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="split-divider"></div>
|
|
</div>
|
|
<div class="split-labels">
|
|
<span class="split-label-item" data-point="before">Before</span>
|
|
<p class="skill-demo-caption">Hidden issues → Identified problems with recommendations</p>
|
|
<span class="split-label-item" data-point="after">After</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="skill-detail-editorial prose">
|
|
<div class="docs-viz-hero">
|
|
<div class="docs-viz-report">
|
|
<div class="docs-viz-report-head">
|
|
<div>
|
|
<div class="docs-viz-report-title">/impeccable audit the checkout flow</div>
|
|
<div class="docs-viz-report-target">src/checkout/**</div>
|
|
</div>
|
|
<div class="docs-viz-report-score">
|
|
<span class="docs-viz-report-score-num">2.6</span>
|
|
<span class="docs-viz-report-score-out">/ 4</span>
|
|
</div>
|
|
</div>
|
|
<div class="docs-viz-report-dims">
|
|
<div class="docs-viz-report-dim">
|
|
<span class="docs-viz-report-dim-name">Accessibility</span>
|
|
<span class="docs-viz-report-dim-bar"><span class="docs-viz-report-dim-fill docs-viz-report-dim-fill--fail" style="width:50%"></span></span>
|
|
<span class="docs-viz-report-dim-score">2 / 4</span>
|
|
</div>
|
|
<div class="docs-viz-report-dim">
|
|
<span class="docs-viz-report-dim-name">Performance</span>
|
|
<span class="docs-viz-report-dim-bar"><span class="docs-viz-report-dim-fill" style="width:75%"></span></span>
|
|
<span class="docs-viz-report-dim-score">3 / 4</span>
|
|
</div>
|
|
<div class="docs-viz-report-dim">
|
|
<span class="docs-viz-report-dim-name">Theming</span>
|
|
<span class="docs-viz-report-dim-bar"><span class="docs-viz-report-dim-fill docs-viz-report-dim-fill--warn" style="width:62%"></span></span>
|
|
<span class="docs-viz-report-dim-score">2.5 / 4</span>
|
|
</div>
|
|
<div class="docs-viz-report-dim">
|
|
<span class="docs-viz-report-dim-name">Responsive</span>
|
|
<span class="docs-viz-report-dim-bar"><span class="docs-viz-report-dim-fill" style="width:75%"></span></span>
|
|
<span class="docs-viz-report-dim-score">3 / 4</span>
|
|
</div>
|
|
<div class="docs-viz-report-dim">
|
|
<span class="docs-viz-report-dim-name">Anti-patterns</span>
|
|
<span class="docs-viz-report-dim-bar"><span class="docs-viz-report-dim-fill docs-viz-report-dim-fill--warn" style="width:70%"></span></span>
|
|
<span class="docs-viz-report-dim-score">2.8 / 4</span>
|
|
</div>
|
|
</div>
|
|
<div class="docs-viz-report-issues">
|
|
<span class="docs-viz-report-sev docs-viz-report-sev--p0">P0<span class="docs-viz-report-sev-n">2</span></span>
|
|
<span class="docs-viz-report-sev docs-viz-report-sev--p1">P1<span class="docs-viz-report-sev-n">5</span></span>
|
|
<span class="docs-viz-report-sev docs-viz-report-sev--p2">P2<span class="docs-viz-report-sev-n">8</span></span>
|
|
<span class="docs-viz-report-sev docs-viz-report-sev--p3">P3<span class="docs-viz-report-sev-n">14</span></span>
|
|
</div>
|
|
</div>
|
|
<p class="docs-viz-caption">Five dimensions scored 0 to 4, each finding tagged P0 (blocks release) to P3 (polish). Audit documents; it doesn't fix. Route the findings into <code>/impeccable harden</code>, <code>/impeccable polish</code>, or <code>/impeccable optimize</code>.</p>
|
|
</div>
|
|
|
|
<h2 id="when-to-use-it">When to use it</h2>
|
|
<p><code>/impeccable audit</code> is the technical counterpart to <code>/impeccable critique</code>. Where <code>/impeccable critique</code> asks "does this feel right", <code>/impeccable audit</code> asks "does this hold up". It runs accessibility, performance, theming, responsive design, and anti-pattern checks against the implementation, scores each dimension 0 to 4, and produces a plan with P0 to P3 severity ratings.</p>
|
|
<p>Use it before shipping, during a quality sprint, or whenever a tech lead says "we should really look at accessibility".</p>
|
|
<h2 id="how-it-works">How it works</h2>
|
|
<p>The skill scans your code across five dimensions:</p>
|
|
<ol>
|
|
<li><strong>Accessibility</strong>: WCAG contrast, ARIA, keyboard nav, semantic HTML, form labels.</li>
|
|
<li><strong>Performance</strong>: layout thrashing, expensive animations, missing lazy loading, bundle weight.</li>
|
|
<li><strong>Theming</strong>: hard-coded colors, dark mode coverage, token consistency.</li>
|
|
<li><strong>Responsive</strong>: breakpoint behavior, touch targets, mobile viewport handling.</li>
|
|
<li><strong>Anti-patterns</strong>: the same deterministic 25 checks the detector runs.</li>
|
|
</ol>
|
|
<p>Each dimension gets a 0 to 4 score. Each finding gets a severity: P0 blocks the release, P1 should fix this sprint, P2 is next cycle, P3 is polish. You get back a single document you can paste into a ticket tracker.</p>
|
|
<p>Audit does not fix anything. It documents. Route the findings to <code>/impeccable polish</code>, <code>/impeccable harden</code>, or <code>/impeccable optimize</code> depending on the category.</p>
|
|
<h2 id="try-it">Try it</h2>
|
|
<div class="code-block-wrap"><pre class="code-block"><code>/impeccable audit the checkout flow</code></pre><button class="code-block-copy" type="button" data-copy="/impeccable audit the checkout flow" aria-label="Copy to clipboard"></button></div>
|
|
<p>Expected output:</p>
|
|
<div class="code-block-wrap"><pre class="code-block"><code>Accessibility: 2/4 (partial)
|
|
P0: Missing form labels on 4 inputs
|
|
P1: Contrast 3.1:1 on disabled button state
|
|
P2: No visible focus indicator on custom dropdown
|
|
|
|
Performance: 3/4 (good)
|
|
P1: Hero image not lazy-loaded (340KB)
|
|
...</code></pre><button class="code-block-copy" type="button" data-copy="Accessibility: 2/4 (partial)
|
|
P0: Missing form labels on 4 inputs
|
|
P1: Contrast 3.1:1 on disabled button state
|
|
P2: No visible focus indicator on custom dropdown
|
|
|
|
Performance: 3/4 (good)
|
|
P1: Hero image not lazy-loaded (340KB)
|
|
..." aria-label="Copy to clipboard"></button></div>
|
|
<p>Hand the P0s to <code>/impeccable harden</code>, the theming and typography P1s to <code>/impeccable typeset</code> and <code>/impeccable polish</code>, the rest to <code>/impeccable polish</code>.</p>
|
|
<h2 id="pitfalls">Pitfalls</h2>
|
|
<ul>
|
|
<li><strong>Confusing it with <code>/impeccable critique</code>.</strong> Audit is implementation quality. Critique is design quality. Run both for a full picture.</li>
|
|
<li><strong>Fixing P3s before P0s.</strong> The severity scale exists for a reason. Start at the top.</li>
|
|
<li><strong>Skipping the dimensions you think are fine.</strong> Theming and responsive are the ones most people assume are fine until they are not.</li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section class="skill-source-card">
|
|
<header class="skill-source-card-header">
|
|
<span class="skill-source-card-label">reference/audit.md</span>
|
|
<span class="skill-source-card-subtitle">Loaded when the impeccable skill routes to this command.</span>
|
|
</header>
|
|
<div class="skill-source-card-body prose">
|
|
<p>Run systematic <strong>technical</strong> quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address.</p>
|
|
<p>This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.</p>
|
|
<h2 id="diagnostic-scan">Diagnostic Scan</h2>
|
|
<p>Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.</p>
|
|
<h3 id="1-accessibility-a11y">1. Accessibility (A11y)</h3>
|
|
<p><strong>Check for</strong>:</p>
|
|
<ul>
|
|
<li><strong>Contrast issues</strong>: Text contrast ratios < 4.5:1 (or 7:1 for AAA)</li>
|
|
<li><strong>Missing ARIA</strong>: Interactive elements without proper roles, labels, or states</li>
|
|
<li><strong>Keyboard navigation</strong>: Missing focus indicators, illogical tab order, keyboard traps</li>
|
|
<li><strong>Semantic HTML</strong>: Improper heading hierarchy, missing landmarks, divs instead of buttons</li>
|
|
<li><strong>Alt text</strong>: Missing or poor image descriptions</li>
|
|
<li><strong>Form issues</strong>: Inputs without labels, poor error messaging, missing required indicators</li>
|
|
</ul>
|
|
<p><strong>Score 0-4</strong>: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA)</p>
|
|
<h3 id="2-performance">2. Performance</h3>
|
|
<p><strong>Check for</strong>:</p>
|
|
<ul>
|
|
<li><strong>Layout thrashing</strong>: Reading/writing layout properties in loops</li>
|
|
<li><strong>Expensive animations</strong>: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames</li>
|
|
<li><strong>Missing optimization</strong>: Images without lazy loading, unoptimized assets, missing will-change</li>
|
|
<li><strong>Bundle size</strong>: Unnecessary imports, unused dependencies</li>
|
|
<li><strong>Render performance</strong>: Unnecessary re-renders, missing memoization</li>
|
|
</ul>
|
|
<p><strong>Score 0-4</strong>: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized)</p>
|
|
<h3 id="3-theming">3. Theming</h3>
|
|
<p><strong>Check for</strong>:</p>
|
|
<ul>
|
|
<li><strong>Hard-coded colors</strong>: Colors not using design tokens</li>
|
|
<li><strong>Broken dark mode</strong>: Missing dark mode variants, poor contrast in dark theme</li>
|
|
<li><strong>Inconsistent tokens</strong>: Using wrong tokens, mixing token types</li>
|
|
<li><strong>Theme switching issues</strong>: Values that don't update on theme change</li>
|
|
</ul>
|
|
<p><strong>Score 0-4</strong>: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly)</p>
|
|
<h3 id="4-responsive-design">4. Responsive Design</h3>
|
|
<p><strong>Check for</strong>:</p>
|
|
<ul>
|
|
<li><strong>Fixed widths</strong>: Hard-coded widths that break on mobile</li>
|
|
<li><strong>Touch targets</strong>: Interactive elements < 44x44px</li>
|
|
<li><strong>Horizontal scroll</strong>: Content overflow on narrow viewports</li>
|
|
<li><strong>Text scaling</strong>: Layouts that break when text size increases</li>
|
|
<li><strong>Missing breakpoints</strong>: No mobile/tablet variants</li>
|
|
</ul>
|
|
<p><strong>Score 0-4</strong>: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)</p>
|
|
<h3 id="5-anti-patterns-critical">5. Anti-Patterns (CRITICAL)</h3>
|
|
<p>Check against ALL the <strong>DON'T</strong> guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).</p>
|
|
<p><strong>Score 0-4</strong>: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design)</p>
|
|
<h2 id="generate-report">Generate Report</h2>
|
|
<h3 id="audit-health-score">Audit Health Score</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Dimension</th>
|
|
<th>Score</th>
|
|
<th>Key Finding</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody><tr>
|
|
<td>1</td>
|
|
<td>Accessibility</td>
|
|
<td>?</td>
|
|
<td>[most critical a11y issue or "--"]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Performance</td>
|
|
<td>?</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Responsive Design</td>
|
|
<td>?</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>Theming</td>
|
|
<td>?</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td>Anti-Patterns</td>
|
|
<td>?</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Total</strong></td>
|
|
<td></td>
|
|
<td><strong>??/20</strong></td>
|
|
<td><strong>[Rating band]</strong></td>
|
|
</tr>
|
|
</tbody></table>
|
|
<p><strong>Rating bands</strong>: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues)</p>
|
|
<h3 id="anti-patterns-verdict">Anti-Patterns Verdict</h3>
|
|
<p><strong>Start here.</strong> Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest.</p>
|
|
<h3 id="executive-summary">Executive Summary</h3>
|
|
<ul>
|
|
<li>Audit Health Score: <strong>??/20</strong> ([rating band])</li>
|
|
<li>Total issues found (count by severity: P0/P1/P2/P3)</li>
|
|
<li>Top 3-5 critical issues</li>
|
|
<li>Recommended next steps</li>
|
|
</ul>
|
|
<h3 id="detailed-findings-by-severity">Detailed Findings by Severity</h3>
|
|
<p>Tag every issue with <strong>P0-P3 severity</strong>:</p>
|
|
<ul>
|
|
<li><strong>P0 Blocking</strong>: Prevents task completion — fix immediately</li>
|
|
<li><strong>P1 Major</strong>: Significant difficulty or WCAG AA violation — fix before release</li>
|
|
<li><strong>P2 Minor</strong>: Annoyance, workaround exists — fix in next pass</li>
|
|
<li><strong>P3 Polish</strong>: Nice-to-fix, no real user impact — fix if time permits</li>
|
|
</ul>
|
|
<p>For each issue, document:</p>
|
|
<ul>
|
|
<li><strong>[P?] Issue name</strong></li>
|
|
<li><strong>Location</strong>: Component, file, line</li>
|
|
<li><strong>Category</strong>: Accessibility / Performance / Theming / Responsive / Anti-Pattern</li>
|
|
<li><strong>Impact</strong>: How it affects users</li>
|
|
<li><strong>WCAG/Standard</strong>: Which standard it violates (if applicable)</li>
|
|
<li><strong>Recommendation</strong>: How to fix it</li>
|
|
<li><strong>Suggested command</strong>: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable document, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset)</li>
|
|
</ul>
|
|
<h3 id="patterns-systemic-issues">Patterns & Systemic Issues</h3>
|
|
<p>Identify recurring problems that indicate systemic gaps rather than one-off mistakes:</p>
|
|
<ul>
|
|
<li>"Hard-coded colors appear in 15+ components, should use design tokens"</li>
|
|
<li>"Touch targets consistently too small (<44px) throughout mobile experience"</li>
|
|
</ul>
|
|
<h3 id="positive-findings">Positive Findings</h3>
|
|
<p>Note what's working well — good practices to maintain and replicate.</p>
|
|
<h2 id="recommended-actions">Recommended Actions</h2>
|
|
<p>List recommended commands in priority order (P0 first, then P1, then P2):</p>
|
|
<ol>
|
|
<li><strong>[P?] <code>/command-name</code></strong> — Brief description (specific context from audit findings)</li>
|
|
<li><strong>[P?] <code>/command-name</code></strong> — Brief description (specific context)</li>
|
|
</ol>
|
|
<p><strong>Rules</strong>: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable document, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset. Map findings to the most appropriate command. End with <code>/impeccable polish</code> as the final step if any fixes were recommended.</p>
|
|
<p>After presenting the summary, tell the user:</p>
|
|
<blockquote>
|
|
<p>You can ask me to run these one at a time, all at once, or in any order you prefer.</p>
|
|
<p>Re-run <code>/impeccable audit</code> after fixes to see your score improve.</p>
|
|
</blockquote>
|
|
<p><strong>IMPORTANT</strong>: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.</p>
|
|
<p><strong>NEVER</strong>:</p>
|
|
<ul>
|
|
<li>Report issues without explaining impact (why does this matter?)</li>
|
|
<li>Provide generic recommendations (be specific and actionable)</li>
|
|
<li>Skip positive findings (celebrate what works)</li>
|
|
<li>Forget to prioritize (everything can't be P0)</li>
|
|
<li>Report false positives without verification</li>
|
|
</ul>
|
|
<p>Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.</p>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Copy buttons on rendered code blocks
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('[data-copy]');
|
|
if (!btn) return;
|
|
const text = btn.getAttribute('data-copy');
|
|
if (!text) return;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
btn.classList.add('is-copied');
|
|
setTimeout(() => btn.classList.remove('is-copied'), 1500);
|
|
}).catch(() => {});
|
|
});
|
|
|
|
// Mobile sidebar toggle (shown on narrow viewports, hidden on desktop).
|
|
document.addEventListener('click', (e) => {
|
|
const toggle = e.target.closest('.skills-sidebar-toggle');
|
|
if (!toggle) return;
|
|
const expanded = toggle.getAttribute('aria-expanded') === 'true';
|
|
toggle.setAttribute('aria-expanded', String(!expanded));
|
|
});
|
|
|
|
// Before/after split-compare: drag on touch, hover OR drag on mouse.
|
|
// Pointer events attach to the padded .split-comparison wrapper so
|
|
// there is a ~20px invisible buffer around the visible box. The
|
|
// divider only snaps back when the pointer leaves that outer buffer.
|
|
(function initSplitCompare() {
|
|
const wrappers = document.querySelectorAll('.split-comparison');
|
|
if (wrappers.length === 0) return;
|
|
const hasHover = matchMedia('(hover: hover)').matches;
|
|
const DEFAULT_POSITION = 50;
|
|
|
|
for (const wrapper of wrappers) {
|
|
const container = wrapper.querySelector('.split-container');
|
|
const splitAfter = wrapper.querySelector('.split-after');
|
|
const splitDivider = wrapper.querySelector('.split-divider');
|
|
if (!container || !splitAfter || !splitDivider) continue;
|
|
|
|
const tanAngle = Math.tan(10 * Math.PI / 180);
|
|
let skewOffset = 8;
|
|
const recalcSkew = () => {
|
|
const r = container.getBoundingClientRect();
|
|
if (r.width > 0 && r.height > 0) {
|
|
skewOffset = 50 * r.height * tanAngle / r.width;
|
|
}
|
|
};
|
|
recalcSkew();
|
|
window.addEventListener('resize', recalcSkew, { passive: true });
|
|
|
|
let targetX = DEFAULT_POSITION;
|
|
let currentX = DEFAULT_POSITION;
|
|
let rafId = null;
|
|
|
|
const paint = (pct) => {
|
|
const x = Math.max(-skewOffset, Math.min(100 + skewOffset, pct));
|
|
splitAfter.style.clipPath =
|
|
`polygon(${x + skewOffset}% 0%, 100% 0%, 100% 100%, ${x - skewOffset}% 100%)`;
|
|
splitDivider.style.left = `${x}%`;
|
|
};
|
|
|
|
const step = () => {
|
|
currentX += (targetX - currentX) * 0.2;
|
|
if (Math.abs(targetX - currentX) < 0.1) {
|
|
currentX = targetX;
|
|
rafId = null;
|
|
} else {
|
|
rafId = requestAnimationFrame(step);
|
|
}
|
|
paint(currentX);
|
|
};
|
|
|
|
const setTarget = (pct) => {
|
|
targetX = pct;
|
|
if (rafId === null) rafId = requestAnimationFrame(step);
|
|
};
|
|
|
|
paint(DEFAULT_POSITION);
|
|
|
|
// Percentage is always relative to the VISIBLE .split-container,
|
|
// not the padded .split-comparison wrapper. The pointer event
|
|
// target is the wrapper but the clip-path math uses the inner box.
|
|
const pctFromClientX = (clientX) => {
|
|
const rect = container.getBoundingClientRect();
|
|
return ((clientX - rect.left) / rect.width) * 100;
|
|
};
|
|
|
|
let hovering = false;
|
|
let dragging = false;
|
|
|
|
wrapper.addEventListener('pointerenter', (e) => {
|
|
if (hasHover && e.pointerType === 'mouse') {
|
|
hovering = true;
|
|
}
|
|
});
|
|
|
|
wrapper.addEventListener('pointerdown', (e) => {
|
|
dragging = true;
|
|
wrapper.setPointerCapture(e.pointerId);
|
|
setTarget(pctFromClientX(e.clientX));
|
|
});
|
|
|
|
wrapper.addEventListener('pointermove', (e) => {
|
|
if (dragging || hovering) {
|
|
setTarget(pctFromClientX(e.clientX));
|
|
}
|
|
});
|
|
|
|
const endDrag = (e) => {
|
|
if (dragging) {
|
|
dragging = false;
|
|
try { wrapper.releasePointerCapture(e.pointerId); } catch {}
|
|
}
|
|
};
|
|
|
|
wrapper.addEventListener('pointerup', endDrag);
|
|
wrapper.addEventListener('pointercancel', endDrag);
|
|
|
|
wrapper.addEventListener('pointerleave', (e) => {
|
|
endDrag(e);
|
|
if (hovering) {
|
|
hovering = false;
|
|
setTarget(DEFAULT_POSITION);
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|