diff --git a/.claude/skills/webperf-core-web-vitals/SKILL.md b/.claude/skills/webperf-core-web-vitals/SKILL.md
index 434f9cad..9beba17a 100644
--- a/.claude/skills/webperf-core-web-vitals/SKILL.md
+++ b/.claude/skills/webperf-core-web-vitals/SKILL.md
@@ -241,4 +241,5 @@ When multiple CWV metrics are poor, prioritize investigation:
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
+- `references/examples.json` — Captured return values used in the snippet pages
\ No newline at end of file
diff --git a/.claude/skills/webperf-core-web-vitals/references/examples.json b/.claude/skills/webperf-core-web-vitals/references/examples.json
new file mode 100644
index 00000000..ec568ec7
--- /dev/null
+++ b/.claude/skills/webperf-core-web-vitals/references/examples.json
@@ -0,0 +1,220 @@
+{
+  "viewport": "desktop",
+  "waitMs": 1000,
+  "examples": {
+    "CLS": {
+      "script": "CLS",
+      "status": "ok",
+      "metric": "CLS",
+      "value": 0.0324,
+      "unit": "score",
+      "rating": "good",
+      "thresholds": {
+        "good": 0.1,
+        "needsImprovement": 0.25
+      },
+      "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+      "getDataFn": "getCLS"
+    },
+    "INP": {
+      "script": "INP",
+      "status": "ok",
+      "metric": "INP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 200,
+        "needsImprovement": 500
+      },
+      "details": {
+        "totalInteractions": 1,
+        "worstEvent": "click → button#go",
+        "phases": {
+          "inputDelay": 1,
+          "processingTime": 61,
+          "presentationDelay": 3
+        }
+      }
+    },
+    "LCP": {
+      "script": "LCP",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 68,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "elementType": "Image",
+        "url": "http://127.0.0.1:56834/hero.png",
+        "sizePixels": 10000
+      }
+    },
+    "LCP-Image-Entropy": {
+      "script": "LCP-Image-Entropy",
+      "status": "ok",
+      "count": 3,
+      "details": {
+        "totalImages": 3,
+        "lowEntropyCount": 0,
+        "lcpElement": "img",
+        "lcpImageEligible": true,
+        "lcpImage": {
+          "url": "hero.png",
+          "bpp": 24.1384,
+          "isLowEntropy": false
+        }
+      },
+      "items": [
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 600,
+          "displayedHeight": 400,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": true
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        }
+      ],
+      "issues": []
+    },
+    "LCP-Subparts": {
+      "script": "LCP-Subparts",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "url": "hero.png",
+        "subParts": {
+          "ttfb": {
+            "value": 9,
+            "percent": 14,
+            "overTarget": false
+          },
+          "resourceLoadDelay": {
+            "value": 13,
+            "percent": 20,
+            "overTarget": true
+          },
+          "resourceLoadTime": {
+            "value": 8,
+            "percent": 13,
+            "overTarget": false
+          },
+          "elementRenderDelay": {
+            "value": 34,
+            "percent": 53,
+            "overTarget": true
+          }
+        },
+        "slowestPhase": "elementRenderDelay"
+      }
+    },
+    "LCP-Trail": {
+      "script": "LCP-Trail",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "candidateCount": 1,
+        "finalElement": "#hero",
+        "candidates": [
+          {
+            "index": 1,
+            "selector": "#hero",
+            "time": 64,
+            "elementType": "Image",
+            "url": "hero.png"
+          }
+        ]
+      }
+    },
+    "LCP-Video-Candidate": {
+      "script": "LCP-Video-Candidate",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 60,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "isVideo": true,
+        "lcpSource": "poster",
+        "posterUrl": "http://127.0.0.1:56834/hero.png",
+        "videoUrl": null,
+        "posterFormat": "png",
+        "posterPreloaded": false,
+        "fetchpriorityOnPreload": null,
+        "isCrossOrigin": false,
+        "videoAttributes": {
+          "autoplay": false,
+          "muted": false,
+          "playsinline": false,
+          "preload": "none"
+        }
+      },
+      "issues": [
+        {
+          "severity": "warning",
+          "message": "No <link rel=\"preload\" as=\"image\"> for the poster: the browser discovers it late"
+        },
+        {
+          "severity": "info",
+          "message": "Poster uses png; AVIF or WebP would reduce file size and LCP load time"
+        },
+        {
+          "severity": "warning",
+          "message": "preload=\"none\" on a non-autoplay video may delay poster image loading in some browsers"
+        }
+      ]
+    }
+  }
+}
diff --git a/.claude/skills/webperf-core-web-vitals/references/snippets.md b/.claude/skills/webperf-core-web-vitals/references/snippets.md
index 035fcaad..b5e39694 100644
--- a/.claude/skills/webperf-core-web-vitals/references/snippets.md
+++ b/.claude/skills/webperf-core-web-vitals/references/snippets.md
@@ -1,3 +1,7 @@
+## Captured return values
+
+Each object below is a real result captured by running the snippet against the seeded test pages.
+
 ---
 ## Cumulative layout shift (CLS)
 
@@ -12,6 +16,25 @@ Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual s
 | 🟢 Good | ≤ 0.1 | Stable, minimal shifting |
 | 🟡 Needs Improvement | ≤ 0.25 | Noticeable shifting |
 | 🔴 Poor | > 0.25 | Significant layout instability |
+
+**Captured return value:**
+
+```json
+{
+  "script": "CLS",
+  "status": "ok",
+  "metric": "CLS",
+  "value": 0.0324,
+  "unit": "score",
+  "rating": "good",
+  "thresholds": {
+    "good": 0.1,
+    "needsImprovement": 0.25
+  },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
+}
+```
 ---
 ## Interaction to next paint (INP)
 
@@ -26,6 +49,32 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
 | 🟢 Good | ≤ 200ms | Responsive, feels instant |
 | 🟡 Needs Improvement | ≤ 500ms | Noticeable delay |
 | 🔴 Poor | > 500ms | Slow, frustrating experience |
+
+**Captured return value:**
+
+```json
+{
+  "script": "INP",
+  "status": "ok",
+  "metric": "INP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 200,
+    "needsImprovement": 500
+  },
+  "details": {
+    "totalInteractions": 1,
+    "worstEvent": "click → button#go",
+    "phases": {
+      "inputDelay": 1,
+      "processingTime": 61,
+      "presentationDelay": 3
+    }
+  }
+}
+```
 ---
 ## LCP image entropy
 
@@ -39,24 +88,205 @@ Checks if images qualify as LCP candidates based on their entropy (bits per pixe
 |-----|---------|--------------|---------|
 | < 0.05 | 🔴 Low | ❌ No | Solid colors, simple gradients, placeholders |
 | ≥ 0.05 | 🟢 Normal | ✅ Yes | Photos, complex graphics |
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Image-Entropy",
+  "status": "ok",
+  "count": 3,
+  "details": {
+    "totalImages": 3,
+    "lowEntropyCount": 0,
+    "lcpElement": "img",
+    "lcpImageEligible": true,
+    "lcpImage": {
+      "url": "hero.png",
+      "bpp": 24.1384,
+      "isLowEntropy": false
+    }
+  },
+  "items": [
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 600,
+      "displayedHeight": 400,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": true
+    },
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    },
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    }
+  ],
+  "issues": []
+}
+```
 ---
 ## LCP subparts
 
 Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities. Understanding which phase is slowest helps you focus your optimization efforts where they'll have the most impact. Based on the Web Vitals Chrome Extension.
 
 **Script:** `scripts/LCP-Subparts.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Subparts",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#hero",
+    "url": "hero.png",
+    "subParts": {
+      "ttfb": {
+        "value": 9,
+        "percent": 14,
+        "overTarget": false
+      },
+      "resourceLoadDelay": {
+        "value": 13,
+        "percent": 20,
+        "overTarget": true
+      },
+      "resourceLoadTime": {
+        "value": 8,
+        "percent": 13,
+        "overTarget": false
+      },
+      "elementRenderDelay": {
+        "value": 34,
+        "percent": 53,
+        "overTarget": true
+      }
+    },
+    "slowestPhase": "elementRenderDelay"
+  }
+}
+```
 ---
 ## LCP trail
 
 Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-colored dashed outline, so you can see the full trail from first candidate to final LCP.
 
 **Script:** `scripts/LCP-Trail.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Trail",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "candidateCount": 1,
+    "finalElement": "#hero",
+    "candidates": [
+      {
+        "index": 1,
+        "selector": "#hero",
+        "time": 64,
+        "elementType": "Image",
+        "url": "hero.png"
+      }
+    ]
+  }
+}
+```
 ---
 ## LCP video candidate
 
 Detects whether the LCP element is a <video> and audits the poster image configuration, the most common source of avoidable LCP delay when video is the hero element.
 
 **Script:** `scripts/LCP-Video-Candidate.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Video-Candidate",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 60,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "isVideo": true,
+    "lcpSource": "poster",
+    "posterUrl": "http://127.0.0.1:56834/hero.png",
+    "videoUrl": null,
+    "posterFormat": "png",
+    "posterPreloaded": false,
+    "fetchpriorityOnPreload": null,
+    "isCrossOrigin": false,
+    "videoAttributes": {
+      "autoplay": false,
+      "muted": false,
+      "playsinline": false,
+      "preload": "none"
+    }
+  },
+  "issues": [
+    {
+      "severity": "warning",
+      "message": "No <link rel=\"preload\" as=\"image\"> for the poster: the browser discovers it late"
+    },
+    {
+      "severity": "info",
+      "message": "Poster uses png; AVIF or WebP would reduce file size and LCP load time"
+    },
+    {
+      "severity": "warning",
+      "message": "preload=\"none\" on a non-autoplay video may delay poster image loading in some browsers"
+    }
+  ]
+}
+```
 ---
 ## Largest contentful paint (LCP)
 
@@ -71,3 +301,26 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
 | 🟢 Good | ≤ 2.5s | Fast, content appears quickly |
 | 🟡 Needs Improvement | ≤ 4s | Moderate delay |
 | 🔴 Poor | > 4s | Slow, users may abandon |
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 68,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#hero",
+    "elementType": "Image",
+    "url": "http://127.0.0.1:56834/hero.png",
+    "sizePixels": 10000
+  }
+}
+```
diff --git a/cli/tests/helpers/contract.js b/cli/tests/helpers/contract.js
index 9df7a9d0..325310ae 100644
--- a/cli/tests/helpers/contract.js
+++ b/cli/tests/helpers/contract.js
@@ -30,7 +30,7 @@ const SEEDED_PAGE = (other) => `<!DOCTYPE html>
   <link rel="preconnect" href="${other}">
   <link rel="preload" href="/app.js" as="script">
   <link rel="stylesheet" href="/style.css">
-  <style>body{margin:0}.box{width:200px;height:20px;will-change:transform}</style>
+  <style>body{margin:0}img{display:block}.box{width:200px;height:20px;will-change:transform}</style>
   <script src="${other}/third.js"></script>
   <script src="/async.js" async></script>
   <script src="/app.js" defer></script>
@@ -383,6 +383,8 @@ export async function startContractServers() {
     if (path === "/behaviors") return send("text/html", BEHAVIORS_PAGE(query));
     if (path === "/heavy") return send("text/html", HEAVY_PAGE(otherUrl));
     if (path === "/frame") return send("text/html", "<p>frame</p>");
+    if (path === "/video-poster.html") return send("text/html", readFileSync(join(FIXTURES, "video-poster.html")));
+    if (path === "/clip.webm") return send("video/webm", readFileSync(join(FIXTURES, "clip.webm")));
     if (path === "/hero.png") return send("image/png", png);
     if (path === "/style.css") return send("text/css", "h1{color:#333}");
     if (path.endsWith(".js")) return send("application/javascript", "window.__app = true;");
diff --git a/cli/tests/unit/snippet-examples.test.js b/cli/tests/unit/snippet-examples.test.js
new file mode 100644
index 00000000..fb36515e
--- /dev/null
+++ b/cli/tests/unit/snippet-examples.test.js
@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { CATEGORIES, checkResult } from "../helpers/contract.js";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const SNIPPETS = resolve(HERE, "../../../snippets");
+
+const categoriesWithExamples = CATEGORIES.filter((category) =>
+  existsSync(join(SNIPPETS, category, "examples.json"))
+);
+
+describe("captured snippet examples", () => {
+  it("includes captured examples for CoreWebVitals", () => {
+    expect(categoriesWithExamples).toContain("CoreWebVitals");
+  });
+
+  for (const category of categoriesWithExamples) {
+    describe(category, () => {
+      const snippetNames = readdirSync(join(SNIPPETS, category))
+        .filter((file) => file.endsWith(".js"))
+        .map((file) => file.slice(0, -3))
+        .sort();
+      const { examples } = JSON.parse(
+        readFileSync(join(SNIPPETS, category, "examples.json"), "utf8")
+      );
+
+      it("has an example for every snippet in the category and no stale entries", () => {
+        expect(Object.keys(examples).sort()).toEqual(snippetNames);
+      });
+
+      for (const name of snippetNames) {
+        it(`${name} matches its snippet name, has status ok, and satisfies the return contract`, () => {
+          const example = examples[name];
+          expect(example).toBeDefined();
+          expect(example.script).toBe(name);
+          expect(example.status).toBe("ok");
+          const violations = checkResult(`${category}/${name}`, {
+            json: JSON.stringify(example),
+            inPage: [],
+            wasUndefined: false,
+          });
+          expect([...violations]).toEqual([]);
+        });
+      }
+    });
+  }
+});
diff --git a/components/Snippet.jsx b/components/Snippet.jsx
index 99155ce9..1a3dce41 100644
--- a/components/Snippet.jsx
+++ b/components/Snippet.jsx
@@ -8,8 +8,22 @@ hljs.registerLanguage("javascript", javascript);
 // server, so the code arrives highlighted and highlight.js never reaches the browser; only the buttons
 // (components/SnippetActions.jsx) run there. The copy button shows on hover or keyboard focus, in CSS.
 
+export function SnippetExample({ example }) {
+  if (!example) return null;
+
+  return (
+    <section className="wp-snippet-example" aria-label="Returned object example">
+      <p>Captured from the seeded test page; timing values can vary between runs.</p>
+      <pre>
+        <code>{JSON.stringify(example, null, 2)}</code>
+      </pre>
+    </section>
+  );
+}
+
 // snippet: the path of the snippet, such as "CoreWebVitals/LCP", which lib/remark-snippet-prompt.mjs adds
-export function Snippet({ code, prompt, snippet }) {
+export function Snippet({ code, prompt, snippet, example }) {
+  if (!code) return <SnippetExample example={example} />;
   const highlighted = hljs.highlight(code, { language: "javascript" }).value;
 
   return (
@@ -35,6 +49,7 @@ export function Snippet({ code, prompt, snippet }) {
           <CopyCodeButton snippet={snippet} />
         </div>
       </div>
+      {example ? <SnippetExample example={example} /> : null}
     </div>
   );
 }
diff --git a/components/Snippet.test.jsx b/components/Snippet.test.jsx
index 8b10b739..73f920bf 100644
--- a/components/Snippet.test.jsx
+++ b/components/Snippet.test.jsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
-import { Snippet } from "./Snippet";
+import { Snippet, SnippetExample } from "./Snippet";
 
 const CODE = "(() => ({ script: 'Demo', status: 'ok' }))()";
 const PROMPT = "# Run the Demo snippet with webperf-snippets\n\nRun this measurement with the CLI.";
@@ -28,6 +28,20 @@ describe("Snippet", () => {
     expect(html).not.toMatch(/Copy prompt/);
   });
 
+  it("renders a captured return object without an internal heading so the page heading owns the TOC entry", () => {
+    const example = { script: "Demo", status: "ok", value: 42 };
+    const html = renderToStaticMarkup(<SnippetExample example={example} />);
+    expect(html).toContain('<section class="wp-snippet-example" aria-label="Returned object example">');
+    expect(html).not.toContain("<h3");
+    expect(html).toContain('&quot;value&quot;: 42');
+  });
+
+  it("does not render an example section when no captured object is provided", () => {
+    expect(renderToStaticMarkup(<SnippetExample />)).toBe("");
+    const html = renderToStaticMarkup(<Snippet code={CODE} />);
+    expect(html).not.toContain("wp-snippet-example");
+  });
+
   it("keeps the Copy code button", () => {
     const html = renderToStaticMarkup(<Snippet code={CODE} prompt={PROMPT} />);
     expect(html).toMatch(/aria-label="Copy code"/);
diff --git a/content/CoreWebVitals/CLS.mdx b/content/CoreWebVitals/CLS.mdx
index 9f815979..8e10b693 100644
--- a/content/CoreWebVitals/CLS.mdx
+++ b/content/CoreWebVitals/CLS.mdx
@@ -5,7 +5,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/CLS.js?raw'
-import { Snippet } from '../../components/Snippet'
+import examples from '../../snippets/CoreWebVitals/examples.json'
+import { Snippet, SnippetExample } from '../../components/Snippet'
 import { Demo } from '../../components/Demo'
 import { Callout } from '../../components/Callout'
 import { Flow } from '../../components/diagrams'
@@ -34,6 +35,10 @@ Unexpected layout shifts are frustrating and can cause users to click the wrong
 
 <Snippet code={snippet} />
 
+### Returned object
+
+<SnippetExample example={examples.examples.CLS} />
+
 ### Understanding CLS
 
 CLS groups unexpected layout shifts into session windows and reports the largest window. A window starts at a shift and continues while each new shift arrives less than 1 second after the previous one, up to 5 seconds in total. The score of a window is the sum of its shift scores:
diff --git a/content/CoreWebVitals/INP.mdx b/content/CoreWebVitals/INP.mdx
index 3aa671cc..038598f7 100644
--- a/content/CoreWebVitals/INP.mdx
+++ b/content/CoreWebVitals/INP.mdx
@@ -5,7 +5,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/INP.js?raw'
-import { Snippet } from '../../components/Snippet'
+import examples from '../../snippets/CoreWebVitals/examples.json'
+import { Snippet, SnippetExample } from '../../components/Snippet'
 import { Demo } from '../../components/Demo'
 import { Callout } from '../../components/Callout'
 import { Flow } from '../../components/diagrams'
@@ -72,6 +73,10 @@ INP directly measures user frustration. When users click a button and nothing ha
 
 <Snippet code={snippet} />
 
+### Returned object
+
+<SnippetExample example={examples.examples.INP} />
+
 ### Understanding INP
 
 ### What makes a good INP
diff --git a/content/CoreWebVitals/LCP-Image-Entropy.mdx b/content/CoreWebVitals/LCP-Image-Entropy.mdx
index 46734019..7eb062a9 100644
--- a/content/CoreWebVitals/LCP-Image-Entropy.mdx
+++ b/content/CoreWebVitals/LCP-Image-Entropy.mdx
@@ -6,7 +6,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Image-Entropy.js?raw'
-import { Snippet } from '../../components/Snippet'
+import examples from '../../snippets/CoreWebVitals/examples.json'
+import { Snippet, SnippetExample } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 
 # LCP image entropy
@@ -41,6 +42,10 @@ Chrome measures the bits per pixel over the area the image is displayed at, in C
 
 <Snippet code={snippet} />
 
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Image-Entropy"]} />
+
 ### Understanding the results
 
 ### Table columns
diff --git a/content/CoreWebVitals/LCP-Subparts.mdx b/content/CoreWebVitals/LCP-Subparts.mdx
index 118619e7..2c6e692c 100644
--- a/content/CoreWebVitals/LCP-Subparts.mdx
+++ b/content/CoreWebVitals/LCP-Subparts.mdx
@@ -7,7 +7,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Subparts.js?raw'
-import { Snippet } from '../../components/Snippet'
+import examples from '../../snippets/CoreWebVitals/examples.json'
+import { Snippet, SnippetExample } from '../../components/Snippet'
 import { Demo } from '../../components/Demo'
 import { Callout } from '../../components/Callout'
 import { LcpPhasesDiagram, LcpDecisionTree } from '../../components/diagrams/LcpSubparts'
@@ -54,6 +55,10 @@ LCP is a critical Core Web Vital that measures when the largest content element
 
 <Snippet code={snippet} />
 
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Subparts"]} />
+
 ### Understanding the results
 
 ### Sub-parts table
diff --git a/content/CoreWebVitals/LCP-Trail.mdx b/content/CoreWebVitals/LCP-Trail.mdx
index 93096391..875045b6 100644
--- a/content/CoreWebVitals/LCP-Trail.mdx
+++ b/content/CoreWebVitals/LCP-Trail.mdx
@@ -6,7 +6,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Trail.js?raw'
-import { Snippet } from '../../components/Snippet'
+import examples from '../../snippets/CoreWebVitals/examples.json'
+import { Snippet, SnippetExample } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 import { Demo } from '../../components/Demo'
 
@@ -34,6 +35,10 @@ Replay four loads, or move the slider through one, to see when each element beco
 
 <Snippet code={snippet} />
 
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Trail"]} />
+
 ### How it works
 
 The snippet observes `largest-contentful-paint` entries with `buffered: true`, which captures all candidates since navigation started. Each time the browser promotes a new element as the current LCP:
diff --git a/content/CoreWebVitals/LCP-Video-Candidate.mdx b/content/CoreWebVitals/LCP-Video-Candidate.mdx
index 7e2c7562..a56121b7 100644
--- a/content/CoreWebVitals/LCP-Video-Candidate.mdx
+++ b/content/CoreWebVitals/LCP-Video-Candidate.mdx
@@ -6,7 +6,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Video-Candidate.js?raw'
-import { Snippet } from '../../components/Snippet'
+import examples from '../../snippets/CoreWebVitals/examples.json'
+import { Snippet, SnippetExample } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 
 # LCP video candidate
@@ -63,6 +64,10 @@ The `poster` URL in the `<link>` and the `<video>` must be identical, including
 
 <Snippet code={snippet} />
 
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Video-Candidate"]} />
+
 ### Understanding the results
 
 #### When LCP is not a `<video>`
diff --git a/content/CoreWebVitals/LCP.mdx b/content/CoreWebVitals/LCP.mdx
index 49a600f3..c004c1ba 100644
--- a/content/CoreWebVitals/LCP.mdx
+++ b/content/CoreWebVitals/LCP.mdx
@@ -5,7 +5,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP.js?raw'
-import { Snippet } from '../../components/Snippet'
+import examples from '../../snippets/CoreWebVitals/examples.json'
+import { Snippet, SnippetExample } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 
 # Largest contentful paint (LCP)
@@ -28,6 +29,10 @@ Quick check for [Largest Contentful Paint](https://web.dev/articles/lcp), a Core
 
 <Snippet code={snippet} />
 
+### Returned object
+
+<SnippetExample example={examples.examples.LCP} />
+
 ### Understanding LCP
 
 ### What can be an LCP element
diff --git a/dist/antigravity/webperf-core-web-vitals/SKILL.md b/dist/antigravity/webperf-core-web-vitals/SKILL.md
index 6c4f68fb..d96fdd8d 100644
--- a/dist/antigravity/webperf-core-web-vitals/SKILL.md
+++ b/dist/antigravity/webperf-core-web-vitals/SKILL.md
@@ -247,4 +247,5 @@ When multiple CWV metrics are poor, prioritize investigation:
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
+- `references/examples.json` — Captured return values used in the snippet pages
\ No newline at end of file
diff --git a/dist/antigravity/webperf-core-web-vitals/references/examples.json b/dist/antigravity/webperf-core-web-vitals/references/examples.json
new file mode 100644
index 00000000..ec568ec7
--- /dev/null
+++ b/dist/antigravity/webperf-core-web-vitals/references/examples.json
@@ -0,0 +1,220 @@
+{
+  "viewport": "desktop",
+  "waitMs": 1000,
+  "examples": {
+    "CLS": {
+      "script": "CLS",
+      "status": "ok",
+      "metric": "CLS",
+      "value": 0.0324,
+      "unit": "score",
+      "rating": "good",
+      "thresholds": {
+        "good": 0.1,
+        "needsImprovement": 0.25
+      },
+      "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+      "getDataFn": "getCLS"
+    },
+    "INP": {
+      "script": "INP",
+      "status": "ok",
+      "metric": "INP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 200,
+        "needsImprovement": 500
+      },
+      "details": {
+        "totalInteractions": 1,
+        "worstEvent": "click → button#go",
+        "phases": {
+          "inputDelay": 1,
+          "processingTime": 61,
+          "presentationDelay": 3
+        }
+      }
+    },
+    "LCP": {
+      "script": "LCP",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 68,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "elementType": "Image",
+        "url": "http://127.0.0.1:56834/hero.png",
+        "sizePixels": 10000
+      }
+    },
+    "LCP-Image-Entropy": {
+      "script": "LCP-Image-Entropy",
+      "status": "ok",
+      "count": 3,
+      "details": {
+        "totalImages": 3,
+        "lowEntropyCount": 0,
+        "lcpElement": "img",
+        "lcpImageEligible": true,
+        "lcpImage": {
+          "url": "hero.png",
+          "bpp": 24.1384,
+          "isLowEntropy": false
+        }
+      },
+      "items": [
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 600,
+          "displayedHeight": 400,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": true
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        }
+      ],
+      "issues": []
+    },
+    "LCP-Subparts": {
+      "script": "LCP-Subparts",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "url": "hero.png",
+        "subParts": {
+          "ttfb": {
+            "value": 9,
+            "percent": 14,
+            "overTarget": false
+          },
+          "resourceLoadDelay": {
+            "value": 13,
+            "percent": 20,
+            "overTarget": true
+          },
+          "resourceLoadTime": {
+            "value": 8,
+            "percent": 13,
+            "overTarget": false
+          },
+          "elementRenderDelay": {
+            "value": 34,
+            "percent": 53,
+            "overTarget": true
+          }
+        },
+        "slowestPhase": "elementRenderDelay"
+      }
+    },
+    "LCP-Trail": {
+      "script": "LCP-Trail",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "candidateCount": 1,
+        "finalElement": "#hero",
+        "candidates": [
+          {
+            "index": 1,
+            "selector": "#hero",
+            "time": 64,
+            "elementType": "Image",
+            "url": "hero.png"
+          }
+        ]
+      }
+    },
+    "LCP-Video-Candidate": {
+      "script": "LCP-Video-Candidate",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 60,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "isVideo": true,
+        "lcpSource": "poster",
+        "posterUrl": "http://127.0.0.1:56834/hero.png",
+        "videoUrl": null,
+        "posterFormat": "png",
+        "posterPreloaded": false,
+        "fetchpriorityOnPreload": null,
+        "isCrossOrigin": false,
+        "videoAttributes": {
+          "autoplay": false,
+          "muted": false,
+          "playsinline": false,
+          "preload": "none"
+        }
+      },
+      "issues": [
+        {
+          "severity": "warning",
+          "message": "No <link rel=\"preload\" as=\"image\"> for the poster: the browser discovers it late"
+        },
+        {
+          "severity": "info",
+          "message": "Poster uses png; AVIF or WebP would reduce file size and LCP load time"
+        },
+        {
+          "severity": "warning",
+          "message": "preload=\"none\" on a non-autoplay video may delay poster image loading in some browsers"
+        }
+      ]
+    }
+  }
+}
diff --git a/dist/antigravity/webperf-core-web-vitals/references/snippets.md b/dist/antigravity/webperf-core-web-vitals/references/snippets.md
index 035fcaad..b5e39694 100644
--- a/dist/antigravity/webperf-core-web-vitals/references/snippets.md
+++ b/dist/antigravity/webperf-core-web-vitals/references/snippets.md
@@ -1,3 +1,7 @@
+## Captured return values
+
+Each object below is a real result captured by running the snippet against the seeded test pages.
+
 ---
 ## Cumulative layout shift (CLS)
 
@@ -12,6 +16,25 @@ Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual s
 | 🟢 Good | ≤ 0.1 | Stable, minimal shifting |
 | 🟡 Needs Improvement | ≤ 0.25 | Noticeable shifting |
 | 🔴 Poor | > 0.25 | Significant layout instability |
+
+**Captured return value:**
+
+```json
+{
+  "script": "CLS",
+  "status": "ok",
+  "metric": "CLS",
+  "value": 0.0324,
+  "unit": "score",
+  "rating": "good",
+  "thresholds": {
+    "good": 0.1,
+    "needsImprovement": 0.25
+  },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
+}
+```
 ---
 ## Interaction to next paint (INP)
 
@@ -26,6 +49,32 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
 | 🟢 Good | ≤ 200ms | Responsive, feels instant |
 | 🟡 Needs Improvement | ≤ 500ms | Noticeable delay |
 | 🔴 Poor | > 500ms | Slow, frustrating experience |
+
+**Captured return value:**
+
+```json
+{
+  "script": "INP",
+  "status": "ok",
+  "metric": "INP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 200,
+    "needsImprovement": 500
+  },
+  "details": {
+    "totalInteractions": 1,
+    "worstEvent": "click → button#go",
+    "phases": {
+      "inputDelay": 1,
+      "processingTime": 61,
+      "presentationDelay": 3
+    }
+  }
+}
+```
 ---
 ## LCP image entropy
 
@@ -39,24 +88,205 @@ Checks if images qualify as LCP candidates based on their entropy (bits per pixe
 |-----|---------|--------------|---------|
 | < 0.05 | 🔴 Low | ❌ No | Solid colors, simple gradients, placeholders |
 | ≥ 0.05 | 🟢 Normal | ✅ Yes | Photos, complex graphics |
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Image-Entropy",
+  "status": "ok",
+  "count": 3,
+  "details": {
+    "totalImages": 3,
+    "lowEntropyCount": 0,
+    "lcpElement": "img",
+    "lcpImageEligible": true,
+    "lcpImage": {
+      "url": "hero.png",
+      "bpp": 24.1384,
+      "isLowEntropy": false
+    }
+  },
+  "items": [
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 600,
+      "displayedHeight": 400,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": true
+    },
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    },
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    }
+  ],
+  "issues": []
+}
+```
 ---
 ## LCP subparts
 
 Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities. Understanding which phase is slowest helps you focus your optimization efforts where they'll have the most impact. Based on the Web Vitals Chrome Extension.
 
 **Script:** `scripts/LCP-Subparts.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Subparts",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#hero",
+    "url": "hero.png",
+    "subParts": {
+      "ttfb": {
+        "value": 9,
+        "percent": 14,
+        "overTarget": false
+      },
+      "resourceLoadDelay": {
+        "value": 13,
+        "percent": 20,
+        "overTarget": true
+      },
+      "resourceLoadTime": {
+        "value": 8,
+        "percent": 13,
+        "overTarget": false
+      },
+      "elementRenderDelay": {
+        "value": 34,
+        "percent": 53,
+        "overTarget": true
+      }
+    },
+    "slowestPhase": "elementRenderDelay"
+  }
+}
+```
 ---
 ## LCP trail
 
 Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-colored dashed outline, so you can see the full trail from first candidate to final LCP.
 
 **Script:** `scripts/LCP-Trail.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Trail",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "candidateCount": 1,
+    "finalElement": "#hero",
+    "candidates": [
+      {
+        "index": 1,
+        "selector": "#hero",
+        "time": 64,
+        "elementType": "Image",
+        "url": "hero.png"
+      }
+    ]
+  }
+}
+```
 ---
 ## LCP video candidate
 
 Detects whether the LCP element is a <video> and audits the poster image configuration, the most common source of avoidable LCP delay when video is the hero element.
 
 **Script:** `scripts/LCP-Video-Candidate.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Video-Candidate",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 60,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "isVideo": true,
+    "lcpSource": "poster",
+    "posterUrl": "http://127.0.0.1:56834/hero.png",
+    "videoUrl": null,
+    "posterFormat": "png",
+    "posterPreloaded": false,
+    "fetchpriorityOnPreload": null,
+    "isCrossOrigin": false,
+    "videoAttributes": {
+      "autoplay": false,
+      "muted": false,
+      "playsinline": false,
+      "preload": "none"
+    }
+  },
+  "issues": [
+    {
+      "severity": "warning",
+      "message": "No <link rel=\"preload\" as=\"image\"> for the poster: the browser discovers it late"
+    },
+    {
+      "severity": "info",
+      "message": "Poster uses png; AVIF or WebP would reduce file size and LCP load time"
+    },
+    {
+      "severity": "warning",
+      "message": "preload=\"none\" on a non-autoplay video may delay poster image loading in some browsers"
+    }
+  ]
+}
+```
 ---
 ## Largest contentful paint (LCP)
 
@@ -71,3 +301,26 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
 | 🟢 Good | ≤ 2.5s | Fast, content appears quickly |
 | 🟡 Needs Improvement | ≤ 4s | Moderate delay |
 | 🔴 Poor | > 4s | Slow, users may abandon |
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 68,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#hero",
+    "elementType": "Image",
+    "url": "http://127.0.0.1:56834/hero.png",
+    "sizePixels": 10000
+  }
+}
+```
diff --git a/package.json b/package.json
index 09b21f6b..5cf7afd5 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "test:components": "vitest run components lib/page-metadata.test.js lib/analytics.test.js lib/webmcp.test.js",
     "generate-icons": "node scripts/generate-icons.mjs",
     "generate-demo-heights": "node scripts/generate-demo-heights.mjs",
+    "capture:examples": "node scripts/capture-snippet-examples.mjs",
     "generate-skills": "node scripts/generate-skills.js",
     "generate-skills:check": "node scripts/generate-skills.js && git diff --exit-code -- skills dist .claude/skills",
     "test:skills": "node --test scripts/skill-scripts.test.js scripts/skill-guidance.test.js",
diff --git a/scripts/capture-snippet-examples.mjs b/scripts/capture-snippet-examples.mjs
new file mode 100644
index 00000000..d6eff010
--- /dev/null
+++ b/scripts/capture-snippet-examples.mjs
@@ -0,0 +1,55 @@
+import { readdirSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { runSnippets, VIEWPORT_PRESETS } from "../cli/src/runner.js";
+import { loadSnippet } from "../cli/src/load-snippet.js";
+import { startContractServers } from "../cli/tests/helpers/contract.js";
+
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const CATEGORY = "CoreWebVitals";
+const OUTPUT = join(ROOT, "snippets", CATEGORY, "examples.json");
+
+const SCENARIOS = {
+  INP: { page: "/seeded", interactions: [{ action: "click", selector: "#go" }] },
+  "LCP-Video-Candidate": { page: "/video-poster.html" },
+};
+const DEFAULT_SCENARIO = { page: "/seeded" };
+
+const servers = await startContractServers();
+
+try {
+  const names = readdirSync(join(ROOT, "snippets", CATEGORY))
+    .filter((name) => name.endsWith(".js"))
+    .map((name) => name.slice(0, -3))
+    .sort();
+  const examples = {};
+
+  for (const name of names) {
+    const scenario = SCENARIOS[name] ?? DEFAULT_SCENARIO;
+    const path = `${CATEGORY}/${name}`;
+    const { results, pageErrors } = await runSnippets({
+      url: `${servers.base}${scenario.page}`,
+      items: [{ id: name, path, source: loadSnippet(path) }],
+      waitMs: 1000,
+      viewport: VIEWPORT_PRESETS.desktop,
+      ...(scenario.interactions ? { interactions: scenario.interactions } : {}),
+    });
+    const { id, ...result } = results[0];
+    if (pageErrors.length > 0) throw new Error(`${name} produced a page error: ${pageErrors.join("; ")}`);
+    if (!result || !["ok", "error", "unsupported"].includes(result.status)) {
+      throw new Error(`${name} did not return a valid result object`);
+    }
+    if (result.status !== "ok") {
+      throw new Error(`${name} returned ${result.status}: ${result.error ?? "no result"}`);
+    }
+    examples[name] = result;
+  }
+
+  writeFileSync(
+    OUTPUT,
+    `${JSON.stringify({ viewport: "desktop", waitMs: 1000, examples }, null, 2)}\n`
+  );
+  process.stdout.write(`Captured ${Object.keys(examples).length} ${CATEGORY} examples in ${OUTPUT}\n`);
+} finally {
+  await servers.close();
+}
diff --git a/scripts/generate-llms.js b/scripts/generate-llms.js
index a690bb2f..08b55cbb 100644
--- a/scripts/generate-llms.js
+++ b/scripts/generate-llms.js
@@ -20,7 +20,7 @@ function readFile(filePath) {
 }
 
 function extractSnippetImports(content) {
-  const matches = [...content.matchAll(/import\s+\w+\s+from\s+['"]\.\.\/\.\.\/snippets\/([^/'"]+)\/([^'"?]+)/g)]
+  const matches = [...content.matchAll(/import\s+\w+\s+from\s+['"]\.\.\/\.\.\/snippets\/([^/'"]+)\/([^'"?]+\.js)/g)]
   return matches.map((m) => ({ category: m[1], file: m[2] }))
 }
 
diff --git a/scripts/generate-skills.js b/scripts/generate-skills.js
index 34338f32..8b55c3c9 100755
--- a/scripts/generate-skills.js
+++ b/scripts/generate-skills.js
@@ -377,6 +377,11 @@ async function generateCategorySkill(category, catConfig) {
   fs.mkdirSync(refsDir, { recursive: true })
   fs.mkdirSync(distDir, { recursive: true })
 
+  const examplesSrc = path.join(SNIPPETS_DIR, category, 'examples.json')
+  const examples = fs.existsSync(examplesSrc)
+    ? JSON.parse(fs.readFileSync(examplesSrc, 'utf-8')).examples
+    : null
+
   for (const snippetFile of snippetFiles) {
     const src = path.join(SNIPPETS_DIR, category, snippetFile)
     await buildScript(src, path.join(scriptsDir, snippetFile), `snippets/${category}/${snippetFile}`)
@@ -384,8 +389,17 @@ async function generateCategorySkill(category, catConfig) {
   }
   console.log(`  built ${snippetFiles.length} scripts to scripts/ and dist/`)
 
+  if (examples) {
+    fs.copyFileSync(examplesSrc, path.join(refsDir, 'examples.json'))
+    console.log(`  copied: references/examples.json`)
+  }
+
   // Write references/snippets.md (L3 — loaded on demand)
   const snippetLines = []
+  if (examples) {
+    snippetLines.push('## Captured return values', '')
+    snippetLines.push('Each object below is a real result captured by running the snippet against the seeded test pages.', '')
+  }
   for (const meta of metas) {
     snippetLines.push(`---`)
     snippetLines.push(`## ${meta.title}`)
@@ -401,6 +415,14 @@ async function generateCategorySkill(category, catConfig) {
       snippetLines.push('')
       snippetLines.push(meta.thresholds)
     }
+    if (examples?.[meta.basename]) {
+      snippetLines.push('')
+      snippetLines.push('**Captured return value:**')
+      snippetLines.push('')
+      snippetLines.push('```json')
+      snippetLines.push(JSON.stringify(examples[meta.basename], null, 2))
+      snippetLines.push('```')
+    }
   }
   fs.writeFileSync(path.join(refsDir, 'snippets.md'), snippetLines.join('\n') + '\n')
   console.log(`  written: references/snippets.md`)
@@ -440,6 +462,7 @@ async function generateCategorySkill(category, catConfig) {
   bodyLines.push('')
   bodyLines.push('- `references/snippets.md` — Descriptions and thresholds for each script')
   bodyLines.push('- `references/schema.md` — Return value schema for interpreting script output')
+  if (examples) bodyLines.push('- `references/examples.json` — Captured return values used in the snippet pages')
 
   // Claude Code SKILL.md
   const frontmatterLines = [
@@ -480,6 +503,9 @@ async function generateCategorySkill(category, catConfig) {
   if (fs.existsSync(path.join(refsDir, 'schema.md'))) {
     fs.copyFileSync(path.join(refsDir, 'schema.md'), path.join(antigravityRefsDir, 'schema.md'))
   }
+  if (examples) {
+    fs.copyFileSync(examplesSrc, path.join(antigravityRefsDir, 'examples.json'))
+  }
   fs.writeFileSync(path.join(antigravityDir, 'SKILL.md'), buildAntigravitySkillContent(catConfig, bodyLines))
   console.log(`  written: dist/antigravity/${catConfig.skill}/ (${snippetFiles.length} scripts + references + SKILL.md)`)
 }
diff --git a/skills/webperf-core-web-vitals/SKILL.md b/skills/webperf-core-web-vitals/SKILL.md
index 434f9cad..9beba17a 100644
--- a/skills/webperf-core-web-vitals/SKILL.md
+++ b/skills/webperf-core-web-vitals/SKILL.md
@@ -241,4 +241,5 @@ When multiple CWV metrics are poor, prioritize investigation:
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
+- `references/examples.json` — Captured return values used in the snippet pages
\ No newline at end of file
diff --git a/skills/webperf-core-web-vitals/references/examples.json b/skills/webperf-core-web-vitals/references/examples.json
new file mode 100644
index 00000000..ec568ec7
--- /dev/null
+++ b/skills/webperf-core-web-vitals/references/examples.json
@@ -0,0 +1,220 @@
+{
+  "viewport": "desktop",
+  "waitMs": 1000,
+  "examples": {
+    "CLS": {
+      "script": "CLS",
+      "status": "ok",
+      "metric": "CLS",
+      "value": 0.0324,
+      "unit": "score",
+      "rating": "good",
+      "thresholds": {
+        "good": 0.1,
+        "needsImprovement": 0.25
+      },
+      "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+      "getDataFn": "getCLS"
+    },
+    "INP": {
+      "script": "INP",
+      "status": "ok",
+      "metric": "INP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 200,
+        "needsImprovement": 500
+      },
+      "details": {
+        "totalInteractions": 1,
+        "worstEvent": "click → button#go",
+        "phases": {
+          "inputDelay": 1,
+          "processingTime": 61,
+          "presentationDelay": 3
+        }
+      }
+    },
+    "LCP": {
+      "script": "LCP",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 68,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "elementType": "Image",
+        "url": "http://127.0.0.1:56834/hero.png",
+        "sizePixels": 10000
+      }
+    },
+    "LCP-Image-Entropy": {
+      "script": "LCP-Image-Entropy",
+      "status": "ok",
+      "count": 3,
+      "details": {
+        "totalImages": 3,
+        "lowEntropyCount": 0,
+        "lcpElement": "img",
+        "lcpImageEligible": true,
+        "lcpImage": {
+          "url": "hero.png",
+          "bpp": 24.1384,
+          "isLowEntropy": false
+        }
+      },
+      "items": [
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 600,
+          "displayedHeight": 400,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": true
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        }
+      ],
+      "issues": []
+    },
+    "LCP-Subparts": {
+      "script": "LCP-Subparts",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "url": "hero.png",
+        "subParts": {
+          "ttfb": {
+            "value": 9,
+            "percent": 14,
+            "overTarget": false
+          },
+          "resourceLoadDelay": {
+            "value": 13,
+            "percent": 20,
+            "overTarget": true
+          },
+          "resourceLoadTime": {
+            "value": 8,
+            "percent": 13,
+            "overTarget": false
+          },
+          "elementRenderDelay": {
+            "value": 34,
+            "percent": 53,
+            "overTarget": true
+          }
+        },
+        "slowestPhase": "elementRenderDelay"
+      }
+    },
+    "LCP-Trail": {
+      "script": "LCP-Trail",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "candidateCount": 1,
+        "finalElement": "#hero",
+        "candidates": [
+          {
+            "index": 1,
+            "selector": "#hero",
+            "time": 64,
+            "elementType": "Image",
+            "url": "hero.png"
+          }
+        ]
+      }
+    },
+    "LCP-Video-Candidate": {
+      "script": "LCP-Video-Candidate",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 60,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "isVideo": true,
+        "lcpSource": "poster",
+        "posterUrl": "http://127.0.0.1:56834/hero.png",
+        "videoUrl": null,
+        "posterFormat": "png",
+        "posterPreloaded": false,
+        "fetchpriorityOnPreload": null,
+        "isCrossOrigin": false,
+        "videoAttributes": {
+          "autoplay": false,
+          "muted": false,
+          "playsinline": false,
+          "preload": "none"
+        }
+      },
+      "issues": [
+        {
+          "severity": "warning",
+          "message": "No <link rel=\"preload\" as=\"image\"> for the poster: the browser discovers it late"
+        },
+        {
+          "severity": "info",
+          "message": "Poster uses png; AVIF or WebP would reduce file size and LCP load time"
+        },
+        {
+          "severity": "warning",
+          "message": "preload=\"none\" on a non-autoplay video may delay poster image loading in some browsers"
+        }
+      ]
+    }
+  }
+}
diff --git a/skills/webperf-core-web-vitals/references/snippets.md b/skills/webperf-core-web-vitals/references/snippets.md
index 035fcaad..b5e39694 100644
--- a/skills/webperf-core-web-vitals/references/snippets.md
+++ b/skills/webperf-core-web-vitals/references/snippets.md
@@ -1,3 +1,7 @@
+## Captured return values
+
+Each object below is a real result captured by running the snippet against the seeded test pages.
+
 ---
 ## Cumulative layout shift (CLS)
 
@@ -12,6 +16,25 @@ Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual s
 | 🟢 Good | ≤ 0.1 | Stable, minimal shifting |
 | 🟡 Needs Improvement | ≤ 0.25 | Noticeable shifting |
 | 🔴 Poor | > 0.25 | Significant layout instability |
+
+**Captured return value:**
+
+```json
+{
+  "script": "CLS",
+  "status": "ok",
+  "metric": "CLS",
+  "value": 0.0324,
+  "unit": "score",
+  "rating": "good",
+  "thresholds": {
+    "good": 0.1,
+    "needsImprovement": 0.25
+  },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
+}
+```
 ---
 ## Interaction to next paint (INP)
 
@@ -26,6 +49,32 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
 | 🟢 Good | ≤ 200ms | Responsive, feels instant |
 | 🟡 Needs Improvement | ≤ 500ms | Noticeable delay |
 | 🔴 Poor | > 500ms | Slow, frustrating experience |
+
+**Captured return value:**
+
+```json
+{
+  "script": "INP",
+  "status": "ok",
+  "metric": "INP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 200,
+    "needsImprovement": 500
+  },
+  "details": {
+    "totalInteractions": 1,
+    "worstEvent": "click → button#go",
+    "phases": {
+      "inputDelay": 1,
+      "processingTime": 61,
+      "presentationDelay": 3
+    }
+  }
+}
+```
 ---
 ## LCP image entropy
 
@@ -39,24 +88,205 @@ Checks if images qualify as LCP candidates based on their entropy (bits per pixe
 |-----|---------|--------------|---------|
 | < 0.05 | 🔴 Low | ❌ No | Solid colors, simple gradients, placeholders |
 | ≥ 0.05 | 🟢 Normal | ✅ Yes | Photos, complex graphics |
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Image-Entropy",
+  "status": "ok",
+  "count": 3,
+  "details": {
+    "totalImages": 3,
+    "lowEntropyCount": 0,
+    "lcpElement": "img",
+    "lcpImageEligible": true,
+    "lcpImage": {
+      "url": "hero.png",
+      "bpp": 24.1384,
+      "isLowEntropy": false
+    }
+  },
+  "items": [
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 600,
+      "displayedHeight": 400,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": true
+    },
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    },
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    }
+  ],
+  "issues": []
+}
+```
 ---
 ## LCP subparts
 
 Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities. Understanding which phase is slowest helps you focus your optimization efforts where they'll have the most impact. Based on the Web Vitals Chrome Extension.
 
 **Script:** `scripts/LCP-Subparts.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Subparts",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#hero",
+    "url": "hero.png",
+    "subParts": {
+      "ttfb": {
+        "value": 9,
+        "percent": 14,
+        "overTarget": false
+      },
+      "resourceLoadDelay": {
+        "value": 13,
+        "percent": 20,
+        "overTarget": true
+      },
+      "resourceLoadTime": {
+        "value": 8,
+        "percent": 13,
+        "overTarget": false
+      },
+      "elementRenderDelay": {
+        "value": 34,
+        "percent": 53,
+        "overTarget": true
+      }
+    },
+    "slowestPhase": "elementRenderDelay"
+  }
+}
+```
 ---
 ## LCP trail
 
 Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-colored dashed outline, so you can see the full trail from first candidate to final LCP.
 
 **Script:** `scripts/LCP-Trail.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Trail",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 64,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "candidateCount": 1,
+    "finalElement": "#hero",
+    "candidates": [
+      {
+        "index": 1,
+        "selector": "#hero",
+        "time": 64,
+        "elementType": "Image",
+        "url": "hero.png"
+      }
+    ]
+  }
+}
+```
 ---
 ## LCP video candidate
 
 Detects whether the LCP element is a <video> and audits the poster image configuration, the most common source of avoidable LCP delay when video is the hero element.
 
 **Script:** `scripts/LCP-Video-Candidate.js`
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP-Video-Candidate",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 60,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "isVideo": true,
+    "lcpSource": "poster",
+    "posterUrl": "http://127.0.0.1:56834/hero.png",
+    "videoUrl": null,
+    "posterFormat": "png",
+    "posterPreloaded": false,
+    "fetchpriorityOnPreload": null,
+    "isCrossOrigin": false,
+    "videoAttributes": {
+      "autoplay": false,
+      "muted": false,
+      "playsinline": false,
+      "preload": "none"
+    }
+  },
+  "issues": [
+    {
+      "severity": "warning",
+      "message": "No <link rel=\"preload\" as=\"image\"> for the poster: the browser discovers it late"
+    },
+    {
+      "severity": "info",
+      "message": "Poster uses png; AVIF or WebP would reduce file size and LCP load time"
+    },
+    {
+      "severity": "warning",
+      "message": "preload=\"none\" on a non-autoplay video may delay poster image loading in some browsers"
+    }
+  ]
+}
+```
 ---
 ## Largest contentful paint (LCP)
 
@@ -71,3 +301,26 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
 | 🟢 Good | ≤ 2.5s | Fast, content appears quickly |
 | 🟡 Needs Improvement | ≤ 4s | Moderate delay |
 | 🔴 Poor | > 4s | Slow, users may abandon |
+
+**Captured return value:**
+
+```json
+{
+  "script": "LCP",
+  "status": "ok",
+  "metric": "LCP",
+  "value": 68,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#hero",
+    "elementType": "Image",
+    "url": "http://127.0.0.1:56834/hero.png",
+    "sizePixels": 10000
+  }
+}
+```
diff --git a/snippets/CoreWebVitals/examples.json b/snippets/CoreWebVitals/examples.json
new file mode 100644
index 00000000..ec568ec7
--- /dev/null
+++ b/snippets/CoreWebVitals/examples.json
@@ -0,0 +1,220 @@
+{
+  "viewport": "desktop",
+  "waitMs": 1000,
+  "examples": {
+    "CLS": {
+      "script": "CLS",
+      "status": "ok",
+      "metric": "CLS",
+      "value": 0.0324,
+      "unit": "score",
+      "rating": "good",
+      "thresholds": {
+        "good": 0.1,
+        "needsImprovement": 0.25
+      },
+      "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+      "getDataFn": "getCLS"
+    },
+    "INP": {
+      "script": "INP",
+      "status": "ok",
+      "metric": "INP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 200,
+        "needsImprovement": 500
+      },
+      "details": {
+        "totalInteractions": 1,
+        "worstEvent": "click → button#go",
+        "phases": {
+          "inputDelay": 1,
+          "processingTime": 61,
+          "presentationDelay": 3
+        }
+      }
+    },
+    "LCP": {
+      "script": "LCP",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 68,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "elementType": "Image",
+        "url": "http://127.0.0.1:56834/hero.png",
+        "sizePixels": 10000
+      }
+    },
+    "LCP-Image-Entropy": {
+      "script": "LCP-Image-Entropy",
+      "status": "ok",
+      "count": 3,
+      "details": {
+        "totalImages": 3,
+        "lowEntropyCount": 0,
+        "lcpElement": "img",
+        "lcpImageEligible": true,
+        "lcpImage": {
+          "url": "hero.png",
+          "bpp": 24.1384,
+          "isLowEntropy": false
+        }
+      },
+      "items": [
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 600,
+          "displayedHeight": 400,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": true
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        },
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 300,
+          "displayedHeight": 200,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        }
+      ],
+      "issues": []
+    },
+    "LCP-Subparts": {
+      "script": "LCP-Subparts",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#hero",
+        "url": "hero.png",
+        "subParts": {
+          "ttfb": {
+            "value": 9,
+            "percent": 14,
+            "overTarget": false
+          },
+          "resourceLoadDelay": {
+            "value": 13,
+            "percent": 20,
+            "overTarget": true
+          },
+          "resourceLoadTime": {
+            "value": 8,
+            "percent": 13,
+            "overTarget": false
+          },
+          "elementRenderDelay": {
+            "value": 34,
+            "percent": 53,
+            "overTarget": true
+          }
+        },
+        "slowestPhase": "elementRenderDelay"
+      }
+    },
+    "LCP-Trail": {
+      "script": "LCP-Trail",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 64,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "candidateCount": 1,
+        "finalElement": "#hero",
+        "candidates": [
+          {
+            "index": 1,
+            "selector": "#hero",
+            "time": 64,
+            "elementType": "Image",
+            "url": "hero.png"
+          }
+        ]
+      }
+    },
+    "LCP-Video-Candidate": {
+      "script": "LCP-Video-Candidate",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 60,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "isVideo": true,
+        "lcpSource": "poster",
+        "posterUrl": "http://127.0.0.1:56834/hero.png",
+        "videoUrl": null,
+        "posterFormat": "png",
+        "posterPreloaded": false,
+        "fetchpriorityOnPreload": null,
+        "isCrossOrigin": false,
+        "videoAttributes": {
+          "autoplay": false,
+          "muted": false,
+          "playsinline": false,
+          "preload": "none"
+        }
+      },
+      "issues": [
+        {
+          "severity": "warning",
+          "message": "No <link rel=\"preload\" as=\"image\"> for the poster: the browser discovers it late"
+        },
+        {
+          "severity": "info",
+          "message": "Poster uses png; AVIF or WebP would reduce file size and LCP load time"
+        },
+        {
+          "severity": "warning",
+          "message": "preload=\"none\" on a non-autoplay video may delay poster image loading in some browsers"
+        }
+      ]
+    }
+  }
+}
diff --git a/styles/globals.css b/styles/globals.css
index 2e769ebe..08af2738 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -36,7 +36,8 @@ pre code {
   margin-top: 0;
 }
 
-.wp-snippet pre {
+.wp-snippet pre,
+.wp-snippet-example pre {
   margin: 0 0 1rem;
   overflow-x: auto;
   border-radius: 0.75rem;
@@ -49,7 +50,8 @@ pre code {
 }
 
 /* The `!important overrides the `pre code { padding: 0 !important }` reset of the docs theme */
-.wp-snippet pre code {
+.wp-snippet pre code,
+.wp-snippet-example pre code {
   display: block;
   min-width: 100%;
   padding: 1rem !important;
@@ -60,13 +62,33 @@ pre code {
   overflow-wrap: break-word;
 }
 
+.wp-snippet-example {
+  margin-top: 0.75rem;
+}
+
+.wp-snippet-example p {
+  margin: 0 0 0.5rem;
+  color: var(--wp-caption-fg);
+  font-size: 0.875rem;
+}
+
+.wp-snippet-example pre {
+  margin-bottom: 0;
+}
+
+.wp-snippet-example code {
+  white-space: pre;
+}
+
 @media (prefers-contrast: more) {
-  .wp-snippet pre {
+  .wp-snippet pre,
+  .wp-snippet-example pre {
     border: 1px solid rgba(0, 57, 122, 0.2);
     filter: contrast(1.5);
   }
 
-  .dark .wp-snippet pre {
+  .dark .wp-snippet pre,
+  .dark .wp-snippet-example pre {
     border-color: rgba(224, 243, 255, 0.4);
   }
 }