From 68ae6235cebaa3b1a242c867cbab88816a851f58 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Fri, 10 Apr 2026 09:41:07 -0700
Subject: [PATCH] Cap install step body width, restructure FAQ update entry

- Add max-width: 56ch to install-step-body so long descriptions
  don't run edge to edge
- Rewrite FAQ update answer as a scannable list instead of dense
  paragraphs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 public/css/main.css |  1 +
 public/index.html   | 13 +++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index ea681605a..0cacbeca6 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -2918,6 +2918,7 @@ code {
   padding: 0 var(--spacing-xs) var(--spacing-md);
   display: flex;
   flex-direction: column;
+  max-width: 56ch;
 }
 
 .install-step-body .install-path-desc {
diff --git a/public/index.html b/public/index.html
index e2dda6bab..8dfeea6c1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -636,12 +636,13 @@
         <details class="faq-item">
           <summary class="faq-question">How do I update to the latest version?</summary>
           <div class="faq-answer">
-            <p>Run <code>npx skills update</code> from your project root. This pulls the latest skill definitions for all installed skills. Use <code>npx skills check</code> first to see what changed.</p>
-            <p><strong>If the update fails</strong> (e.g. "Failed to update" errors for renamed skills), re-install instead:</p>
-            <div class="code-block-wrap"><pre class="code-block"><code>npx skills add pbakaus/impeccable</code></pre><button class="code-block-copy" type="button" data-copy="npx skills add pbakaus/impeccable" aria-label="Copy to clipboard"></button></div>
-            <p>Then run <code>/impeccable</code> once. It will automatically clean up leftover files from renamed or merged skills.</p>
-            <p>Other update methods: <strong>Claude Code plugin</strong> updates via <code>/plugin</code> in the Discover tab. <strong>Manual ZIP</strong> users can download the latest from above and extract to the project root.</p>
-            <p>Your <code>.impeccable.md</code> design context file is never overwritten. Your project context is preserved across updates.</p>
+            <p>Run <code>npx skills update</code> from your project root.</p>
+            <ul>
+              <li><strong>Update fails?</strong> Run <code>npx skills add pbakaus/impeccable</code> instead, then invoke <code>/impeccable</code> once to clean up old files.</li>
+              <li><strong>Claude Code plugin:</strong> Open <code>/plugin</code>, go to the Discover tab.</li>
+              <li><strong>Manual ZIP:</strong> Download from above and extract to the project root.</li>
+            </ul>
+            <p>Your <code>.impeccable.md</code> context file is never overwritten.</p>
           </div>
         </details>