mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul Bakaus
80d7502737
Builds on the /skills overview landing. Every skill detail page now lives
inside the same sticky-sidebar shell, with the active skill marked via
aria-current and pulled out of the list with a 2px accent border.
- scripts/build-sub-pages.js: detail pages now wrap the .skill-detail
body in wrapInDocsLayout() and pass currentSkillId into the sidebar
renderer so the active row is marked
- public/css/sub-pages.css sidebar pass:
- Narrow from 260px to 200px (was way too wide for the content)
- Drop the redundant "Skills" label at the top (it was visually
competing with the category titles); keep the node for a11y via
visually-hidden styling
- Group titles shrink to 0.625rem mono uppercase in --color-ash so
they read as quiet signposts, not headings
- Tighten item line-height to 1.5 and vertical padding to 3px
- Replace the box-shadow inset accent with a border-left accent on
the active item, leaving it visually pulled left
- Simplify .skill-detail sizing so it works inside .skills-main
without its own max-width / padding
- Ban em dashes in user-facing copy everywhere:
- Rewrite 9 copy lines in index.html, 2 title tags in gallery.html,
inline category descriptions, the /skills overview lede + how-to,
two skills-generator comments, one aria-label, and the page titles
for Skills and skill detail pages
- New validateNoEmDashes step in scripts/build.js scans content/site,
public/*.html, and the sub-page generator sources. Build fails on
any — or — in user-facing copy. Uses commas, colons, periods,
or parentheses instead
Build green: all 26 HTML entrypoints bundle cleanly, all four hand-authored
pages retain the shared site header, anti-pattern rules still match
SKILL.md, zero em dashes.
324 lines
12 KiB
HTML
324 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TEXGHC7V34"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-TEXGHC7V34');
|
|
</script>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Impeccable Command Cheatsheet</title>
|
|
<meta name="description" content="Quick reference for all 22 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
|
|
<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&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./css/sub-pages.css">
|
|
<style>
|
|
:root {
|
|
--font-body: 'Instrument Sans', system-ui, sans-serif;
|
|
--font-mono: 'Space Grotesk', monospace;
|
|
--color-ink: #1a1a1a;
|
|
--color-paper: #fafafa;
|
|
--color-mist: #e5e5e5;
|
|
--color-ash: #737373;
|
|
--color-accent: #d946ef;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-ink: #fafafa;
|
|
--color-paper: #1a1a1a;
|
|
--color-mist: #333;
|
|
--color-ash: #a3a3a3;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--color-paper);
|
|
color: var(--color-ink);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.cheatsheet-page-header,
|
|
main,
|
|
footer {
|
|
max-width: 900px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.cheatsheet-page-header {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--color-ash);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.category {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.category-header {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.commands-grid {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.command {
|
|
display: grid;
|
|
grid-template-columns: 120px 1fr;
|
|
gap: 1rem;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.command:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.command-name {
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.command-desc {
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.command-meta {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.command-meta code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 3rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--color-mist);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
text-align: center;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media print {
|
|
body { padding: 1rem; }
|
|
.site-header { display: none; }
|
|
.cheatsheet-page-header,
|
|
main,
|
|
footer { max-width: none; padding-left: 0; padding-right: 0; }
|
|
footer { display: none; }
|
|
.command { page-break-inside: avoid; }
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.command {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="sub-page">
|
|
<!-- 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="/skills" data-nav="skills">Skills</a>
|
|
<a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
|
|
<a href="/tutorials" data-nav="tutorials">Tutorials</a>
|
|
<a href="/gallery" data-nav="gallery">Gallery</a>
|
|
</nav>
|
|
<a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 17k 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">17k</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>
|
|
|
|
<div class="cheatsheet-page-header">
|
|
<h1>Impeccable Commands</h1>
|
|
<p class="subtitle">Quick reference for all 21 design commands</p>
|
|
</div>
|
|
|
|
<main id="commands-container">
|
|
<p style="color: var(--color-ash);">Loading commands...</p>
|
|
</main>
|
|
|
|
<footer>
|
|
<p><a href="https://impeccable.style">impeccable.style</a> · Design fluency for AI harnesses</p>
|
|
</footer>
|
|
|
|
<script type="module">
|
|
const categoryLabels = {
|
|
'diagnostic': 'Diagnostic',
|
|
'quality': 'Quality',
|
|
'intensity': 'Intensity',
|
|
'adaptation': 'Adaptation',
|
|
'enhancement': 'Enhancement',
|
|
'system': 'System'
|
|
};
|
|
|
|
const categoryOrder = ['diagnostic', 'quality', 'intensity', 'adaptation', 'enhancement', 'system'];
|
|
|
|
const commandCategories = {
|
|
'impeccable': 'system',
|
|
'audit': 'diagnostic',
|
|
'critique': 'diagnostic',
|
|
'normalize': 'quality',
|
|
'polish': 'quality',
|
|
'optimize': 'quality',
|
|
'harden': 'quality',
|
|
'clarify': 'adaptation',
|
|
'quieter': 'intensity',
|
|
'bolder': 'intensity',
|
|
'distill': 'adaptation',
|
|
'animate': 'enhancement',
|
|
'colorize': 'enhancement',
|
|
'delight': 'enhancement',
|
|
'extract': 'system',
|
|
'adapt': 'adaptation',
|
|
'onboard': 'enhancement',
|
|
'typeset': 'enhancement',
|
|
'arrange': 'enhancement',
|
|
'overdrive': 'enhancement'
|
|
};
|
|
|
|
const commandRelationships = {
|
|
'impeccable': { flow: 'One-time project context gathering' },
|
|
'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Technical quality audit' },
|
|
'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'arrange'], flow: 'UX and design review' },
|
|
'normalize': { combinesWith: ['clarify', 'adapt'], flow: 'Align with design system' },
|
|
'polish': { flow: 'Final pass before shipping' },
|
|
'optimize': { flow: 'Performance improvements' },
|
|
'harden': { combinesWith: ['optimize'], flow: 'Error handling & edge cases' },
|
|
'clarify': { combinesWith: ['normalize', 'adapt'], flow: 'Improve UX copy' },
|
|
'quieter': { pairs: 'bolder', flow: 'Tone down bold designs' },
|
|
'bolder': { pairs: 'quieter', flow: 'Amplify timid designs' },
|
|
'distill': { combinesWith: ['quieter', 'normalize'], flow: 'Strip to essence' },
|
|
'animate': { combinesWith: ['delight'], flow: 'Add motion' },
|
|
'colorize': { combinesWith: ['bolder', 'delight'], flow: 'Add strategic color' },
|
|
'delight': { combinesWith: ['bolder', 'animate'], flow: 'Add personality' },
|
|
'extract': { flow: 'Create design system elements' },
|
|
'adapt': { combinesWith: ['normalize', 'clarify'], flow: 'Different devices/contexts' },
|
|
'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Onboarding & empty states' },
|
|
'typeset': { combinesWith: ['bolder', 'normalize'], flow: 'Fix typography' },
|
|
'arrange': { combinesWith: ['distill', 'adapt'], flow: 'Fix layout & spacing' },
|
|
'overdrive': { combinesWith: ['animate', 'delight'], flow: 'Technically extraordinary effects' }
|
|
};
|
|
|
|
async function loadCommands() {
|
|
try {
|
|
const response = await fetch('/api/commands');
|
|
const commands = await response.json();
|
|
|
|
// Group by category
|
|
const grouped = {};
|
|
commands.forEach(cmd => {
|
|
const cat = commandCategories[cmd.id] || 'other';
|
|
if (!grouped[cat]) grouped[cat] = [];
|
|
grouped[cat].push(cmd);
|
|
});
|
|
|
|
// Render
|
|
const container = document.getElementById('commands-container');
|
|
let html = '';
|
|
|
|
categoryOrder.forEach(cat => {
|
|
if (grouped[cat] && grouped[cat].length > 0) {
|
|
html += `<section class="category">
|
|
<h2 class="category-header">${categoryLabels[cat]}</h2>
|
|
<div class="commands-grid">`;
|
|
|
|
grouped[cat].forEach(cmd => {
|
|
const rel = commandRelationships[cmd.id];
|
|
let metaHtml = '';
|
|
|
|
if (rel) {
|
|
if (rel.pairs) {
|
|
metaHtml = `Pairs with <code>/${rel.pairs}</code>`;
|
|
} else if (rel.leadsTo) {
|
|
metaHtml = `Leads to ${rel.leadsTo.map(c => `<code>/${c}</code>`).join(', ')}`;
|
|
} else if (rel.combinesWith) {
|
|
metaHtml = `Combines with ${rel.combinesWith.map(c => `<code>/${c}</code>`).join(', ')}`;
|
|
}
|
|
}
|
|
|
|
const isBeta = cmd.id === 'overdrive';
|
|
html += `<div class="command">
|
|
<div class="command-name">/${cmd.id}${isBeta ? ' <span style="font-size:0.55rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent,#c8956c);border:1px solid;border-radius:3px;padding:1px 5px;vertical-align:middle;margin-left:4px;">BETA</span>' : ''}</div>
|
|
<div class="command-info">
|
|
<div class="command-desc">${cmd.description}</div>
|
|
${metaHtml ? `<div class="command-meta">${metaHtml}</div>` : ''}
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
html += `</div></section>`;
|
|
}
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
} catch (error) {
|
|
console.error('Error loading commands:', error);
|
|
document.getElementById('commands-container').innerHTML =
|
|
'<p style="color: red;">Error loading commands. Please try refreshing.</p>';
|
|
}
|
|
}
|
|
|
|
loadCommands();
|
|
</script>
|
|
</body>
|
|
</html>
|