feat: auto-capture snippet console outputs at build time

components/Snippet.jsx

@@ -1,14 +1,17 @@
+import javascript from "highlight.js/lib/languages/javascript";
 import { useState, useMemo } from "react";
 import hljs from "highlight.js/lib/core";
-import javascript from "highlight.js/lib/languages/javascript";
 
 hljs.registerLanguage("javascript", javascript);
 
-export function Snippet({ code }) {
+export function Snippet({ code, output }) {
   const [copied, setCopied] = useState(false);
   const [hovered, setHovered] = useState(false);
 
-  const highlighted = useMemo(() => hljs.highlight(code, { language: "javascript" }).value, [code]);
+  const highlighted = useMemo(
+    () => hljs.highlight(code, { language: "javascript" }).value,
+    [code],
+  );
 
   async function handleCopy() {
     try {
@@ -27,58 +30,72 @@ export function Snippet({ code }) {
   }
 
   return (
-    <div
-      className="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0"
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <pre
-        data-language="js"
-        data-theme="default"
-        className="nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[13px] contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40"
+    <div className="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0">
+      {/* Code block */}
+      <div
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        className="nx-relative"
       >
-        <code
+        <pre
           data-language="js"
           data-theme="default"
-          className="hljs nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border dark:nx-border-white/10 dark:nx-bg-white/10 nx-py-4 nx-px-4"
-          dangerouslySetInnerHTML={{ __html: highlighted }}
-        />
-      </pre>
-      <div
-        className="nx-transition nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0"
-        style={{ opacity: hovered || copied ? 1 : 0 }}
-      >
-        <button
-          onClick={handleCopy}
-          aria-label="Copy code"
-          className="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-gray-100/5 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50"
+          className="nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[13px] contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40"
         >
-          {copied ? (
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <polyline points="20 6 9 17 4 12" />
-            </svg>
-          ) : (
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-            </svg>
-          )}
-        </button>
+          <code
+            data-language="js"
+            data-theme="default"
+            className="hljs nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border dark:nx-border-white/10 dark:nx-bg-white/10 nx-py-4 nx-px-4"
+            dangerouslySetInnerHTML={{ __html: highlighted }}
+          />
+        </pre>
+        <div
+          className="nx-transition nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0"
+          style={{ opacity: hovered || copied ? 1 : 0 }}
+        >
+          <button
+            onClick={handleCopy}
+            aria-label="Copy code"
+            className="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-gray-100/5 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50"
+          >
+            {copied ? (
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            ) : (
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+            )}
+          </button>
+        </div>
       </div>
+
+      {output && (
+        <div className="nx-mt-2 nx-mb-4">
+          <p className="nx-text-xs nx-font-semibold nx-text-gray-500 dark:nx-text-gray-400 nx-mb-1 nx-uppercase nx-tracking-wide">
+            Expected Output
+          </p>
+          <pre className="nx-bg-gray-50 dark:nx-bg-gray-900 nx-rounded-xl nx-border nx-border-black/5 dark:nx-border-white/10 nx-overflow-x-auto nx-text-[13px] nx-p-4 nx-text-gray-700 dark:nx-text-gray-300">
+            {output}
+          </pre>
+        </div>
+      )}
     </div>
   );
 }

package.json

@@ -7,9 +7,11 @@
     "dev": "next dev",
     "build": "next build",
     "postbuild": "next-sitemap",
-    "prebuild": "rm -rf .next && node scripts/generate-llms.js",
+    "prebuild": "rm -rf .next && node scripts/generate-llms.js && node scripts/capture-outputs.js && node scripts/inject-outputs.js",
     "check:consistency": "node scripts/check-consistency.js",
     "generate-skills": "node scripts/generate-skills.js",
+    "inject-outputs": "node scripts/inject-outputs.js",
+    "capture-outputs": "node scripts/capture-outputs.js",
     "generate-skills:check": "node scripts/generate-skills.js && git diff --exit-code -- skills dist",
     "install-skills": "node scripts/install-skills.js",
     "install-global": "node scripts/install-global.js",
@@ -38,6 +40,7 @@
   },
   "devDependencies": {
     "eslint": "^10.0.2",
+    "playwright": "^1.59.1",
     "terser": "^5.36.0",
     "vercel": "^32.4.1"
   },

pages/CoreWebVitals/CLS.mdx

@@ -23,7 +23,7 @@ Unexpected layout shifts are frustrating and can cause users to click the wrong
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`Call getCLS() anytime to check current value.`} />
 
 ### Understanding CLS
 

pages/CoreWebVitals/INP.mdx

@@ -58,7 +58,10 @@ flowchart TD
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`⚡ INP Tracking Active
+Interactions with duration > 16ms will be tracked.
+Call getINP() to see current INP value.
+Call getINPDetails() for full interaction list.`} />
 
 ### Understanding INP
 

pages/CoreWebVitals/LCP-Image-Entropy.mdx

@@ -27,7 +27,11 @@ BPP = (file size in bits) / (width × height)
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`Deprecated API for given entry type.
+🖼️ Image Entropy Analysis
+No images with measurable entropy found.
+(Data URLs and cross-origin images without CORS are excluded)
+console.groupEnd`} />
 
 ### Understanding the Results
 

pages/CoreWebVitals/LCP-Subparts.mdx

@@ -48,7 +48,8 @@ flowchart LR
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`📊 LCP Subparts Analysis Active
+Waiting for LCP...`} />
 
 ### Understanding the Results
 

pages/CoreWebVitals/LCP-Trail.mdx

@@ -13,7 +13,9 @@ Each time the browser promotes a larger element as the new LCP, the snippet assi
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`⏱️ LCP Trail Active
+Highlights all LCP candidate elements with distinct colors.
+Deprecated API for given entry type.`} />
 
 ### How It Works
 

pages/CoreWebVitals/LCP-Video-Candidate.mdx

@@ -51,7 +51,8 @@ A `<link rel="preload">` in `<head>` shortcuts this chain, allowing the browser
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`Deprecated API for given entry type.
+⚠️ No LCP entries found. Run this snippet before interacting with the page, or reload and run it immediately.`} />
 
 ### Understanding the Results
 

pages/CoreWebVitals/LCP.mdx

@@ -17,7 +17,8 @@ Quick check for [Largest Contentful Paint](https://web.dev/articles/lcp), a Core
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`⏱️ LCP Tracking Active
+LCP may update as larger elements load.`} />
 
 ### Understanding LCP
 

pages/DevTools-Overrides/Fetch-XHR-Timeline.mdx

@@ -25,15 +25,15 @@ Console snippets can only see requests that have already completed and are visib
 
 Add this inside a `<script>` tag before the closing `</head>` of the overridden HTML file. It runs before any other script and stores all captured calls in `window.__perfCalls`.
 
-<Snippet code={injectSnippet} />
+<Snippet code={injectSnippet} output={`(no output)`} />
 
 ---
 
 ### Part 2 — Read snippet
 
 Run this in the console after the page has loaded to see the captured data correlated with LCP.
 
-<Snippet code={readSnippet} />
+<Snippet code={readSnippet} output={`No data found. Make sure the inject snippet is active via DevTools Overrides and reload the page.`} />
 
 ---
 

pages/Interaction/Forced-Synchronous-Layout.mdx

@@ -52,7 +52,9 @@ Geometric reads/writes — triggers the FSL warning:
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`⚡ FSL Detector Active
+Monitoring class/style mutations and geometric property access.
+Call getFSLSummary() for the report or stopFSLDetector() to stop.`} />
 
 ### Understanding the Output
 

pages/Interaction/Input-Latency-Breakdown.mdx

@@ -23,7 +23,9 @@ INP measures the worst interaction, but understanding the pattern across many in
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`⌨️ Input Latency Breakdown Active
+Interact with the page (click, type, etc.).
+Call getInputLatencyBreakdown() for the aggregated report.`} />
 
 ### Understanding the Results
 

pages/Interaction/Interactions.mdx

@@ -71,7 +71,9 @@ flowchart LR
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`👆 Interaction Tracking Active
+Interact with the page to see interaction details.
+Call getInteractionSummary() for a summary.`} />
 
 ### Understanding the Results
 

pages/Interaction/Layout-Shift-Loading-and-Interaction.mdx

@@ -64,7 +64,13 @@ flowchart TD
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`📐 Layout Shift Tracking Active
+Current CLS: 🟢 0.0000
+Interact with the page to see new shifts.
+Call getLayoutShiftSummary() for full analysis.
+Deprecated API for given entry type.
+Deprecated API for given entry type.
+Deprecated API for given entry type.`} />
 
 ### Understanding the Results
 

pages/Interaction/Long-Animation-Frames-Helpers.mdx

@@ -38,7 +38,10 @@ Advanced debugging utilities for [Long Animation Frames](/Interaction/Long-Anima
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`🔧 LoAF Helpers Loaded
+Observing long animation frames (>50ms)...
+Quick
+All`} />
 
 ### Understanding the Output
 

pages/Interaction/Long-Animation-Frames-Script-Attribution.mdx

@@ -67,7 +67,7 @@ graph LR
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`✅ No long frames detected`} />
 
 ## Quick Tips
 

pages/Interaction/Long-Animation-Frames.mdx

@@ -81,7 +81,9 @@ graph TB
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} output={`🎬 Long Animation Frames Tracking Active
+Frames with blocking duration will be logged.
+Call getLoAFSummary() for full analysis.`} />
 
 ### Understanding the Results