Fix scroll anchors for /impeccable craft and /impeccable teach

Use h3 headings with custom IDs instead of inline spans so the browser
scrolls to the right position. Added {#id} syntax support to the
markdown heading renderer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

content/site/skills/impeccable.md

@@ -6,11 +6,15 @@ tagline: "The design intelligence behind every other skill."
 
 `/impeccable` is the foundation. It teaches your AI harness how to design, period. Every other command in this pack leans on it for design principles, anti-patterns, typography, color, and layout guidance.
 
-There are three ways to use it:
+Call `/impeccable` directly when you want freeform design with the full guidebook loaded. Or use one of the two sub-modes:
 
-- **`/impeccable` (freeform)** -- Design with the full guidebook loaded. You describe what you want, and the model builds it with strong aesthetic opinions, anti-pattern awareness, and your project's design context. Best for when you already know what you want and just need it built well.
-- <span id="craft">**`/impeccable craft`**</span> -- The full shape-then-build flow. It starts by running `/shape` internally (a structured discovery interview about purpose, audience, and goals), then moves into implementation with visual iteration, checking the result in the browser until the polish is high. Best for brand-new features where you want to think before you build, without managing the steps yourself.
-- <span id="teach">**`/impeccable teach`**</span> -- One-time project setup. Runs a short discovery interview about your brand, audience, and aesthetic direction, then writes a `.impeccable.md` file that every future skill call reads automatically. Run this once per project before doing any design work.
+### /impeccable craft {#craft}
+
+The full shape-then-build flow. It starts by running `/shape` internally (a structured discovery interview about purpose, audience, and goals), then moves into implementation with visual iteration, checking the result in the browser until the polish is high. Best for brand-new features where you want to think before you build, without managing the steps yourself.
+
+### /impeccable teach {#teach}
+
+One-time project setup. Runs a short discovery interview about your brand, audience, and aesthetic direction, then writes a `.impeccable.md` file that every future skill call reads automatically. Run this once per project before doing any design work.
 
 ## How it works
 

scripts/lib/render-markdown.js

@@ -39,10 +39,20 @@ export function createRenderer({ knownSkillIds = new Set(), currentSkillId = nul
   const renderer = new marked.Renderer();
 
   // Heading slugger — stable ids so we can anchor-link from elsewhere.
+  // Supports {#custom-id} suffix (kramdown/pandoc style) for explicit anchors.
   renderer.heading = ({ tokens, depth }) => {
-    const text = renderer.parser.parseInline(tokens);
     const raw = tokens.map((t) => t.raw || '').join('');
-    const id = slugify(raw);
+    const customIdMatch = raw.match(/\s*\{#([a-z0-9_-]+)\}\s*$/i);
+    let id, text;
+    if (customIdMatch) {
+      id = customIdMatch[1];
+      // Strip the {#id} suffix from the rendered text
+      const cleanRaw = raw.slice(0, customIdMatch.index);
+      text = renderer.parser.parseInline(marked.lexer(cleanRaw, { gfm: true })[0]?.tokens || tokens);
+    } else {
+      id = slugify(raw);
+      text = renderer.parser.parseInline(tokens);
+    }
     return `<h${depth} id="${id}">${text}</h${depth}>\n`;
   };