mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Add standalone command cheatsheet page
- Create /cheatsheet with all 17 commands grouped by category - Clean, scannable layout with command relationships - Print-friendly styling, dark mode support - Add server route for cheatsheet page - Link from Commands section and footer Addresses user feedback requesting a quick reference doc for practical command usage. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
d56a9fc746
commit
98e673b8f4
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 17 Impeccable commands. Print-friendly cheatsheet for design fluency in AI coding tools.">
|
||||
<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=Instrument+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-paper);
|
||||
color: var(--color-ink);
|
||||
line-height: 1.5;
|
||||
padding: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
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;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.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; max-width: none; }
|
||||
.back-link { display: none; }
|
||||
footer { display: none; }
|
||||
.command { page-break-inside: avoid; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.command {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Impeccable Commands</h1>
|
||||
<p class="subtitle">Quick reference for all 17 design commands</p>
|
||||
<a href="/" class="back-link">← Back to impeccable.style</a>
|
||||
</header>
|
||||
|
||||
<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 coding tools</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 = {
|
||||
'teach-impeccable': 'system',
|
||||
'audit': 'diagnostic',
|
||||
'critique': 'diagnostic',
|
||||
'normalize': 'quality',
|
||||
'polish': 'quality',
|
||||
'optimize': 'quality',
|
||||
'harden': 'quality',
|
||||
'clarify': 'adaptation',
|
||||
'quieter': 'intensity',
|
||||
'bolder': 'intensity',
|
||||
'simplify': 'adaptation',
|
||||
'animate': 'enhancement',
|
||||
'colorize': 'enhancement',
|
||||
'delight': 'enhancement',
|
||||
'extract': 'system',
|
||||
'adapt': 'adaptation',
|
||||
'onboard': 'system'
|
||||
};
|
||||
|
||||
const commandRelationships = {
|
||||
'teach-impeccable': { flow: 'One-time project context gathering' },
|
||||
'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Technical quality audit' },
|
||||
'critique': { leadsTo: ['polish', 'simplify', 'bolder', 'quieter'], 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' },
|
||||
'simplify': { 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': { flow: 'Onboarding & empty states' }
|
||||
};
|
||||
|
||||
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(', ')}`;
|
||||
}
|
||||
}
|
||||
|
||||
html += `<div class="command">
|
||||
<div class="command-name">/${cmd.id}</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>
|
||||
@@ -406,6 +406,17 @@ code {
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
.cheatsheet-link {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.cheatsheet-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.section-lead {
|
||||
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
|
||||
line-height: 1.5;
|
||||
|
||||
+2
-1
@@ -200,7 +200,7 @@
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">03</span>
|
||||
<h2 class="section-title">Commands in Action</h2>
|
||||
<p class="section-subtitle">See how commands transform your designs</p>
|
||||
<p class="section-subtitle">See how commands transform your designs <a href="/cheatsheet" class="cheatsheet-link">View cheatsheet →</a></p>
|
||||
</div>
|
||||
|
||||
<div class="commands-gallery">
|
||||
@@ -515,6 +515,7 @@
|
||||
<div class="footer-links">
|
||||
<a href="#antidote">Anti-Patterns</a>
|
||||
<a href="#commands-section">Commands</a>
|
||||
<a href="/cheatsheet">Cheatsheet</a>
|
||||
<a href="#casestudies">Case Studies</a>
|
||||
<a href="#downloads">Downloads</a>
|
||||
<a href="https://github.com/pbakaus/impeccable">GitHub</a>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { serve, file } from "bun";
|
||||
import homepage from "../public/index.html";
|
||||
import cheatsheet from "../public/cheatsheet.html";
|
||||
import {
|
||||
getSkills,
|
||||
getCommands,
|
||||
@@ -14,6 +15,7 @@ const server = serve({
|
||||
|
||||
routes: {
|
||||
"/": homepage,
|
||||
"/cheatsheet": cheatsheet,
|
||||
|
||||
// Static assets - all public subdirectories
|
||||
"/assets/*": async (req) => {
|
||||
|
||||
Reference in New Issue
Block a user