From 98e673b8f47dba6358e4390a13d6901dbad21fca Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Sun, 11 Jan 2026 15:27:40 -0800
Subject: [PATCH] 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>
---
 public/cheatsheet.html | 288 +++++++++++++++++++++++++++++++++++++++++
 public/css/main.css    |  11 ++
 public/index.html      |   3 +-
 server/index.js        |   2 +
 4 files changed, 303 insertions(+), 1 deletion(-)
 create mode 100644 public/cheatsheet.html
diff --git a/public/cheatsheet.html b/public/cheatsheet.html
new file mode 100644
index 000000000..49ac0968d
--- /dev/null
+++ b/public/cheatsheet.html
@@ -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">&larr; 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> &middot; 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>
diff --git a/public/css/main.css b/public/css/main.css
index 56643e7a2..dd115eeeb 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -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;
diff --git a/public/index.html b/public/index.html
index 091ede891..34b309c76 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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 &rarr;</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>
diff --git a/server/index.js b/server/index.js
index 0046d1c60..c0933dfec 100644
--- a/server/index.js
+++ b/server/index.js
@@ -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) => {
