From 4e12435773992bf6c23a00848a922538de81797f Mon Sep 17 00:00:00 2001
From: yoreva-01 <195282707+yoreva-01@users.noreply.github.com>
Date: Sun, 18 Oct 2026 17:02:55 +0300
Subject: [PATCH 1/3] docs: add captured Core Web Vitals examples

---
 .../skills/webperf-core-web-vitals/SKILL.md   |   3 +-
 .../references/examples.json                  | 170 +++++++++++++++
 .../references/snippets.md                    | 202 ++++++++++++++++++
 cli/tests/fixtures/README.md                  |   1 +
 .../core-web-vitals-interactions.json         |   5 +
 cli/tests/fixtures/core-web-vitals.html       |  32 +++
 components/Snippet.jsx                        |  11 +-
 components/Snippet.test.jsx                   |  13 ++
 content/CoreWebVitals/CLS.mdx                 |   3 +-
 content/CoreWebVitals/INP.mdx                 |   3 +-
 content/CoreWebVitals/LCP-Image-Entropy.mdx   |   3 +-
 content/CoreWebVitals/LCP-Subparts.mdx        |   3 +-
 content/CoreWebVitals/LCP-Trail.mdx           |   3 +-
 content/CoreWebVitals/LCP-Video-Candidate.mdx |   3 +-
 content/CoreWebVitals/LCP.mdx                 |   3 +-
 .../webperf-core-web-vitals/SKILL.md          |   3 +-
 .../references/examples.json                  | 170 +++++++++++++++
 .../references/snippets.md                    | 202 ++++++++++++++++++
 package.json                                  |   1 +
 scripts/capture-snippet-examples.mjs          |  76 +++++++
 scripts/generate-skills.js                    |  21 ++
 skills/webperf-core-web-vitals/SKILL.md       |   3 +-
 .../references/examples.json                  | 170 +++++++++++++++
 .../references/snippets.md                    | 202 ++++++++++++++++++
 styles/globals.css                            |  20 ++
 25 files changed, 1315 insertions(+), 11 deletions(-)
 create mode 100644 .claude/skills/webperf-core-web-vitals/references/examples.json
 create mode 100644 cli/tests/fixtures/core-web-vitals-interactions.json
 create mode 100644 cli/tests/fixtures/core-web-vitals.html
 create mode 100644 dist/antigravity/webperf-core-web-vitals/references/examples.json
 create mode 100644 scripts/capture-snippet-examples.mjs
 create mode 100644 skills/webperf-core-web-vitals/references/examples.json

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..71cd7cc1
--- /dev/null
+++ b/.claude/skills/webperf-core-web-vitals/references/examples.json
@@ -0,0 +1,170 @@
+{
+  "fixture": "cli/tests/fixtures/core-web-vitals.html",
+  "viewport": "desktop",
+  "waitMs": 1000,
+  "examples": {
+    "CLS": {
+      "script": "CLS",
+      "status": "ok",
+      "metric": "CLS",
+      "value": 0,
+      "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": 16,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 200,
+        "needsImprovement": 500
+      },
+      "details": {
+        "totalInteractions": 1,
+        "worstEvent": "click → button#interaction-button",
+        "phases": {
+          "inputDelay": 1,
+          "processingTime": 1,
+          "presentationDelay": 15
+        }
+      }
+    },
+    "LCP": {
+      "script": "LCP",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 84,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#main-heading",
+        "elementType": "Text block",
+        "url": null,
+        "sizePixels": 24624
+      }
+    },
+    "LCP-Image-Entropy": {
+      "script": "LCP-Image-Entropy",
+      "status": "ok",
+      "count": 1,
+      "details": {
+        "totalImages": 1,
+        "lowEntropyCount": 0,
+        "lcpElement": "h1",
+        "lcpImageEligible": null,
+        "lcpImage": null
+      },
+      "items": [
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 320,
+          "displayedHeight": 320,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        }
+      ],
+      "issues": [
+        {
+          "severity": "info",
+          "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+        }
+      ]
+    },
+    "LCP-Subparts": {
+      "script": "LCP-Subparts",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 84,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#main-heading",
+        "url": null,
+        "subParts": {
+          "ttfb": {
+            "value": 6,
+            "percent": 7,
+            "overTarget": false
+          },
+          "resourceLoadDelay": {
+            "value": 0,
+            "percent": 0,
+            "overTarget": false
+          },
+          "resourceLoadTime": {
+            "value": 0,
+            "percent": 0,
+            "overTarget": false
+          },
+          "elementRenderDelay": {
+            "value": 78,
+            "percent": 93,
+            "overTarget": true
+          }
+        },
+        "slowestPhase": "elementRenderDelay"
+      }
+    },
+    "LCP-Trail": {
+      "script": "LCP-Trail",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 108,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "candidateCount": 1,
+        "finalElement": "#main-heading",
+        "candidates": [
+          {
+            "index": 1,
+            "selector": "#main-heading",
+            "time": 108,
+            "elementType": "Text block"
+          }
+        ]
+      }
+    },
+    "LCP-Video-Candidate": {
+      "script": "LCP-Video-Candidate",
+      "status": "ok",
+      "details": {
+        "isVideo": false,
+        "lcpElement": "h1",
+        "lcpUrl": null
+      },
+      "issues": [
+        {
+          "severity": "info",
+          "message": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+        }
+      ]
+    }
+  }
+}
diff --git a/.claude/skills/webperf-core-web-vitals/references/snippets.md b/.claude/skills/webperf-core-web-vitals/references/snippets.md
index 035fcaad..81567641 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 `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.
+
 ---
 ## 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,
+  "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": 16,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 200,
+    "needsImprovement": 500
+  },
+  "details": {
+    "totalInteractions": 1,
+    "worstEvent": "click → button#interaction-button",
+    "phases": {
+      "inputDelay": 1,
+      "processingTime": 1,
+      "presentationDelay": 15
+    }
+  }
+}
+```
 ---
 ## LCP image entropy
 
@@ -39,24 +88,154 @@ 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": 1,
+  "details": {
+    "totalImages": 1,
+    "lowEntropyCount": 0,
+    "lcpElement": "h1",
+    "lcpImageEligible": null,
+    "lcpImage": null
+  },
+  "items": [
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 320,
+      "displayedHeight": 320,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    }
+  ],
+  "issues": [
+    {
+      "severity": "info",
+      "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+    }
+  ]
+}
+```
 ---
 ## 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": 84,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#main-heading",
+    "url": null,
+    "subParts": {
+      "ttfb": {
+        "value": 6,
+        "percent": 7,
+        "overTarget": false
+      },
+      "resourceLoadDelay": {
+        "value": 0,
+        "percent": 0,
+        "overTarget": false
+      },
+      "resourceLoadTime": {
+        "value": 0,
+        "percent": 0,
+        "overTarget": false
+      },
+      "elementRenderDelay": {
+        "value": 78,
+        "percent": 93,
+        "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": 108,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "candidateCount": 1,
+    "finalElement": "#main-heading",
+    "candidates": [
+      {
+        "index": 1,
+        "selector": "#main-heading",
+        "time": 108,
+        "elementType": "Text block"
+      }
+    ]
+  }
+}
+```
 ---
 ## 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",
+  "details": {
+    "isVideo": false,
+    "lcpElement": "h1",
+    "lcpUrl": null
+  },
+  "issues": [
+    {
+      "severity": "info",
+      "message": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+    }
+  ]
+}
+```
 ---
 ## Largest contentful paint (LCP)
 
@@ -71,3 +250,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": 84,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#main-heading",
+    "elementType": "Text block",
+    "url": null,
+    "sizePixels": 24624
+  }
+}
+```
diff --git a/cli/tests/fixtures/README.md b/cli/tests/fixtures/README.md
index d9d0a206..1bb3fd91 100644
--- a/cli/tests/fixtures/README.md
+++ b/cli/tests/fixtures/README.md
@@ -1,4 +1,5 @@
 # Fixtures
 
+- `core-web-vitals.html` and `core-web-vitals-interactions.json`: seeded page and click step used by `npm run capture:examples` to record real return objects for the Core Web Vitals category. The capture command requires Playwright Chromium (`npx playwright install chromium`).
 - `dm-sans-regular.woff2`: DM Sans Regular, copyright The DM Sans Project Authors, licensed under the SIL Open Font License 1.1 (https://openfontlicense.org). Used by the Webfont-Usage-Analyzer e2e test as a real font file.
 - `clip.webm`: half a second of the FFmpeg `testsrc2` pattern, generated with `ffmpeg -f lavfi -i "testsrc2=s=320x180:d=0.5:r=10" -c:v libvpx -b:v 200k -an clip.webm`. VP8, since the Chromium of Playwright does not decode H.264. A video of one flat color would not do: Chrome ignores low-entropy frames as LCP candidates. Used by the LCP-Video-Candidate e2e tests.
diff --git a/cli/tests/fixtures/core-web-vitals-interactions.json b/cli/tests/fixtures/core-web-vitals-interactions.json
new file mode 100644
index 00000000..ec675c45
--- /dev/null
+++ b/cli/tests/fixtures/core-web-vitals-interactions.json
@@ -0,0 +1,5 @@
+{
+  "interactions": [
+    { "action": "click", "selector": "#interaction-button" }
+  ]
+}
diff --git a/cli/tests/fixtures/core-web-vitals.html b/cli/tests/fixtures/core-web-vitals.html
new file mode 100644
index 00000000..4fd05992
--- /dev/null
+++ b/cli/tests/fixtures/core-web-vitals.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Core Web Vitals example fixture</title>
+  <style>
+    body { margin: 0; font-family: sans-serif; padding: 24px; }
+    main { max-width: 760px; margin: 0 auto; }
+    video { display: block; width: min(480px, 100%); height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
+    img { display: block; width: 320px; max-width: 100%; height: auto; }
+    button { margin-top: 1rem; padding: 0.75rem 1rem; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1 id="main-heading">A seeded page for Core Web Vitals examples</h1>
+    <video id="hero-video" autoplay muted playsinline loop preload="auto" poster="/hero.png">
+      <source src="/clip.webm" type="video/webm">
+    </video>
+    <p>The fixture reserves media dimensions so loading does not shift the page.</p>
+    <img id="secondary-image" src="/hero.png" width="320" height="240" alt="A sample landscape image">
+    <button id="interaction-button" type="button">Run a sample interaction</button>
+    <p id="interaction-result" aria-live="polite">Waiting for interaction.</p>
+  </main>
+  <script>
+    document.querySelector("#interaction-button").addEventListener("click", () => {
+      document.querySelector("#interaction-result").textContent = "Interaction recorded.";
+    });
+  </script>
+</body>
+</html>
diff --git a/components/Snippet.jsx b/components/Snippet.jsx
index 99155ce9..10696de0 100644
--- a/components/Snippet.jsx
+++ b/components/Snippet.jsx
@@ -9,7 +9,7 @@ hljs.registerLanguage("javascript", javascript);
 // (components/SnippetActions.jsx) run there. The copy button shows on hover or keyboard focus, in CSS.
 
 // 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 }) {
   const highlighted = hljs.highlight(code, { language: "javascript" }).value;
 
   return (
@@ -35,6 +35,15 @@ export function Snippet({ code, prompt, snippet }) {
           <CopyCodeButton snippet={snippet} />
         </div>
       </div>
+      {example ? (
+        <section className="wp-snippet-example" aria-label="Returned object example">
+          <h3>Returned object</h3>
+          <p>Captured from the seeded test page; timing values can vary between runs.</p>
+          <pre>
+            <code>{JSON.stringify(example, null, 2)}</code>
+          </pre>
+        </section>
+      ) : null}
     </div>
   );
 }
diff --git a/components/Snippet.test.jsx b/components/Snippet.test.jsx
index 8b10b739..11ea14e0 100644
--- a/components/Snippet.test.jsx
+++ b/components/Snippet.test.jsx
@@ -28,6 +28,19 @@ describe("Snippet", () => {
     expect(html).not.toMatch(/Copy prompt/);
   });
 
+  it("renders a captured return object below the snippet when one is provided", () => {
+    const example = { script: "Demo", status: "ok", value: 42 };
+    const html = renderToStaticMarkup(<Snippet code={CODE} example={example} />);
+    expect(html).toContain('<section class="wp-snippet-example" aria-label="Returned object example">');
+    expect(html).toContain("<h3>Returned object</h3>");
+    expect(html).toContain('&quot;value&quot;: 42');
+  });
+
+  it("does not render an example section when no captured object is provided", () => {
+    const html = renderToStaticMarkup(<Snippet code={CODE} />);
+    expect(html).not.toContain("Returned object");
+  });
+
   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..6766abae 100644
--- a/content/CoreWebVitals/CLS.mdx
+++ b/content/CoreWebVitals/CLS.mdx
@@ -5,6 +5,7 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/CLS.js?raw'
+import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
 import { Snippet } from '../../components/Snippet'
 import { Demo } from '../../components/Demo'
 import { Callout } from '../../components/Callout'
@@ -32,7 +33,7 @@ Unexpected layout shifts are frustrating and can cause users to click the wrong
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} example={examples.examples.CLS} />
 
 ### Understanding CLS
 
diff --git a/content/CoreWebVitals/INP.mdx b/content/CoreWebVitals/INP.mdx
index 3aa671cc..b01aeeb3 100644
--- a/content/CoreWebVitals/INP.mdx
+++ b/content/CoreWebVitals/INP.mdx
@@ -5,6 +5,7 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/INP.js?raw'
+import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
 import { Snippet } from '../../components/Snippet'
 import { Demo } from '../../components/Demo'
 import { Callout } from '../../components/Callout'
@@ -70,7 +71,7 @@ INP directly measures user frustration. When users click a button and nothing ha
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} example={examples.examples.INP} />
 
 ### Understanding INP
 
diff --git a/content/CoreWebVitals/LCP-Image-Entropy.mdx b/content/CoreWebVitals/LCP-Image-Entropy.mdx
index 46734019..0e90d605 100644
--- a/content/CoreWebVitals/LCP-Image-Entropy.mdx
+++ b/content/CoreWebVitals/LCP-Image-Entropy.mdx
@@ -6,6 +6,7 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Image-Entropy.js?raw'
+import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
 import { Snippet } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 
@@ -39,7 +40,7 @@ Chrome measures the bits per pixel over the area the image is displayed at, in C
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} example={examples.examples["LCP-Image-Entropy"]} />
 
 ### Understanding the results
 
diff --git a/content/CoreWebVitals/LCP-Subparts.mdx b/content/CoreWebVitals/LCP-Subparts.mdx
index 118619e7..24aaa24a 100644
--- a/content/CoreWebVitals/LCP-Subparts.mdx
+++ b/content/CoreWebVitals/LCP-Subparts.mdx
@@ -7,6 +7,7 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Subparts.js?raw'
+import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
 import { Snippet } from '../../components/Snippet'
 import { Demo } from '../../components/Demo'
 import { Callout } from '../../components/Callout'
@@ -52,7 +53,7 @@ LCP is a critical Core Web Vital that measures when the largest content element
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} example={examples.examples["LCP-Subparts"]} />
 
 ### Understanding the results
 
diff --git a/content/CoreWebVitals/LCP-Trail.mdx b/content/CoreWebVitals/LCP-Trail.mdx
index 93096391..25cfedbb 100644
--- a/content/CoreWebVitals/LCP-Trail.mdx
+++ b/content/CoreWebVitals/LCP-Trail.mdx
@@ -6,6 +6,7 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Trail.js?raw'
+import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
 import { Snippet } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 import { Demo } from '../../components/Demo'
@@ -32,7 +33,7 @@ Replay four loads, or move the slider through one, to see when each element beco
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} example={examples.examples["LCP-Trail"]} />
 
 ### How it works
 
diff --git a/content/CoreWebVitals/LCP-Video-Candidate.mdx b/content/CoreWebVitals/LCP-Video-Candidate.mdx
index 7e2c7562..1fb55133 100644
--- a/content/CoreWebVitals/LCP-Video-Candidate.mdx
+++ b/content/CoreWebVitals/LCP-Video-Candidate.mdx
@@ -6,6 +6,7 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Video-Candidate.js?raw'
+import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
 import { Snippet } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 
@@ -61,7 +62,7 @@ The `poster` URL in the `<link>` and the `<video>` must be identical, including
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} example={examples.examples["LCP-Video-Candidate"]} />
 
 ### Understanding the results
 
diff --git a/content/CoreWebVitals/LCP.mdx b/content/CoreWebVitals/LCP.mdx
index 49a600f3..73b03c28 100644
--- a/content/CoreWebVitals/LCP.mdx
+++ b/content/CoreWebVitals/LCP.mdx
@@ -5,6 +5,7 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP.js?raw'
+import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
 import { Snippet } from '../../components/Snippet'
 import { Callout } from '../../components/Callout'
 
@@ -26,7 +27,7 @@ Quick check for [Largest Contentful Paint](https://web.dev/articles/lcp), a Core
 
 ### Snippet
 
-<Snippet code={snippet} />
+<Snippet code={snippet} example={examples.examples.LCP} />
 
 ### Understanding LCP
 
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..71cd7cc1
--- /dev/null
+++ b/dist/antigravity/webperf-core-web-vitals/references/examples.json
@@ -0,0 +1,170 @@
+{
+  "fixture": "cli/tests/fixtures/core-web-vitals.html",
+  "viewport": "desktop",
+  "waitMs": 1000,
+  "examples": {
+    "CLS": {
+      "script": "CLS",
+      "status": "ok",
+      "metric": "CLS",
+      "value": 0,
+      "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": 16,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 200,
+        "needsImprovement": 500
+      },
+      "details": {
+        "totalInteractions": 1,
+        "worstEvent": "click → button#interaction-button",
+        "phases": {
+          "inputDelay": 1,
+          "processingTime": 1,
+          "presentationDelay": 15
+        }
+      }
+    },
+    "LCP": {
+      "script": "LCP",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 84,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#main-heading",
+        "elementType": "Text block",
+        "url": null,
+        "sizePixels": 24624
+      }
+    },
+    "LCP-Image-Entropy": {
+      "script": "LCP-Image-Entropy",
+      "status": "ok",
+      "count": 1,
+      "details": {
+        "totalImages": 1,
+        "lowEntropyCount": 0,
+        "lcpElement": "h1",
+        "lcpImageEligible": null,
+        "lcpImage": null
+      },
+      "items": [
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 320,
+          "displayedHeight": 320,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        }
+      ],
+      "issues": [
+        {
+          "severity": "info",
+          "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+        }
+      ]
+    },
+    "LCP-Subparts": {
+      "script": "LCP-Subparts",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 84,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#main-heading",
+        "url": null,
+        "subParts": {
+          "ttfb": {
+            "value": 6,
+            "percent": 7,
+            "overTarget": false
+          },
+          "resourceLoadDelay": {
+            "value": 0,
+            "percent": 0,
+            "overTarget": false
+          },
+          "resourceLoadTime": {
+            "value": 0,
+            "percent": 0,
+            "overTarget": false
+          },
+          "elementRenderDelay": {
+            "value": 78,
+            "percent": 93,
+            "overTarget": true
+          }
+        },
+        "slowestPhase": "elementRenderDelay"
+      }
+    },
+    "LCP-Trail": {
+      "script": "LCP-Trail",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 108,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "candidateCount": 1,
+        "finalElement": "#main-heading",
+        "candidates": [
+          {
+            "index": 1,
+            "selector": "#main-heading",
+            "time": 108,
+            "elementType": "Text block"
+          }
+        ]
+      }
+    },
+    "LCP-Video-Candidate": {
+      "script": "LCP-Video-Candidate",
+      "status": "ok",
+      "details": {
+        "isVideo": false,
+        "lcpElement": "h1",
+        "lcpUrl": null
+      },
+      "issues": [
+        {
+          "severity": "info",
+          "message": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+        }
+      ]
+    }
+  }
+}
diff --git a/dist/antigravity/webperf-core-web-vitals/references/snippets.md b/dist/antigravity/webperf-core-web-vitals/references/snippets.md
index 035fcaad..81567641 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 `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.
+
 ---
 ## 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,
+  "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": 16,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 200,
+    "needsImprovement": 500
+  },
+  "details": {
+    "totalInteractions": 1,
+    "worstEvent": "click → button#interaction-button",
+    "phases": {
+      "inputDelay": 1,
+      "processingTime": 1,
+      "presentationDelay": 15
+    }
+  }
+}
+```
 ---
 ## LCP image entropy
 
@@ -39,24 +88,154 @@ 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": 1,
+  "details": {
+    "totalImages": 1,
+    "lowEntropyCount": 0,
+    "lcpElement": "h1",
+    "lcpImageEligible": null,
+    "lcpImage": null
+  },
+  "items": [
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 320,
+      "displayedHeight": 320,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    }
+  ],
+  "issues": [
+    {
+      "severity": "info",
+      "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+    }
+  ]
+}
+```
 ---
 ## 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": 84,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#main-heading",
+    "url": null,
+    "subParts": {
+      "ttfb": {
+        "value": 6,
+        "percent": 7,
+        "overTarget": false
+      },
+      "resourceLoadDelay": {
+        "value": 0,
+        "percent": 0,
+        "overTarget": false
+      },
+      "resourceLoadTime": {
+        "value": 0,
+        "percent": 0,
+        "overTarget": false
+      },
+      "elementRenderDelay": {
+        "value": 78,
+        "percent": 93,
+        "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": 108,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "candidateCount": 1,
+    "finalElement": "#main-heading",
+    "candidates": [
+      {
+        "index": 1,
+        "selector": "#main-heading",
+        "time": 108,
+        "elementType": "Text block"
+      }
+    ]
+  }
+}
+```
 ---
 ## 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",
+  "details": {
+    "isVideo": false,
+    "lcpElement": "h1",
+    "lcpUrl": null
+  },
+  "issues": [
+    {
+      "severity": "info",
+      "message": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+    }
+  ]
+}
+```
 ---
 ## Largest contentful paint (LCP)
 
@@ -71,3 +250,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": 84,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#main-heading",
+    "elementType": "Text block",
+    "url": null,
+    "sizePixels": 24624
+  }
+}
+```
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..8c7cfb25
--- /dev/null
+++ b/scripts/capture-snippet-examples.mjs
@@ -0,0 +1,76 @@
+import { createServer } from "node:http";
+import { readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { dirname, extname, join, resolve, sep } 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";
+
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const FIXTURES = join(ROOT, "cli/tests/fixtures");
+const OUTPUT = join(ROOT, "skills/webperf-core-web-vitals/references/examples.json");
+const CATEGORY = "CoreWebVitals";
+const MIME_TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".webm": "video/webm",
+};
+
+function serveFixture(req, res) {
+  const pathname = new URL(req.url, "http://localhost").pathname;
+  const requested = resolve(FIXTURES, `.${decodeURIComponent(pathname)}`);
+  if (requested !== FIXTURES && !requested.startsWith(`${FIXTURES}${sep}`)) {
+    res.writeHead(403).end();
+    return;
+  }
+
+  try {
+    res.writeHead(200, { "Content-Type": MIME_TYPES[extname(requested)] ?? "application/octet-stream" });
+    res.end(readFileSync(requested));
+  } catch {
+    res.writeHead(404).end();
+  }
+}
+
+const server = createServer(serveFixture);
+await new Promise((resolveListen, reject) => {
+  server.once("error", reject);
+  server.listen(0, "127.0.0.1", resolveListen);
+});
+
+try {
+  const url = `http://127.0.0.1:${server.address().port}/core-web-vitals.html`;
+  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 path = `${CATEGORY}/${name}`;
+    const { results, pageErrors } = await runSnippets({
+      url,
+      items: [{ id: name, path, source: loadSnippet(path) }],
+      waitMs: 1000,
+      viewport: VIEWPORT_PRESETS.desktop,
+      ...(name === "INP" ? { interactions: join(FIXTURES, "core-web-vitals-interactions.json") } : {}),
+    });
+    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({ fixture: "cli/tests/fixtures/core-web-vitals.html", viewport: "desktop", waitMs: 1000, examples }, null, 2)}\n`
+  );
+  process.stdout.write(`Captured ${Object.keys(examples).length} Core Web Vitals examples in ${OUTPUT}\n`);
+} finally {
+  await new Promise((resolveClose, reject) => server.close((error) => (error ? reject(error) : resolveClose())));
+}
diff --git a/scripts/generate-skills.js b/scripts/generate-skills.js
index 34338f32..2b33a8d9 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 examplesPath = path.join(refsDir, 'examples.json')
+  const examples = category === 'CoreWebVitals' && fs.existsSync(examplesPath)
+    ? JSON.parse(fs.readFileSync(examplesPath, '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}`)
@@ -386,6 +391,10 @@ async function generateCategorySkill(category, catConfig) {
 
   // 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 `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.', '')
+  }
   for (const meta of metas) {
     snippetLines.push(`---`)
     snippetLines.push(`## ${meta.title}`)
@@ -401,6 +410,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 +457,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 +498,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 (fs.existsSync(examplesPath)) {
+    fs.copyFileSync(examplesPath, 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..71cd7cc1
--- /dev/null
+++ b/skills/webperf-core-web-vitals/references/examples.json
@@ -0,0 +1,170 @@
+{
+  "fixture": "cli/tests/fixtures/core-web-vitals.html",
+  "viewport": "desktop",
+  "waitMs": 1000,
+  "examples": {
+    "CLS": {
+      "script": "CLS",
+      "status": "ok",
+      "metric": "CLS",
+      "value": 0,
+      "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": 16,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 200,
+        "needsImprovement": 500
+      },
+      "details": {
+        "totalInteractions": 1,
+        "worstEvent": "click → button#interaction-button",
+        "phases": {
+          "inputDelay": 1,
+          "processingTime": 1,
+          "presentationDelay": 15
+        }
+      }
+    },
+    "LCP": {
+      "script": "LCP",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 84,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#main-heading",
+        "elementType": "Text block",
+        "url": null,
+        "sizePixels": 24624
+      }
+    },
+    "LCP-Image-Entropy": {
+      "script": "LCP-Image-Entropy",
+      "status": "ok",
+      "count": 1,
+      "details": {
+        "totalImages": 1,
+        "lowEntropyCount": 0,
+        "lcpElement": "h1",
+        "lcpImageEligible": null,
+        "lcpImage": null
+      },
+      "items": [
+        {
+          "url": "hero.png",
+          "width": 100,
+          "height": 100,
+          "displayedWidth": 320,
+          "displayedHeight": 320,
+          "fileSizeBytes": 30173,
+          "bpp": 24.1384,
+          "isLowEntropy": false,
+          "lcpEligible": true,
+          "isLCP": false
+        }
+      ],
+      "issues": [
+        {
+          "severity": "info",
+          "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+        }
+      ]
+    },
+    "LCP-Subparts": {
+      "script": "LCP-Subparts",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 84,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "element": "#main-heading",
+        "url": null,
+        "subParts": {
+          "ttfb": {
+            "value": 6,
+            "percent": 7,
+            "overTarget": false
+          },
+          "resourceLoadDelay": {
+            "value": 0,
+            "percent": 0,
+            "overTarget": false
+          },
+          "resourceLoadTime": {
+            "value": 0,
+            "percent": 0,
+            "overTarget": false
+          },
+          "elementRenderDelay": {
+            "value": 78,
+            "percent": 93,
+            "overTarget": true
+          }
+        },
+        "slowestPhase": "elementRenderDelay"
+      }
+    },
+    "LCP-Trail": {
+      "script": "LCP-Trail",
+      "status": "ok",
+      "metric": "LCP",
+      "value": 108,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
+      "details": {
+        "candidateCount": 1,
+        "finalElement": "#main-heading",
+        "candidates": [
+          {
+            "index": 1,
+            "selector": "#main-heading",
+            "time": 108,
+            "elementType": "Text block"
+          }
+        ]
+      }
+    },
+    "LCP-Video-Candidate": {
+      "script": "LCP-Video-Candidate",
+      "status": "ok",
+      "details": {
+        "isVideo": false,
+        "lcpElement": "h1",
+        "lcpUrl": null
+      },
+      "issues": [
+        {
+          "severity": "info",
+          "message": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+        }
+      ]
+    }
+  }
+}
diff --git a/skills/webperf-core-web-vitals/references/snippets.md b/skills/webperf-core-web-vitals/references/snippets.md
index 035fcaad..81567641 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 `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.
+
 ---
 ## 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,
+  "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": 16,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 200,
+    "needsImprovement": 500
+  },
+  "details": {
+    "totalInteractions": 1,
+    "worstEvent": "click → button#interaction-button",
+    "phases": {
+      "inputDelay": 1,
+      "processingTime": 1,
+      "presentationDelay": 15
+    }
+  }
+}
+```
 ---
 ## LCP image entropy
 
@@ -39,24 +88,154 @@ 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": 1,
+  "details": {
+    "totalImages": 1,
+    "lowEntropyCount": 0,
+    "lcpElement": "h1",
+    "lcpImageEligible": null,
+    "lcpImage": null
+  },
+  "items": [
+    {
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 320,
+      "displayedHeight": 320,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
+    }
+  ],
+  "issues": [
+    {
+      "severity": "info",
+      "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+    }
+  ]
+}
+```
 ---
 ## 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": 84,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#main-heading",
+    "url": null,
+    "subParts": {
+      "ttfb": {
+        "value": 6,
+        "percent": 7,
+        "overTarget": false
+      },
+      "resourceLoadDelay": {
+        "value": 0,
+        "percent": 0,
+        "overTarget": false
+      },
+      "resourceLoadTime": {
+        "value": 0,
+        "percent": 0,
+        "overTarget": false
+      },
+      "elementRenderDelay": {
+        "value": 78,
+        "percent": 93,
+        "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": 108,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "candidateCount": 1,
+    "finalElement": "#main-heading",
+    "candidates": [
+      {
+        "index": 1,
+        "selector": "#main-heading",
+        "time": 108,
+        "elementType": "Text block"
+      }
+    ]
+  }
+}
+```
 ---
 ## 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",
+  "details": {
+    "isVideo": false,
+    "lcpElement": "h1",
+    "lcpUrl": null
+  },
+  "issues": [
+    {
+      "severity": "info",
+      "message": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+    }
+  ]
+}
+```
 ---
 ## Largest contentful paint (LCP)
 
@@ -71,3 +250,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": 84,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
+  "details": {
+    "element": "#main-heading",
+    "elementType": "Text block",
+    "url": null,
+    "sizePixels": 24624
+  }
+}
+```
diff --git a/styles/globals.css b/styles/globals.css
index 2e769ebe..5ea29929 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -60,6 +60,26 @@ pre code {
   overflow-wrap: break-word;
 }
 
+.wp-snippet-example h3 {
+  margin: 1.25rem 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.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 {
     border: 1px solid rgba(0, 57, 122, 0.2);

From f6cd52c7be75db11149e995a66e484e782cd3ede Mon Sep 17 00:00:00 2001
From: yoreva-01 <195282707+yoreva-01@users.noreply.github.com>
Date: Sun, 18 Oct 2026 17:07:17 +0300
Subject: [PATCH 2/3] docs: refresh Core Web Vitals sample capture

---
 .../references/examples.json                   | 18 +++++++++---------
 .../references/snippets.md                     | 18 +++++++++---------
 .../references/examples.json                   | 18 +++++++++---------
 .../references/snippets.md                     | 18 +++++++++---------
 .../references/examples.json                   | 18 +++++++++---------
 .../references/snippets.md                     | 18 +++++++++---------
 6 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/.claude/skills/webperf-core-web-vitals/references/examples.json b/.claude/skills/webperf-core-web-vitals/references/examples.json
index 71cd7cc1..cd00b278 100644
--- a/.claude/skills/webperf-core-web-vitals/references/examples.json
+++ b/.claude/skills/webperf-core-web-vitals/references/examples.json
@@ -32,7 +32,7 @@
         "totalInteractions": 1,
         "worstEvent": "click → button#interaction-button",
         "phases": {
-          "inputDelay": 1,
+          "inputDelay": 0,
           "processingTime": 1,
           "presentationDelay": 15
         }
@@ -42,7 +42,7 @@
       "script": "LCP",
       "status": "ok",
       "metric": "LCP",
-      "value": 84,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -92,7 +92,7 @@
       "script": "LCP-Subparts",
       "status": "ok",
       "metric": "LCP",
-      "value": 84,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -104,8 +104,8 @@
         "url": null,
         "subParts": {
           "ttfb": {
-            "value": 6,
-            "percent": 7,
+            "value": 7,
+            "percent": 10,
             "overTarget": false
           },
           "resourceLoadDelay": {
@@ -119,8 +119,8 @@
             "overTarget": false
           },
           "elementRenderDelay": {
-            "value": 78,
-            "percent": 93,
+            "value": 65,
+            "percent": 90,
             "overTarget": true
           }
         },
@@ -131,7 +131,7 @@
       "script": "LCP-Trail",
       "status": "ok",
       "metric": "LCP",
-      "value": 108,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -145,7 +145,7 @@
           {
             "index": 1,
             "selector": "#main-heading",
-            "time": 108,
+            "time": 72,
             "elementType": "Text block"
           }
         ]
diff --git a/.claude/skills/webperf-core-web-vitals/references/snippets.md b/.claude/skills/webperf-core-web-vitals/references/snippets.md
index 81567641..5476a1c2 100644
--- a/.claude/skills/webperf-core-web-vitals/references/snippets.md
+++ b/.claude/skills/webperf-core-web-vitals/references/snippets.md
@@ -68,7 +68,7 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
     "totalInteractions": 1,
     "worstEvent": "click → button#interaction-button",
     "phases": {
-      "inputDelay": 1,
+      "inputDelay": 0,
       "processingTime": 1,
       "presentationDelay": 15
     }
@@ -139,7 +139,7 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
   "script": "LCP-Subparts",
   "status": "ok",
   "metric": "LCP",
-  "value": 84,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -151,8 +151,8 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
     "url": null,
     "subParts": {
       "ttfb": {
-        "value": 6,
-        "percent": 7,
+        "value": 7,
+        "percent": 10,
         "overTarget": false
       },
       "resourceLoadDelay": {
@@ -166,8 +166,8 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
         "overTarget": false
       },
       "elementRenderDelay": {
-        "value": 78,
-        "percent": 93,
+        "value": 65,
+        "percent": 90,
         "overTarget": true
       }
     },
@@ -189,7 +189,7 @@ Tracks every LCP candidate element during page load and highlights each one with
   "script": "LCP-Trail",
   "status": "ok",
   "metric": "LCP",
-  "value": 108,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -203,7 +203,7 @@ Tracks every LCP candidate element during page load and highlights each one with
       {
         "index": 1,
         "selector": "#main-heading",
-        "time": 108,
+        "time": 72,
         "elementType": "Text block"
       }
     ]
@@ -258,7 +258,7 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
   "script": "LCP",
   "status": "ok",
   "metric": "LCP",
-  "value": 84,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
diff --git a/dist/antigravity/webperf-core-web-vitals/references/examples.json b/dist/antigravity/webperf-core-web-vitals/references/examples.json
index 71cd7cc1..cd00b278 100644
--- a/dist/antigravity/webperf-core-web-vitals/references/examples.json
+++ b/dist/antigravity/webperf-core-web-vitals/references/examples.json
@@ -32,7 +32,7 @@
         "totalInteractions": 1,
         "worstEvent": "click → button#interaction-button",
         "phases": {
-          "inputDelay": 1,
+          "inputDelay": 0,
           "processingTime": 1,
           "presentationDelay": 15
         }
@@ -42,7 +42,7 @@
       "script": "LCP",
       "status": "ok",
       "metric": "LCP",
-      "value": 84,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -92,7 +92,7 @@
       "script": "LCP-Subparts",
       "status": "ok",
       "metric": "LCP",
-      "value": 84,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -104,8 +104,8 @@
         "url": null,
         "subParts": {
           "ttfb": {
-            "value": 6,
-            "percent": 7,
+            "value": 7,
+            "percent": 10,
             "overTarget": false
           },
           "resourceLoadDelay": {
@@ -119,8 +119,8 @@
             "overTarget": false
           },
           "elementRenderDelay": {
-            "value": 78,
-            "percent": 93,
+            "value": 65,
+            "percent": 90,
             "overTarget": true
           }
         },
@@ -131,7 +131,7 @@
       "script": "LCP-Trail",
       "status": "ok",
       "metric": "LCP",
-      "value": 108,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -145,7 +145,7 @@
           {
             "index": 1,
             "selector": "#main-heading",
-            "time": 108,
+            "time": 72,
             "elementType": "Text block"
           }
         ]
diff --git a/dist/antigravity/webperf-core-web-vitals/references/snippets.md b/dist/antigravity/webperf-core-web-vitals/references/snippets.md
index 81567641..5476a1c2 100644
--- a/dist/antigravity/webperf-core-web-vitals/references/snippets.md
+++ b/dist/antigravity/webperf-core-web-vitals/references/snippets.md
@@ -68,7 +68,7 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
     "totalInteractions": 1,
     "worstEvent": "click → button#interaction-button",
     "phases": {
-      "inputDelay": 1,
+      "inputDelay": 0,
       "processingTime": 1,
       "presentationDelay": 15
     }
@@ -139,7 +139,7 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
   "script": "LCP-Subparts",
   "status": "ok",
   "metric": "LCP",
-  "value": 84,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -151,8 +151,8 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
     "url": null,
     "subParts": {
       "ttfb": {
-        "value": 6,
-        "percent": 7,
+        "value": 7,
+        "percent": 10,
         "overTarget": false
       },
       "resourceLoadDelay": {
@@ -166,8 +166,8 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
         "overTarget": false
       },
       "elementRenderDelay": {
-        "value": 78,
-        "percent": 93,
+        "value": 65,
+        "percent": 90,
         "overTarget": true
       }
     },
@@ -189,7 +189,7 @@ Tracks every LCP candidate element during page load and highlights each one with
   "script": "LCP-Trail",
   "status": "ok",
   "metric": "LCP",
-  "value": 108,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -203,7 +203,7 @@ Tracks every LCP candidate element during page load and highlights each one with
       {
         "index": 1,
         "selector": "#main-heading",
-        "time": 108,
+        "time": 72,
         "elementType": "Text block"
       }
     ]
@@ -258,7 +258,7 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
   "script": "LCP",
   "status": "ok",
   "metric": "LCP",
-  "value": 84,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
diff --git a/skills/webperf-core-web-vitals/references/examples.json b/skills/webperf-core-web-vitals/references/examples.json
index 71cd7cc1..cd00b278 100644
--- a/skills/webperf-core-web-vitals/references/examples.json
+++ b/skills/webperf-core-web-vitals/references/examples.json
@@ -32,7 +32,7 @@
         "totalInteractions": 1,
         "worstEvent": "click → button#interaction-button",
         "phases": {
-          "inputDelay": 1,
+          "inputDelay": 0,
           "processingTime": 1,
           "presentationDelay": 15
         }
@@ -42,7 +42,7 @@
       "script": "LCP",
       "status": "ok",
       "metric": "LCP",
-      "value": 84,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -92,7 +92,7 @@
       "script": "LCP-Subparts",
       "status": "ok",
       "metric": "LCP",
-      "value": 84,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -104,8 +104,8 @@
         "url": null,
         "subParts": {
           "ttfb": {
-            "value": 6,
-            "percent": 7,
+            "value": 7,
+            "percent": 10,
             "overTarget": false
           },
           "resourceLoadDelay": {
@@ -119,8 +119,8 @@
             "overTarget": false
           },
           "elementRenderDelay": {
-            "value": 78,
-            "percent": 93,
+            "value": 65,
+            "percent": 90,
             "overTarget": true
           }
         },
@@ -131,7 +131,7 @@
       "script": "LCP-Trail",
       "status": "ok",
       "metric": "LCP",
-      "value": 108,
+      "value": 72,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -145,7 +145,7 @@
           {
             "index": 1,
             "selector": "#main-heading",
-            "time": 108,
+            "time": 72,
             "elementType": "Text block"
           }
         ]
diff --git a/skills/webperf-core-web-vitals/references/snippets.md b/skills/webperf-core-web-vitals/references/snippets.md
index 81567641..5476a1c2 100644
--- a/skills/webperf-core-web-vitals/references/snippets.md
+++ b/skills/webperf-core-web-vitals/references/snippets.md
@@ -68,7 +68,7 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
     "totalInteractions": 1,
     "worstEvent": "click → button#interaction-button",
     "phases": {
-      "inputDelay": 1,
+      "inputDelay": 0,
       "processingTime": 1,
       "presentationDelay": 15
     }
@@ -139,7 +139,7 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
   "script": "LCP-Subparts",
   "status": "ok",
   "metric": "LCP",
-  "value": 84,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -151,8 +151,8 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
     "url": null,
     "subParts": {
       "ttfb": {
-        "value": 6,
-        "percent": 7,
+        "value": 7,
+        "percent": 10,
         "overTarget": false
       },
       "resourceLoadDelay": {
@@ -166,8 +166,8 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
         "overTarget": false
       },
       "elementRenderDelay": {
-        "value": 78,
-        "percent": 93,
+        "value": 65,
+        "percent": 90,
         "overTarget": true
       }
     },
@@ -189,7 +189,7 @@ Tracks every LCP candidate element during page load and highlights each one with
   "script": "LCP-Trail",
   "status": "ok",
   "metric": "LCP",
-  "value": 108,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -203,7 +203,7 @@ Tracks every LCP candidate element during page load and highlights each one with
       {
         "index": 1,
         "selector": "#main-heading",
-        "time": 108,
+        "time": 72,
         "elementType": "Text block"
       }
     ]
@@ -258,7 +258,7 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
   "script": "LCP",
   "status": "ok",
   "metric": "LCP",
-  "value": 84,
+  "value": 72,
   "unit": "ms",
   "rating": "good",
   "thresholds": {

From bd69458745ef937bea955dbebe69879b42a1bfad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Or=C3=A7an?=
 <195282707+yoreva-01@users.noreply.github.com>
Date: Mon, 19 Oct 2026 13:35:00 +0300
Subject: [PATCH 3/3] docs: address review feedback for Core Web Vitals
 examples

---
 .../references/examples.json                  | 142 +++++++----
 .../references/snippets.md                    | 143 ++++++++----
 cli/tests/fixtures/README.md                  |   1 -
 .../core-web-vitals-interactions.json         |   5 -
 cli/tests/fixtures/core-web-vitals.html       |  32 ---
 cli/tests/helpers/contract.js                 |   4 +-
 cli/tests/unit/snippet-examples.test.js       |  49 ++++
 components/Snippet.jsx                        |  24 +-
 components/Snippet.test.jsx                   |  11 +-
 content/CoreWebVitals/CLS.mdx                 |  10 +-
 content/CoreWebVitals/INP.mdx                 |  10 +-
 content/CoreWebVitals/LCP-Image-Entropy.mdx   |  10 +-
 content/CoreWebVitals/LCP-Subparts.mdx        |  10 +-
 content/CoreWebVitals/LCP-Trail.mdx           |  10 +-
 content/CoreWebVitals/LCP-Video-Candidate.mdx |  10 +-
 content/CoreWebVitals/LCP.mdx                 |  10 +-
 .../references/examples.json                  | 142 +++++++----
 .../references/snippets.md                    | 143 ++++++++----
 scripts/capture-snippet-examples.mjs          |  53 ++---
 scripts/generate-llms.js                      |   2 +-
 scripts/generate-skills.js                    |  17 +-
 .../references/examples.json                  | 142 +++++++----
 .../references/snippets.md                    | 143 ++++++++----
 snippets/CoreWebVitals/examples.json          | 220 ++++++++++++++++++
 styles/globals.css                            |  18 +-
 25 files changed, 959 insertions(+), 402 deletions(-)
 delete mode 100644 cli/tests/fixtures/core-web-vitals-interactions.json
 delete mode 100644 cli/tests/fixtures/core-web-vitals.html
 create mode 100644 cli/tests/unit/snippet-examples.test.js
 create mode 100644 snippets/CoreWebVitals/examples.json

diff --git a/.claude/skills/webperf-core-web-vitals/references/examples.json b/.claude/skills/webperf-core-web-vitals/references/examples.json
index cd00b278..ec568ec7 100644
--- a/.claude/skills/webperf-core-web-vitals/references/examples.json
+++ b/.claude/skills/webperf-core-web-vitals/references/examples.json
@@ -1,5 +1,4 @@
 {
-  "fixture": "cli/tests/fixtures/core-web-vitals.html",
   "viewport": "desktop",
   "waitMs": 1000,
   "examples": {
@@ -7,7 +6,7 @@
       "script": "CLS",
       "status": "ok",
       "metric": "CLS",
-      "value": 0,
+      "value": 0.0324,
       "unit": "score",
       "rating": "good",
       "thresholds": {
@@ -21,7 +20,7 @@
       "script": "INP",
       "status": "ok",
       "metric": "INP",
-      "value": 16,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -30,11 +29,11 @@
       },
       "details": {
         "totalInteractions": 1,
-        "worstEvent": "click → button#interaction-button",
+        "worstEvent": "click → button#go",
         "phases": {
-          "inputDelay": 0,
-          "processingTime": 1,
-          "presentationDelay": 15
+          "inputDelay": 1,
+          "processingTime": 61,
+          "presentationDelay": 3
         }
       }
     },
@@ -42,7 +41,7 @@
       "script": "LCP",
       "status": "ok",
       "metric": "LCP",
-      "value": 72,
+      "value": 68,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -50,49 +49,72 @@
         "needsImprovement": 4000
       },
       "details": {
-        "element": "#main-heading",
-        "elementType": "Text block",
-        "url": null,
-        "sizePixels": 24624
+        "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": 1,
+      "count": 3,
       "details": {
-        "totalImages": 1,
+        "totalImages": 3,
         "lowEntropyCount": 0,
-        "lcpElement": "h1",
-        "lcpImageEligible": null,
-        "lcpImage": null
+        "lcpElement": "img",
+        "lcpImageEligible": true,
+        "lcpImage": {
+          "url": "hero.png",
+          "bpp": 24.1384,
+          "isLowEntropy": false
+        }
       },
       "items": [
         {
           "url": "hero.png",
           "width": 100,
           "height": 100,
-          "displayedWidth": 320,
-          "displayedHeight": 320,
+          "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
-        }
-      ],
-      "issues": [
+        },
         {
-          "severity": "info",
-          "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+          "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": 72,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -100,27 +122,27 @@
         "needsImprovement": 4000
       },
       "details": {
-        "element": "#main-heading",
-        "url": null,
+        "element": "#hero",
+        "url": "hero.png",
         "subParts": {
           "ttfb": {
-            "value": 7,
-            "percent": 10,
+            "value": 9,
+            "percent": 14,
             "overTarget": false
           },
           "resourceLoadDelay": {
-            "value": 0,
-            "percent": 0,
-            "overTarget": false
+            "value": 13,
+            "percent": 20,
+            "overTarget": true
           },
           "resourceLoadTime": {
-            "value": 0,
-            "percent": 0,
+            "value": 8,
+            "percent": 13,
             "overTarget": false
           },
           "elementRenderDelay": {
-            "value": 65,
-            "percent": 90,
+            "value": 34,
+            "percent": 53,
             "overTarget": true
           }
         },
@@ -131,7 +153,7 @@
       "script": "LCP-Trail",
       "status": "ok",
       "metric": "LCP",
-      "value": 72,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -140,13 +162,14 @@
       },
       "details": {
         "candidateCount": 1,
-        "finalElement": "#main-heading",
+        "finalElement": "#hero",
         "candidates": [
           {
             "index": 1,
-            "selector": "#main-heading",
-            "time": 72,
-            "elementType": "Text block"
+            "selector": "#hero",
+            "time": 64,
+            "elementType": "Image",
+            "url": "hero.png"
           }
         ]
       }
@@ -154,15 +177,42 @@
     "LCP-Video-Candidate": {
       "script": "LCP-Video-Candidate",
       "status": "ok",
+      "metric": "LCP",
+      "value": 60,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
       "details": {
-        "isVideo": false,
-        "lcpElement": "h1",
-        "lcpUrl": null
+        "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": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+          "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 5476a1c2..b5e39694 100644
--- a/.claude/skills/webperf-core-web-vitals/references/snippets.md
+++ b/.claude/skills/webperf-core-web-vitals/references/snippets.md
@@ -1,6 +1,6 @@
 ## Captured return values
 
-Each object below is a real result captured by running the snippet against `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.
+Each object below is a real result captured by running the snippet against the seeded test pages.
 
 ---
 ## Cumulative layout shift (CLS)
@@ -24,7 +24,7 @@ Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual s
   "script": "CLS",
   "status": "ok",
   "metric": "CLS",
-  "value": 0,
+  "value": 0.0324,
   "unit": "score",
   "rating": "good",
   "thresholds": {
@@ -57,7 +57,7 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
   "script": "INP",
   "status": "ok",
   "metric": "INP",
-  "value": 16,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -66,11 +66,11 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
   },
   "details": {
     "totalInteractions": 1,
-    "worstEvent": "click → button#interaction-button",
+    "worstEvent": "click → button#go",
     "phases": {
-      "inputDelay": 0,
-      "processingTime": 1,
-      "presentationDelay": 15
+      "inputDelay": 1,
+      "processingTime": 61,
+      "presentationDelay": 3
     }
   }
 }
@@ -95,34 +95,57 @@ Checks if images qualify as LCP candidates based on their entropy (bits per pixe
 {
   "script": "LCP-Image-Entropy",
   "status": "ok",
-  "count": 1,
+  "count": 3,
   "details": {
-    "totalImages": 1,
+    "totalImages": 3,
     "lowEntropyCount": 0,
-    "lcpElement": "h1",
-    "lcpImageEligible": null,
-    "lcpImage": null
+    "lcpElement": "img",
+    "lcpImageEligible": true,
+    "lcpImage": {
+      "url": "hero.png",
+      "bpp": 24.1384,
+      "isLowEntropy": false
+    }
   },
   "items": [
     {
       "url": "hero.png",
       "width": 100,
       "height": 100,
-      "displayedWidth": 320,
-      "displayedHeight": 320,
+      "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
-    }
-  ],
-  "issues": [
+    },
     {
-      "severity": "info",
-      "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
     }
-  ]
+  ],
+  "issues": []
 }
 ```
 ---
@@ -139,7 +162,7 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
   "script": "LCP-Subparts",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -147,27 +170,27 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
     "needsImprovement": 4000
   },
   "details": {
-    "element": "#main-heading",
-    "url": null,
+    "element": "#hero",
+    "url": "hero.png",
     "subParts": {
       "ttfb": {
-        "value": 7,
-        "percent": 10,
+        "value": 9,
+        "percent": 14,
         "overTarget": false
       },
       "resourceLoadDelay": {
-        "value": 0,
-        "percent": 0,
-        "overTarget": false
+        "value": 13,
+        "percent": 20,
+        "overTarget": true
       },
       "resourceLoadTime": {
-        "value": 0,
-        "percent": 0,
+        "value": 8,
+        "percent": 13,
         "overTarget": false
       },
       "elementRenderDelay": {
-        "value": 65,
-        "percent": 90,
+        "value": 34,
+        "percent": 53,
         "overTarget": true
       }
     },
@@ -189,7 +212,7 @@ Tracks every LCP candidate element during page load and highlights each one with
   "script": "LCP-Trail",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -198,13 +221,14 @@ Tracks every LCP candidate element during page load and highlights each one with
   },
   "details": {
     "candidateCount": 1,
-    "finalElement": "#main-heading",
+    "finalElement": "#hero",
     "candidates": [
       {
         "index": 1,
-        "selector": "#main-heading",
-        "time": 72,
-        "elementType": "Text block"
+        "selector": "#hero",
+        "time": 64,
+        "elementType": "Image",
+        "url": "hero.png"
       }
     ]
   }
@@ -223,15 +247,42 @@ Detects whether the LCP element is a <video> and audits the poster image configu
 {
   "script": "LCP-Video-Candidate",
   "status": "ok",
+  "metric": "LCP",
+  "value": 60,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
   "details": {
-    "isVideo": false,
-    "lcpElement": "h1",
-    "lcpUrl": null
+    "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": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+      "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"
     }
   ]
 }
@@ -258,7 +309,7 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
   "script": "LCP",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 68,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -266,10 +317,10 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
     "needsImprovement": 4000
   },
   "details": {
-    "element": "#main-heading",
-    "elementType": "Text block",
-    "url": null,
-    "sizePixels": 24624
+    "element": "#hero",
+    "elementType": "Image",
+    "url": "http://127.0.0.1:56834/hero.png",
+    "sizePixels": 10000
   }
 }
 ```
diff --git a/cli/tests/fixtures/README.md b/cli/tests/fixtures/README.md
index 1bb3fd91..d9d0a206 100644
--- a/cli/tests/fixtures/README.md
+++ b/cli/tests/fixtures/README.md
@@ -1,5 +1,4 @@
 # Fixtures
 
-- `core-web-vitals.html` and `core-web-vitals-interactions.json`: seeded page and click step used by `npm run capture:examples` to record real return objects for the Core Web Vitals category. The capture command requires Playwright Chromium (`npx playwright install chromium`).
 - `dm-sans-regular.woff2`: DM Sans Regular, copyright The DM Sans Project Authors, licensed under the SIL Open Font License 1.1 (https://openfontlicense.org). Used by the Webfont-Usage-Analyzer e2e test as a real font file.
 - `clip.webm`: half a second of the FFmpeg `testsrc2` pattern, generated with `ffmpeg -f lavfi -i "testsrc2=s=320x180:d=0.5:r=10" -c:v libvpx -b:v 200k -an clip.webm`. VP8, since the Chromium of Playwright does not decode H.264. A video of one flat color would not do: Chrome ignores low-entropy frames as LCP candidates. Used by the LCP-Video-Candidate e2e tests.
diff --git a/cli/tests/fixtures/core-web-vitals-interactions.json b/cli/tests/fixtures/core-web-vitals-interactions.json
deleted file mode 100644
index ec675c45..00000000
--- a/cli/tests/fixtures/core-web-vitals-interactions.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "interactions": [
-    { "action": "click", "selector": "#interaction-button" }
-  ]
-}
diff --git a/cli/tests/fixtures/core-web-vitals.html b/cli/tests/fixtures/core-web-vitals.html
deleted file mode 100644
index 4fd05992..00000000
--- a/cli/tests/fixtures/core-web-vitals.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Core Web Vitals example fixture</title>
-  <style>
-    body { margin: 0; font-family: sans-serif; padding: 24px; }
-    main { max-width: 760px; margin: 0 auto; }
-    video { display: block; width: min(480px, 100%); height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
-    img { display: block; width: 320px; max-width: 100%; height: auto; }
-    button { margin-top: 1rem; padding: 0.75rem 1rem; }
-  </style>
-</head>
-<body>
-  <main>
-    <h1 id="main-heading">A seeded page for Core Web Vitals examples</h1>
-    <video id="hero-video" autoplay muted playsinline loop preload="auto" poster="/hero.png">
-      <source src="/clip.webm" type="video/webm">
-    </video>
-    <p>The fixture reserves media dimensions so loading does not shift the page.</p>
-    <img id="secondary-image" src="/hero.png" width="320" height="240" alt="A sample landscape image">
-    <button id="interaction-button" type="button">Run a sample interaction</button>
-    <p id="interaction-result" aria-live="polite">Waiting for interaction.</p>
-  </main>
-  <script>
-    document.querySelector("#interaction-button").addEventListener("click", () => {
-      document.querySelector("#interaction-result").textContent = "Interaction recorded.";
-    });
-  </script>
-</body>
-</html>
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 10696de0..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, example }) {
+  if (!code) return <SnippetExample example={example} />;
   const highlighted = hljs.highlight(code, { language: "javascript" }).value;
 
   return (
@@ -35,15 +49,7 @@ export function Snippet({ code, prompt, snippet, example }) {
           <CopyCodeButton snippet={snippet} />
         </div>
       </div>
-      {example ? (
-        <section className="wp-snippet-example" aria-label="Returned object example">
-          <h3>Returned object</h3>
-          <p>Captured from the seeded test page; timing values can vary between runs.</p>
-          <pre>
-            <code>{JSON.stringify(example, null, 2)}</code>
-          </pre>
-        </section>
-      ) : null}
+      {example ? <SnippetExample example={example} /> : null}
     </div>
   );
 }
diff --git a/components/Snippet.test.jsx b/components/Snippet.test.jsx
index 11ea14e0..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,17 +28,18 @@ describe("Snippet", () => {
     expect(html).not.toMatch(/Copy prompt/);
   });
 
-  it("renders a captured return object below the snippet when one is provided", () => {
+  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(<Snippet code={CODE} example={example} />);
+    const html = renderToStaticMarkup(<SnippetExample example={example} />);
     expect(html).toContain('<section class="wp-snippet-example" aria-label="Returned object example">');
-    expect(html).toContain("<h3>Returned object</h3>");
+    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("Returned object");
+    expect(html).not.toContain("wp-snippet-example");
   });
 
   it("keeps the Copy code button", () => {
diff --git a/content/CoreWebVitals/CLS.mdx b/content/CoreWebVitals/CLS.mdx
index 6766abae..8e10b693 100644
--- a/content/CoreWebVitals/CLS.mdx
+++ b/content/CoreWebVitals/CLS.mdx
@@ -5,8 +5,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/CLS.js?raw'
-import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
-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'
@@ -33,7 +33,11 @@ Unexpected layout shifts are frustrating and can cause users to click the wrong
 
 ### Snippet
 
-<Snippet code={snippet} example={examples.examples.CLS} />
+<Snippet code={snippet} />
+
+### Returned object
+
+<SnippetExample example={examples.examples.CLS} />
 
 ### Understanding CLS
 
diff --git a/content/CoreWebVitals/INP.mdx b/content/CoreWebVitals/INP.mdx
index b01aeeb3..038598f7 100644
--- a/content/CoreWebVitals/INP.mdx
+++ b/content/CoreWebVitals/INP.mdx
@@ -5,8 +5,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/INP.js?raw'
-import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
-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'
@@ -71,7 +71,11 @@ INP directly measures user frustration. When users click a button and nothing ha
 
 ### Snippet
 
-<Snippet code={snippet} example={examples.examples.INP} />
+<Snippet code={snippet} />
+
+### Returned object
+
+<SnippetExample example={examples.examples.INP} />
 
 ### Understanding INP
 
diff --git a/content/CoreWebVitals/LCP-Image-Entropy.mdx b/content/CoreWebVitals/LCP-Image-Entropy.mdx
index 0e90d605..7eb062a9 100644
--- a/content/CoreWebVitals/LCP-Image-Entropy.mdx
+++ b/content/CoreWebVitals/LCP-Image-Entropy.mdx
@@ -6,8 +6,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Image-Entropy.js?raw'
-import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
-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
@@ -40,7 +40,11 @@ Chrome measures the bits per pixel over the area the image is displayed at, in C
 
 ### Snippet
 
-<Snippet code={snippet} example={examples.examples["LCP-Image-Entropy"]} />
+<Snippet code={snippet} />
+
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Image-Entropy"]} />
 
 ### Understanding the results
 
diff --git a/content/CoreWebVitals/LCP-Subparts.mdx b/content/CoreWebVitals/LCP-Subparts.mdx
index 24aaa24a..2c6e692c 100644
--- a/content/CoreWebVitals/LCP-Subparts.mdx
+++ b/content/CoreWebVitals/LCP-Subparts.mdx
@@ -7,8 +7,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Subparts.js?raw'
-import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
-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'
@@ -53,7 +53,11 @@ LCP is a critical Core Web Vital that measures when the largest content element
 
 ### Snippet
 
-<Snippet code={snippet} example={examples.examples["LCP-Subparts"]} />
+<Snippet code={snippet} />
+
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Subparts"]} />
 
 ### Understanding the results
 
diff --git a/content/CoreWebVitals/LCP-Trail.mdx b/content/CoreWebVitals/LCP-Trail.mdx
index 25cfedbb..875045b6 100644
--- a/content/CoreWebVitals/LCP-Trail.mdx
+++ b/content/CoreWebVitals/LCP-Trail.mdx
@@ -6,8 +6,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Trail.js?raw'
-import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
-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'
 
@@ -33,7 +33,11 @@ Replay four loads, or move the slider through one, to see when each element beco
 
 ### Snippet
 
-<Snippet code={snippet} example={examples.examples["LCP-Trail"]} />
+<Snippet code={snippet} />
+
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Trail"]} />
 
 ### How it works
 
diff --git a/content/CoreWebVitals/LCP-Video-Candidate.mdx b/content/CoreWebVitals/LCP-Video-Candidate.mdx
index 1fb55133..a56121b7 100644
--- a/content/CoreWebVitals/LCP-Video-Candidate.mdx
+++ b/content/CoreWebVitals/LCP-Video-Candidate.mdx
@@ -6,8 +6,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP-Video-Candidate.js?raw'
-import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
-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
@@ -62,7 +62,11 @@ The `poster` URL in the `<link>` and the `<video>` must be identical, including
 
 ### Snippet
 
-<Snippet code={snippet} example={examples.examples["LCP-Video-Candidate"]} />
+<Snippet code={snippet} />
+
+### Returned object
+
+<SnippetExample example={examples.examples["LCP-Video-Candidate"]} />
 
 ### Understanding the results
 
diff --git a/content/CoreWebVitals/LCP.mdx b/content/CoreWebVitals/LCP.mdx
index 73b03c28..c004c1ba 100644
--- a/content/CoreWebVitals/LCP.mdx
+++ b/content/CoreWebVitals/LCP.mdx
@@ -5,8 +5,8 @@ browserSupport:
 ---
 
 import snippet from '../../snippets/CoreWebVitals/LCP.js?raw'
-import examples from '../../skills/webperf-core-web-vitals/references/examples.json'
-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)
@@ -27,7 +27,11 @@ Quick check for [Largest Contentful Paint](https://web.dev/articles/lcp), a Core
 
 ### Snippet
 
-<Snippet code={snippet} example={examples.examples.LCP} />
+<Snippet code={snippet} />
+
+### Returned object
+
+<SnippetExample example={examples.examples.LCP} />
 
 ### Understanding LCP
 
diff --git a/dist/antigravity/webperf-core-web-vitals/references/examples.json b/dist/antigravity/webperf-core-web-vitals/references/examples.json
index cd00b278..ec568ec7 100644
--- a/dist/antigravity/webperf-core-web-vitals/references/examples.json
+++ b/dist/antigravity/webperf-core-web-vitals/references/examples.json
@@ -1,5 +1,4 @@
 {
-  "fixture": "cli/tests/fixtures/core-web-vitals.html",
   "viewport": "desktop",
   "waitMs": 1000,
   "examples": {
@@ -7,7 +6,7 @@
       "script": "CLS",
       "status": "ok",
       "metric": "CLS",
-      "value": 0,
+      "value": 0.0324,
       "unit": "score",
       "rating": "good",
       "thresholds": {
@@ -21,7 +20,7 @@
       "script": "INP",
       "status": "ok",
       "metric": "INP",
-      "value": 16,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -30,11 +29,11 @@
       },
       "details": {
         "totalInteractions": 1,
-        "worstEvent": "click → button#interaction-button",
+        "worstEvent": "click → button#go",
         "phases": {
-          "inputDelay": 0,
-          "processingTime": 1,
-          "presentationDelay": 15
+          "inputDelay": 1,
+          "processingTime": 61,
+          "presentationDelay": 3
         }
       }
     },
@@ -42,7 +41,7 @@
       "script": "LCP",
       "status": "ok",
       "metric": "LCP",
-      "value": 72,
+      "value": 68,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -50,49 +49,72 @@
         "needsImprovement": 4000
       },
       "details": {
-        "element": "#main-heading",
-        "elementType": "Text block",
-        "url": null,
-        "sizePixels": 24624
+        "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": 1,
+      "count": 3,
       "details": {
-        "totalImages": 1,
+        "totalImages": 3,
         "lowEntropyCount": 0,
-        "lcpElement": "h1",
-        "lcpImageEligible": null,
-        "lcpImage": null
+        "lcpElement": "img",
+        "lcpImageEligible": true,
+        "lcpImage": {
+          "url": "hero.png",
+          "bpp": 24.1384,
+          "isLowEntropy": false
+        }
       },
       "items": [
         {
           "url": "hero.png",
           "width": 100,
           "height": 100,
-          "displayedWidth": 320,
-          "displayedHeight": 320,
+          "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
-        }
-      ],
-      "issues": [
+        },
         {
-          "severity": "info",
-          "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+          "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": 72,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -100,27 +122,27 @@
         "needsImprovement": 4000
       },
       "details": {
-        "element": "#main-heading",
-        "url": null,
+        "element": "#hero",
+        "url": "hero.png",
         "subParts": {
           "ttfb": {
-            "value": 7,
-            "percent": 10,
+            "value": 9,
+            "percent": 14,
             "overTarget": false
           },
           "resourceLoadDelay": {
-            "value": 0,
-            "percent": 0,
-            "overTarget": false
+            "value": 13,
+            "percent": 20,
+            "overTarget": true
           },
           "resourceLoadTime": {
-            "value": 0,
-            "percent": 0,
+            "value": 8,
+            "percent": 13,
             "overTarget": false
           },
           "elementRenderDelay": {
-            "value": 65,
-            "percent": 90,
+            "value": 34,
+            "percent": 53,
             "overTarget": true
           }
         },
@@ -131,7 +153,7 @@
       "script": "LCP-Trail",
       "status": "ok",
       "metric": "LCP",
-      "value": 72,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -140,13 +162,14 @@
       },
       "details": {
         "candidateCount": 1,
-        "finalElement": "#main-heading",
+        "finalElement": "#hero",
         "candidates": [
           {
             "index": 1,
-            "selector": "#main-heading",
-            "time": 72,
-            "elementType": "Text block"
+            "selector": "#hero",
+            "time": 64,
+            "elementType": "Image",
+            "url": "hero.png"
           }
         ]
       }
@@ -154,15 +177,42 @@
     "LCP-Video-Candidate": {
       "script": "LCP-Video-Candidate",
       "status": "ok",
+      "metric": "LCP",
+      "value": 60,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
       "details": {
-        "isVideo": false,
-        "lcpElement": "h1",
-        "lcpUrl": null
+        "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": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+          "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 5476a1c2..b5e39694 100644
--- a/dist/antigravity/webperf-core-web-vitals/references/snippets.md
+++ b/dist/antigravity/webperf-core-web-vitals/references/snippets.md
@@ -1,6 +1,6 @@
 ## Captured return values
 
-Each object below is a real result captured by running the snippet against `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.
+Each object below is a real result captured by running the snippet against the seeded test pages.
 
 ---
 ## Cumulative layout shift (CLS)
@@ -24,7 +24,7 @@ Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual s
   "script": "CLS",
   "status": "ok",
   "metric": "CLS",
-  "value": 0,
+  "value": 0.0324,
   "unit": "score",
   "rating": "good",
   "thresholds": {
@@ -57,7 +57,7 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
   "script": "INP",
   "status": "ok",
   "metric": "INP",
-  "value": 16,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -66,11 +66,11 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
   },
   "details": {
     "totalInteractions": 1,
-    "worstEvent": "click → button#interaction-button",
+    "worstEvent": "click → button#go",
     "phases": {
-      "inputDelay": 0,
-      "processingTime": 1,
-      "presentationDelay": 15
+      "inputDelay": 1,
+      "processingTime": 61,
+      "presentationDelay": 3
     }
   }
 }
@@ -95,34 +95,57 @@ Checks if images qualify as LCP candidates based on their entropy (bits per pixe
 {
   "script": "LCP-Image-Entropy",
   "status": "ok",
-  "count": 1,
+  "count": 3,
   "details": {
-    "totalImages": 1,
+    "totalImages": 3,
     "lowEntropyCount": 0,
-    "lcpElement": "h1",
-    "lcpImageEligible": null,
-    "lcpImage": null
+    "lcpElement": "img",
+    "lcpImageEligible": true,
+    "lcpImage": {
+      "url": "hero.png",
+      "bpp": 24.1384,
+      "isLowEntropy": false
+    }
   },
   "items": [
     {
       "url": "hero.png",
       "width": 100,
       "height": 100,
-      "displayedWidth": 320,
-      "displayedHeight": 320,
+      "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
-    }
-  ],
-  "issues": [
+    },
     {
-      "severity": "info",
-      "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
     }
-  ]
+  ],
+  "issues": []
 }
 ```
 ---
@@ -139,7 +162,7 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
   "script": "LCP-Subparts",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -147,27 +170,27 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
     "needsImprovement": 4000
   },
   "details": {
-    "element": "#main-heading",
-    "url": null,
+    "element": "#hero",
+    "url": "hero.png",
     "subParts": {
       "ttfb": {
-        "value": 7,
-        "percent": 10,
+        "value": 9,
+        "percent": 14,
         "overTarget": false
       },
       "resourceLoadDelay": {
-        "value": 0,
-        "percent": 0,
-        "overTarget": false
+        "value": 13,
+        "percent": 20,
+        "overTarget": true
       },
       "resourceLoadTime": {
-        "value": 0,
-        "percent": 0,
+        "value": 8,
+        "percent": 13,
         "overTarget": false
       },
       "elementRenderDelay": {
-        "value": 65,
-        "percent": 90,
+        "value": 34,
+        "percent": 53,
         "overTarget": true
       }
     },
@@ -189,7 +212,7 @@ Tracks every LCP candidate element during page load and highlights each one with
   "script": "LCP-Trail",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -198,13 +221,14 @@ Tracks every LCP candidate element during page load and highlights each one with
   },
   "details": {
     "candidateCount": 1,
-    "finalElement": "#main-heading",
+    "finalElement": "#hero",
     "candidates": [
       {
         "index": 1,
-        "selector": "#main-heading",
-        "time": 72,
-        "elementType": "Text block"
+        "selector": "#hero",
+        "time": 64,
+        "elementType": "Image",
+        "url": "hero.png"
       }
     ]
   }
@@ -223,15 +247,42 @@ Detects whether the LCP element is a <video> and audits the poster image configu
 {
   "script": "LCP-Video-Candidate",
   "status": "ok",
+  "metric": "LCP",
+  "value": 60,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
   "details": {
-    "isVideo": false,
-    "lcpElement": "h1",
-    "lcpUrl": null
+    "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": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+      "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"
     }
   ]
 }
@@ -258,7 +309,7 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
   "script": "LCP",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 68,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -266,10 +317,10 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
     "needsImprovement": 4000
   },
   "details": {
-    "element": "#main-heading",
-    "elementType": "Text block",
-    "url": null,
-    "sizePixels": 24624
+    "element": "#hero",
+    "elementType": "Image",
+    "url": "http://127.0.0.1:56834/hero.png",
+    "sizePixels": 10000
   }
 }
 ```
diff --git a/scripts/capture-snippet-examples.mjs b/scripts/capture-snippet-examples.mjs
index 8c7cfb25..d6eff010 100644
--- a/scripts/capture-snippet-examples.mjs
+++ b/scripts/capture-snippet-examples.mjs
@@ -1,45 +1,23 @@
-import { createServer } from "node:http";
-import { readFileSync, readdirSync, writeFileSync } from "node:fs";
-import { dirname, extname, join, resolve, sep } from "node:path";
+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 FIXTURES = join(ROOT, "cli/tests/fixtures");
-const OUTPUT = join(ROOT, "skills/webperf-core-web-vitals/references/examples.json");
 const CATEGORY = "CoreWebVitals";
-const MIME_TYPES = {
-  ".html": "text/html; charset=utf-8",
-  ".json": "application/json; charset=utf-8",
-  ".png": "image/png",
-  ".webm": "video/webm",
-};
-
-function serveFixture(req, res) {
-  const pathname = new URL(req.url, "http://localhost").pathname;
-  const requested = resolve(FIXTURES, `.${decodeURIComponent(pathname)}`);
-  if (requested !== FIXTURES && !requested.startsWith(`${FIXTURES}${sep}`)) {
-    res.writeHead(403).end();
-    return;
-  }
+const OUTPUT = join(ROOT, "snippets", CATEGORY, "examples.json");
 
-  try {
-    res.writeHead(200, { "Content-Type": MIME_TYPES[extname(requested)] ?? "application/octet-stream" });
-    res.end(readFileSync(requested));
-  } catch {
-    res.writeHead(404).end();
-  }
-}
+const SCENARIOS = {
+  INP: { page: "/seeded", interactions: [{ action: "click", selector: "#go" }] },
+  "LCP-Video-Candidate": { page: "/video-poster.html" },
+};
+const DEFAULT_SCENARIO = { page: "/seeded" };
 
-const server = createServer(serveFixture);
-await new Promise((resolveListen, reject) => {
-  server.once("error", reject);
-  server.listen(0, "127.0.0.1", resolveListen);
-});
+const servers = await startContractServers();
 
 try {
-  const url = `http://127.0.0.1:${server.address().port}/core-web-vitals.html`;
   const names = readdirSync(join(ROOT, "snippets", CATEGORY))
     .filter((name) => name.endsWith(".js"))
     .map((name) => name.slice(0, -3))
@@ -47,13 +25,14 @@ try {
   const examples = {};
 
   for (const name of names) {
+    const scenario = SCENARIOS[name] ?? DEFAULT_SCENARIO;
     const path = `${CATEGORY}/${name}`;
     const { results, pageErrors } = await runSnippets({
-      url,
+      url: `${servers.base}${scenario.page}`,
       items: [{ id: name, path, source: loadSnippet(path) }],
       waitMs: 1000,
       viewport: VIEWPORT_PRESETS.desktop,
-      ...(name === "INP" ? { interactions: join(FIXTURES, "core-web-vitals-interactions.json") } : {}),
+      ...(scenario.interactions ? { interactions: scenario.interactions } : {}),
     });
     const { id, ...result } = results[0];
     if (pageErrors.length > 0) throw new Error(`${name} produced a page error: ${pageErrors.join("; ")}`);
@@ -68,9 +47,9 @@ try {
 
   writeFileSync(
     OUTPUT,
-    `${JSON.stringify({ fixture: "cli/tests/fixtures/core-web-vitals.html", viewport: "desktop", waitMs: 1000, examples }, null, 2)}\n`
+    `${JSON.stringify({ viewport: "desktop", waitMs: 1000, examples }, null, 2)}\n`
   );
-  process.stdout.write(`Captured ${Object.keys(examples).length} Core Web Vitals examples in ${OUTPUT}\n`);
+  process.stdout.write(`Captured ${Object.keys(examples).length} ${CATEGORY} examples in ${OUTPUT}\n`);
 } finally {
-  await new Promise((resolveClose, reject) => server.close((error) => (error ? reject(error) : resolveClose())));
+  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 2b33a8d9..8b55c3c9 100755
--- a/scripts/generate-skills.js
+++ b/scripts/generate-skills.js
@@ -377,9 +377,9 @@ async function generateCategorySkill(category, catConfig) {
   fs.mkdirSync(refsDir, { recursive: true })
   fs.mkdirSync(distDir, { recursive: true })
 
-  const examplesPath = path.join(refsDir, 'examples.json')
-  const examples = category === 'CoreWebVitals' && fs.existsSync(examplesPath)
-    ? JSON.parse(fs.readFileSync(examplesPath, 'utf-8')).examples
+  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) {
@@ -389,11 +389,16 @@ 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 `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.', '')
+    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(`---`)
@@ -498,8 +503,8 @@ 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 (fs.existsSync(examplesPath)) {
-    fs.copyFileSync(examplesPath, path.join(antigravityRefsDir, 'examples.json'))
+  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/references/examples.json b/skills/webperf-core-web-vitals/references/examples.json
index cd00b278..ec568ec7 100644
--- a/skills/webperf-core-web-vitals/references/examples.json
+++ b/skills/webperf-core-web-vitals/references/examples.json
@@ -1,5 +1,4 @@
 {
-  "fixture": "cli/tests/fixtures/core-web-vitals.html",
   "viewport": "desktop",
   "waitMs": 1000,
   "examples": {
@@ -7,7 +6,7 @@
       "script": "CLS",
       "status": "ok",
       "metric": "CLS",
-      "value": 0,
+      "value": 0.0324,
       "unit": "score",
       "rating": "good",
       "thresholds": {
@@ -21,7 +20,7 @@
       "script": "INP",
       "status": "ok",
       "metric": "INP",
-      "value": 16,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -30,11 +29,11 @@
       },
       "details": {
         "totalInteractions": 1,
-        "worstEvent": "click → button#interaction-button",
+        "worstEvent": "click → button#go",
         "phases": {
-          "inputDelay": 0,
-          "processingTime": 1,
-          "presentationDelay": 15
+          "inputDelay": 1,
+          "processingTime": 61,
+          "presentationDelay": 3
         }
       }
     },
@@ -42,7 +41,7 @@
       "script": "LCP",
       "status": "ok",
       "metric": "LCP",
-      "value": 72,
+      "value": 68,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -50,49 +49,72 @@
         "needsImprovement": 4000
       },
       "details": {
-        "element": "#main-heading",
-        "elementType": "Text block",
-        "url": null,
-        "sizePixels": 24624
+        "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": 1,
+      "count": 3,
       "details": {
-        "totalImages": 1,
+        "totalImages": 3,
         "lowEntropyCount": 0,
-        "lcpElement": "h1",
-        "lcpImageEligible": null,
-        "lcpImage": null
+        "lcpElement": "img",
+        "lcpImageEligible": true,
+        "lcpImage": {
+          "url": "hero.png",
+          "bpp": 24.1384,
+          "isLowEntropy": false
+        }
       },
       "items": [
         {
           "url": "hero.png",
           "width": 100,
           "height": 100,
-          "displayedWidth": 320,
-          "displayedHeight": 320,
+          "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
-        }
-      ],
-      "issues": [
+        },
         {
-          "severity": "info",
-          "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+          "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": 72,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -100,27 +122,27 @@
         "needsImprovement": 4000
       },
       "details": {
-        "element": "#main-heading",
-        "url": null,
+        "element": "#hero",
+        "url": "hero.png",
         "subParts": {
           "ttfb": {
-            "value": 7,
-            "percent": 10,
+            "value": 9,
+            "percent": 14,
             "overTarget": false
           },
           "resourceLoadDelay": {
-            "value": 0,
-            "percent": 0,
-            "overTarget": false
+            "value": 13,
+            "percent": 20,
+            "overTarget": true
           },
           "resourceLoadTime": {
-            "value": 0,
-            "percent": 0,
+            "value": 8,
+            "percent": 13,
             "overTarget": false
           },
           "elementRenderDelay": {
-            "value": 65,
-            "percent": 90,
+            "value": 34,
+            "percent": 53,
             "overTarget": true
           }
         },
@@ -131,7 +153,7 @@
       "script": "LCP-Trail",
       "status": "ok",
       "metric": "LCP",
-      "value": 72,
+      "value": 64,
       "unit": "ms",
       "rating": "good",
       "thresholds": {
@@ -140,13 +162,14 @@
       },
       "details": {
         "candidateCount": 1,
-        "finalElement": "#main-heading",
+        "finalElement": "#hero",
         "candidates": [
           {
             "index": 1,
-            "selector": "#main-heading",
-            "time": 72,
-            "elementType": "Text block"
+            "selector": "#hero",
+            "time": 64,
+            "elementType": "Image",
+            "url": "hero.png"
           }
         ]
       }
@@ -154,15 +177,42 @@
     "LCP-Video-Candidate": {
       "script": "LCP-Video-Candidate",
       "status": "ok",
+      "metric": "LCP",
+      "value": 60,
+      "unit": "ms",
+      "rating": "good",
+      "thresholds": {
+        "good": 2500,
+        "needsImprovement": 4000
+      },
       "details": {
-        "isVideo": false,
-        "lcpElement": "h1",
-        "lcpUrl": null
+        "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": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+          "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 5476a1c2..b5e39694 100644
--- a/skills/webperf-core-web-vitals/references/snippets.md
+++ b/skills/webperf-core-web-vitals/references/snippets.md
@@ -1,6 +1,6 @@
 ## Captured return values
 
-Each object below is a real result captured by running the snippet against `cli/tests/fixtures/core-web-vitals.html` with the recorded interaction steps for INP.
+Each object below is a real result captured by running the snippet against the seeded test pages.
 
 ---
 ## Cumulative layout shift (CLS)
@@ -24,7 +24,7 @@ Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual s
   "script": "CLS",
   "status": "ok",
   "metric": "CLS",
-  "value": 0,
+  "value": 0.0324,
   "unit": "score",
   "rating": "good",
   "thresholds": {
@@ -57,7 +57,7 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
   "script": "INP",
   "status": "ok",
   "metric": "INP",
-  "value": 16,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -66,11 +66,11 @@ Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness.
   },
   "details": {
     "totalInteractions": 1,
-    "worstEvent": "click → button#interaction-button",
+    "worstEvent": "click → button#go",
     "phases": {
-      "inputDelay": 0,
-      "processingTime": 1,
-      "presentationDelay": 15
+      "inputDelay": 1,
+      "processingTime": 61,
+      "presentationDelay": 3
     }
   }
 }
@@ -95,34 +95,57 @@ Checks if images qualify as LCP candidates based on their entropy (bits per pixe
 {
   "script": "LCP-Image-Entropy",
   "status": "ok",
-  "count": 1,
+  "count": 3,
   "details": {
-    "totalImages": 1,
+    "totalImages": 3,
     "lowEntropyCount": 0,
-    "lcpElement": "h1",
-    "lcpImageEligible": null,
-    "lcpImage": null
+    "lcpElement": "img",
+    "lcpImageEligible": true,
+    "lcpImage": {
+      "url": "hero.png",
+      "bpp": 24.1384,
+      "isLowEntropy": false
+    }
   },
   "items": [
     {
       "url": "hero.png",
       "width": 100,
       "height": 100,
-      "displayedWidth": 320,
-      "displayedHeight": 320,
+      "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
-    }
-  ],
-  "issues": [
+    },
     {
-      "severity": "info",
-      "message": "The LCP element is <h1>, text and not an image, so its entropy does not apply. Run the LCP snippet to measure it."
+      "url": "hero.png",
+      "width": 100,
+      "height": 100,
+      "displayedWidth": 300,
+      "displayedHeight": 200,
+      "fileSizeBytes": 30173,
+      "bpp": 24.1384,
+      "isLowEntropy": false,
+      "lcpEligible": true,
+      "isLCP": false
     }
-  ]
+  ],
+  "issues": []
 }
 ```
 ---
@@ -139,7 +162,7 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
   "script": "LCP-Subparts",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -147,27 +170,27 @@ Breaks down Largest Contentful Paint into its four phases to identify optimizati
     "needsImprovement": 4000
   },
   "details": {
-    "element": "#main-heading",
-    "url": null,
+    "element": "#hero",
+    "url": "hero.png",
     "subParts": {
       "ttfb": {
-        "value": 7,
-        "percent": 10,
+        "value": 9,
+        "percent": 14,
         "overTarget": false
       },
       "resourceLoadDelay": {
-        "value": 0,
-        "percent": 0,
-        "overTarget": false
+        "value": 13,
+        "percent": 20,
+        "overTarget": true
       },
       "resourceLoadTime": {
-        "value": 0,
-        "percent": 0,
+        "value": 8,
+        "percent": 13,
         "overTarget": false
       },
       "elementRenderDelay": {
-        "value": 65,
-        "percent": 90,
+        "value": 34,
+        "percent": 53,
         "overTarget": true
       }
     },
@@ -189,7 +212,7 @@ Tracks every LCP candidate element during page load and highlights each one with
   "script": "LCP-Trail",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 64,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -198,13 +221,14 @@ Tracks every LCP candidate element during page load and highlights each one with
   },
   "details": {
     "candidateCount": 1,
-    "finalElement": "#main-heading",
+    "finalElement": "#hero",
     "candidates": [
       {
         "index": 1,
-        "selector": "#main-heading",
-        "time": 72,
-        "elementType": "Text block"
+        "selector": "#hero",
+        "time": 64,
+        "elementType": "Image",
+        "url": "hero.png"
       }
     ]
   }
@@ -223,15 +247,42 @@ Detects whether the LCP element is a <video> and audits the poster image configu
 {
   "script": "LCP-Video-Candidate",
   "status": "ok",
+  "metric": "LCP",
+  "value": 60,
+  "unit": "ms",
+  "rating": "good",
+  "thresholds": {
+    "good": 2500,
+    "needsImprovement": 4000
+  },
   "details": {
-    "isVideo": false,
-    "lcpElement": "h1",
-    "lcpUrl": null
+    "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": "The LCP element is <h1>, not a <video>. Run the LCP snippet to measure it, and LCP Subparts to see its phases."
+      "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"
     }
   ]
 }
@@ -258,7 +309,7 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
   "script": "LCP",
   "status": "ok",
   "metric": "LCP",
-  "value": 72,
+  "value": 68,
   "unit": "ms",
   "rating": "good",
   "thresholds": {
@@ -266,10 +317,10 @@ Quick check for Largest Contentful Paint, a Core Web Vital that measures loading
     "needsImprovement": 4000
   },
   "details": {
-    "element": "#main-heading",
-    "elementType": "Text block",
-    "url": null,
-    "sizePixels": 24624
+    "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 5ea29929..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,10 +62,8 @@ pre code {
   overflow-wrap: break-word;
 }
 
-.wp-snippet-example h3 {
-  margin: 1.25rem 0 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
+.wp-snippet-example {
+  margin-top: 0.75rem;
 }
 
 .wp-snippet-example p {
@@ -81,12 +81,14 @@ pre code {
 }
 
 @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);
   }
 }