1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <!-- Google tag (gtag.js) -->
5 <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEXGHC7V34"></script>
6 <script>
7 window.dataLayer = window.dataLayer || [];
8 function gtag(){dataLayer.push(arguments);}
9 gtag('js', new Date());
10 gtag('config', 'G-TEXGHC7V34');
11 </script>
12
13 <meta charset="UTF-8">
14 <meta name="viewport" content="width=device-width, initial-scale=1.0">
15 <title>Impeccable Command Cheatsheet</title>
16 <meta name="description" content="Quick reference for all 18 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
17 <link rel="icon" type="image/svg+xml" href="./favicon.svg">
18 <link rel="preconnect" href="https://fonts.googleapis.com">
19 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20 <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">
21 <link rel="stylesheet" href="./css/sub-pages.css">
22 <style>
23 :root {
24 --font-body: 'Instrument Sans', system-ui, sans-serif;
25 --font-mono: 'Space Grotesk', monospace;
26 --color-ink: #1a1a1a;
27 --color-paper: #fafafa;
28 --color-mist: #e5e5e5;
29 --color-ash: #737373;
30 --color-accent: #d946ef;
31 }
32
33 @media (prefers-color-scheme: dark) {
34 :root {
35 --color-ink: #fafafa;
36 --color-paper: #1a1a1a;
37 --color-mist: #333;
38 --color-ash: #a3a3a3;
39 }
40 }
41
42 body {
43 font-family: var(--font-body);
44 background: var(--color-paper);
45 color: var(--color-ink);
46 line-height: 1.5;
47 }
48
49 .cheatsheet-page-header,
50 main,
51 footer {
52 max-width: 900px;
53 margin-left: auto;
54 margin-right: auto;
55 padding-left: 2rem;
56 padding-right: 2rem;
57 }
58
59 .cheatsheet-page-header {
60 margin-top: 2rem;
61 margin-bottom: 2rem;
62 padding-bottom: 1.5rem;
63 border-bottom: 1px solid var(--color-mist);
64 }
65
66 h1 {
67 font-size: 1.5rem;
68 font-weight: 600;
69 margin-bottom: 0.25rem;
70 }
71
72 .subtitle {
73 color: var(--color-ash);
74 font-size: 0.875rem;
75 }
76
77 .category {
78 margin-bottom: 2rem;
79 }
80
81 .category-header {
82 font-size: 0.6875rem;
83 font-weight: 600;
84 text-transform: uppercase;
85 letter-spacing: 0.1em;
86 color: var(--color-ash);
87 margin-bottom: 0.75rem;
88 padding-bottom: 0.5rem;
89 border-bottom: 1px solid var(--color-mist);
90 }
91
92 .commands-grid {
93 display: grid;
94 gap: 0.75rem;
95 }
96
97 .command {
98 display: grid;
99 grid-template-columns: 120px 1fr;
100 gap: 1rem;
101 padding: 0.75rem 0;
102 border-bottom: 1px solid var(--color-mist);
103 }
104
105 .command:last-child {
106 border-bottom: none;
107 }
108
109 .command-name {
110 font-family: var(--font-mono);
111 font-weight: 600;
112 font-size: 0.9375rem;
113 color: var(--color-ink);
114 }
115
116 .command-desc {
117 font-size: 0.875rem;
118 color: var(--color-ink);
119 }
120
121 .command-meta {
122 font-size: 0.75rem;
123 color: var(--color-ash);
124 margin-top: 0.25rem;
125 }
126
127 .command-meta code {
128 font-family: var(--font-mono);
129 font-size: 0.6875rem;
130 background: var(--color-mist);
131 padding: 1px 4px;
132 border-radius: 2px;
133 }
134
135 footer {
136 margin-top: 3rem;
137 padding-top: 1.5rem;
138 border-top: 1px solid var(--color-mist);
139 font-size: 0.75rem;
140 color: var(--color-ash);
141 text-align: center;
142 }
143
144 footer a {
145 color: var(--color-accent);
146 text-decoration: none;
147 }
148
149 @media print {
150 body { padding: 1rem; }
151 .site-header { display: none; }
152 .cheatsheet-page-header,
153 main,
154 footer { max-width: none; padding-left: 0; padding-right: 0; }
155 footer { display: none; }
156 .command { page-break-inside: avoid; }
157 }
158
159 @media (max-width: 600px) {
160 .command {
161 grid-template-columns: 1fr;
162 gap: 0.25rem;
163 }
164 }
165 </style>
166</head>
167<body class="sub-page">
168 <!-- site-header v1 -->
169 <header class="site-header" data-site-header>
170 <a href="/" class="site-header-brand" aria-label="Impeccable home">
171 <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>
172 <span class="site-header-brand-name">Impeccable</span>
173 </a>
174 <div class="site-header-right">
175 <nav class="site-header-nav" aria-label="Primary">
176 <a href="/" data-nav="home">Home</a>
177 <a href="/skills" data-nav="docs">Docs</a>
178 <a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
179 <a href="/visual-mode" data-nav="visual-mode">Visual Mode</a>
180 </nav>
181 <a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 18k stars">
182 <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>
183 <span class="site-header-github-label">18k</span>
184 <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>
185 </a>
186 </div>
187 </header>
188
189 <div class="cheatsheet-page-header">
190 <h1>Impeccable Commands</h1>
191 <p class="subtitle">Quick reference for all 18 design commands</p>
192 </div>
193
194 <main id="commands-container">
195 <p style="color: var(--color-ash);">Loading commands...</p>
196 </main>
197
198 <footer>
199 <p><a href="https://impeccable.style">impeccable.style</a> · Design fluency for AI harnesses</p>
200 </footer>
201
202 <script type="module">
203 const categoryLabels = {
204 'diagnostic': 'Diagnostic',
205 'quality': 'Quality',
206 'intensity': 'Intensity',
207 'adaptation': 'Adaptation',
208 'enhancement': 'Enhancement',
209 'system': 'System'
210 };
211
212 const categoryOrder = ['diagnostic', 'quality', 'intensity', 'adaptation', 'enhancement', 'system'];
213
214 const commandCategories = {
215 'impeccable': 'system',
216 'audit': 'diagnostic',
217 'critique': 'diagnostic',
218 'polish': 'quality',
219 'optimize': 'quality',
220 'harden': 'quality',
221 'clarify': 'adaptation',
222 'quieter': 'intensity',
223 'bolder': 'intensity',
224 'distill': 'adaptation',
225 'animate': 'enhancement',
226 'colorize': 'enhancement',
227 'delight': 'enhancement',
228 'adapt': 'adaptation',
229 'typeset': 'enhancement',
230 'layout': 'enhancement',
231 'overdrive': 'enhancement'
232 };
233
234 const commandRelationships = {
235 'impeccable': { flow: 'One-time project context gathering' },
236 'audit': { leadsTo: ['harden', 'optimize', 'adapt', 'clarify'], flow: 'Technical quality audit' },
237 'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'layout'], flow: 'UX and design review' },
238 'polish': { flow: 'Final pass and design system alignment' },
239 'optimize': { flow: 'Performance improvements' },
240 'harden': { combinesWith: ['optimize'], flow: 'Edge cases, onboarding, and error handling' },
241 'clarify': { combinesWith: ['polish', 'adapt'], flow: 'Improve UX copy' },
242 'quieter': { pairs: 'bolder', flow: 'Tone down bold designs' },
243 'bolder': { pairs: 'quieter', flow: 'Amplify timid designs' },
244 'distill': { combinesWith: ['quieter', 'polish'], flow: 'Strip to essence' },
245 'animate': { combinesWith: ['delight'], flow: 'Add motion' },
246 'colorize': { combinesWith: ['bolder', 'delight'], flow: 'Add strategic color' },
247 'delight': { combinesWith: ['bolder', 'animate'], flow: 'Add personality' },
248 'adapt': { combinesWith: ['polish', 'clarify'], flow: 'Different devices/contexts' },
249 'typeset': { combinesWith: ['bolder', 'polish'], flow: 'Fix typography' },
250 'layout': { combinesWith: ['distill', 'adapt'], flow: 'Fix layout & spacing' },
251 'overdrive': { combinesWith: ['animate', 'delight'], flow: 'Technically extraordinary effects' }
252 };
253
254 async function loadCommands() {
255 try {
256 const response = await fetch('/api/commands');
257 const commands = await response.json();
258
259 // Group by category
260 const grouped = {};
261 commands.forEach(cmd => {
262 const cat = commandCategories[cmd.id] || 'other';
263 if (!grouped[cat]) grouped[cat] = [];
264 grouped[cat].push(cmd);
265 });
266
267 // Render
268 const container = document.getElementById('commands-container');
269 let html = '';
270
271 categoryOrder.forEach(cat => {
272 if (grouped[cat] && grouped[cat].length > 0) {
273 html += `<section class="category">
274 <h2 class="category-header">${categoryLabels[cat]}</h2>
275 <div class="commands-grid">`;
276
277 grouped[cat].forEach(cmd => {
278 const rel = commandRelationships[cmd.id];
279 let metaHtml = '';
280
281 if (rel) {
282 if (rel.pairs) {
283 metaHtml = `Pairs with <code>/${rel.pairs}</code>`;
284 } else if (rel.leadsTo) {
285 metaHtml = `Leads to ${rel.leadsTo.map(c => `<code>/${c}</code>`).join(', ')}`;
286 } else if (rel.combinesWith) {
287 metaHtml = `Combines with ${rel.combinesWith.map(c => `<code>/${c}</code>`).join(', ')}`;
288 }
289 }
290
291 const isBeta = cmd.id === 'overdrive';
292 html += `<div class="command">
293 <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>
294 <div class="command-info">
295 <div class="command-desc">${cmd.description}</div>
296 ${metaHtml ? `<div class="command-meta">${metaHtml}</div>` : ''}
297 </div>
298 </div>`;
299 });
300
301 html += `</div></section>`;
302 }
303 });
304
305 container.innerHTML = html;
306 } catch (error) {
307 console.error('Error loading commands:', error);
308 document.getElementById('commands-container').innerHTML =
309 '<p style="color: red;">Error loading commands. Please try refreshing.</p>';
310 }
311 }
312
313 loadCommands();
314 </script>
315</body>
316</html>