feat(phase-7): render social preview banner (1280x640)

42 deterministic skills banner with:
- 42 + DETERMINISTIC SKILLS heading
- tagline: 'for shadcn ui copy-not-install paradigm'
- 3 badges: shadcn@4.7 / Tailwind v4 / Radix UI
- version line: shadcn ui evergreen-2026 / React 18+/19 / Tailwind v3.4/v4
- code window button.tsx with cva snippet
- black bg + cyan accent

Generated via chromium --headless --screenshot. Banner-banner.html template placeholders substituted.

Upload to GitHub repo Social Preview via Settings -> Social preview -> Edit (no API available for this per GitHub docs).

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

Author: FreekHeijting

docs/social-preview-banner.html

@@ -10,7 +10,7 @@
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
   body {
-    background: {{BG_COLOR}};
+    background: #0A0A0A;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -20,7 +20,7 @@
   .banner {
     width: 1280px;
     height: 640px;
-    background: {{BG_COLOR}};
+    background: #0A0A0A;
     position: relative;
     overflow: hidden;
     display: flex;
@@ -33,7 +33,7 @@
     left: 0;
     right: 0;
     height: 4px;
-    background: linear-gradient(90deg, {{BRAND_PRIMARY}} 0%, {{BRAND_SECONDARY}} 50%, {{BRAND_ACCENT}} 100%);
+    background: linear-gradient(90deg, #FAFAF9 0%, #3178C6 50%, #06B6D4 100%);
   }
 
   /* Subtle blueprint grid */
@@ -73,7 +73,7 @@
     font-family: 'Space Grotesk', system-ui, sans-serif;
     font-size: 26px;
     font-weight: 700;
-    color: {{BRAND_PRIMARY}};
+    color: #FAFAF9;
     letter-spacing: 4px;
     text-transform: uppercase;
     margin-bottom: 22px;
@@ -106,9 +106,9 @@
     border: 2px solid;
   }
 
-  .badge-1 { border-color: {{BRAND_PRIMARY}};   color: {{BRAND_PRIMARY}}; }
-  .badge-2 { border-color: {{BRAND_SECONDARY}}; color: {{BRAND_SECONDARY}}; }
-  .badge-3 { border-color: {{BRAND_ACCENT}};    color: {{BRAND_ACCENT}}; }
+  .badge-1 { border-color: #FAFAF9;   color: #FAFAF9; }
+  .badge-2 { border-color: #3178C6; color: #3178C6; }
+  .badge-3 { border-color: #06B6D4;    color: #06B6D4; }
 
   .versions {
     font-family: 'JetBrains Mono', monospace;
@@ -181,16 +181,16 @@
   }
 
   .comment  { color: #A1A1AA; }
-  .keyword  { color: {{BRAND_PRIMARY}}; }
-  .function { color: {{BRAND_SECONDARY}}; }
+  .keyword  { color: #FAFAF9; }
+  .function { color: #3178C6; }
   .string   { color: #34D399; }
-  .operator { color: {{BRAND_ACCENT}}; }
+  .operator { color: #06B6D4; }
   .type     { color: #3178C6; }
   .cursor {
     display: inline-block;
     width: 8px;
     height: 17px;
-    background: {{BRAND_PRIMARY}};
+    background: #FAFAF9;
     vertical-align: text-bottom;
   }
 
@@ -211,7 +211,7 @@
   }
 
   .foundation-name .open { color: #FAFAF9; }
-  .foundation-name .aec  { color: {{BRAND_PRIMARY}}; }
+  .foundation-name .aec  { color: #FAFAF9; }
 
   .foundation-sub {
     font-family: 'Inter', system-ui, sans-serif;
@@ -228,18 +228,18 @@
 
     <!-- Left: text content -->
     <div class="left">
-      <div class="number">0</div>
+      <div class="number">42</div>
       <div class="title">Deterministic Skills</div>
-      <div class="subtitle">for {{TECH_TAGLINE}}</div>
+      <div class="subtitle">for shadcn ui copy-not-install paradigm</div>
 
       <div class="badges">
-        <div class="badge badge-1">{{BADGE_1}}</div>
-        <div class="badge badge-2">{{BADGE_2}}</div>
-        <div class="badge badge-3">{{BADGE_3}}</div>
+        <div class="badge badge-1">shadcn@4.7</div>
+        <div class="badge badge-2">Tailwind v4</div>
+        <div class="badge badge-3">Radix UI</div>
       </div>
 
       <div class="versions">
-        {{VERSION_LINE}}
+        shadcn ui evergreen-2026 &nbsp;<span class="sep">│</span>&nbsp; React 18+ / 19 &nbsp;<span class="sep">│</span>&nbsp; Tailwind v3.4 / v4
       </div>
     </div>
 
@@ -250,10 +250,22 @@
           <div class="dot dot-red"></div>
           <div class="dot dot-yellow"></div>
           <div class="dot dot-green"></div>
-          <span class="code-filename">{{CODE_FILENAME}}</span>
+          <span class="code-filename">button.tsx</span>
         </div>
         <div class="code-body">
-          {{CODE_BODY}}
+          <span class="keyword">import</span> { cva } <span class="keyword">from</span> <span class="string">"class-variance-authority"</span>;<br>
+          <br>
+          <span class="keyword">const</span> <span class="function">buttonVariants</span> = <span class="function">cva</span>(<br>
+          &nbsp;&nbsp;<span class="string">"inline-flex items-center..."</span>,<br>
+          &nbsp;&nbsp;{<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;variants: {<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;variant: {<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// default | destructive |</span><br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// outline | secondary | ghost | link</span><br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;},<br>
+          &nbsp;&nbsp;}<br>
+          );
           <span class="cursor"></span>
         </div>
       </div>
@@ -271,18 +283,30 @@
 <!--
 TEMPLATE VARIABLES:
 ==================
-{{BG_COLOR}}         — Background color (e.g., #1A1A2E, #2A2A32)
-{{BRAND_PRIMARY}}    — Primary brand color (e.g., #61DAFB for React, #FFC131 for Tauri)
-{{BRAND_SECONDARY}}  — Secondary color (e.g., #3178C6 for TypeScript)
-{{BRAND_ACCENT}}     — Accent color (e.g., #A855F7 for purple)
+#0A0A0A         — Background color (e.g., #1A1A2E, #2A2A32)
+#FAFAF9    — Primary brand color (e.g., #61DAFB for React, #FFC131 for Tauri)
+#3178C6  — Secondary color (e.g., #3178C6 for TypeScript)
+#06B6D4     — Accent color (e.g., #A855F7 for purple)
 0      — Number of skills (e.g., 24, 27)
-{{TECH_TAGLINE}}     — Short tagline (e.g., "expert-level React 18 & 19 development")
-{{BADGE_1}}          — First badge text (e.g., "React 18 + 19")
-{{BADGE_2}}          — Second badge text (e.g., "TypeScript")
-{{BADGE_3}}          — Third badge text (e.g., "18 Hooks")
-{{VERSION_LINE}}     — Version info with HTML separators using <span class="sep">│</span>
-{{CODE_FILENAME}}    — Filename in code window titlebar (e.g., "App.tsx", "lib.rs")
-{{CODE_BODY}}        — HTML-formatted code snippet using span classes: .comment, .keyword, .function, .string, .operator, .type
+shadcn ui copy-not-install paradigm     — Short tagline (e.g., "expert-level React 18 & 19 development")
+shadcn@4.7          — First badge text (e.g., "React 18 + 19")
+Tailwind v4          — Second badge text (e.g., "TypeScript")
+Radix UI          — Third badge text (e.g., "18 Hooks")
+shadcn ui evergreen-2026 &nbsp;<span class="sep">│</span>&nbsp; React 18+ / 19 &nbsp;<span class="sep">│</span>&nbsp; Tailwind v3.4 / v4     — Version info with HTML separators using <span class="sep">│</span>
+button.tsx    — Filename in code window titlebar (e.g., "App.tsx", "lib.rs")
+<span class="keyword">import</span> { cva } <span class="keyword">from</span> <span class="string">"class-variance-authority"</span>;<br>
+          <br>
+          <span class="keyword">const</span> <span class="function">buttonVariants</span> = <span class="function">cva</span>(<br>
+          &nbsp;&nbsp;<span class="string">"inline-flex items-center..."</span>,<br>
+          &nbsp;&nbsp;{<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;variants: {<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;variant: {<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// default | destructive |</span><br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// outline | secondary | ghost | link</span><br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;},<br>
+          &nbsp;&nbsp;}<br>
+          );        — HTML-formatted code snippet using span classes: .comment, .keyword, .function, .string, .operator, .type
 
 BRAND COLOR REFERENCE:
 ====================