From 5c4eabc573b682868513a35525d6051b61cbfe7a Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Tue, 17 Mar 2026 20:49:13 +0100
Subject: [PATCH 1/9] fix: correct bugs and inconsistencies in Core Web Vitals
 snippets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bugs fixed:
- LCP-Video-Candidate: apply activationStart correction in both non-video
  and video return paths (bfcache navigations were returning wrong values)
- LCP + LCP-Trail: use getComputedStyle for background-image detection
  instead of el.style, which only reads inline styles
- CLS: add message and getDataFn to synchronous return so agents know
  they can call getCLS() after interactions for an updated value
- INP: remove misleading rating: "good" from getINP() error case when no
  interactions recorded; add getDataFn: "getINP" so agents can retry

Inconsistencies resolved:
- LCP-Sub-Parts: align internal SUB_PARTS keys with schema output keys
  (loadDelay → resourceLoadDelay, loadTime → resourceLoadTime, etc.)
- LCP-Sub-Parts + LCP-Trail: preserve hostname in URL for cross-origin
  resources (cdn.example.com/…/hero.jpg instead of just hero.jpg)
- LCP-Image-Entropy: add LCP element highlighting, consistent with all
  other LCP scripts

SKILL.md / schema improvements:
- WORKFLOWS: add Error Recovery section to decision tree
- WORKFLOWS: mark cross-skill scripts not yet available as (pending)
- WORKFLOWS: clarify cross-skill triggers require reporting to parent
  agent (context: fork — subagent cannot invoke other skills directly)
- WORKFLOWS: document getINPDetails() usage in INP debugging workflow
- SCHEMA: update CLS schema to include message and getDataFn fields
- SCHEMA: document getINPDetails() return shape and when to use it
---
 .claude/skills/SCHEMA.md                      | 15 ++++++-
 snippets/CoreWebVitals/CLS.js                 |  2 +
 snippets/CoreWebVitals/INP.js                 | 10 +++--
 snippets/CoreWebVitals/LCP-Image-Entropy.js   |  4 ++
 snippets/CoreWebVitals/LCP-Sub-Parts.js       | 42 ++++++++++++-------
 snippets/CoreWebVitals/LCP-Trail.js           | 13 +++++-
 snippets/CoreWebVitals/LCP-Video-Candidate.js | 18 +++++---
 snippets/CoreWebVitals/LCP.js                 |  4 +-
 snippets/CoreWebVitals/WORKFLOWS.md           | 25 +++++++----
 9 files changed, 98 insertions(+), 35 deletions(-)

diff --git a/.claude/skills/SCHEMA.md b/.claude/skills/SCHEMA.md
index 7328e5e..f7e8b16 100644
--- a/.claude/skills/SCHEMA.md
+++ b/.claude/skills/SCHEMA.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/snippets/CoreWebVitals/CLS.js b/snippets/CoreWebVitals/CLS.js
index 1c45ade..5f5dac6 100644
--- a/snippets/CoreWebVitals/CLS.js
+++ b/snippets/CoreWebVitals/CLS.js
@@ -75,5 +75,7 @@
     unit: "score",
     rating: clsRating,
     thresholds: { good: 0.1, needsImprovement: 0.25 },
+    message: "CLS tracking active. Call getCLS() for updated value after page interactions.",
+    getDataFn: "getCLS",
   };
 })();
diff --git a/snippets/CoreWebVitals/INP.js b/snippets/CoreWebVitals/INP.js
index 9d412ee..32e899f 100644
--- a/snippets/CoreWebVitals/INP.js
+++ b/snippets/CoreWebVitals/INP.js
@@ -290,9 +290,13 @@
       };
     }
     if (interactions.length === 0) {
-      return { script: "INP", status: "error", error: "No interactions recorded yet",
-        metric: "INP", value: 0, unit: "ms", rating: "good",
-        thresholds: { good: 200, needsImprovement: 500 }, details };
+      return {
+        script: "INP",
+        status: "error",
+        error: "No interactions recorded yet. Interact with the page and call getINP() again.",
+        getDataFn: "getINP",
+        details,
+      };
     }
     return {
       script: "INP",
diff --git a/snippets/CoreWebVitals/LCP-Image-Entropy.js b/snippets/CoreWebVitals/LCP-Image-Entropy.js
index 59c3e59..51e54b9 100644
--- a/snippets/CoreWebVitals/LCP-Image-Entropy.js
+++ b/snippets/CoreWebVitals/LCP-Image-Entropy.js
@@ -171,6 +171,10 @@
     .filter((img) => img.bpp > 0);
   const lowEntropyCount = imagesSync.filter((img) => img.isLowEntropy).length;
   const lcpImageSync = imagesSync.find((img) => img.isLCP);
+  if (lcpElementSync) {
+    lcpElementSync.style.outline = "3px dashed lime";
+    lcpElementSync.style.outlineOffset = "2px";
+  }
   const issuesSync = [];
   if (lowEntropyCount > 0) {
     issuesSync.push({ severity: "warning", message: `${lowEntropyCount} image(s) have low entropy and are LCP-ineligible in Chrome 112+` });
diff --git a/snippets/CoreWebVitals/LCP-Sub-Parts.js b/snippets/CoreWebVitals/LCP-Sub-Parts.js
index 47bab37..6311c44 100644
--- a/snippets/CoreWebVitals/LCP-Sub-Parts.js
+++ b/snippets/CoreWebVitals/LCP-Sub-Parts.js
@@ -16,9 +16,9 @@
 
   const SUB_PARTS = [
     { name: "Time to First Byte", key: "ttfb", target: 800 },
-    { name: "Resource Load Delay", key: "loadDelay", targetPercent: 10 },
-    { name: "Resource Load Time", key: "loadTime", targetPercent: 40 },
-    { name: "Element Render Delay", key: "renderDelay", targetPercent: 10 },
+    { name: "Resource Load Delay", key: "resourceLoadDelay", targetPercent: 10 },
+    { name: "Resource Load Time", key: "resourceLoadTime", targetPercent: 40 },
+    { name: "Element Render Delay", key: "elementRenderDelay", targetPercent: 10 },
   ];
 
   const getNavigationEntry = () => {
@@ -64,9 +64,9 @@
 
     const subPartValues = {
       ttfb: ttfb,
-      loadDelay: lcpRequestStart - ttfb,
-      loadTime: lcpResponseEnd - lcpRequestStart,
-      renderDelay: lcpRenderTime - lcpResponseEnd,
+      resourceLoadDelay: lcpRequestStart - ttfb,
+      resourceLoadTime: lcpResponseEnd - lcpRequestStart,
+      elementRenderDelay: lcpRenderTime - lcpResponseEnd,
     };
 
     // LCP Rating
@@ -92,7 +92,14 @@
       console.log("%cLCP Element:", "font-weight: bold;");
       console.log(`   ${selector}`, el);
       if (lcpEntry.url) {
-        const shortUrl = lcpEntry.url.split("/").pop()?.split("?")[0] || lcpEntry.url;
+        const shortUrl = (() => {
+          try {
+            const u = new URL(lcpEntry.url);
+            return u.hostname !== location.hostname
+              ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}`
+              : u.pathname.split("/").pop()?.split("?")[0] || lcpEntry.url;
+          } catch { return lcpEntry.url; }
+        })();
         console.log(`   URL: ${shortUrl}`);
       }
 
@@ -155,15 +162,15 @@
       console.log("   → Use a CDN to reduce latency");
       console.log("   → Enable server-side caching");
       console.log("   → Optimize server response time");
-    } else if (slowest.key === "loadDelay") {
+    } else if (slowest.key === "resourceLoadDelay") {
       console.log("   → Preload the LCP image: <link rel=\"preload\" as=\"image\" href=\"...\">");
       console.log("   → Remove render-blocking resources");
       console.log("   → Inline critical CSS");
-    } else if (slowest.key === "loadTime") {
+    } else if (slowest.key === "resourceLoadTime") {
       console.log("   → Compress and resize the LCP image");
       console.log("   → Use modern formats (WebP, AVIF)");
       console.log("   → Use a CDN for faster delivery");
-    } else if (slowest.key === "renderDelay") {
+    } else if (slowest.key === "elementRenderDelay") {
       console.log("   → Reduce render-blocking JavaScript");
       console.log("   → Avoid client-side rendering for LCP element");
       console.log("   → Use fetchpriority=\"high\" on LCP image");
@@ -175,9 +182,9 @@
     phases.forEach((part) => {
       const startTimes = {
         ttfb: 0,
-        loadDelay: ttfb,
-        loadTime: lcpRequestStart,
-        renderDelay: lcpResponseEnd,
+        resourceLoadDelay: ttfb,
+        resourceLoadTime: lcpRequestStart,
+        elementRenderDelay: lcpResponseEnd,
       };
       performance.measure(part.name, {
         start: startTimes[part.key],
@@ -242,7 +249,14 @@
     }
   }
   const shortUrlSync = lcpEntry.url
-    ? (lcpEntry.url.split("/").pop()?.split("?")[0] || lcpEntry.url)
+    ? (() => {
+        try {
+          const u = new URL(lcpEntry.url);
+          return u.hostname !== location.hostname
+            ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}`
+            : u.pathname.split("/").pop()?.split("?")[0] || lcpEntry.url;
+        } catch { return lcpEntry.url; }
+      })()
     : null;
   return {
     script: "LCP-Sub-Parts",
diff --git a/snippets/CoreWebVitals/LCP-Trail.js b/snippets/CoreWebVitals/LCP-Trail.js
index 24f4fc8..030ee64 100644
--- a/snippets/CoreWebVitals/LCP-Trail.js
+++ b/snippets/CoreWebVitals/LCP-Trail.js
@@ -39,7 +39,7 @@
     const tag = element.tagName.toLowerCase();
     if (tag === "img") return { type: "Image", url: entry.url || element.src };
     if (tag === "video") return { type: "Video poster", url: entry.url || element.poster };
-    if (element.style?.backgroundImage) return { type: "Background image", url: entry.url };
+    if (window.getComputedStyle(element).backgroundImage !== "none") return { type: "Background image", url: entry.url };
     return { type: tag === "h1" || tag === "p" ? "Text block" : tag };
   };
 
@@ -149,7 +149,16 @@
       selector,
       time,
       elementType: type,
-      ...(url ? { url: url.split("/").pop()?.split("?")[0] || url } : {}),
+      ...(url ? {
+        url: (() => {
+          try {
+            const u = new URL(url);
+            return u.hostname !== location.hostname
+              ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}`
+              : u.pathname.split("/").pop()?.split("?")[0] || url;
+          } catch { return url; }
+        })(),
+      } : {}),
     });
   }
   if (syncCandidates.length === 0) {
diff --git a/snippets/CoreWebVitals/LCP-Video-Candidate.js b/snippets/CoreWebVitals/LCP-Video-Candidate.js
index 3c4684a..ac6a86c 100644
--- a/snippets/CoreWebVitals/LCP-Video-Candidate.js
+++ b/snippets/CoreWebVitals/LCP-Video-Candidate.js
@@ -43,13 +43,19 @@
   console.group("%c🎬 LCP Video Candidate", "font-weight: bold; font-size: 14px;");
   console.log("");
 
+  const activationStart = (() => {
+    const nav = performance.getEntriesByType("navigation")[0];
+    return nav?.activationStart || 0;
+  })();
+  const lcpTime = Math.round(Math.max(0, lcp.startTime - activationStart));
+
   // --- LCP is NOT a video ---
   if (!element || element.tagName !== "VIDEO") {
     const tag = element ? `<${element.tagName.toLowerCase()}>` : "(element no longer in DOM)";
-    const rating = valueToRating(lcp.startTime);
+    const rating = valueToRating(lcpTime);
     console.log("%cLCP element is not a <video>", "font-weight: bold;");
     console.log("");
-    console.log(`   LCP time : ${Math.round(lcp.startTime)} ms  ${RATING[rating].icon} ${RATING[rating].label}`);
+    console.log(`   LCP time : ${lcpTime} ms  ${RATING[rating].icon} ${RATING[rating].label}`);
     console.log(`   Tag      : ${tag}`);
     if (lcp.url) console.log(`   URL      : ${lcp.url}`);
     if (element) console.log("   Element  :", element);
@@ -58,7 +64,7 @@
       script: "LCP-Video-Candidate",
       status: "ok",
       metric: "LCP",
-      value: Math.round(lcp.startTime),
+      value: lcpTime,
       unit: "ms",
       rating,
       thresholds: { good: 2500, needsImprovement: 4000 },
@@ -72,7 +78,7 @@
   const posterUrl = posterAttr ? normalizeUrl(posterAttr) : "";
   const lcpUrl = lcp.url || "";
 
-  const rating = valueToRating(lcp.startTime);
+  const rating = valueToRating(lcpTime);
   const posterFormat = detectFormat(lcpUrl || posterUrl);
   const isModernFormat = ["avif", "webp", "jxl"].includes(posterFormat);
   const isCrossOrigin = lcp.renderTime === 0 && lcp.loadTime > 0;
@@ -123,7 +129,7 @@
 
   // LCP metrics
   console.log("%cLCP Metrics", "font-weight: bold;");
-  console.log(`   LCP time    : ${Math.round(lcp.startTime)} ms  ${RATING[rating].icon} ${RATING[rating].label}`);
+  console.log(`   LCP time    : ${lcpTime} ms  ${RATING[rating].icon} ${RATING[rating].label}`);
   console.log(`   Render time : ${lcp.renderTime > 0 ? Math.round(lcp.renderTime) + " ms" : "0 (cross-origin — add Timing-Allow-Origin)"}`);
   console.log(`   Load time   : ${Math.round(lcp.loadTime)} ms`);
   console.log(`   Size        : ${Math.round(lcp.size)} px²`);
@@ -195,7 +201,7 @@
     script: "LCP-Video-Candidate",
     status: "ok",
     metric: "LCP",
-    value: Math.round(lcp.startTime),
+    value: lcpTime,
     unit: "ms",
     rating,
     thresholds: { good: 2500, needsImprovement: 4000 },
diff --git a/snippets/CoreWebVitals/LCP.js b/snippets/CoreWebVitals/LCP.js
index a37f6cc..55528ea 100644
--- a/snippets/CoreWebVitals/LCP.js
+++ b/snippets/CoreWebVitals/LCP.js
@@ -56,7 +56,7 @@
       } else if (tagName === "video") {
         console.log(`   Type: Video poster`);
         console.log(`   URL: ${lastEntry.url || element.poster}`);
-      } else if (element.style?.backgroundImage) {
+      } else if (window.getComputedStyle(element).backgroundImage !== "none") {
         console.log(`   Type: Background image`);
         console.log(`   URL: ${lastEntry.url}`);
       } else {
@@ -104,7 +104,7 @@
     }
     const tag = lcpEl.tagName.toLowerCase();
     lcpType = tag === "img" ? "Image" : tag === "video" ? "Video poster" :
-      lcpEl.style?.backgroundImage ? "Background image" :
+      window.getComputedStyle(lcpEl).backgroundImage !== "none" ? "Background image" :
       (tag === "h1" || tag === "p" ? "Text block" : tag);
   }
   return {
diff --git a/snippets/CoreWebVitals/WORKFLOWS.md b/snippets/CoreWebVitals/WORKFLOWS.md
index 2f8f864..179bb70 100644
--- a/snippets/CoreWebVitals/WORKFLOWS.md
+++ b/snippets/CoreWebVitals/WORKFLOWS.md
@@ -25,7 +25,7 @@ When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
 When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
 
 1. **CLS.js** - Measure overall CLS score
-2. **Layout-Shift-Loading-and-Interaction.js** (from Interaction skill) - Separate loading vs interaction shifts
+2. **Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
 3. Cross-reference with **webperf-loading** skill:
    - Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
    - Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)
@@ -34,11 +34,11 @@ When layout shifts are detected or the user asks "debug CLS" or "layout shift is
 
 When interactions feel slow or the user asks "debug INP" or "slow interactions":
 
-1. **INP.js** - Measure overall INP value
-2. **Interactions.js** (from Interaction skill) - List all interactions with timing
-3. **Input-Latency-Breakdown.js** (from Interaction skill) - Break down input delay, processing, presentation
-4. **Long-Animation-Frames.js** (from Interaction skill) - Identify blocking animation frames
-5. **Long-Animation-Frames-Script-Attribution.js** (from Interaction skill) - Find scripts causing delays
+1. **INP.js** - Measure overall INP value; call `getINP()` after interactions, `getINPDetails()` for full list
+2. **Interactions.js** _(pending — available in webperf-interaction skill)_
+3. **Input-Latency-Breakdown.js** _(pending — available in webperf-interaction skill)_
+4. **Long-Animation-Frames.js** _(pending — available in webperf-interaction skill)_
+5. **Long-Animation-Frames-Script-Attribution.js** _(pending — available in webperf-interaction skill)_
 
 ### Video as LCP Investigation
 
@@ -117,7 +117,7 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 ### After CLS.js
 
-- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** to separate causes
+- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
 - **If CLS > 0.25 (poor)** → Run comprehensive shift investigation:
   1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (images without dimensions)
   2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font loading strategy)
@@ -134,9 +134,20 @@ Use this decision tree to automatically run follow-up snippets based on results:
   3. **webperf-interaction:Long-Animation-Frames.js** (blocking frames)
   4. **webperf-interaction:Long-Animation-Frames-Script-Attribution.js** (culprit scripts)
 - **If specific interaction type is slow (e.g., keyboard)** → Focus analysis on that interaction type
+- **After INP data is collected** → call `getINPDetails()` for the full sorted interaction list (useful for identifying patterns across multiple slow interactions)
+
+### Error Recovery
+
+- **If any script returns `status: "error"`** → Check if the page has finished loading:
+  - If early in load: wait and re-run the script
+  - If page is an SPA: user may need to navigate to the target route first
+- **If LCP.js / LCP-Sub-Parts.js returns `status: "error"`** → Tell the user: "LCP data is not available yet. Please ensure the page has fully loaded, then run the analysis again."
+- **If INP.js `getINP()` returns `status: "error"`** → The `getDataFn: "getINP"` field signals the agent can retry after user interaction. Prompt the user to click, type, or scroll, then call `getINP()` again.
 
 ### Cross-Skill Triggers
 
+> **Context fork note:** This skill runs with `context: fork`. Cross-skill triggers below are **recommendations to report back to the parent agent**, not direct calls this subagent can execute. When a cross-skill trigger fires, tell the user which skill and script to run next. Scripts marked _(pending)_ are not yet available — skip them and note the limitation.
+
 These triggers recommend using snippets from other skills:
 
 #### From LCP to Loading Skill

From 10e05e8fb1e727da06e8ef4f18ad7f49317009ab Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Tue, 17 Mar 2026 20:49:25 +0100
Subject: [PATCH 2/9] chore: regenerate skills from updated Core Web Vitals
 snippets

---
 .../skills/webperf-core-web-vitals/SKILL.md   | 25 +++++++++++++------
 .../references/schema.md                      | 15 ++++++++++-
 .../webperf-core-web-vitals/scripts/CLS.js    |  2 +-
 .../webperf-core-web-vitals/scripts/INP.js    |  4 +--
 .../scripts/LCP-Image-Entropy.js              |  4 +--
 .../scripts/LCP-Sub-Parts.js                  |  4 +--
 .../scripts/LCP-Trail.js                      |  4 +--
 .../scripts/LCP-Video-Candidate.js            |  4 +--
 .../webperf-core-web-vitals/scripts/LCP.js    |  4 +--
 .../webperf-interaction/references/schema.md  | 15 ++++++++++-
 .../webperf-loading/references/schema.md      | 15 ++++++++++-
 .../skills/webperf-media/references/schema.md | 15 ++++++++++-
 .../webperf-resources/references/schema.md    | 15 ++++++++++-
 skills/webperf-core-web-vitals/SKILL.md       | 25 +++++++++++++------
 .../references/schema.md                      | 15 ++++++++++-
 skills/webperf-core-web-vitals/scripts/CLS.js |  2 +-
 skills/webperf-core-web-vitals/scripts/INP.js |  4 +--
 .../scripts/LCP-Image-Entropy.js              |  4 +--
 .../scripts/LCP-Sub-Parts.js                  |  4 +--
 .../scripts/LCP-Trail.js                      |  4 +--
 .../scripts/LCP-Video-Candidate.js            |  4 +--
 skills/webperf-core-web-vitals/scripts/LCP.js |  4 +--
 .../webperf-interaction/references/schema.md  | 15 ++++++++++-
 skills/webperf-loading/references/schema.md   | 15 ++++++++++-
 skills/webperf-media/references/schema.md     | 15 ++++++++++-
 skills/webperf-resources/references/schema.md | 15 ++++++++++-
 26 files changed, 202 insertions(+), 50 deletions(-)

diff --git a/.claude/skills/webperf-core-web-vitals/SKILL.md b/.claude/skills/webperf-core-web-vitals/SKILL.md
index 71d25fc..da0ab5a 100644
--- a/.claude/skills/webperf-core-web-vitals/SKILL.md
+++ b/.claude/skills/webperf-core-web-vitals/SKILL.md
@@ -54,7 +54,7 @@ When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
 When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
 
 1. **CLS.js** - Measure overall CLS score
-2. **Layout-Shift-Loading-and-Interaction.js** (from Interaction skill) - Separate loading vs interaction shifts
+2. **Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
 3. Cross-reference with **webperf-loading** skill:
    - Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
    - Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)
@@ -63,11 +63,11 @@ When layout shifts are detected or the user asks "debug CLS" or "layout shift is
 
 When interactions feel slow or the user asks "debug INP" or "slow interactions":
 
-1. **INP.js** - Measure overall INP value
-2. **Interactions.js** (from Interaction skill) - List all interactions with timing
-3. **Input-Latency-Breakdown.js** (from Interaction skill) - Break down input delay, processing, presentation
-4. **Long-Animation-Frames.js** (from Interaction skill) - Identify blocking animation frames
-5. **Long-Animation-Frames-Script-Attribution.js** (from Interaction skill) - Find scripts causing delays
+1. **INP.js** - Measure overall INP value; call `getINP()` after interactions, `getINPDetails()` for full list
+2. **Interactions.js** _(pending — available in webperf-interaction skill)_
+3. **Input-Latency-Breakdown.js** _(pending — available in webperf-interaction skill)_
+4. **Long-Animation-Frames.js** _(pending — available in webperf-interaction skill)_
+5. **Long-Animation-Frames-Script-Attribution.js** _(pending — available in webperf-interaction skill)_
 
 ### Video as LCP Investigation
 
@@ -146,7 +146,7 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 ### After CLS.js
 
-- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** to separate causes
+- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
 - **If CLS > 0.25 (poor)** → Run comprehensive shift investigation:
   1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (images without dimensions)
   2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font loading strategy)
@@ -163,9 +163,20 @@ Use this decision tree to automatically run follow-up snippets based on results:
   3. **webperf-interaction:Long-Animation-Frames.js** (blocking frames)
   4. **webperf-interaction:Long-Animation-Frames-Script-Attribution.js** (culprit scripts)
 - **If specific interaction type is slow (e.g., keyboard)** → Focus analysis on that interaction type
+- **After INP data is collected** → call `getINPDetails()` for the full sorted interaction list (useful for identifying patterns across multiple slow interactions)
+
+### Error Recovery
+
+- **If any script returns `status: "error"`** → Check if the page has finished loading:
+  - If early in load: wait and re-run the script
+  - If page is an SPA: user may need to navigate to the target route first
+- **If LCP.js / LCP-Sub-Parts.js returns `status: "error"`** → Tell the user: "LCP data is not available yet. Please ensure the page has fully loaded, then run the analysis again."
+- **If INP.js `getINP()` returns `status: "error"`** → The `getDataFn: "getINP"` field signals the agent can retry after user interaction. Prompt the user to click, type, or scroll, then call `getINP()` again.
 
 ### Cross-Skill Triggers
 
+> **Context fork note:** This skill runs with `context: fork`. Cross-skill triggers below are **recommendations to report back to the parent agent**, not direct calls this subagent can execute. When a cross-skill trigger fires, tell the user which skill and script to run next. Scripts marked _(pending)_ are not yet available — skip them and note the limitation.
+
 These triggers recommend using snippets from other skills:
 
 #### From LCP to Loading Skill
diff --git a/.claude/skills/webperf-core-web-vitals/references/schema.md b/.claude/skills/webperf-core-web-vitals/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/.claude/skills/webperf-core-web-vitals/references/schema.md
+++ b/.claude/skills/webperf-core-web-vitals/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/.claude/skills/webperf-core-web-vitals/scripts/CLS.js b/.claude/skills/webperf-core-web-vitals/scripts/CLS.js
index 66ee0ba..5bc9e12 100644
--- a/.claude/skills/webperf-core-web-vitals/scripts/CLS.js
+++ b/.claude/skills/webperf-core-web-vitals/scripts/CLS.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/CLS.js | sha256:489073431f0be946 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/CLS.js
+// snippets/CoreWebVitals/CLS.js | sha256:7ab8f5d4f643a861 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/CLS.js
 (()=>{let e=0;const t=e=>e<=.1?"good":e<=.25?"needs-improvement":"poor",n=()=>{t(e)},o=new PerformanceObserver(t=>{for(const n of t.getEntries())n.hadRecentInput||(e+=n.value);n()});o.observe({type:"layout-shift",buffered:!0}),document.addEventListener("visibilitychange",()=>{"hidden"===document.visibilityState&&(o.takeRecords(),n())}),window.getCLS=()=>{n();const o=t(e);return{script:"CLS",status:"ok",metric:"CLS",value:Math.round(1e4*e)/1e4,unit:"score",rating:o,thresholds:{good:.1,needsImprovement:.25}}};const r=performance.getEntriesByType("layout-shift").reduce((e,t)=>t.hadRecentInput?e:e+t.value,0);t(r);Math.round(1e4*r)})();
\ No newline at end of file
diff --git a/.claude/skills/webperf-core-web-vitals/scripts/INP.js b/.claude/skills/webperf-core-web-vitals/scripts/INP.js
index 2f5af59..dbe6bab 100644
--- a/.claude/skills/webperf-core-web-vitals/scripts/INP.js
+++ b/.claude/skills/webperf-core-web-vitals/scripts/INP.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/INP.js | sha256:7d7935e7d6d4cabd | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/INP.js
-(()=>{const t=[];let e=0,n=null;const r=t=>t<=200?"good":t<=500?"needs-improvement":"poor",s=()=>{if(0===t.length)return{value:0,entry:null};const e=[...t].sort((t,e)=>e.duration-t.duration),n=t.length<50?0:Math.floor(.02*t.length);return{value:e[n].duration,entry:e[n]}},a=t=>{const e=t.target;if(!e)return t.name;let n=e.tagName.toLowerCase();if(e.id)n+=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(n+=`.${t}`)}return`${t.name} → ${n}`},i=t=>{const e={inputDelay:0,processingTime:0,presentationDelay:0};return t.processingStart&&t.processingEnd&&(e.inputDelay=t.processingStart-t.startTime,e.processingTime=t.processingEnd-t.processingStart,e.presentationDelay=t.duration-e.inputDelay-e.processingTime),e},o=new PerformanceObserver(r=>{for(const o of r.getEntries()){if(!o.interactionId)continue;const r=t.find(t=>t.interactionId===o.interactionId);if(!r||o.duration>r.duration){if(r){const e=t.indexOf(r);t.splice(e,1)}t.push({name:o.name,duration:o.duration,startTime:o.startTime,interactionId:o.interactionId,target:o.target,processingStart:o.processingStart,processingEnd:o.processingEnd,formattedName:a(o),phases:i(o),entry:o})}const c=s();e=c.value,n=c.entry}});o.observe({type:"event",buffered:!0,durationThreshold:16});const c=()=>{r(e);if(n){n.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(n.target);const t=n.phases;if(t.inputDelay>0){const e=n.duration,r=40;"▓".repeat(Math.round(t.inputDelay/e*r)),"█".repeat(Math.round(t.processingTime/e*r)),"░".repeat(Math.round(t.presentationDelay/e*r))}}const s=t.filter(t=>t.duration>200).sort((t,e)=>e.duration-t.duration).slice(0,10);s.length>0&&s.slice(0,3).forEach((t,e)=>{});const a={};t.forEach(t=>{const e=t.name;a[e]||(a[e]={count:0,totalDuration:0,maxDuration:0}),a[e].count++,a[e].totalDuration+=t.duration,a[e].maxDuration=Math.max(a[e].maxDuration,t.duration)}),Object.keys(a)};window.getINP=()=>{const a=s();e=a.value,n=a.entry,c();const i=r(e),o={totalInteractions:t.length};return n&&(o.worstEvent=n.formattedName,o.phases={inputDelay:Math.round(n.phases.inputDelay),processingTime:Math.round(n.phases.processingTime),presentationDelay:Math.round(n.phases.presentationDelay)}),0===t.length?{script:"INP",status:"error",error:"No interactions recorded yet",metric:"INP",value:0,unit:"ms",rating:"good",thresholds:{good:200,needsImprovement:500},details:o}:{script:"INP",status:"ok",metric:"INP",value:Math.round(e),unit:"ms",rating:i,thresholds:{good:200,needsImprovement:500},details:o}},window.getINPDetails=()=>{if(0===t.length)return[];const e=[...t].sort((t,e)=>e.duration-t.duration),n=Math.min(e.length,15);return e.slice(0,n).forEach((t,e)=>{t.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(t.target)}),e},document.addEventListener("visibilitychange",()=>{if("hidden"===document.visibilityState){o.takeRecords();const t=s();e=t.value,n=t.entry,c()}})})();
\ No newline at end of file
+// snippets/CoreWebVitals/INP.js | sha256:d38336ec07369461 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/INP.js
+(()=>{const t=[];let e=0,n=null;const a=t=>t<=200?"good":t<=500?"needs-improvement":"poor",r=()=>{if(0===t.length)return{value:0,entry:null};const e=[...t].sort((t,e)=>e.duration-t.duration),n=t.length<50?0:Math.floor(.02*t.length);return{value:e[n].duration,entry:e[n]}},i=t=>{const e=t.target;if(!e)return t.name;let n=e.tagName.toLowerCase();if(e.id)n+=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(n+=`.${t}`)}return`${t.name} → ${n}`},s=t=>{const e={inputDelay:0,processingTime:0,presentationDelay:0};return t.processingStart&&t.processingEnd&&(e.inputDelay=t.processingStart-t.startTime,e.processingTime=t.processingEnd-t.processingStart,e.presentationDelay=t.duration-e.inputDelay-e.processingTime),e},o=new PerformanceObserver(a=>{for(const o of a.getEntries()){if(!o.interactionId)continue;const a=t.find(t=>t.interactionId===o.interactionId);if(!a||o.duration>a.duration){if(a){const e=t.indexOf(a);t.splice(e,1)}t.push({name:o.name,duration:o.duration,startTime:o.startTime,interactionId:o.interactionId,target:o.target,processingStart:o.processingStart,processingEnd:o.processingEnd,formattedName:i(o),phases:s(o),entry:o})}const c=r();e=c.value,n=c.entry}});o.observe({type:"event",buffered:!0,durationThreshold:16});const c=()=>{a(e);if(n){n.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(n.target);const t=n.phases;if(t.inputDelay>0){const e=n.duration,a=40;"▓".repeat(Math.round(t.inputDelay/e*a)),"█".repeat(Math.round(t.processingTime/e*a)),"░".repeat(Math.round(t.presentationDelay/e*a))}}const r=t.filter(t=>t.duration>200).sort((t,e)=>e.duration-t.duration).slice(0,10);r.length>0&&r.slice(0,3).forEach((t,e)=>{});const i={};t.forEach(t=>{const e=t.name;i[e]||(i[e]={count:0,totalDuration:0,maxDuration:0}),i[e].count++,i[e].totalDuration+=t.duration,i[e].maxDuration=Math.max(i[e].maxDuration,t.duration)}),Object.keys(i)};window.getINP=()=>{const i=r();e=i.value,n=i.entry,c();const s=a(e),o={totalInteractions:t.length};return n&&(o.worstEvent=n.formattedName,o.phases={inputDelay:Math.round(n.phases.inputDelay),processingTime:Math.round(n.phases.processingTime),presentationDelay:Math.round(n.phases.presentationDelay)}),0===t.length?{script:"INP",status:"error",error:"No interactions recorded yet. Interact with the page and call getINP() again.",getDataFn:"getINP",details:o}:{script:"INP",status:"ok",metric:"INP",value:Math.round(e),unit:"ms",rating:s,thresholds:{good:200,needsImprovement:500},details:o}},window.getINPDetails=()=>{if(0===t.length)return[];const e=[...t].sort((t,e)=>e.duration-t.duration),n=Math.min(e.length,15);return e.slice(0,n).forEach((t,e)=>{t.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(t.target)}),e},document.addEventListener("visibilitychange",()=>{if("hidden"===document.visibilityState){o.takeRecords();const t=r();e=t.value,n=t.entry,c()}})})();
\ No newline at end of file
diff --git a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js
index 1ccbba9..bf29ce5 100644
--- a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js
+++ b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Image-Entropy.js | sha256:e072b4731bcc7fdf | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Image-Entropy.js
-(()=>{const e=e=>{if(!e)return"-";const t=Math.floor(Math.log(e)/Math.log(1024));return(e/Math.pow(1024,t)).toFixed(1)+" "+["B","KB","MB"][t]};let t=null,r=null;const i=new PerformanceObserver(e=>{const i=e.getEntries(),n=i[i.length-1];n&&(t=n.element,r=n.url)});i.observe({type:"largest-contentful-paint",buffered:!0}),setTimeout(()=>{i.disconnect();const n=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const i=e.currentSrc||e.src,n=performance.getEntriesByName(i)[0],s=n?.encodedBodySize||0,o=e.naturalWidth*e.naturalHeight,l=o>0?8*s/o:0,a=l>0&&l<.05,p=t===e||r===i;return{element:e,src:i,shortSrc:i.split("/").pop()?.split("?")[0]||i,width:e.naturalWidth,height:e.naturalHeight,fileSize:s,bpp:l,isLowEntropy:a,isLCP:p,lcpEligible:!a&&l>0}}).filter(e=>e.bpp>0);if(0===n.length)return;const s=n.filter(e=>e.isLowEntropy);n.filter(e=>!e.isLowEntropy),n.find(e=>e.isLCP);n.sort((e,t)=>t.bpp-e.bpp).map(t=>({Image:t.shortSrc.length>30?"..."+t.shortSrc.slice(-27):t.shortSrc,Dimensions:`${t.width}×${t.height}`,Size:e(t.fileSize),BPP:t.bpp.toFixed(4),Entropy:t.isLowEntropy?"🔴 Low":"🟢 Normal","LCP Eligible":t.lcpEligible?"✅":"❌","Is LCP":t.isLCP?"👈":""})),s.length>0&&s.forEach(e=>{}),n.forEach((e,t)=>{})},100);const n=performance.getEntriesByType("largest-contentful-paint").at(-1),s=n?.element??null,o=n?.url??null,l=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const t=e.currentSrc||e.src,r=performance.getEntriesByName(t)[0],i=r?.encodedBodySize||0,n=e.naturalWidth*e.naturalHeight,l=n>0?8*i/n:0,a=l>0&&l<.05,p=s===e||o===t;return{url:t.split("/").pop()?.split("?")[0]||t,width:e.naturalWidth,height:e.naturalHeight,fileSizeBytes:i,bpp:Math.round(1e4*l)/1e4,isLowEntropy:a,lcpEligible:!a&&l>0,isLCP:p}}).filter(e=>e.bpp>0),a=l.filter(e=>e.isLowEntropy).length,p=l.find(e=>e.isLCP),c=[];a>0&&c.push({severity:"warning",message:`${a} image(s) have low entropy and are LCP-ineligible in Chrome 112+`}),p?.isLowEntropy&&c.push({severity:"error",message:"Current LCP image has low entropy and may be skipped by Chrome"})})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Image-Entropy.js | sha256:378ac9be31342726 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Image-Entropy.js
+(()=>{const e=e=>{if(!e)return"-";const t=Math.floor(Math.log(e)/Math.log(1024));return(e/Math.pow(1024,t)).toFixed(1)+" "+["B","KB","MB"][t]};let t=null,r=null;const i=new PerformanceObserver(e=>{const i=e.getEntries(),n=i[i.length-1];n&&(t=n.element,r=n.url)});i.observe({type:"largest-contentful-paint",buffered:!0}),setTimeout(()=>{i.disconnect();const n=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const i=e.currentSrc||e.src,n=performance.getEntriesByName(i)[0],s=n?.encodedBodySize||0,l=e.naturalWidth*e.naturalHeight,o=l>0?8*s/l:0,a=o>0&&o<.05,p=t===e||r===i;return{element:e,src:i,shortSrc:i.split("/").pop()?.split("?")[0]||i,width:e.naturalWidth,height:e.naturalHeight,fileSize:s,bpp:o,isLowEntropy:a,isLCP:p,lcpEligible:!a&&o>0}}).filter(e=>e.bpp>0);if(0===n.length)return;const s=n.filter(e=>e.isLowEntropy);n.filter(e=>!e.isLowEntropy),n.find(e=>e.isLCP);n.sort((e,t)=>t.bpp-e.bpp).map(t=>({Image:t.shortSrc.length>30?"..."+t.shortSrc.slice(-27):t.shortSrc,Dimensions:`${t.width}×${t.height}`,Size:e(t.fileSize),BPP:t.bpp.toFixed(4),Entropy:t.isLowEntropy?"🔴 Low":"🟢 Normal","LCP Eligible":t.lcpEligible?"✅":"❌","Is LCP":t.isLCP?"👈":""})),s.length>0&&s.forEach(e=>{}),n.forEach((e,t)=>{})},100);const n=performance.getEntriesByType("largest-contentful-paint").at(-1),s=n?.element??null,l=n?.url??null,o=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const t=e.currentSrc||e.src,r=performance.getEntriesByName(t)[0],i=r?.encodedBodySize||0,n=e.naturalWidth*e.naturalHeight,o=n>0?8*i/n:0,a=o>0&&o<.05,p=s===e||l===t;return{url:t.split("/").pop()?.split("?")[0]||t,width:e.naturalWidth,height:e.naturalHeight,fileSizeBytes:i,bpp:Math.round(1e4*o)/1e4,isLowEntropy:a,lcpEligible:!a&&o>0,isLCP:p}}).filter(e=>e.bpp>0),a=o.filter(e=>e.isLowEntropy).length,p=o.find(e=>e.isLCP);s&&(s.style.outline="3px dashed lime",s.style.outlineOffset="2px");const c=[];a>0&&c.push({severity:"warning",message:`${a} image(s) have low entropy and are LCP-ineligible in Chrome 112+`}),p?.isLowEntropy&&c.push({severity:"error",message:"Current LCP image has low entropy and may be skipped by Chrome"})})();
\ No newline at end of file
diff --git a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js
index 4953fa9..7a46192 100644
--- a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js
+++ b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Sub-Parts.js | sha256:675014efb100840b | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Sub-Parts.js
-(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=[{name:"Time to First Byte",key:"ttfb",target:800},{name:"Resource Load Delay",key:"loadDelay",targetPercent:10},{name:"Resource Load Time",key:"loadTime",targetPercent:40},{name:"Element Render Delay",key:"renderDelay",targetPercent:10}],a=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.responseStart>0&&e.responseStart<performance.now()?e:null},r=new PerformanceObserver(r=>{const n=r.getEntries().at(-1);if(!n)return;const s=a();if(!s)return;const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,i=Math.max(0,s.responseStart-l),m=Math.max(i,o?(o.requestStart||o.startTime)-l:0),u=Math.max(m,o?o.responseEnd-l:0),c=Math.max(u,n.startTime-l),p={ttfb:i,loadDelay:m-i,loadTime:u-m,renderDelay:c-u};e(c);if(n.element){const e=n.element;let t=e.tagName.toLowerCase();if(e.id)t=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const a=e.className.trim().split(/\s+/).slice(0,2).join(".");a&&(t=`${e.tagName.toLowerCase()}.${a}`)}n.url&&n.url.split("/").pop()?.split("?"),e.style.outline="3px dashed lime",e.style.outlineOffset="2px"}const d=t.map(e=>({...e,value:p[e.key],percent:p[e.key]/c*100})),y=d.reduce((e,t)=>e.value>t.value?e:t),f=(d.map(e=>{const t=e.target?e.value>e.target:e.percent>e.targetPercent;return{"Sub-part":e.key===y.key?`⚠️ ${e.name}`:e.name,Time:(n=e.value,`${Math.round(n)}ms`),"%":(a=e.value,r=c,`${Math.round(a/r*100)}%`),Status:t?"🔴 Over target":"✅ OK"};var a,r,n}),d.map(e=>{const t=Math.max(1,Math.round(e.value/c*40));return{key:e.key,bar:t}}));"█".repeat(f[0].bar),"▓".repeat(f[1].bar),"▒".repeat(f[2].bar),"░".repeat(f[3].bar),t.forEach(e=>performance.clearMeasures(e.name)),d.forEach(e=>{const t={ttfb:0,loadDelay:i,loadTime:m,renderDelay:u};performance.measure(e.name,{start:t[e.key],end:t[e.key]+e.value})})});r.observe({type:"largest-contentful-paint",buffered:!0});const n=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!n)return{script:"LCP-Sub-Parts",status:"error",error:"No LCP entries yet"};const s=a();if(!s)return{script:"LCP-Sub-Parts",status:"error",error:"No navigation entry"};const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,i=Math.max(0,s.responseStart-l),m=Math.max(i,o?(o.requestStart||o.startTime)-l:0),u=Math.max(m,o?o.responseEnd-l:0),c=Math.max(u,n.startTime-l),p=Math.round(c),d=(e(p),Math.round(i)),y=Math.round(m-i),f=Math.round(u-m),g=Math.round(c-u);[{key:"ttfb",value:d},{key:"resourceLoadDelay",value:y},{key:"resourceLoadTime",value:f},{key:"elementRenderDelay",value:g}].reduce((e,t)=>e.value>t.value?e:t);let h=null;if(n.element){const e=n.element;if(h=e.tagName.toLowerCase(),e.id)h=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(h=`${e.tagName.toLowerCase()}.${t}`)}}n.url&&n.url.split("/").pop()?.split("?"),Math.round(d/p*100),Math.round(y/p*100),Math.round(f/p*100),Math.round(g/p*100)})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Sub-Parts.js | sha256:54b8831d20f3103a | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Sub-Parts.js
+(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=[{name:"Time to First Byte",key:"ttfb",target:800},{name:"Resource Load Delay",key:"resourceLoadDelay",targetPercent:10},{name:"Resource Load Time",key:"resourceLoadTime",targetPercent:40},{name:"Element Render Delay",key:"elementRenderDelay",targetPercent:10}],a=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.responseStart>0&&e.responseStart<performance.now()?e:null},r=new PerformanceObserver(r=>{const n=r.getEntries().at(-1);if(!n)return;const s=a();if(!s)return;const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,u=Math.max(0,s.responseStart-l),m=Math.max(u,o?(o.requestStart||o.startTime)-l:0),i=Math.max(m,o?o.responseEnd-l:0),c=Math.max(i,n.startTime-l),p={ttfb:u,resourceLoadDelay:m-u,resourceLoadTime:i-m,elementRenderDelay:c-i};e(c);if(n.element){const e=n.element;let t=e.tagName.toLowerCase();if(e.id)t=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const a=e.className.trim().split(/\s+/).slice(0,2).join(".");a&&(t=`${e.tagName.toLowerCase()}.${a}`)}n.url&&(()=>{try{const e=new URL(n.url);return e.hostname!==location.hostname?`${e.hostname}/…/${e.pathname.split("/").pop()?.split("?")[0]}`:e.pathname.split("/").pop()?.split("?")[0]||n.url}catch{return n.url}})(),e.style.outline="3px dashed lime",e.style.outlineOffset="2px"}const y=t.map(e=>({...e,value:p[e.key],percent:p[e.key]/c*100})),d=y.reduce((e,t)=>e.value>t.value?e:t),h=(y.map(e=>{const t=e.target?e.value>e.target:e.percent>e.targetPercent;return{"Sub-part":e.key===d.key?`⚠️ ${e.name}`:e.name,Time:(n=e.value,`${Math.round(n)}ms`),"%":(a=e.value,r=c,`${Math.round(a/r*100)}%`),Status:t?"🔴 Over target":"✅ OK"};var a,r,n}),y.map(e=>{const t=Math.max(1,Math.round(e.value/c*40));return{key:e.key,bar:t}}));"█".repeat(h[0].bar),"▓".repeat(h[1].bar),"▒".repeat(h[2].bar),"░".repeat(h[3].bar),t.forEach(e=>performance.clearMeasures(e.name)),y.forEach(e=>{const t={ttfb:0,resourceLoadDelay:u,resourceLoadTime:m,elementRenderDelay:i};performance.measure(e.name,{start:t[e.key],end:t[e.key]+e.value})})});r.observe({type:"largest-contentful-paint",buffered:!0});const n=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!n)return{script:"LCP-Sub-Parts",status:"error",error:"No LCP entries yet"};const s=a();if(!s)return{script:"LCP-Sub-Parts",status:"error",error:"No navigation entry"};const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,u=Math.max(0,s.responseStart-l),m=Math.max(u,o?(o.requestStart||o.startTime)-l:0),i=Math.max(m,o?o.responseEnd-l:0),c=Math.max(i,n.startTime-l),p=Math.round(c),y=(e(p),Math.round(u)),d=Math.round(m-u),h=Math.round(i-m),f=Math.round(c-i);[{key:"ttfb",value:y},{key:"resourceLoadDelay",value:d},{key:"resourceLoadTime",value:h},{key:"elementRenderDelay",value:f}].reduce((e,t)=>e.value>t.value?e:t);let g=null;if(n.element){const e=n.element;if(g=e.tagName.toLowerCase(),e.id)g=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(g=`${e.tagName.toLowerCase()}.${t}`)}}n.url&&(()=>{try{const e=new URL(n.url);return e.hostname!==location.hostname?`${e.hostname}/…/${e.pathname.split("/").pop()?.split("?")[0]}`:e.pathname.split("/").pop()?.split("?")[0]||n.url}catch{return n.url}})(),Math.round(y/p*100),Math.round(d/p*100),Math.round(h/p*100),Math.round(f/p*100)})();
\ No newline at end of file
diff --git a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Trail.js b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Trail.js
index 05671ff..c50f4ca 100644
--- a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Trail.js
+++ b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Trail.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Trail.js | sha256:ba3b9a7b4ff63567 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Trail.js
-(()=>{const e=[{color:"#EF4444",name:"Red"},{color:"#F97316",name:"Orange"},{color:"#22C55E",name:"Green"},{color:"#3B82F6",name:"Blue"},{color:"#A855F7",name:"Purple"},{color:"#EC4899",name:"Pink"}],t=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",r=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0},n=e=>{if(e.id)return`#${e.id}`;if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");if(t)return`${e.tagName.toLowerCase()}.${t}`}return e.tagName.toLowerCase()},o=(e,t)=>{const r=e.tagName.toLowerCase();return"img"===r?{type:"Image",url:t.url||e.src}:"video"===r?{type:"Video poster",url:t.url||e.poster}:e.style?.backgroundImage?{type:"Background image",url:t.url}:{type:"h1"===r||"p"===r?"Text block":r}},s=[];new PerformanceObserver(a=>{const l=r(),i=new Set(s.map(e=>e.element));for(const t of a.getEntries()){const{element:r}=t;if(!r||i.has(r))continue;const{color:o,name:a}=e[s.length%e.length];r.style.outline=`3px dashed ${o}`,r.style.outlineOffset="2px",s.push({index:s.length+1,element:r,selector:n(r),color:o,name:a,time:Math.max(0,t.startTime-l),entry:t}),i.add(r)}(()=>{const e=s[s.length-1];e&&(t(e.time),o(e.element,e.entry),s.forEach(({})=>{}))})()}).observe({type:"largest-contentful-paint",buffered:!0});const a=performance.getEntriesByType("largest-contentful-paint");if(0===a.length)return{script:"LCP-Trail",status:"error",error:"No LCP entries yet"};const l=r(),i=new Set,c=[];for(const e of a){const t=e.element;if(!t||i.has(t))continue;i.add(t);const r=n(t),s=Math.round(Math.max(0,e.startTime-l)),{type:a,url:m}=o(t,e);c.push({index:c.length+1,selector:r,time:s,elementType:a,...m?{url:m.split("/").pop()?.split("?")[0]||m}:{}})}if(0===c.length)return{script:"LCP-Trail",status:"error",error:"No LCP elements in DOM"};const m=c.at(-1);t(m.time)})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Trail.js | sha256:2b4fdf0368699ad2 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Trail.js
+(()=>{const e=[{color:"#EF4444",name:"Red"},{color:"#F97316",name:"Orange"},{color:"#22C55E",name:"Green"},{color:"#3B82F6",name:"Blue"},{color:"#A855F7",name:"Purple"},{color:"#EC4899",name:"Pink"}],t=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",n=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0},r=e=>{if(e.id)return`#${e.id}`;if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");if(t)return`${e.tagName.toLowerCase()}.${t}`}return e.tagName.toLowerCase()},o=(e,t)=>{const n=e.tagName.toLowerCase();return"img"===n?{type:"Image",url:t.url||e.src}:"video"===n?{type:"Video poster",url:t.url||e.poster}:"none"!==window.getComputedStyle(e).backgroundImage?{type:"Background image",url:t.url}:{type:"h1"===n||"p"===n?"Text block":n}},a=[];new PerformanceObserver(s=>{const l=n(),i=new Set(a.map(e=>e.element));for(const t of s.getEntries()){const{element:n}=t;if(!n||i.has(n))continue;const{color:o,name:s}=e[a.length%e.length];n.style.outline=`3px dashed ${o}`,n.style.outlineOffset="2px",a.push({index:a.length+1,element:n,selector:r(n),color:o,name:s,time:Math.max(0,t.startTime-l),entry:t}),i.add(n)}(()=>{const e=a[a.length-1];e&&(t(e.time),o(e.element,e.entry),a.forEach(({})=>{}))})()}).observe({type:"largest-contentful-paint",buffered:!0});const s=performance.getEntriesByType("largest-contentful-paint");if(0===s.length)return{script:"LCP-Trail",status:"error",error:"No LCP entries yet"};const l=n(),i=new Set,c=[];for(const e of s){const t=e.element;if(!t||i.has(t))continue;i.add(t);const n=r(t),a=Math.round(Math.max(0,e.startTime-l)),{type:s,url:m}=o(t,e);c.push({index:c.length+1,selector:n,time:a,elementType:s,...m?{url:(()=>{try{const e=new URL(m);return e.hostname!==location.hostname?`${e.hostname}/…/${e.pathname.split("/").pop()?.split("?")[0]}`:e.pathname.split("/").pop()?.split("?")[0]||m}catch{return m}})()}:{}})}if(0===c.length)return{script:"LCP-Trail",status:"error",error:"No LCP elements in DOM"};const m=c.at(-1);t(m.time)})();
\ No newline at end of file
diff --git a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js
index a5c03db..72a9d80 100644
--- a/.claude/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js
+++ b/.claude/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Video-Candidate.js | sha256:1df9db0d6cd61f13 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Video-Candidate.js
-(()=>{const e=performance.getEntriesByType("largest-contentful-paint");if(0===e.length)return{script:"LCP-Video-Candidate",status:"error",error:"No LCP entries found"};const t=e[e.length-1],r=t.element;function i(e){return e<=2500?"good":e<=4e3?"needs-improvement":"poor"}function n(e){try{return new URL(e,location.origin).href}catch{return e}}if(!r||"VIDEO"!==r.tagName){r&&r.tagName.toLowerCase();const e=i(t.startTime);return{script:"LCP-Video-Candidate",status:"ok",metric:"LCP",value:Math.round(t.startTime),unit:"ms",rating:e,thresholds:{good:2500,needsImprovement:4e3},details:{isVideo:!1},issues:[]}}const o=r.getAttribute("poster")||"",s=o?n(o):"",a=t.url||"",u=(i(t.startTime),function(e){if(!e)return"unknown";const t=e.toLowerCase().split("?")[0].match(/\.(avif|webp|jxl|png|gif|jpg|jpeg|svg)(?:[?#]|$)/);return t?"jpeg"===t[1]?"jpg":t[1]:"unknown"}(a||s)),g=["avif","webp","jxl"].includes(u),l=0===t.renderTime&&t.loadTime>0,d=Array.from(document.querySelectorAll('link[rel="preload"][as="image"]')).find(e=>{const t=e.getAttribute("href");if(!t)return!1;try{return n(t)===s||n(t)===a}catch{return!1}})??null,m=r.getAttribute("preload"),p=r.hasAttribute("autoplay"),h=(r.hasAttribute("muted"),r.hasAttribute("playsinline"),[]);o||h.push({s:"error",msg:"No poster attribute — the browser has no image to use as LCP candidate"}),o&&!d?h.push({s:"warning",msg:'No <link rel="preload" as="image"> for the poster — browser discovers it late'}):d&&"high"!==d.getAttribute("fetchpriority")&&h.push({s:"info",msg:'Preload found but missing fetchpriority="high" — may be deprioritised'}),o&&!g&&"unknown"!==u&&h.push({s:"info",msg:`Poster uses ${u} — AVIF or WebP would reduce file size and LCP load time`}),l&&h.push({s:"info",msg:"renderTime is 0 — poster is cross-origin and the server does not send Timing-Allow-Origin"}),p||"none"!==m||h.push({s:"warning",msg:'preload="none" on a non-autoplay video may delay poster image loading in some browsers'}),d&&d.getAttribute("fetchpriority"),h.length>0&&(h.filter(e=>"error"===e.s),h.filter(e=>"warning"===e.s),h.filter(e=>"info"===e.s),h.forEach(e=>{})),Math.round(t.startTime),d?.getAttribute("fetchpriority"),h.map(e=>({severity:"error"===e.s?"error":"warning"===e.s?"warning":"info",message:e.msg}))})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Video-Candidate.js | sha256:661ecd2463bde4a5 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Video-Candidate.js
+(()=>{const e=performance.getEntriesByType("largest-contentful-paint");if(0===e.length)return{script:"LCP-Video-Candidate",status:"error",error:"No LCP entries found"};const t=e[e.length-1],r=t.element;function n(e){return e<=2500?"good":e<=4e3?"needs-improvement":"poor"}function i(e){try{return new URL(e,location.origin).href}catch{return e}}const o=(()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0})(),s=Math.round(Math.max(0,t.startTime-o));if(!r||"VIDEO"!==r.tagName)return r&&r.tagName.toLowerCase(),{script:"LCP-Video-Candidate",status:"ok",metric:"LCP",value:s,unit:"ms",rating:n(s),thresholds:{good:2500,needsImprovement:4e3},details:{isVideo:!1},issues:[]};const a=r.getAttribute("poster")||"",u=a?i(a):"",g=t.url||"",l=(n(s),function(e){if(!e)return"unknown";const t=e.toLowerCase().split("?")[0].match(/\.(avif|webp|jxl|png|gif|jpg|jpeg|svg)(?:[?#]|$)/);return t?"jpeg"===t[1]?"jpg":t[1]:"unknown"}(g||u)),d=["avif","webp","jxl"].includes(l),p=0===t.renderTime&&t.loadTime>0,m=Array.from(document.querySelectorAll('link[rel="preload"][as="image"]')).find(e=>{const t=e.getAttribute("href");if(!t)return!1;try{return i(t)===u||i(t)===g}catch{return!1}})??null,c=r.getAttribute("preload"),f=r.hasAttribute("autoplay"),h=(r.hasAttribute("muted"),r.hasAttribute("playsinline"),[]);a||h.push({s:"error",msg:"No poster attribute — the browser has no image to use as LCP candidate"}),a&&!m?h.push({s:"warning",msg:'No <link rel="preload" as="image"> for the poster — browser discovers it late'}):m&&"high"!==m.getAttribute("fetchpriority")&&h.push({s:"info",msg:'Preload found but missing fetchpriority="high" — may be deprioritised'}),a&&!d&&"unknown"!==l&&h.push({s:"info",msg:`Poster uses ${l} — AVIF or WebP would reduce file size and LCP load time`}),p&&h.push({s:"info",msg:"renderTime is 0 — poster is cross-origin and the server does not send Timing-Allow-Origin"}),f||"none"!==c||h.push({s:"warning",msg:'preload="none" on a non-autoplay video may delay poster image loading in some browsers'}),m&&m.getAttribute("fetchpriority"),h.length>0&&(h.filter(e=>"error"===e.s),h.filter(e=>"warning"===e.s),h.filter(e=>"info"===e.s),h.forEach(e=>{})),m?.getAttribute("fetchpriority"),h.map(e=>({severity:"error"===e.s?"error":"warning"===e.s?"warning":"info",message:e.msg}))})();
\ No newline at end of file
diff --git a/.claude/skills/webperf-core-web-vitals/scripts/LCP.js b/.claude/skills/webperf-core-web-vitals/scripts/LCP.js
index 118440f..f7a6125 100644
--- a/.claude/skills/webperf-core-web-vitals/scripts/LCP.js
+++ b/.claude/skills/webperf-core-web-vitals/scripts/LCP.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP.js | sha256:5982d7648dc0db34 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP.js
-(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0};new PerformanceObserver(a=>{const s=a.getEntries(),o=s[s.length-1];if(!o)return;const r=t(),n=Math.max(0,o.startTime-r),i=(e(n),o.element);if(i){let e=i.tagName.toLowerCase();if(i.id)e=`#${i.id}`;else if(i.className&&"string"==typeof i.className){const t=i.className.trim().split(/\s+/).slice(0,2).join(".");t&&(e=`${i.tagName.toLowerCase()}.${t}`)}i.tagName.toLowerCase(),i.style.outline="3px dashed lime",i.style.outlineOffset="2px"}}).observe({type:"largest-contentful-paint",buffered:!0});const a=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!a)return{script:"LCP",status:"error",error:"No LCP entries yet"};const s=t(),o=Math.round(Math.max(0,a.startTime-s)),r=(e(o),a.element);let n=null,i=null;if(r){if(n=r.tagName.toLowerCase(),r.id)n=`#${r.id}`;else if(r.className&&"string"==typeof r.className){const e=r.className.trim().split(/\s+/).slice(0,2).join(".");e&&(n=`${r.tagName.toLowerCase()}.${e}`)}const e=r.tagName.toLowerCase();i="img"===e?"Image":"video"===e?"Video poster":r.style?.backgroundImage?"Background image":"h1"===e||"p"===e?"Text block":e}})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP.js | sha256:7951027f8b24a15a | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP.js
+(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0};new PerformanceObserver(a=>{const o=a.getEntries(),s=o[o.length-1];if(!s)return;const n=t(),r=Math.max(0,s.startTime-n),i=(e(r),s.element);if(i){let e=i.tagName.toLowerCase();if(i.id)e=`#${i.id}`;else if(i.className&&"string"==typeof i.className){const t=i.className.trim().split(/\s+/).slice(0,2).join(".");t&&(e=`${i.tagName.toLowerCase()}.${t}`)}const t=i.tagName.toLowerCase();"img"===t||"video"===t||window.getComputedStyle(i),i.style.outline="3px dashed lime",i.style.outlineOffset="2px"}}).observe({type:"largest-contentful-paint",buffered:!0});const a=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!a)return{script:"LCP",status:"error",error:"No LCP entries yet"};const o=t(),s=Math.round(Math.max(0,a.startTime-o)),n=(e(s),a.element);let r=null,i=null;if(n){if(r=n.tagName.toLowerCase(),n.id)r=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(r=`${n.tagName.toLowerCase()}.${e}`)}const e=n.tagName.toLowerCase();i="img"===e?"Image":"video"===e?"Video poster":"none"!==window.getComputedStyle(n).backgroundImage?"Background image":"h1"===e||"p"===e?"Text block":e}})();
\ No newline at end of file
diff --git a/.claude/skills/webperf-interaction/references/schema.md b/.claude/skills/webperf-interaction/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/.claude/skills/webperf-interaction/references/schema.md
+++ b/.claude/skills/webperf-interaction/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/.claude/skills/webperf-loading/references/schema.md b/.claude/skills/webperf-loading/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/.claude/skills/webperf-loading/references/schema.md
+++ b/.claude/skills/webperf-loading/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/.claude/skills/webperf-media/references/schema.md b/.claude/skills/webperf-media/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/.claude/skills/webperf-media/references/schema.md
+++ b/.claude/skills/webperf-media/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/.claude/skills/webperf-resources/references/schema.md b/.claude/skills/webperf-resources/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/.claude/skills/webperf-resources/references/schema.md
+++ b/.claude/skills/webperf-resources/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/skills/webperf-core-web-vitals/SKILL.md b/skills/webperf-core-web-vitals/SKILL.md
index 71d25fc..da0ab5a 100644
--- a/skills/webperf-core-web-vitals/SKILL.md
+++ b/skills/webperf-core-web-vitals/SKILL.md
@@ -54,7 +54,7 @@ When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
 When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
 
 1. **CLS.js** - Measure overall CLS score
-2. **Layout-Shift-Loading-and-Interaction.js** (from Interaction skill) - Separate loading vs interaction shifts
+2. **Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
 3. Cross-reference with **webperf-loading** skill:
    - Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
    - Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)
@@ -63,11 +63,11 @@ When layout shifts are detected or the user asks "debug CLS" or "layout shift is
 
 When interactions feel slow or the user asks "debug INP" or "slow interactions":
 
-1. **INP.js** - Measure overall INP value
-2. **Interactions.js** (from Interaction skill) - List all interactions with timing
-3. **Input-Latency-Breakdown.js** (from Interaction skill) - Break down input delay, processing, presentation
-4. **Long-Animation-Frames.js** (from Interaction skill) - Identify blocking animation frames
-5. **Long-Animation-Frames-Script-Attribution.js** (from Interaction skill) - Find scripts causing delays
+1. **INP.js** - Measure overall INP value; call `getINP()` after interactions, `getINPDetails()` for full list
+2. **Interactions.js** _(pending — available in webperf-interaction skill)_
+3. **Input-Latency-Breakdown.js** _(pending — available in webperf-interaction skill)_
+4. **Long-Animation-Frames.js** _(pending — available in webperf-interaction skill)_
+5. **Long-Animation-Frames-Script-Attribution.js** _(pending — available in webperf-interaction skill)_
 
 ### Video as LCP Investigation
 
@@ -146,7 +146,7 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 ### After CLS.js
 
-- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** to separate causes
+- **If CLS > 0.1** → Run **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** _(pending — available in webperf-interaction skill)_
 - **If CLS > 0.25 (poor)** → Run comprehensive shift investigation:
   1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (images without dimensions)
   2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font loading strategy)
@@ -163,9 +163,20 @@ Use this decision tree to automatically run follow-up snippets based on results:
   3. **webperf-interaction:Long-Animation-Frames.js** (blocking frames)
   4. **webperf-interaction:Long-Animation-Frames-Script-Attribution.js** (culprit scripts)
 - **If specific interaction type is slow (e.g., keyboard)** → Focus analysis on that interaction type
+- **After INP data is collected** → call `getINPDetails()` for the full sorted interaction list (useful for identifying patterns across multiple slow interactions)
+
+### Error Recovery
+
+- **If any script returns `status: "error"`** → Check if the page has finished loading:
+  - If early in load: wait and re-run the script
+  - If page is an SPA: user may need to navigate to the target route first
+- **If LCP.js / LCP-Sub-Parts.js returns `status: "error"`** → Tell the user: "LCP data is not available yet. Please ensure the page has fully loaded, then run the analysis again."
+- **If INP.js `getINP()` returns `status: "error"`** → The `getDataFn: "getINP"` field signals the agent can retry after user interaction. Prompt the user to click, type, or scroll, then call `getINP()` again.
 
 ### Cross-Skill Triggers
 
+> **Context fork note:** This skill runs with `context: fork`. Cross-skill triggers below are **recommendations to report back to the parent agent**, not direct calls this subagent can execute. When a cross-skill trigger fires, tell the user which skill and script to run next. Scripts marked _(pending)_ are not yet available — skip them and note the limitation.
+
 These triggers recommend using snippets from other skills:
 
 #### From LCP to Loading Skill
diff --git a/skills/webperf-core-web-vitals/references/schema.md b/skills/webperf-core-web-vitals/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/skills/webperf-core-web-vitals/references/schema.md
+++ b/skills/webperf-core-web-vitals/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/skills/webperf-core-web-vitals/scripts/CLS.js b/skills/webperf-core-web-vitals/scripts/CLS.js
index 66ee0ba..5bc9e12 100644
--- a/skills/webperf-core-web-vitals/scripts/CLS.js
+++ b/skills/webperf-core-web-vitals/scripts/CLS.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/CLS.js | sha256:489073431f0be946 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/CLS.js
+// snippets/CoreWebVitals/CLS.js | sha256:7ab8f5d4f643a861 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/CLS.js
 (()=>{let e=0;const t=e=>e<=.1?"good":e<=.25?"needs-improvement":"poor",n=()=>{t(e)},o=new PerformanceObserver(t=>{for(const n of t.getEntries())n.hadRecentInput||(e+=n.value);n()});o.observe({type:"layout-shift",buffered:!0}),document.addEventListener("visibilitychange",()=>{"hidden"===document.visibilityState&&(o.takeRecords(),n())}),window.getCLS=()=>{n();const o=t(e);return{script:"CLS",status:"ok",metric:"CLS",value:Math.round(1e4*e)/1e4,unit:"score",rating:o,thresholds:{good:.1,needsImprovement:.25}}};const r=performance.getEntriesByType("layout-shift").reduce((e,t)=>t.hadRecentInput?e:e+t.value,0);t(r);Math.round(1e4*r)})();
\ No newline at end of file
diff --git a/skills/webperf-core-web-vitals/scripts/INP.js b/skills/webperf-core-web-vitals/scripts/INP.js
index 2f5af59..dbe6bab 100644
--- a/skills/webperf-core-web-vitals/scripts/INP.js
+++ b/skills/webperf-core-web-vitals/scripts/INP.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/INP.js | sha256:7d7935e7d6d4cabd | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/INP.js
-(()=>{const t=[];let e=0,n=null;const r=t=>t<=200?"good":t<=500?"needs-improvement":"poor",s=()=>{if(0===t.length)return{value:0,entry:null};const e=[...t].sort((t,e)=>e.duration-t.duration),n=t.length<50?0:Math.floor(.02*t.length);return{value:e[n].duration,entry:e[n]}},a=t=>{const e=t.target;if(!e)return t.name;let n=e.tagName.toLowerCase();if(e.id)n+=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(n+=`.${t}`)}return`${t.name} → ${n}`},i=t=>{const e={inputDelay:0,processingTime:0,presentationDelay:0};return t.processingStart&&t.processingEnd&&(e.inputDelay=t.processingStart-t.startTime,e.processingTime=t.processingEnd-t.processingStart,e.presentationDelay=t.duration-e.inputDelay-e.processingTime),e},o=new PerformanceObserver(r=>{for(const o of r.getEntries()){if(!o.interactionId)continue;const r=t.find(t=>t.interactionId===o.interactionId);if(!r||o.duration>r.duration){if(r){const e=t.indexOf(r);t.splice(e,1)}t.push({name:o.name,duration:o.duration,startTime:o.startTime,interactionId:o.interactionId,target:o.target,processingStart:o.processingStart,processingEnd:o.processingEnd,formattedName:a(o),phases:i(o),entry:o})}const c=s();e=c.value,n=c.entry}});o.observe({type:"event",buffered:!0,durationThreshold:16});const c=()=>{r(e);if(n){n.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(n.target);const t=n.phases;if(t.inputDelay>0){const e=n.duration,r=40;"▓".repeat(Math.round(t.inputDelay/e*r)),"█".repeat(Math.round(t.processingTime/e*r)),"░".repeat(Math.round(t.presentationDelay/e*r))}}const s=t.filter(t=>t.duration>200).sort((t,e)=>e.duration-t.duration).slice(0,10);s.length>0&&s.slice(0,3).forEach((t,e)=>{});const a={};t.forEach(t=>{const e=t.name;a[e]||(a[e]={count:0,totalDuration:0,maxDuration:0}),a[e].count++,a[e].totalDuration+=t.duration,a[e].maxDuration=Math.max(a[e].maxDuration,t.duration)}),Object.keys(a)};window.getINP=()=>{const a=s();e=a.value,n=a.entry,c();const i=r(e),o={totalInteractions:t.length};return n&&(o.worstEvent=n.formattedName,o.phases={inputDelay:Math.round(n.phases.inputDelay),processingTime:Math.round(n.phases.processingTime),presentationDelay:Math.round(n.phases.presentationDelay)}),0===t.length?{script:"INP",status:"error",error:"No interactions recorded yet",metric:"INP",value:0,unit:"ms",rating:"good",thresholds:{good:200,needsImprovement:500},details:o}:{script:"INP",status:"ok",metric:"INP",value:Math.round(e),unit:"ms",rating:i,thresholds:{good:200,needsImprovement:500},details:o}},window.getINPDetails=()=>{if(0===t.length)return[];const e=[...t].sort((t,e)=>e.duration-t.duration),n=Math.min(e.length,15);return e.slice(0,n).forEach((t,e)=>{t.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(t.target)}),e},document.addEventListener("visibilitychange",()=>{if("hidden"===document.visibilityState){o.takeRecords();const t=s();e=t.value,n=t.entry,c()}})})();
\ No newline at end of file
+// snippets/CoreWebVitals/INP.js | sha256:d38336ec07369461 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/INP.js
+(()=>{const t=[];let e=0,n=null;const a=t=>t<=200?"good":t<=500?"needs-improvement":"poor",r=()=>{if(0===t.length)return{value:0,entry:null};const e=[...t].sort((t,e)=>e.duration-t.duration),n=t.length<50?0:Math.floor(.02*t.length);return{value:e[n].duration,entry:e[n]}},i=t=>{const e=t.target;if(!e)return t.name;let n=e.tagName.toLowerCase();if(e.id)n+=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(n+=`.${t}`)}return`${t.name} → ${n}`},s=t=>{const e={inputDelay:0,processingTime:0,presentationDelay:0};return t.processingStart&&t.processingEnd&&(e.inputDelay=t.processingStart-t.startTime,e.processingTime=t.processingEnd-t.processingStart,e.presentationDelay=t.duration-e.inputDelay-e.processingTime),e},o=new PerformanceObserver(a=>{for(const o of a.getEntries()){if(!o.interactionId)continue;const a=t.find(t=>t.interactionId===o.interactionId);if(!a||o.duration>a.duration){if(a){const e=t.indexOf(a);t.splice(e,1)}t.push({name:o.name,duration:o.duration,startTime:o.startTime,interactionId:o.interactionId,target:o.target,processingStart:o.processingStart,processingEnd:o.processingEnd,formattedName:i(o),phases:s(o),entry:o})}const c=r();e=c.value,n=c.entry}});o.observe({type:"event",buffered:!0,durationThreshold:16});const c=()=>{a(e);if(n){n.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(n.target);const t=n.phases;if(t.inputDelay>0){const e=n.duration,a=40;"▓".repeat(Math.round(t.inputDelay/e*a)),"█".repeat(Math.round(t.processingTime/e*a)),"░".repeat(Math.round(t.presentationDelay/e*a))}}const r=t.filter(t=>t.duration>200).sort((t,e)=>e.duration-t.duration).slice(0,10);r.length>0&&r.slice(0,3).forEach((t,e)=>{});const i={};t.forEach(t=>{const e=t.name;i[e]||(i[e]={count:0,totalDuration:0,maxDuration:0}),i[e].count++,i[e].totalDuration+=t.duration,i[e].maxDuration=Math.max(i[e].maxDuration,t.duration)}),Object.keys(i)};window.getINP=()=>{const i=r();e=i.value,n=i.entry,c();const s=a(e),o={totalInteractions:t.length};return n&&(o.worstEvent=n.formattedName,o.phases={inputDelay:Math.round(n.phases.inputDelay),processingTime:Math.round(n.phases.processingTime),presentationDelay:Math.round(n.phases.presentationDelay)}),0===t.length?{script:"INP",status:"error",error:"No interactions recorded yet. Interact with the page and call getINP() again.",getDataFn:"getINP",details:o}:{script:"INP",status:"ok",metric:"INP",value:Math.round(e),unit:"ms",rating:s,thresholds:{good:200,needsImprovement:500},details:o}},window.getINPDetails=()=>{if(0===t.length)return[];const e=[...t].sort((t,e)=>e.duration-t.duration),n=Math.min(e.length,15);return e.slice(0,n).forEach((t,e)=>{t.target&&(t=>{if(!t)return"";const e=[];let n=t;for(;n&&n!==document.body&&e.length<5;){let t=n.tagName.toLowerCase();if(n.id)t+=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(t+=`.${e}`)}e.unshift(t),n=n.parentElement}e.join(" > ")})(t.target)}),e},document.addEventListener("visibilitychange",()=>{if("hidden"===document.visibilityState){o.takeRecords();const t=r();e=t.value,n=t.entry,c()}})})();
\ No newline at end of file
diff --git a/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js b/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js
index 1ccbba9..bf29ce5 100644
--- a/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js
+++ b/skills/webperf-core-web-vitals/scripts/LCP-Image-Entropy.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Image-Entropy.js | sha256:e072b4731bcc7fdf | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Image-Entropy.js
-(()=>{const e=e=>{if(!e)return"-";const t=Math.floor(Math.log(e)/Math.log(1024));return(e/Math.pow(1024,t)).toFixed(1)+" "+["B","KB","MB"][t]};let t=null,r=null;const i=new PerformanceObserver(e=>{const i=e.getEntries(),n=i[i.length-1];n&&(t=n.element,r=n.url)});i.observe({type:"largest-contentful-paint",buffered:!0}),setTimeout(()=>{i.disconnect();const n=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const i=e.currentSrc||e.src,n=performance.getEntriesByName(i)[0],s=n?.encodedBodySize||0,o=e.naturalWidth*e.naturalHeight,l=o>0?8*s/o:0,a=l>0&&l<.05,p=t===e||r===i;return{element:e,src:i,shortSrc:i.split("/").pop()?.split("?")[0]||i,width:e.naturalWidth,height:e.naturalHeight,fileSize:s,bpp:l,isLowEntropy:a,isLCP:p,lcpEligible:!a&&l>0}}).filter(e=>e.bpp>0);if(0===n.length)return;const s=n.filter(e=>e.isLowEntropy);n.filter(e=>!e.isLowEntropy),n.find(e=>e.isLCP);n.sort((e,t)=>t.bpp-e.bpp).map(t=>({Image:t.shortSrc.length>30?"..."+t.shortSrc.slice(-27):t.shortSrc,Dimensions:`${t.width}×${t.height}`,Size:e(t.fileSize),BPP:t.bpp.toFixed(4),Entropy:t.isLowEntropy?"🔴 Low":"🟢 Normal","LCP Eligible":t.lcpEligible?"✅":"❌","Is LCP":t.isLCP?"👈":""})),s.length>0&&s.forEach(e=>{}),n.forEach((e,t)=>{})},100);const n=performance.getEntriesByType("largest-contentful-paint").at(-1),s=n?.element??null,o=n?.url??null,l=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const t=e.currentSrc||e.src,r=performance.getEntriesByName(t)[0],i=r?.encodedBodySize||0,n=e.naturalWidth*e.naturalHeight,l=n>0?8*i/n:0,a=l>0&&l<.05,p=s===e||o===t;return{url:t.split("/").pop()?.split("?")[0]||t,width:e.naturalWidth,height:e.naturalHeight,fileSizeBytes:i,bpp:Math.round(1e4*l)/1e4,isLowEntropy:a,lcpEligible:!a&&l>0,isLCP:p}}).filter(e=>e.bpp>0),a=l.filter(e=>e.isLowEntropy).length,p=l.find(e=>e.isLCP),c=[];a>0&&c.push({severity:"warning",message:`${a} image(s) have low entropy and are LCP-ineligible in Chrome 112+`}),p?.isLowEntropy&&c.push({severity:"error",message:"Current LCP image has low entropy and may be skipped by Chrome"})})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Image-Entropy.js | sha256:378ac9be31342726 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Image-Entropy.js
+(()=>{const e=e=>{if(!e)return"-";const t=Math.floor(Math.log(e)/Math.log(1024));return(e/Math.pow(1024,t)).toFixed(1)+" "+["B","KB","MB"][t]};let t=null,r=null;const i=new PerformanceObserver(e=>{const i=e.getEntries(),n=i[i.length-1];n&&(t=n.element,r=n.url)});i.observe({type:"largest-contentful-paint",buffered:!0}),setTimeout(()=>{i.disconnect();const n=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const i=e.currentSrc||e.src,n=performance.getEntriesByName(i)[0],s=n?.encodedBodySize||0,l=e.naturalWidth*e.naturalHeight,o=l>0?8*s/l:0,a=o>0&&o<.05,p=t===e||r===i;return{element:e,src:i,shortSrc:i.split("/").pop()?.split("?")[0]||i,width:e.naturalWidth,height:e.naturalHeight,fileSize:s,bpp:o,isLowEntropy:a,isLCP:p,lcpEligible:!a&&o>0}}).filter(e=>e.bpp>0);if(0===n.length)return;const s=n.filter(e=>e.isLowEntropy);n.filter(e=>!e.isLowEntropy),n.find(e=>e.isLCP);n.sort((e,t)=>t.bpp-e.bpp).map(t=>({Image:t.shortSrc.length>30?"..."+t.shortSrc.slice(-27):t.shortSrc,Dimensions:`${t.width}×${t.height}`,Size:e(t.fileSize),BPP:t.bpp.toFixed(4),Entropy:t.isLowEntropy?"🔴 Low":"🟢 Normal","LCP Eligible":t.lcpEligible?"✅":"❌","Is LCP":t.isLCP?"👈":""})),s.length>0&&s.forEach(e=>{}),n.forEach((e,t)=>{})},100);const n=performance.getEntriesByType("largest-contentful-paint").at(-1),s=n?.element??null,l=n?.url??null,o=[...document.images].filter(e=>{const t=e.currentSrc||e.src;return t&&!t.startsWith("data:image")}).map(e=>{const t=e.currentSrc||e.src,r=performance.getEntriesByName(t)[0],i=r?.encodedBodySize||0,n=e.naturalWidth*e.naturalHeight,o=n>0?8*i/n:0,a=o>0&&o<.05,p=s===e||l===t;return{url:t.split("/").pop()?.split("?")[0]||t,width:e.naturalWidth,height:e.naturalHeight,fileSizeBytes:i,bpp:Math.round(1e4*o)/1e4,isLowEntropy:a,lcpEligible:!a&&o>0,isLCP:p}}).filter(e=>e.bpp>0),a=o.filter(e=>e.isLowEntropy).length,p=o.find(e=>e.isLCP);s&&(s.style.outline="3px dashed lime",s.style.outlineOffset="2px");const c=[];a>0&&c.push({severity:"warning",message:`${a} image(s) have low entropy and are LCP-ineligible in Chrome 112+`}),p?.isLowEntropy&&c.push({severity:"error",message:"Current LCP image has low entropy and may be skipped by Chrome"})})();
\ No newline at end of file
diff --git a/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js b/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js
index 4953fa9..7a46192 100644
--- a/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js
+++ b/skills/webperf-core-web-vitals/scripts/LCP-Sub-Parts.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Sub-Parts.js | sha256:675014efb100840b | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Sub-Parts.js
-(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=[{name:"Time to First Byte",key:"ttfb",target:800},{name:"Resource Load Delay",key:"loadDelay",targetPercent:10},{name:"Resource Load Time",key:"loadTime",targetPercent:40},{name:"Element Render Delay",key:"renderDelay",targetPercent:10}],a=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.responseStart>0&&e.responseStart<performance.now()?e:null},r=new PerformanceObserver(r=>{const n=r.getEntries().at(-1);if(!n)return;const s=a();if(!s)return;const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,i=Math.max(0,s.responseStart-l),m=Math.max(i,o?(o.requestStart||o.startTime)-l:0),u=Math.max(m,o?o.responseEnd-l:0),c=Math.max(u,n.startTime-l),p={ttfb:i,loadDelay:m-i,loadTime:u-m,renderDelay:c-u};e(c);if(n.element){const e=n.element;let t=e.tagName.toLowerCase();if(e.id)t=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const a=e.className.trim().split(/\s+/).slice(0,2).join(".");a&&(t=`${e.tagName.toLowerCase()}.${a}`)}n.url&&n.url.split("/").pop()?.split("?"),e.style.outline="3px dashed lime",e.style.outlineOffset="2px"}const d=t.map(e=>({...e,value:p[e.key],percent:p[e.key]/c*100})),y=d.reduce((e,t)=>e.value>t.value?e:t),f=(d.map(e=>{const t=e.target?e.value>e.target:e.percent>e.targetPercent;return{"Sub-part":e.key===y.key?`⚠️ ${e.name}`:e.name,Time:(n=e.value,`${Math.round(n)}ms`),"%":(a=e.value,r=c,`${Math.round(a/r*100)}%`),Status:t?"🔴 Over target":"✅ OK"};var a,r,n}),d.map(e=>{const t=Math.max(1,Math.round(e.value/c*40));return{key:e.key,bar:t}}));"█".repeat(f[0].bar),"▓".repeat(f[1].bar),"▒".repeat(f[2].bar),"░".repeat(f[3].bar),t.forEach(e=>performance.clearMeasures(e.name)),d.forEach(e=>{const t={ttfb:0,loadDelay:i,loadTime:m,renderDelay:u};performance.measure(e.name,{start:t[e.key],end:t[e.key]+e.value})})});r.observe({type:"largest-contentful-paint",buffered:!0});const n=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!n)return{script:"LCP-Sub-Parts",status:"error",error:"No LCP entries yet"};const s=a();if(!s)return{script:"LCP-Sub-Parts",status:"error",error:"No navigation entry"};const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,i=Math.max(0,s.responseStart-l),m=Math.max(i,o?(o.requestStart||o.startTime)-l:0),u=Math.max(m,o?o.responseEnd-l:0),c=Math.max(u,n.startTime-l),p=Math.round(c),d=(e(p),Math.round(i)),y=Math.round(m-i),f=Math.round(u-m),g=Math.round(c-u);[{key:"ttfb",value:d},{key:"resourceLoadDelay",value:y},{key:"resourceLoadTime",value:f},{key:"elementRenderDelay",value:g}].reduce((e,t)=>e.value>t.value?e:t);let h=null;if(n.element){const e=n.element;if(h=e.tagName.toLowerCase(),e.id)h=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(h=`${e.tagName.toLowerCase()}.${t}`)}}n.url&&n.url.split("/").pop()?.split("?"),Math.round(d/p*100),Math.round(y/p*100),Math.round(f/p*100),Math.round(g/p*100)})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Sub-Parts.js | sha256:54b8831d20f3103a | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Sub-Parts.js
+(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=[{name:"Time to First Byte",key:"ttfb",target:800},{name:"Resource Load Delay",key:"resourceLoadDelay",targetPercent:10},{name:"Resource Load Time",key:"resourceLoadTime",targetPercent:40},{name:"Element Render Delay",key:"elementRenderDelay",targetPercent:10}],a=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.responseStart>0&&e.responseStart<performance.now()?e:null},r=new PerformanceObserver(r=>{const n=r.getEntries().at(-1);if(!n)return;const s=a();if(!s)return;const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,u=Math.max(0,s.responseStart-l),m=Math.max(u,o?(o.requestStart||o.startTime)-l:0),i=Math.max(m,o?o.responseEnd-l:0),c=Math.max(i,n.startTime-l),p={ttfb:u,resourceLoadDelay:m-u,resourceLoadTime:i-m,elementRenderDelay:c-i};e(c);if(n.element){const e=n.element;let t=e.tagName.toLowerCase();if(e.id)t=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const a=e.className.trim().split(/\s+/).slice(0,2).join(".");a&&(t=`${e.tagName.toLowerCase()}.${a}`)}n.url&&(()=>{try{const e=new URL(n.url);return e.hostname!==location.hostname?`${e.hostname}/…/${e.pathname.split("/").pop()?.split("?")[0]}`:e.pathname.split("/").pop()?.split("?")[0]||n.url}catch{return n.url}})(),e.style.outline="3px dashed lime",e.style.outlineOffset="2px"}const y=t.map(e=>({...e,value:p[e.key],percent:p[e.key]/c*100})),d=y.reduce((e,t)=>e.value>t.value?e:t),h=(y.map(e=>{const t=e.target?e.value>e.target:e.percent>e.targetPercent;return{"Sub-part":e.key===d.key?`⚠️ ${e.name}`:e.name,Time:(n=e.value,`${Math.round(n)}ms`),"%":(a=e.value,r=c,`${Math.round(a/r*100)}%`),Status:t?"🔴 Over target":"✅ OK"};var a,r,n}),y.map(e=>{const t=Math.max(1,Math.round(e.value/c*40));return{key:e.key,bar:t}}));"█".repeat(h[0].bar),"▓".repeat(h[1].bar),"▒".repeat(h[2].bar),"░".repeat(h[3].bar),t.forEach(e=>performance.clearMeasures(e.name)),y.forEach(e=>{const t={ttfb:0,resourceLoadDelay:u,resourceLoadTime:m,elementRenderDelay:i};performance.measure(e.name,{start:t[e.key],end:t[e.key]+e.value})})});r.observe({type:"largest-contentful-paint",buffered:!0});const n=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!n)return{script:"LCP-Sub-Parts",status:"error",error:"No LCP entries yet"};const s=a();if(!s)return{script:"LCP-Sub-Parts",status:"error",error:"No navigation entry"};const o=performance.getEntriesByType("resource").find(e=>e.name===n.url),l=s.activationStart||0,u=Math.max(0,s.responseStart-l),m=Math.max(u,o?(o.requestStart||o.startTime)-l:0),i=Math.max(m,o?o.responseEnd-l:0),c=Math.max(i,n.startTime-l),p=Math.round(c),y=(e(p),Math.round(u)),d=Math.round(m-u),h=Math.round(i-m),f=Math.round(c-i);[{key:"ttfb",value:y},{key:"resourceLoadDelay",value:d},{key:"resourceLoadTime",value:h},{key:"elementRenderDelay",value:f}].reduce((e,t)=>e.value>t.value?e:t);let g=null;if(n.element){const e=n.element;if(g=e.tagName.toLowerCase(),e.id)g=`#${e.id}`;else if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");t&&(g=`${e.tagName.toLowerCase()}.${t}`)}}n.url&&(()=>{try{const e=new URL(n.url);return e.hostname!==location.hostname?`${e.hostname}/…/${e.pathname.split("/").pop()?.split("?")[0]}`:e.pathname.split("/").pop()?.split("?")[0]||n.url}catch{return n.url}})(),Math.round(y/p*100),Math.round(d/p*100),Math.round(h/p*100),Math.round(f/p*100)})();
\ No newline at end of file
diff --git a/skills/webperf-core-web-vitals/scripts/LCP-Trail.js b/skills/webperf-core-web-vitals/scripts/LCP-Trail.js
index 05671ff..c50f4ca 100644
--- a/skills/webperf-core-web-vitals/scripts/LCP-Trail.js
+++ b/skills/webperf-core-web-vitals/scripts/LCP-Trail.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Trail.js | sha256:ba3b9a7b4ff63567 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Trail.js
-(()=>{const e=[{color:"#EF4444",name:"Red"},{color:"#F97316",name:"Orange"},{color:"#22C55E",name:"Green"},{color:"#3B82F6",name:"Blue"},{color:"#A855F7",name:"Purple"},{color:"#EC4899",name:"Pink"}],t=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",r=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0},n=e=>{if(e.id)return`#${e.id}`;if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");if(t)return`${e.tagName.toLowerCase()}.${t}`}return e.tagName.toLowerCase()},o=(e,t)=>{const r=e.tagName.toLowerCase();return"img"===r?{type:"Image",url:t.url||e.src}:"video"===r?{type:"Video poster",url:t.url||e.poster}:e.style?.backgroundImage?{type:"Background image",url:t.url}:{type:"h1"===r||"p"===r?"Text block":r}},s=[];new PerformanceObserver(a=>{const l=r(),i=new Set(s.map(e=>e.element));for(const t of a.getEntries()){const{element:r}=t;if(!r||i.has(r))continue;const{color:o,name:a}=e[s.length%e.length];r.style.outline=`3px dashed ${o}`,r.style.outlineOffset="2px",s.push({index:s.length+1,element:r,selector:n(r),color:o,name:a,time:Math.max(0,t.startTime-l),entry:t}),i.add(r)}(()=>{const e=s[s.length-1];e&&(t(e.time),o(e.element,e.entry),s.forEach(({})=>{}))})()}).observe({type:"largest-contentful-paint",buffered:!0});const a=performance.getEntriesByType("largest-contentful-paint");if(0===a.length)return{script:"LCP-Trail",status:"error",error:"No LCP entries yet"};const l=r(),i=new Set,c=[];for(const e of a){const t=e.element;if(!t||i.has(t))continue;i.add(t);const r=n(t),s=Math.round(Math.max(0,e.startTime-l)),{type:a,url:m}=o(t,e);c.push({index:c.length+1,selector:r,time:s,elementType:a,...m?{url:m.split("/").pop()?.split("?")[0]||m}:{}})}if(0===c.length)return{script:"LCP-Trail",status:"error",error:"No LCP elements in DOM"};const m=c.at(-1);t(m.time)})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Trail.js | sha256:2b4fdf0368699ad2 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Trail.js
+(()=>{const e=[{color:"#EF4444",name:"Red"},{color:"#F97316",name:"Orange"},{color:"#22C55E",name:"Green"},{color:"#3B82F6",name:"Blue"},{color:"#A855F7",name:"Purple"},{color:"#EC4899",name:"Pink"}],t=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",n=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0},r=e=>{if(e.id)return`#${e.id}`;if(e.className&&"string"==typeof e.className){const t=e.className.trim().split(/\s+/).slice(0,2).join(".");if(t)return`${e.tagName.toLowerCase()}.${t}`}return e.tagName.toLowerCase()},o=(e,t)=>{const n=e.tagName.toLowerCase();return"img"===n?{type:"Image",url:t.url||e.src}:"video"===n?{type:"Video poster",url:t.url||e.poster}:"none"!==window.getComputedStyle(e).backgroundImage?{type:"Background image",url:t.url}:{type:"h1"===n||"p"===n?"Text block":n}},a=[];new PerformanceObserver(s=>{const l=n(),i=new Set(a.map(e=>e.element));for(const t of s.getEntries()){const{element:n}=t;if(!n||i.has(n))continue;const{color:o,name:s}=e[a.length%e.length];n.style.outline=`3px dashed ${o}`,n.style.outlineOffset="2px",a.push({index:a.length+1,element:n,selector:r(n),color:o,name:s,time:Math.max(0,t.startTime-l),entry:t}),i.add(n)}(()=>{const e=a[a.length-1];e&&(t(e.time),o(e.element,e.entry),a.forEach(({})=>{}))})()}).observe({type:"largest-contentful-paint",buffered:!0});const s=performance.getEntriesByType("largest-contentful-paint");if(0===s.length)return{script:"LCP-Trail",status:"error",error:"No LCP entries yet"};const l=n(),i=new Set,c=[];for(const e of s){const t=e.element;if(!t||i.has(t))continue;i.add(t);const n=r(t),a=Math.round(Math.max(0,e.startTime-l)),{type:s,url:m}=o(t,e);c.push({index:c.length+1,selector:n,time:a,elementType:s,...m?{url:(()=>{try{const e=new URL(m);return e.hostname!==location.hostname?`${e.hostname}/…/${e.pathname.split("/").pop()?.split("?")[0]}`:e.pathname.split("/").pop()?.split("?")[0]||m}catch{return m}})()}:{}})}if(0===c.length)return{script:"LCP-Trail",status:"error",error:"No LCP elements in DOM"};const m=c.at(-1);t(m.time)})();
\ No newline at end of file
diff --git a/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js b/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js
index a5c03db..72a9d80 100644
--- a/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js
+++ b/skills/webperf-core-web-vitals/scripts/LCP-Video-Candidate.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP-Video-Candidate.js | sha256:1df9db0d6cd61f13 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Video-Candidate.js
-(()=>{const e=performance.getEntriesByType("largest-contentful-paint");if(0===e.length)return{script:"LCP-Video-Candidate",status:"error",error:"No LCP entries found"};const t=e[e.length-1],r=t.element;function i(e){return e<=2500?"good":e<=4e3?"needs-improvement":"poor"}function n(e){try{return new URL(e,location.origin).href}catch{return e}}if(!r||"VIDEO"!==r.tagName){r&&r.tagName.toLowerCase();const e=i(t.startTime);return{script:"LCP-Video-Candidate",status:"ok",metric:"LCP",value:Math.round(t.startTime),unit:"ms",rating:e,thresholds:{good:2500,needsImprovement:4e3},details:{isVideo:!1},issues:[]}}const o=r.getAttribute("poster")||"",s=o?n(o):"",a=t.url||"",u=(i(t.startTime),function(e){if(!e)return"unknown";const t=e.toLowerCase().split("?")[0].match(/\.(avif|webp|jxl|png|gif|jpg|jpeg|svg)(?:[?#]|$)/);return t?"jpeg"===t[1]?"jpg":t[1]:"unknown"}(a||s)),g=["avif","webp","jxl"].includes(u),l=0===t.renderTime&&t.loadTime>0,d=Array.from(document.querySelectorAll('link[rel="preload"][as="image"]')).find(e=>{const t=e.getAttribute("href");if(!t)return!1;try{return n(t)===s||n(t)===a}catch{return!1}})??null,m=r.getAttribute("preload"),p=r.hasAttribute("autoplay"),h=(r.hasAttribute("muted"),r.hasAttribute("playsinline"),[]);o||h.push({s:"error",msg:"No poster attribute — the browser has no image to use as LCP candidate"}),o&&!d?h.push({s:"warning",msg:'No <link rel="preload" as="image"> for the poster — browser discovers it late'}):d&&"high"!==d.getAttribute("fetchpriority")&&h.push({s:"info",msg:'Preload found but missing fetchpriority="high" — may be deprioritised'}),o&&!g&&"unknown"!==u&&h.push({s:"info",msg:`Poster uses ${u} — AVIF or WebP would reduce file size and LCP load time`}),l&&h.push({s:"info",msg:"renderTime is 0 — poster is cross-origin and the server does not send Timing-Allow-Origin"}),p||"none"!==m||h.push({s:"warning",msg:'preload="none" on a non-autoplay video may delay poster image loading in some browsers'}),d&&d.getAttribute("fetchpriority"),h.length>0&&(h.filter(e=>"error"===e.s),h.filter(e=>"warning"===e.s),h.filter(e=>"info"===e.s),h.forEach(e=>{})),Math.round(t.startTime),d?.getAttribute("fetchpriority"),h.map(e=>({severity:"error"===e.s?"error":"warning"===e.s?"warning":"info",message:e.msg}))})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP-Video-Candidate.js | sha256:661ecd2463bde4a5 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP-Video-Candidate.js
+(()=>{const e=performance.getEntriesByType("largest-contentful-paint");if(0===e.length)return{script:"LCP-Video-Candidate",status:"error",error:"No LCP entries found"};const t=e[e.length-1],r=t.element;function n(e){return e<=2500?"good":e<=4e3?"needs-improvement":"poor"}function i(e){try{return new URL(e,location.origin).href}catch{return e}}const o=(()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0})(),s=Math.round(Math.max(0,t.startTime-o));if(!r||"VIDEO"!==r.tagName)return r&&r.tagName.toLowerCase(),{script:"LCP-Video-Candidate",status:"ok",metric:"LCP",value:s,unit:"ms",rating:n(s),thresholds:{good:2500,needsImprovement:4e3},details:{isVideo:!1},issues:[]};const a=r.getAttribute("poster")||"",u=a?i(a):"",g=t.url||"",l=(n(s),function(e){if(!e)return"unknown";const t=e.toLowerCase().split("?")[0].match(/\.(avif|webp|jxl|png|gif|jpg|jpeg|svg)(?:[?#]|$)/);return t?"jpeg"===t[1]?"jpg":t[1]:"unknown"}(g||u)),d=["avif","webp","jxl"].includes(l),p=0===t.renderTime&&t.loadTime>0,m=Array.from(document.querySelectorAll('link[rel="preload"][as="image"]')).find(e=>{const t=e.getAttribute("href");if(!t)return!1;try{return i(t)===u||i(t)===g}catch{return!1}})??null,c=r.getAttribute("preload"),f=r.hasAttribute("autoplay"),h=(r.hasAttribute("muted"),r.hasAttribute("playsinline"),[]);a||h.push({s:"error",msg:"No poster attribute — the browser has no image to use as LCP candidate"}),a&&!m?h.push({s:"warning",msg:'No <link rel="preload" as="image"> for the poster — browser discovers it late'}):m&&"high"!==m.getAttribute("fetchpriority")&&h.push({s:"info",msg:'Preload found but missing fetchpriority="high" — may be deprioritised'}),a&&!d&&"unknown"!==l&&h.push({s:"info",msg:`Poster uses ${l} — AVIF or WebP would reduce file size and LCP load time`}),p&&h.push({s:"info",msg:"renderTime is 0 — poster is cross-origin and the server does not send Timing-Allow-Origin"}),f||"none"!==c||h.push({s:"warning",msg:'preload="none" on a non-autoplay video may delay poster image loading in some browsers'}),m&&m.getAttribute("fetchpriority"),h.length>0&&(h.filter(e=>"error"===e.s),h.filter(e=>"warning"===e.s),h.filter(e=>"info"===e.s),h.forEach(e=>{})),m?.getAttribute("fetchpriority"),h.map(e=>({severity:"error"===e.s?"error":"warning"===e.s?"warning":"info",message:e.msg}))})();
\ No newline at end of file
diff --git a/skills/webperf-core-web-vitals/scripts/LCP.js b/skills/webperf-core-web-vitals/scripts/LCP.js
index 118440f..f7a6125 100644
--- a/skills/webperf-core-web-vitals/scripts/LCP.js
+++ b/skills/webperf-core-web-vitals/scripts/LCP.js
@@ -1,2 +1,2 @@
-// snippets/CoreWebVitals/LCP.js | sha256:5982d7648dc0db34 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP.js
-(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0};new PerformanceObserver(a=>{const s=a.getEntries(),o=s[s.length-1];if(!o)return;const r=t(),n=Math.max(0,o.startTime-r),i=(e(n),o.element);if(i){let e=i.tagName.toLowerCase();if(i.id)e=`#${i.id}`;else if(i.className&&"string"==typeof i.className){const t=i.className.trim().split(/\s+/).slice(0,2).join(".");t&&(e=`${i.tagName.toLowerCase()}.${t}`)}i.tagName.toLowerCase(),i.style.outline="3px dashed lime",i.style.outlineOffset="2px"}}).observe({type:"largest-contentful-paint",buffered:!0});const a=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!a)return{script:"LCP",status:"error",error:"No LCP entries yet"};const s=t(),o=Math.round(Math.max(0,a.startTime-s)),r=(e(o),a.element);let n=null,i=null;if(r){if(n=r.tagName.toLowerCase(),r.id)n=`#${r.id}`;else if(r.className&&"string"==typeof r.className){const e=r.className.trim().split(/\s+/).slice(0,2).join(".");e&&(n=`${r.tagName.toLowerCase()}.${e}`)}const e=r.tagName.toLowerCase();i="img"===e?"Image":"video"===e?"Video poster":r.style?.backgroundImage?"Background image":"h1"===e||"p"===e?"Text block":e}})();
\ No newline at end of file
+// snippets/CoreWebVitals/LCP.js | sha256:7951027f8b24a15a | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/CoreWebVitals/LCP.js
+(()=>{const e=e=>e<=2500?"good":e<=4e3?"needs-improvement":"poor",t=()=>{const e=performance.getEntriesByType("navigation")[0];return e?.activationStart||0};new PerformanceObserver(a=>{const o=a.getEntries(),s=o[o.length-1];if(!s)return;const n=t(),r=Math.max(0,s.startTime-n),i=(e(r),s.element);if(i){let e=i.tagName.toLowerCase();if(i.id)e=`#${i.id}`;else if(i.className&&"string"==typeof i.className){const t=i.className.trim().split(/\s+/).slice(0,2).join(".");t&&(e=`${i.tagName.toLowerCase()}.${t}`)}const t=i.tagName.toLowerCase();"img"===t||"video"===t||window.getComputedStyle(i),i.style.outline="3px dashed lime",i.style.outlineOffset="2px"}}).observe({type:"largest-contentful-paint",buffered:!0});const a=performance.getEntriesByType("largest-contentful-paint").at(-1);if(!a)return{script:"LCP",status:"error",error:"No LCP entries yet"};const o=t(),s=Math.round(Math.max(0,a.startTime-o)),n=(e(s),a.element);let r=null,i=null;if(n){if(r=n.tagName.toLowerCase(),n.id)r=`#${n.id}`;else if(n.className&&"string"==typeof n.className){const e=n.className.trim().split(/\s+/).slice(0,2).join(".");e&&(r=`${n.tagName.toLowerCase()}.${e}`)}const e=n.tagName.toLowerCase();i="img"===e?"Image":"video"===e?"Video poster":"none"!==window.getComputedStyle(n).backgroundImage?"Background image":"h1"===e||"p"===e?"Text block":e}})();
\ No newline at end of file
diff --git a/skills/webperf-interaction/references/schema.md b/skills/webperf-interaction/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/skills/webperf-interaction/references/schema.md
+++ b/skills/webperf-interaction/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/skills/webperf-loading/references/schema.md b/skills/webperf-loading/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/skills/webperf-loading/references/schema.md
+++ b/skills/webperf-loading/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/skills/webperf-media/references/schema.md b/skills/webperf-media/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/skills/webperf-media/references/schema.md
+++ b/skills/webperf-media/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json
diff --git a/skills/webperf-resources/references/schema.md b/skills/webperf-resources/references/schema.md
index 7328e5e..f7e8b16 100644
--- a/skills/webperf-resources/references/schema.md
+++ b/skills/webperf-resources/references/schema.md
@@ -186,6 +186,7 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
 ```
 
 #### CLS
+Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
 ```json
 {
   "script": "CLS",
@@ -194,9 +195,12 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   "value": 0.05,
   "unit": "score",
   "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 }
+  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
+  "message": "CLS tracking active. Call getCLS() for updated value after page interactions.",
+  "getDataFn": "getCLS"
 }
 ```
+`getCLS()` returns the same shape with the latest accumulated value.
 
 #### INP (tracking)
 ```json
@@ -224,6 +228,15 @@ Keep the existing `async () => {}` wrapper. Add a `return` statement with struct
   }
 }
 ```
+If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
+
+`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
+```json
+[
+  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
+    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
+]
+```
 
 #### LCP-Sub-Parts
 ```json

From 526af1e57026104d8df81252a8b634e9273e669c Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Tue, 17 Mar 2026 22:26:45 +0100
Subject: [PATCH 3/9] perf: reduce context duplication in WebPerf skills
 (-16.6% lines)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove redundant sections from WORKFLOWS.md sources and the skill
generator that duplicated information already present in Decision Trees.

Changes in generate-skills.js:
- Remove inline `references/snippets.md` pointer after script list
  (already listed in ## References section)
- Remove duplicate execution footer (already in intro paragraph)
- Merge "Skills by Category" and "Quick Reference" tables in meta-skill
  into a single "Quick Reference" table (Skill | Snippets | Trigger phrases)

Changes in WORKFLOWS.md sources:
- Interaction: remove ### Cross-Skill Triggers (30 lines); preserve
  unique webperf-core-web-vitals:INP.js trigger inline in Decision Tree
- Loading: remove ### Image Loading Audit (9 lines); image queries route
  through webperf-media which already cross-references these scripts
- Media: remove ### Cross-Skill Triggers (38 lines) and
  ### Common Issues and Resolutions (38 lines); both were 1:1 summaries
  of the Decision Tree; unique trigger (images competing with critical
  resources) moved inline to After Image-Element-Audit.js node
- Resources: remove ### Cross-Skill Triggers (29 lines),
  ### Real-World Scenarios (25 lines), and ### Testing Adaptive Loading
  (18 lines); unique triggers (TTFB-Sub-Parts, Service-Worker-Analysis
  for high RTT; LCP.js/INP.js for slow connections) moved inline to DT;
  reformat ### Adaptive Loading Implementation Guide from fenced
  javascript blocks to bullet lists (-8 lines)

No actionable information lost: every removed item was already covered
by an inline Decision Tree node or has been incorporated into one.

SKILL.md line counts (before → after):
  webperf-core-web-vitals  238 → 235  (-1.3%)
  webperf-interaction      271 → 238  (-12.2%)
  webperf-loading          228 → 216  (-5.3%)
  webperf-media            292 → 217  (-25.7%)
  webperf-resources        288 → 198  (-31.3%)
  webperf (meta)            51 →  37  (-27.5%)
  total                   1368 → 1141 (-16.6%, -227 lines)
---
 .../skills/webperf-core-web-vitals/SKILL.md   |   5 +-
 .claude/skills/webperf-interaction/SKILL.md   |  37 +-----
 .claude/skills/webperf-loading/SKILL.md       |  14 +-
 .claude/skills/webperf-media/SKILL.md         |  85 +------------
 .claude/skills/webperf-resources/SKILL.md     | 120 +++---------------
 .claude/skills/webperf/SKILL.md               |  30 ++---
 scripts/generate-skills.js                    |  34 ++---
 skills/webperf-core-web-vitals/SKILL.md       |   5 +-
 skills/webperf-interaction/SKILL.md           |  37 +-----
 skills/webperf-loading/SKILL.md               |  14 +-
 skills/webperf-media/SKILL.md                 |  85 +------------
 skills/webperf-resources/SKILL.md             | 120 +++---------------
 skills/webperf/SKILL.md                       |  30 ++---
 snippets/Interaction/WORKFLOWS.md             |  32 +----
 snippets/Loading/WORKFLOWS.md                 |   9 --
 snippets/Media/WORKFLOWS.md                   |  79 +-----------
 snippets/Resources/WORKFLOWS.md               | 114 ++---------------
 17 files changed, 91 insertions(+), 759 deletions(-)

diff --git a/.claude/skills/webperf-core-web-vitals/SKILL.md b/.claude/skills/webperf-core-web-vitals/SKILL.md
index da0ab5a..dfb535e 100644
--- a/.claude/skills/webperf-core-web-vitals/SKILL.md
+++ b/.claude/skills/webperf-core-web-vitals/SKILL.md
@@ -25,7 +25,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/LCP-Video-Candidate.js` — LCP Video Candidate
 - `scripts/LCP.js` — Largest Contentful Paint (LCP)
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -234,6 +233,4 @@ 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
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/.claude/skills/webperf-interaction/SKILL.md b/.claude/skills/webperf-interaction/SKILL.md
index a9074cf..cc0a7dd 100644
--- a/.claude/skills/webperf-interaction/SKILL.md
+++ b/.claude/skills/webperf-interaction/SKILL.md
@@ -26,7 +26,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/LongTask.js` — Long Tasks
 - `scripts/Scroll-Performance.js` — Scroll Performance Analysis
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -106,7 +105,7 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 ### After Interactions.js
 
-- **If any interaction > 200ms** → Run **Input-Latency-Breakdown.js** on slow interactions
+- **If any interaction > 200ms** → Run **Input-Latency-Breakdown.js** on slow interactions; also run **webperf-core-web-vitals:INP.js** for official INP measurement
 - **If many interactions > 200ms** → Main thread congestion, run:
   1. **Long-Animation-Frames.js** (blocking frames)
   2. **LongTask.js** (long tasks)
@@ -189,36 +188,6 @@ This is a utility snippet, use results to:
 - Measure style/layout/paint phases
 - No automatic follow-up, use data to inform next steps
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Interaction to Core Web Vitals Skill
-
-- **If INP > 200ms detected** → Use **webperf-core-web-vitals** skill:
-  - INP.js (official INP measurement)
-  - LCP-Sub-Parts.js (if render delay is causing INP)
-
-- **If layout shifts during interaction** → Use **webperf-core-web-vitals** skill:
-  - CLS.js (measure cumulative impact)
-  - LCP-Trail.js (check if shifts affect LCP candidate)
-
-#### From Interaction to Loading Skill
-
-- **If long frames caused by script execution** → Use **webperf-loading** skill:
-  - JS-Execution-Time-Breakdown.js (parsing vs execution time)
-  - First-And-Third-Party-Script-Info.js (identify heavy scripts)
-  - Script-Loading.js (check for blocking patterns)
-
-- **If interactions slow during page load** → Use **webperf-loading** skill:
-  - Event-Processing-Time.js (page load phases)
-  - Find-render-blocking-resources.js (competing resources)
-
-#### From Interaction to Media Skill
-
-- **If layout shifts involve images** → Use **webperf-media** skill:
-  - Image-Element-Audit.js (check for missing dimensions)
-
 ### Performance Budget Thresholds
 
 Use these thresholds to automatically trigger follow-up analysis:
@@ -267,6 +236,4 @@ When multiple interaction metrics are poor:
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/.claude/skills/webperf-loading/SKILL.md b/.claude/skills/webperf-loading/SKILL.md
index 3324a08..8822ef7 100644
--- a/.claude/skills/webperf-loading/SKILL.md
+++ b/.claude/skills/webperf-loading/SKILL.md
@@ -46,7 +46,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/TTFB.js` — Time To First Byte: Measure the time to first byte
 - `scripts/Validate-Preload-Async-Defer-Scripts.js` — Validate Preload on Async/Defer Scripts
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -108,15 +107,6 @@ When CSS is bloated or blocking rendering:
 3. **CSS-Media-Queries-Analysis.js** - Find unused responsive CSS
 4. **Find-render-blocking-resources.js** - Identify blocking stylesheets
 
-### Image Loading Audit
-
-When images are suspected to cause loading issues:
-
-1. **Find-Above-The-Fold-Lazy-Loaded-Images.js** - Check for lazy-loading anti-patterns
-2. **Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js** - Find missed optimization opportunities
-3. **Find-Images-With-Lazy-and-Fetchpriority.js** - Detect contradictory attributes
-4. **Priority-Hints-Audit.js** - Verify LCP image has fetchpriority="high"
-
 ### SSR/Framework Performance
 
 When analyzing Next.js, Nuxt, Remix, or other SSR frameworks:
@@ -224,6 +214,4 @@ Use this decision tree to automatically run follow-up snippets based on results:
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/.claude/skills/webperf-media/SKILL.md b/.claude/skills/webperf-media/SKILL.md
index c284424..96e14a7 100644
--- a/.claude/skills/webperf-media/SKILL.md
+++ b/.claude/skills/webperf-media/SKILL.md
@@ -21,7 +21,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/SVG-Embedded-Bitmap-Analysis.js` — SVG Embedded Bitmap Analysis
 - `scripts/Video-Element-Audit.js` — Video Element Audit
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -125,6 +124,10 @@ Use this decision tree to automatically run follow-up snippets based on results:
   1. **webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js** (confirm contradiction)
   2. Recommend removing one of the conflicting attributes
 
+- **If images competing with critical resources** → Run:
+  1. **webperf-loading:Find-render-blocking-resources.js** (resource priority conflicts)
+  2. **webperf-loading:TTFB-Resources.js** (identify slow image CDN)
+
 - **If images missing alt text** → Accessibility issue, recommend adding descriptive alt text
 
 ### After Video-Element-Audit.js
@@ -176,44 +179,6 @@ Use this decision tree to automatically run follow-up snippets based on results:
   - SVG symbols for reusable graphics
   - Extracting to individual optimized images
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Media to Core Web Vitals Skill
-
-- **If LCP image detected** → Use **webperf-core-web-vitals** skill:
-  - LCP.js (measure LCP)
-  - LCP-Sub-Parts.js (break down timing phases)
-  - LCP-Image-Entropy.js (analyze image complexity)
-
-- **If video is LCP candidate** → Use **webperf-core-web-vitals** skill:
-  - LCP-Video-Candidate.js (confirm and analyze)
-  - LCP.js (measure impact)
-
-- **If images causing layout shifts** → Use **webperf-core-web-vitals** skill:
-  - CLS.js (measure cumulative shift)
-
-#### From Media to Loading Skill
-
-- **If lazy loading issues detected** → Use **webperf-loading** skill:
-  - Find-Above-The-Fold-Lazy-Loaded-Images.js (incorrectly lazy)
-  - Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (missing lazy)
-  - Find-Images-With-Lazy-and-Fetchpriority.js (contradictory attributes)
-
-- **If LCP image needs priority optimization** → Use **webperf-loading** skill:
-  - Priority-Hints-Audit.js (fetchpriority analysis)
-  - Resource-Hints-Validation.js (preload validation)
-
-- **If images competing with critical resources** → Use **webperf-loading** skill:
-  - Find-render-blocking-resources.js (resource priority conflicts)
-  - TTFB-Resources.js (identify slow image CDN)
-
-#### From Media to Interaction Skill
-
-- **If images causing layout shifts during interaction** → Use **webperf-interaction** skill:
-  - Layout-Shift-Loading-and-Interaction.js (shift timing analysis)
-
 ### Performance Budget Thresholds
 
 Use these thresholds to trigger recommendations:
@@ -247,47 +212,7 @@ Use these thresholds to trigger recommendations:
 - **Non-LCP images with fetchpriority="high"** → Remove, wasting browser hints
 - **Lazy + fetchpriority="high" conflict** → Fix contradiction
 
-### Common Issues and Resolutions
-
-**Issue: LCP is slow and LCP element is an image**
-1. Run Image-Element-Audit.js
-2. Run webperf-core-web-vitals:LCP-Image-Entropy.js
-3. Check: format, lazy loading, fetchpriority, preload
-4. Fix in order: remove lazy, add fetchpriority="high", optimize format, add preload
-
-**Issue: CLS from images**
-1. Run Image-Element-Audit.js
-2. Check for missing width/height
-3. Add explicit dimensions or aspect-ratio CSS
-4. Verify with webperf-core-web-vitals:CLS.js
-
-**Issue: Page loads too many images**
-1. Run Image-Element-Audit.js
-2. Run webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
-3. Implement lazy loading on below-fold images
-4. Consider pagination or infinite scroll
-
-**Issue: Images are the wrong format**
-1. Run Image-Element-Audit.js
-2. Check format vs content type
-3. Recommend WebP with JPEG/PNG fallback
-4. Consider AVIF for even better compression
-
-**Issue: Video is LCP**
-1. Run Video-Element-Audit.js
-2. Run webperf-core-web-vitals:LCP-Video-Candidate.js
-3. Optimize poster image or consider static image alternative
-4. Add fetchpriority="high" to poster if keeping video
-
-**Issue: SVG files are huge**
-1. Run SVG-Embedded-Bitmap-Analysis.js
-2. Extract embedded bitmaps
-3. Run SVGO on pure SVG
-4. Re-measure file sizes
-
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/.claude/skills/webperf-resources/SKILL.md b/.claude/skills/webperf-resources/SKILL.md
index a85173f..98f17ca 100644
--- a/.claude/skills/webperf-resources/SKILL.md
+++ b/.claude/skills/webperf-resources/SKILL.md
@@ -19,7 +19,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 
 - `scripts/Network-Bandwidth-Connection-Quality.js` — Network Bandwidth & Connection Quality
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -74,13 +73,15 @@ Use this decision tree to automatically run follow-up snippets based on results:
   1. Run **webperf-loading:Critical-CSS-Detection.js** (inline critical CSS)
   2. Run **webperf-media:Image-Element-Audit.js** (implement aggressive lazy loading)
   3. Run **webperf-loading:Prefetch-Resource-Validation.js** (remove prefetch to save bandwidth)
-  4. Recommend minimal resource strategy
+  4. Run **webperf-core-web-vitals:LCP.js** (LCP is heavily impacted by slow connections)
+  5. Recommend minimal resource strategy
 
 - **If effectiveType is "3g"** → Moderate connection, recommend:
   1. Run **webperf-loading:Find-render-blocking-resources.js** (minimize blocking)
   2. Run **webperf-media:Image-Element-Audit.js** (responsive images)
   3. Run **webperf-loading:Resource-Hints-Validation.js** (optimize preconnect)
-  4. Implement adaptive image quality
+  4. Run **webperf-core-web-vitals:INP.js** (high latency can impact interaction responsiveness)
+  5. Implement adaptive image quality
 
 - **If effectiveType is "4g" or better** → Good connection, recommend:
   1. Standard optimization practices
@@ -96,9 +97,11 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 - **If RTT > 300ms** → High latency, recommend:
   1. Run **webperf-loading:TTFB.js** (latency impacts TTFB)
-  2. Run **webperf-loading:Resource-Hints-Validation.js** (preconnect critical for high RTT)
-  3. Minimize number of origins
-  4. Use HTTP/2 or HTTP/3 for multiplexing
+  2. Run **webperf-loading:TTFB-Sub-Parts.js** (break down latency components)
+  3. Run **webperf-loading:Resource-Hints-Validation.js** (preconnect critical for high RTT)
+  4. Run **webperf-loading:Service-Worker-Analysis.js** (caching is critical for high latency)
+  5. Minimize number of origins
+  6. Use HTTP/2 or HTTP/3 for multiplexing
 
 - **If downlink < 1 Mbps** → Very limited bandwidth, recommend:
   1. Run **webperf-media:Image-Element-Audit.js** (aggressive compression)
@@ -111,44 +114,11 @@ Use this decision tree to automatically run follow-up snippets based on results:
   - Strategic prefetch
   - Preloading next-page resources
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Resources to Loading Skill
-
-- **If slow connection detected (2g/3g)** → Use **webperf-loading** skill:
-  - TTFB.js (latency is amplified on slow connections)
-  - Critical-CSS-Detection.js (reduce RTT by inlining critical CSS)
-  - Find-render-blocking-resources.js (minimize blocking resources)
-  - Resource-Hints-Validation.js (preconnect is critical for high RTT)
-  - Prefetch-Resource-Validation.js (avoid prefetch on slow connections)
-
-- **If high RTT detected (>200ms)** → Use **webperf-loading** skill:
-  - TTFB-Sub-Parts.js (break down latency components)
-  - Resource-Hints-Validation.js (preconnect to reduce RTT impact)
-  - Service-Worker-Analysis.js (caching is critical for high latency)
-
-#### From Resources to Media Skill
-
-- **If slow connection or save-data detected** → Use **webperf-media** skill:
-  - Image-Element-Audit.js (implement responsive images, aggressive compression)
-  - Video-Element-Audit.js (disable autoplay, reduce quality)
-
-#### From Resources to Core Web Vitals Skill
-
-- **If slow connection detected** → Check Core Web Vitals impact:
-  - Use **webperf-core-web-vitals:LCP.js** (LCP is heavily impacted by slow connections)
-  - Use **webperf-core-web-vitals:INP.js** (high latency can impact interaction responsiveness)
-
 ### Adaptive Loading Implementation Guide
 
 Based on Network Information API results, implement these strategies:
 
-**For slow-2g / 2g (< 50 Kbps):**
-```javascript
-// Detected by effectiveType: "slow-2g" or "2g"
-Strategies:
+**For slow-2g / 2g (< 50 Kbps):** (`effectiveType: "slow-2g"` or `"2g"`)
 - Serve low-res images (quality: 30-40)
 - Disable autoplay videos
 - Remove all prefetch hints
@@ -156,12 +126,8 @@ Strategies:
 - Defer all non-critical JavaScript
 - Use system fonts (no webfonts)
 - Aggressive lazy loading (load on scroll + buffer)
-```
 
-**For 3g (50-700 Kbps):**
-```javascript
-// Detected by effectiveType: "3g"
-Strategies:
+**For 3g (50-700 Kbps):** (`effectiveType: "3g"`)
 - Serve medium-res images (quality: 60-70)
 - Disable autoplay videos
 - Limited prefetch (critical only)
@@ -169,31 +135,21 @@ Strategies:
 - Defer non-critical JavaScript
 - Preload 1-2 critical fonts
 - Standard lazy loading
-```
 
-**For 4g+ (> 700 Kbps):**
-```javascript
-// Detected by effectiveType: "4g"
-Strategies:
+**For 4g+ (> 700 Kbps):** (`effectiveType: "4g"`)
 - Serve high-res images (quality: 80-90)
 - Allow autoplay videos (muted)
 - Strategic prefetch for navigation
-- Standard CSS loading
-- Standard JavaScript loading
+- Standard CSS loading and JavaScript loading
 - Preload critical fonts
 - Standard lazy loading
-```
 
-**For save-data mode:**
-```javascript
-// Detected by navigator.connection.saveData === true
-Strategies:
+**For save-data mode:** (`navigator.connection.saveData === true`)
 - Override connection type, treat as worse than actual
 - Show "Load high quality" toggle
 - Disable autoplay entirely
 - Minimal images, minimal quality
 - No prefetch, no preload (except critical)
-```
 
 ### Performance Budget by Connection Type
 
@@ -217,32 +173,6 @@ Adjust performance budgets based on connection quality:
 - JavaScript: < 1MB total
 - Videos: < 10MB
 
-### Real-World Scenarios
-
-**Scenario: User on 3G reports slow page load**
-1. Run Network-Bandwidth-Connection-Quality.js → confirms 3g
-2. Run webperf-loading:TTFB.js → high TTFB due to latency
-3. Run webperf-loading:Critical-CSS-Detection.js → CSS not inlined
-4. Recommendation: Inline critical CSS, implement adaptive loading
-
-**Scenario: User with save-data enabled complains about data usage**
-1. Run Network-Bandwidth-Connection-Quality.js → saveData: true
-2. Run webperf-media:Image-Element-Audit.js → high-res images served
-3. Run webperf-media:Video-Element-Audit.js → autoplay enabled
-4. Recommendation: Respect save-data, reduce quality, disable autoplay
-
-**Scenario: International users report slow LCP**
-1. Run Network-Bandwidth-Connection-Quality.js → high RTT (300ms+)
-2. Run webperf-core-web-vitals:LCP.js → LCP 4s+
-3. Run webperf-loading:TTFB-Sub-Parts.js → DNS + connection = 500ms
-4. Recommendation: Use CDN, implement preconnect, optimize for latency
-
-**Scenario: Mobile users in rural areas**
-1. Run Network-Bandwidth-Connection-Quality.js → 2g, high RTT, low downlink
-2. Run webperf-loading:Find-render-blocking-resources.js → many blocking
-3. Run webperf-media:Image-Element-Audit.js → all images eager-loaded
-4. Recommendation: Aggressive adaptive loading, inline critical CSS, lazy load all images
-
 ### Network Information API Limitations
 
 Be aware of API limitations and fallbacks:
@@ -263,27 +193,7 @@ Be aware of API limitations and fallbacks:
 - Values may be rounded or capped
 - Consider user privacy when making decisions
 
-### Testing Adaptive Loading
-
-To test adaptive loading implementations:
-
-1. Use Chrome DevTools Network Throttling
-2. Run Network-Bandwidth-Connection-Quality.js at each throttling level
-3. Verify adaptive strategies activate correctly
-4. Measure Core Web Vitals at each connection speed
-5. Adjust breakpoints and strategies based on results
-
-**Test matrix:**
-- Offline
-- slow-2g (50 Kbps, RTT 2000ms)
-- 2g (250 Kbps, RTT 300ms)
-- 3g (750 Kbps, RTT 100ms)
-- 4g (4 Mbps, RTT 20ms)
-- save-data enabled at each level
-
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/.claude/skills/webperf/SKILL.md b/.claude/skills/webperf/SKILL.md
index 7dea33b..c051ef4 100644
--- a/.claude/skills/webperf/SKILL.md
+++ b/.claude/skills/webperf/SKILL.md
@@ -15,33 +15,19 @@ metadata:
 
 A collection of 47 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results.
 
-## Skills by Category
-
-| Skill | Snippets | Use when |
-|-------|----------|----------|
-| webperf-core-web-vitals | 7 | Intelligent Core Web Vitals analysis with automated workflows and decision trees |
-| webperf-loading | 28 | Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation |
-| webperf-interaction | 8 | Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking |
-| webperf-media | 3 | Intelligent media optimization with automated workflows for images, videos, and SVGs |
-| webperf-resources | 1 | Intelligent network quality analysis with adaptive loading strategies |
-
 ## Quick Reference
 
-| User says | Skill to use |
-|-----------|--------------|
-| "debug LCP", "slow LCP", "largest contentful paint" | webperf-core-web-vitals |
-| "check CLS", "layout shifts", "visual stability" | webperf-core-web-vitals |
-| "INP", "interaction latency", "responsiveness" | webperf-core-web-vitals |
-| "TTFB", "slow server", "time to first byte" | webperf-loading |
-| "FCP", "first contentful paint", "render blocking" | webperf-loading |
-| "font loading", "script loading", "resource hints", "service worker" | webperf-loading |
-| "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | webperf-interaction |
-| "image audit", "lazy loading", "image optimization", "video audit" | webperf-media |
-| "network quality", "bandwidth", "connection type", "save-data" | webperf-resources |
+| Skill | Snippets | Trigger phrases |
+|-------|----------|-----------------|
+| webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" |
+| webperf-loading | 28 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" |
+| webperf-interaction | 8 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" |
+| webperf-media | 3 | "image audit", "lazy loading", "image optimization", "video audit" |
+| webperf-resources | 1 | "network quality", "bandwidth", "connection type", "save-data" |
 
 ## Workflow
 
-1. Identify the relevant skill based on the user's question (use Quick Reference above)
+1. Identify the relevant skill based on the user's question (see Quick Reference above)
 2. Load the skill's skill.md to see available snippets and thresholds
 3. Execute with Chrome DevTools MCP:
    - `mcp__chrome-devtools__navigate_page` → navigate to target URL
diff --git a/scripts/generate-skills.js b/scripts/generate-skills.js
index 009e07d..76df344 100755
--- a/scripts/generate-skills.js
+++ b/scripts/generate-skills.js
@@ -301,7 +301,6 @@ async function generateCategorySkill(category, catConfig) {
     lines.push(`- \`scripts/${meta.basename}.js\` — ${meta.title}`)
   }
   lines.push('')
-  lines.push('Descriptions and thresholds: `references/snippets.md`')
   lines.push('')
 
   // Inject WORKFLOWS.md if exists (no trailing --- to avoid double separator)
@@ -317,8 +316,6 @@ async function generateCategorySkill(category, catConfig) {
   lines.push('')
   lines.push('- `references/snippets.md` — Descriptions and thresholds for each script')
   lines.push('- `references/schema.md` — Return value schema for interpreting script output')
-  lines.push('')
-  lines.push('> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.')
 
   const skillContent = lines.join('\n')
   const skillPath = path.join(skillDir, 'SKILL.md')
@@ -359,35 +356,20 @@ function generateMetaSkill() {
   )
   lines.push('')
 
-  lines.push('## Skills by Category')
-  lines.push('')
-  lines.push('| Skill | Snippets | Use when |')
-  lines.push('|-------|----------|----------|')
-  for (const [category, config] of Object.entries(CATEGORIES)) {
-    const count = getSnippetFiles(category).length
-    const useWhen = config.description.split('.')[0]
-    lines.push(`| ${config.skill} | ${count} | ${useWhen} |`)
-  }
-  lines.push('')
-
   lines.push('## Quick Reference')
   lines.push('')
-  lines.push('| User says | Skill to use |')
-  lines.push('|-----------|--------------|')
-  lines.push('| "debug LCP", "slow LCP", "largest contentful paint" | webperf-core-web-vitals |')
-  lines.push('| "check CLS", "layout shifts", "visual stability" | webperf-core-web-vitals |')
-  lines.push('| "INP", "interaction latency", "responsiveness" | webperf-core-web-vitals |')
-  lines.push('| "TTFB", "slow server", "time to first byte" | webperf-loading |')
-  lines.push('| "FCP", "first contentful paint", "render blocking" | webperf-loading |')
-  lines.push('| "font loading", "script loading", "resource hints", "service worker" | webperf-loading |')
-  lines.push('| "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | webperf-interaction |')
-  lines.push('| "image audit", "lazy loading", "image optimization", "video audit" | webperf-media |')
-  lines.push('| "network quality", "bandwidth", "connection type", "save-data" | webperf-resources |')
+  lines.push('| Skill | Snippets | Trigger phrases |')
+  lines.push('|-------|----------|-----------------|')
+  lines.push(`| webperf-core-web-vitals | ${getSnippetFiles('CoreWebVitals').length} | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" |`)
+  lines.push(`| webperf-loading | ${getSnippetFiles('Loading').length} | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" |`)
+  lines.push(`| webperf-interaction | ${getSnippetFiles('Interaction').length} | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" |`)
+  lines.push(`| webperf-media | ${getSnippetFiles('Media').length} | "image audit", "lazy loading", "image optimization", "video audit" |`)
+  lines.push(`| webperf-resources | ${getSnippetFiles('Resources').length} | "network quality", "bandwidth", "connection type", "save-data" |`)
   lines.push('')
 
   lines.push('## Workflow')
   lines.push('')
-  lines.push('1. Identify the relevant skill based on the user\'s question (use Quick Reference above)')
+  lines.push('1. Identify the relevant skill based on the user\'s question (see Quick Reference above)')
   lines.push('2. Load the skill\'s skill.md to see available snippets and thresholds')
   lines.push('3. Execute with Chrome DevTools MCP:')
   lines.push('   - `mcp__chrome-devtools__navigate_page` → navigate to target URL')
diff --git a/skills/webperf-core-web-vitals/SKILL.md b/skills/webperf-core-web-vitals/SKILL.md
index da0ab5a..dfb535e 100644
--- a/skills/webperf-core-web-vitals/SKILL.md
+++ b/skills/webperf-core-web-vitals/SKILL.md
@@ -25,7 +25,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/LCP-Video-Candidate.js` — LCP Video Candidate
 - `scripts/LCP.js` — Largest Contentful Paint (LCP)
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -234,6 +233,4 @@ 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
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/skills/webperf-interaction/SKILL.md b/skills/webperf-interaction/SKILL.md
index a9074cf..cc0a7dd 100644
--- a/skills/webperf-interaction/SKILL.md
+++ b/skills/webperf-interaction/SKILL.md
@@ -26,7 +26,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/LongTask.js` — Long Tasks
 - `scripts/Scroll-Performance.js` — Scroll Performance Analysis
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -106,7 +105,7 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 ### After Interactions.js
 
-- **If any interaction > 200ms** → Run **Input-Latency-Breakdown.js** on slow interactions
+- **If any interaction > 200ms** → Run **Input-Latency-Breakdown.js** on slow interactions; also run **webperf-core-web-vitals:INP.js** for official INP measurement
 - **If many interactions > 200ms** → Main thread congestion, run:
   1. **Long-Animation-Frames.js** (blocking frames)
   2. **LongTask.js** (long tasks)
@@ -189,36 +188,6 @@ This is a utility snippet, use results to:
 - Measure style/layout/paint phases
 - No automatic follow-up, use data to inform next steps
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Interaction to Core Web Vitals Skill
-
-- **If INP > 200ms detected** → Use **webperf-core-web-vitals** skill:
-  - INP.js (official INP measurement)
-  - LCP-Sub-Parts.js (if render delay is causing INP)
-
-- **If layout shifts during interaction** → Use **webperf-core-web-vitals** skill:
-  - CLS.js (measure cumulative impact)
-  - LCP-Trail.js (check if shifts affect LCP candidate)
-
-#### From Interaction to Loading Skill
-
-- **If long frames caused by script execution** → Use **webperf-loading** skill:
-  - JS-Execution-Time-Breakdown.js (parsing vs execution time)
-  - First-And-Third-Party-Script-Info.js (identify heavy scripts)
-  - Script-Loading.js (check for blocking patterns)
-
-- **If interactions slow during page load** → Use **webperf-loading** skill:
-  - Event-Processing-Time.js (page load phases)
-  - Find-render-blocking-resources.js (competing resources)
-
-#### From Interaction to Media Skill
-
-- **If layout shifts involve images** → Use **webperf-media** skill:
-  - Image-Element-Audit.js (check for missing dimensions)
-
 ### Performance Budget Thresholds
 
 Use these thresholds to automatically trigger follow-up analysis:
@@ -267,6 +236,4 @@ When multiple interaction metrics are poor:
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/skills/webperf-loading/SKILL.md b/skills/webperf-loading/SKILL.md
index 3324a08..8822ef7 100644
--- a/skills/webperf-loading/SKILL.md
+++ b/skills/webperf-loading/SKILL.md
@@ -46,7 +46,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/TTFB.js` — Time To First Byte: Measure the time to first byte
 - `scripts/Validate-Preload-Async-Defer-Scripts.js` — Validate Preload on Async/Defer Scripts
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -108,15 +107,6 @@ When CSS is bloated or blocking rendering:
 3. **CSS-Media-Queries-Analysis.js** - Find unused responsive CSS
 4. **Find-render-blocking-resources.js** - Identify blocking stylesheets
 
-### Image Loading Audit
-
-When images are suspected to cause loading issues:
-
-1. **Find-Above-The-Fold-Lazy-Loaded-Images.js** - Check for lazy-loading anti-patterns
-2. **Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js** - Find missed optimization opportunities
-3. **Find-Images-With-Lazy-and-Fetchpriority.js** - Detect contradictory attributes
-4. **Priority-Hints-Audit.js** - Verify LCP image has fetchpriority="high"
-
 ### SSR/Framework Performance
 
 When analyzing Next.js, Nuxt, Remix, or other SSR frameworks:
@@ -224,6 +214,4 @@ Use this decision tree to automatically run follow-up snippets based on results:
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/skills/webperf-media/SKILL.md b/skills/webperf-media/SKILL.md
index c284424..96e14a7 100644
--- a/skills/webperf-media/SKILL.md
+++ b/skills/webperf-media/SKILL.md
@@ -21,7 +21,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 - `scripts/SVG-Embedded-Bitmap-Analysis.js` — SVG Embedded Bitmap Analysis
 - `scripts/Video-Element-Audit.js` — Video Element Audit
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -125,6 +124,10 @@ Use this decision tree to automatically run follow-up snippets based on results:
   1. **webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js** (confirm contradiction)
   2. Recommend removing one of the conflicting attributes
 
+- **If images competing with critical resources** → Run:
+  1. **webperf-loading:Find-render-blocking-resources.js** (resource priority conflicts)
+  2. **webperf-loading:TTFB-Resources.js** (identify slow image CDN)
+
 - **If images missing alt text** → Accessibility issue, recommend adding descriptive alt text
 
 ### After Video-Element-Audit.js
@@ -176,44 +179,6 @@ Use this decision tree to automatically run follow-up snippets based on results:
   - SVG symbols for reusable graphics
   - Extracting to individual optimized images
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Media to Core Web Vitals Skill
-
-- **If LCP image detected** → Use **webperf-core-web-vitals** skill:
-  - LCP.js (measure LCP)
-  - LCP-Sub-Parts.js (break down timing phases)
-  - LCP-Image-Entropy.js (analyze image complexity)
-
-- **If video is LCP candidate** → Use **webperf-core-web-vitals** skill:
-  - LCP-Video-Candidate.js (confirm and analyze)
-  - LCP.js (measure impact)
-
-- **If images causing layout shifts** → Use **webperf-core-web-vitals** skill:
-  - CLS.js (measure cumulative shift)
-
-#### From Media to Loading Skill
-
-- **If lazy loading issues detected** → Use **webperf-loading** skill:
-  - Find-Above-The-Fold-Lazy-Loaded-Images.js (incorrectly lazy)
-  - Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (missing lazy)
-  - Find-Images-With-Lazy-and-Fetchpriority.js (contradictory attributes)
-
-- **If LCP image needs priority optimization** → Use **webperf-loading** skill:
-  - Priority-Hints-Audit.js (fetchpriority analysis)
-  - Resource-Hints-Validation.js (preload validation)
-
-- **If images competing with critical resources** → Use **webperf-loading** skill:
-  - Find-render-blocking-resources.js (resource priority conflicts)
-  - TTFB-Resources.js (identify slow image CDN)
-
-#### From Media to Interaction Skill
-
-- **If images causing layout shifts during interaction** → Use **webperf-interaction** skill:
-  - Layout-Shift-Loading-and-Interaction.js (shift timing analysis)
-
 ### Performance Budget Thresholds
 
 Use these thresholds to trigger recommendations:
@@ -247,47 +212,7 @@ Use these thresholds to trigger recommendations:
 - **Non-LCP images with fetchpriority="high"** → Remove, wasting browser hints
 - **Lazy + fetchpriority="high" conflict** → Fix contradiction
 
-### Common Issues and Resolutions
-
-**Issue: LCP is slow and LCP element is an image**
-1. Run Image-Element-Audit.js
-2. Run webperf-core-web-vitals:LCP-Image-Entropy.js
-3. Check: format, lazy loading, fetchpriority, preload
-4. Fix in order: remove lazy, add fetchpriority="high", optimize format, add preload
-
-**Issue: CLS from images**
-1. Run Image-Element-Audit.js
-2. Check for missing width/height
-3. Add explicit dimensions or aspect-ratio CSS
-4. Verify with webperf-core-web-vitals:CLS.js
-
-**Issue: Page loads too many images**
-1. Run Image-Element-Audit.js
-2. Run webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
-3. Implement lazy loading on below-fold images
-4. Consider pagination or infinite scroll
-
-**Issue: Images are the wrong format**
-1. Run Image-Element-Audit.js
-2. Check format vs content type
-3. Recommend WebP with JPEG/PNG fallback
-4. Consider AVIF for even better compression
-
-**Issue: Video is LCP**
-1. Run Video-Element-Audit.js
-2. Run webperf-core-web-vitals:LCP-Video-Candidate.js
-3. Optimize poster image or consider static image alternative
-4. Add fetchpriority="high" to poster if keeping video
-
-**Issue: SVG files are huge**
-1. Run SVG-Embedded-Bitmap-Analysis.js
-2. Extract embedded bitmaps
-3. Run SVGO on pure SVG
-4. Re-measure file sizes
-
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/skills/webperf-resources/SKILL.md b/skills/webperf-resources/SKILL.md
index a85173f..98f17ca 100644
--- a/skills/webperf-resources/SKILL.md
+++ b/skills/webperf-resources/SKILL.md
@@ -19,7 +19,6 @@ JavaScript snippets for measuring web performance in Chrome DevTools. Execute wi
 
 - `scripts/Network-Bandwidth-Connection-Quality.js` — Network Bandwidth & Connection Quality
 
-Descriptions and thresholds: `references/snippets.md`
 
 ## Common Workflows
 
@@ -74,13 +73,15 @@ Use this decision tree to automatically run follow-up snippets based on results:
   1. Run **webperf-loading:Critical-CSS-Detection.js** (inline critical CSS)
   2. Run **webperf-media:Image-Element-Audit.js** (implement aggressive lazy loading)
   3. Run **webperf-loading:Prefetch-Resource-Validation.js** (remove prefetch to save bandwidth)
-  4. Recommend minimal resource strategy
+  4. Run **webperf-core-web-vitals:LCP.js** (LCP is heavily impacted by slow connections)
+  5. Recommend minimal resource strategy
 
 - **If effectiveType is "3g"** → Moderate connection, recommend:
   1. Run **webperf-loading:Find-render-blocking-resources.js** (minimize blocking)
   2. Run **webperf-media:Image-Element-Audit.js** (responsive images)
   3. Run **webperf-loading:Resource-Hints-Validation.js** (optimize preconnect)
-  4. Implement adaptive image quality
+  4. Run **webperf-core-web-vitals:INP.js** (high latency can impact interaction responsiveness)
+  5. Implement adaptive image quality
 
 - **If effectiveType is "4g" or better** → Good connection, recommend:
   1. Standard optimization practices
@@ -96,9 +97,11 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 - **If RTT > 300ms** → High latency, recommend:
   1. Run **webperf-loading:TTFB.js** (latency impacts TTFB)
-  2. Run **webperf-loading:Resource-Hints-Validation.js** (preconnect critical for high RTT)
-  3. Minimize number of origins
-  4. Use HTTP/2 or HTTP/3 for multiplexing
+  2. Run **webperf-loading:TTFB-Sub-Parts.js** (break down latency components)
+  3. Run **webperf-loading:Resource-Hints-Validation.js** (preconnect critical for high RTT)
+  4. Run **webperf-loading:Service-Worker-Analysis.js** (caching is critical for high latency)
+  5. Minimize number of origins
+  6. Use HTTP/2 or HTTP/3 for multiplexing
 
 - **If downlink < 1 Mbps** → Very limited bandwidth, recommend:
   1. Run **webperf-media:Image-Element-Audit.js** (aggressive compression)
@@ -111,44 +114,11 @@ Use this decision tree to automatically run follow-up snippets based on results:
   - Strategic prefetch
   - Preloading next-page resources
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Resources to Loading Skill
-
-- **If slow connection detected (2g/3g)** → Use **webperf-loading** skill:
-  - TTFB.js (latency is amplified on slow connections)
-  - Critical-CSS-Detection.js (reduce RTT by inlining critical CSS)
-  - Find-render-blocking-resources.js (minimize blocking resources)
-  - Resource-Hints-Validation.js (preconnect is critical for high RTT)
-  - Prefetch-Resource-Validation.js (avoid prefetch on slow connections)
-
-- **If high RTT detected (>200ms)** → Use **webperf-loading** skill:
-  - TTFB-Sub-Parts.js (break down latency components)
-  - Resource-Hints-Validation.js (preconnect to reduce RTT impact)
-  - Service-Worker-Analysis.js (caching is critical for high latency)
-
-#### From Resources to Media Skill
-
-- **If slow connection or save-data detected** → Use **webperf-media** skill:
-  - Image-Element-Audit.js (implement responsive images, aggressive compression)
-  - Video-Element-Audit.js (disable autoplay, reduce quality)
-
-#### From Resources to Core Web Vitals Skill
-
-- **If slow connection detected** → Check Core Web Vitals impact:
-  - Use **webperf-core-web-vitals:LCP.js** (LCP is heavily impacted by slow connections)
-  - Use **webperf-core-web-vitals:INP.js** (high latency can impact interaction responsiveness)
-
 ### Adaptive Loading Implementation Guide
 
 Based on Network Information API results, implement these strategies:
 
-**For slow-2g / 2g (< 50 Kbps):**
-```javascript
-// Detected by effectiveType: "slow-2g" or "2g"
-Strategies:
+**For slow-2g / 2g (< 50 Kbps):** (`effectiveType: "slow-2g"` or `"2g"`)
 - Serve low-res images (quality: 30-40)
 - Disable autoplay videos
 - Remove all prefetch hints
@@ -156,12 +126,8 @@ Strategies:
 - Defer all non-critical JavaScript
 - Use system fonts (no webfonts)
 - Aggressive lazy loading (load on scroll + buffer)
-```
 
-**For 3g (50-700 Kbps):**
-```javascript
-// Detected by effectiveType: "3g"
-Strategies:
+**For 3g (50-700 Kbps):** (`effectiveType: "3g"`)
 - Serve medium-res images (quality: 60-70)
 - Disable autoplay videos
 - Limited prefetch (critical only)
@@ -169,31 +135,21 @@ Strategies:
 - Defer non-critical JavaScript
 - Preload 1-2 critical fonts
 - Standard lazy loading
-```
 
-**For 4g+ (> 700 Kbps):**
-```javascript
-// Detected by effectiveType: "4g"
-Strategies:
+**For 4g+ (> 700 Kbps):** (`effectiveType: "4g"`)
 - Serve high-res images (quality: 80-90)
 - Allow autoplay videos (muted)
 - Strategic prefetch for navigation
-- Standard CSS loading
-- Standard JavaScript loading
+- Standard CSS loading and JavaScript loading
 - Preload critical fonts
 - Standard lazy loading
-```
 
-**For save-data mode:**
-```javascript
-// Detected by navigator.connection.saveData === true
-Strategies:
+**For save-data mode:** (`navigator.connection.saveData === true`)
 - Override connection type, treat as worse than actual
 - Show "Load high quality" toggle
 - Disable autoplay entirely
 - Minimal images, minimal quality
 - No prefetch, no preload (except critical)
-```
 
 ### Performance Budget by Connection Type
 
@@ -217,32 +173,6 @@ Adjust performance budgets based on connection quality:
 - JavaScript: < 1MB total
 - Videos: < 10MB
 
-### Real-World Scenarios
-
-**Scenario: User on 3G reports slow page load**
-1. Run Network-Bandwidth-Connection-Quality.js → confirms 3g
-2. Run webperf-loading:TTFB.js → high TTFB due to latency
-3. Run webperf-loading:Critical-CSS-Detection.js → CSS not inlined
-4. Recommendation: Inline critical CSS, implement adaptive loading
-
-**Scenario: User with save-data enabled complains about data usage**
-1. Run Network-Bandwidth-Connection-Quality.js → saveData: true
-2. Run webperf-media:Image-Element-Audit.js → high-res images served
-3. Run webperf-media:Video-Element-Audit.js → autoplay enabled
-4. Recommendation: Respect save-data, reduce quality, disable autoplay
-
-**Scenario: International users report slow LCP**
-1. Run Network-Bandwidth-Connection-Quality.js → high RTT (300ms+)
-2. Run webperf-core-web-vitals:LCP.js → LCP 4s+
-3. Run webperf-loading:TTFB-Sub-Parts.js → DNS + connection = 500ms
-4. Recommendation: Use CDN, implement preconnect, optimize for latency
-
-**Scenario: Mobile users in rural areas**
-1. Run Network-Bandwidth-Connection-Quality.js → 2g, high RTT, low downlink
-2. Run webperf-loading:Find-render-blocking-resources.js → many blocking
-3. Run webperf-media:Image-Element-Audit.js → all images eager-loaded
-4. Recommendation: Aggressive adaptive loading, inline critical CSS, lazy load all images
-
 ### Network Information API Limitations
 
 Be aware of API limitations and fallbacks:
@@ -263,27 +193,7 @@ Be aware of API limitations and fallbacks:
 - Values may be rounded or capped
 - Consider user privacy when making decisions
 
-### Testing Adaptive Loading
-
-To test adaptive loading implementations:
-
-1. Use Chrome DevTools Network Throttling
-2. Run Network-Bandwidth-Connection-Quality.js at each throttling level
-3. Verify adaptive strategies activate correctly
-4. Measure Core Web Vitals at each connection speed
-5. Adjust breakpoints and strategies based on results
-
-**Test matrix:**
-- Offline
-- slow-2g (50 Kbps, RTT 2000ms)
-- 2g (250 Kbps, RTT 300ms)
-- 3g (750 Kbps, RTT 100ms)
-- 4g (4 Mbps, RTT 20ms)
-- save-data enabled at each level
-
 ## References
 
 - `references/snippets.md` — Descriptions and thresholds for each script
-- `references/schema.md` — Return value schema for interpreting script output
-
-> Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.
\ No newline at end of file
+- `references/schema.md` — Return value schema for interpreting script output
\ No newline at end of file
diff --git a/skills/webperf/SKILL.md b/skills/webperf/SKILL.md
index 7dea33b..c051ef4 100644
--- a/skills/webperf/SKILL.md
+++ b/skills/webperf/SKILL.md
@@ -15,33 +15,19 @@ metadata:
 
 A collection of 47 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results.
 
-## Skills by Category
-
-| Skill | Snippets | Use when |
-|-------|----------|----------|
-| webperf-core-web-vitals | 7 | Intelligent Core Web Vitals analysis with automated workflows and decision trees |
-| webperf-loading | 28 | Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation |
-| webperf-interaction | 8 | Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking |
-| webperf-media | 3 | Intelligent media optimization with automated workflows for images, videos, and SVGs |
-| webperf-resources | 1 | Intelligent network quality analysis with adaptive loading strategies |
-
 ## Quick Reference
 
-| User says | Skill to use |
-|-----------|--------------|
-| "debug LCP", "slow LCP", "largest contentful paint" | webperf-core-web-vitals |
-| "check CLS", "layout shifts", "visual stability" | webperf-core-web-vitals |
-| "INP", "interaction latency", "responsiveness" | webperf-core-web-vitals |
-| "TTFB", "slow server", "time to first byte" | webperf-loading |
-| "FCP", "first contentful paint", "render blocking" | webperf-loading |
-| "font loading", "script loading", "resource hints", "service worker" | webperf-loading |
-| "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | webperf-interaction |
-| "image audit", "lazy loading", "image optimization", "video audit" | webperf-media |
-| "network quality", "bandwidth", "connection type", "save-data" | webperf-resources |
+| Skill | Snippets | Trigger phrases |
+|-------|----------|-----------------|
+| webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" |
+| webperf-loading | 28 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" |
+| webperf-interaction | 8 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" |
+| webperf-media | 3 | "image audit", "lazy loading", "image optimization", "video audit" |
+| webperf-resources | 1 | "network quality", "bandwidth", "connection type", "save-data" |
 
 ## Workflow
 
-1. Identify the relevant skill based on the user's question (use Quick Reference above)
+1. Identify the relevant skill based on the user's question (see Quick Reference above)
 2. Load the skill's skill.md to see available snippets and thresholds
 3. Execute with Chrome DevTools MCP:
    - `mcp__chrome-devtools__navigate_page` → navigate to target URL
diff --git a/snippets/Interaction/WORKFLOWS.md b/snippets/Interaction/WORKFLOWS.md
index 1977a1c..5723bf6 100644
--- a/snippets/Interaction/WORKFLOWS.md
+++ b/snippets/Interaction/WORKFLOWS.md
@@ -76,7 +76,7 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 ### After Interactions.js
 
-- **If any interaction > 200ms** → Run **Input-Latency-Breakdown.js** on slow interactions
+- **If any interaction > 200ms** → Run **Input-Latency-Breakdown.js** on slow interactions; also run **webperf-core-web-vitals:INP.js** for official INP measurement
 - **If many interactions > 200ms** → Main thread congestion, run:
   1. **Long-Animation-Frames.js** (blocking frames)
   2. **LongTask.js** (long tasks)
@@ -159,36 +159,6 @@ This is a utility snippet, use results to:
 - Measure style/layout/paint phases
 - No automatic follow-up, use data to inform next steps
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Interaction to Core Web Vitals Skill
-
-- **If INP > 200ms detected** → Use **webperf-core-web-vitals** skill:
-  - INP.js (official INP measurement)
-  - LCP-Sub-Parts.js (if render delay is causing INP)
-
-- **If layout shifts during interaction** → Use **webperf-core-web-vitals** skill:
-  - CLS.js (measure cumulative impact)
-  - LCP-Trail.js (check if shifts affect LCP candidate)
-
-#### From Interaction to Loading Skill
-
-- **If long frames caused by script execution** → Use **webperf-loading** skill:
-  - JS-Execution-Time-Breakdown.js (parsing vs execution time)
-  - First-And-Third-Party-Script-Info.js (identify heavy scripts)
-  - Script-Loading.js (check for blocking patterns)
-
-- **If interactions slow during page load** → Use **webperf-loading** skill:
-  - Event-Processing-Time.js (page load phases)
-  - Find-render-blocking-resources.js (competing resources)
-
-#### From Interaction to Media Skill
-
-- **If layout shifts involve images** → Use **webperf-media** skill:
-  - Image-Element-Audit.js (check for missing dimensions)
-
 ### Performance Budget Thresholds
 
 Use these thresholds to automatically trigger follow-up analysis:
diff --git a/snippets/Loading/WORKFLOWS.md b/snippets/Loading/WORKFLOWS.md
index df175e3..70c2298 100644
--- a/snippets/Loading/WORKFLOWS.md
+++ b/snippets/Loading/WORKFLOWS.md
@@ -58,15 +58,6 @@ When CSS is bloated or blocking rendering:
 3. **CSS-Media-Queries-Analysis.js** - Find unused responsive CSS
 4. **Find-render-blocking-resources.js** - Identify blocking stylesheets
 
-### Image Loading Audit
-
-When images are suspected to cause loading issues:
-
-1. **Find-Above-The-Fold-Lazy-Loaded-Images.js** - Check for lazy-loading anti-patterns
-2. **Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js** - Find missed optimization opportunities
-3. **Find-Images-With-Lazy-and-Fetchpriority.js** - Detect contradictory attributes
-4. **Priority-Hints-Audit.js** - Verify LCP image has fetchpriority="high"
-
 ### SSR/Framework Performance
 
 When analyzing Next.js, Nuxt, Remix, or other SSR frameworks:
diff --git a/snippets/Media/WORKFLOWS.md b/snippets/Media/WORKFLOWS.md
index 97ec69b..f974dba 100644
--- a/snippets/Media/WORKFLOWS.md
+++ b/snippets/Media/WORKFLOWS.md
@@ -100,6 +100,10 @@ Use this decision tree to automatically run follow-up snippets based on results:
   1. **webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js** (confirm contradiction)
   2. Recommend removing one of the conflicting attributes
 
+- **If images competing with critical resources** → Run:
+  1. **webperf-loading:Find-render-blocking-resources.js** (resource priority conflicts)
+  2. **webperf-loading:TTFB-Resources.js** (identify slow image CDN)
+
 - **If images missing alt text** → Accessibility issue, recommend adding descriptive alt text
 
 ### After Video-Element-Audit.js
@@ -151,44 +155,6 @@ Use this decision tree to automatically run follow-up snippets based on results:
   - SVG symbols for reusable graphics
   - Extracting to individual optimized images
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Media to Core Web Vitals Skill
-
-- **If LCP image detected** → Use **webperf-core-web-vitals** skill:
-  - LCP.js (measure LCP)
-  - LCP-Sub-Parts.js (break down timing phases)
-  - LCP-Image-Entropy.js (analyze image complexity)
-
-- **If video is LCP candidate** → Use **webperf-core-web-vitals** skill:
-  - LCP-Video-Candidate.js (confirm and analyze)
-  - LCP.js (measure impact)
-
-- **If images causing layout shifts** → Use **webperf-core-web-vitals** skill:
-  - CLS.js (measure cumulative shift)
-
-#### From Media to Loading Skill
-
-- **If lazy loading issues detected** → Use **webperf-loading** skill:
-  - Find-Above-The-Fold-Lazy-Loaded-Images.js (incorrectly lazy)
-  - Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (missing lazy)
-  - Find-Images-With-Lazy-and-Fetchpriority.js (contradictory attributes)
-
-- **If LCP image needs priority optimization** → Use **webperf-loading** skill:
-  - Priority-Hints-Audit.js (fetchpriority analysis)
-  - Resource-Hints-Validation.js (preload validation)
-
-- **If images competing with critical resources** → Use **webperf-loading** skill:
-  - Find-render-blocking-resources.js (resource priority conflicts)
-  - TTFB-Resources.js (identify slow image CDN)
-
-#### From Media to Interaction Skill
-
-- **If images causing layout shifts during interaction** → Use **webperf-interaction** skill:
-  - Layout-Shift-Loading-and-Interaction.js (shift timing analysis)
-
 ### Performance Budget Thresholds
 
 Use these thresholds to trigger recommendations:
@@ -222,40 +188,3 @@ Use these thresholds to trigger recommendations:
 - **Non-LCP images with fetchpriority="high"** → Remove, wasting browser hints
 - **Lazy + fetchpriority="high" conflict** → Fix contradiction
 
-### Common Issues and Resolutions
-
-**Issue: LCP is slow and LCP element is an image**
-1. Run Image-Element-Audit.js
-2. Run webperf-core-web-vitals:LCP-Image-Entropy.js
-3. Check: format, lazy loading, fetchpriority, preload
-4. Fix in order: remove lazy, add fetchpriority="high", optimize format, add preload
-
-**Issue: CLS from images**
-1. Run Image-Element-Audit.js
-2. Check for missing width/height
-3. Add explicit dimensions or aspect-ratio CSS
-4. Verify with webperf-core-web-vitals:CLS.js
-
-**Issue: Page loads too many images**
-1. Run Image-Element-Audit.js
-2. Run webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
-3. Implement lazy loading on below-fold images
-4. Consider pagination or infinite scroll
-
-**Issue: Images are the wrong format**
-1. Run Image-Element-Audit.js
-2. Check format vs content type
-3. Recommend WebP with JPEG/PNG fallback
-4. Consider AVIF for even better compression
-
-**Issue: Video is LCP**
-1. Run Video-Element-Audit.js
-2. Run webperf-core-web-vitals:LCP-Video-Candidate.js
-3. Optimize poster image or consider static image alternative
-4. Add fetchpriority="high" to poster if keeping video
-
-**Issue: SVG files are huge**
-1. Run SVG-Embedded-Bitmap-Analysis.js
-2. Extract embedded bitmaps
-3. Run SVGO on pure SVG
-4. Re-measure file sizes
diff --git a/snippets/Resources/WORKFLOWS.md b/snippets/Resources/WORKFLOWS.md
index 4ca6b78..1a86a0f 100644
--- a/snippets/Resources/WORKFLOWS.md
+++ b/snippets/Resources/WORKFLOWS.md
@@ -51,13 +51,15 @@ Use this decision tree to automatically run follow-up snippets based on results:
   1. Run **webperf-loading:Critical-CSS-Detection.js** (inline critical CSS)
   2. Run **webperf-media:Image-Element-Audit.js** (implement aggressive lazy loading)
   3. Run **webperf-loading:Prefetch-Resource-Validation.js** (remove prefetch to save bandwidth)
-  4. Recommend minimal resource strategy
+  4. Run **webperf-core-web-vitals:LCP.js** (LCP is heavily impacted by slow connections)
+  5. Recommend minimal resource strategy
 
 - **If effectiveType is "3g"** → Moderate connection, recommend:
   1. Run **webperf-loading:Find-render-blocking-resources.js** (minimize blocking)
   2. Run **webperf-media:Image-Element-Audit.js** (responsive images)
   3. Run **webperf-loading:Resource-Hints-Validation.js** (optimize preconnect)
-  4. Implement adaptive image quality
+  4. Run **webperf-core-web-vitals:INP.js** (high latency can impact interaction responsiveness)
+  5. Implement adaptive image quality
 
 - **If effectiveType is "4g" or better** → Good connection, recommend:
   1. Standard optimization practices
@@ -73,9 +75,11 @@ Use this decision tree to automatically run follow-up snippets based on results:
 
 - **If RTT > 300ms** → High latency, recommend:
   1. Run **webperf-loading:TTFB.js** (latency impacts TTFB)
-  2. Run **webperf-loading:Resource-Hints-Validation.js** (preconnect critical for high RTT)
-  3. Minimize number of origins
-  4. Use HTTP/2 or HTTP/3 for multiplexing
+  2. Run **webperf-loading:TTFB-Sub-Parts.js** (break down latency components)
+  3. Run **webperf-loading:Resource-Hints-Validation.js** (preconnect critical for high RTT)
+  4. Run **webperf-loading:Service-Worker-Analysis.js** (caching is critical for high latency)
+  5. Minimize number of origins
+  6. Use HTTP/2 or HTTP/3 for multiplexing
 
 - **If downlink < 1 Mbps** → Very limited bandwidth, recommend:
   1. Run **webperf-media:Image-Element-Audit.js** (aggressive compression)
@@ -88,44 +92,11 @@ Use this decision tree to automatically run follow-up snippets based on results:
   - Strategic prefetch
   - Preloading next-page resources
 
-### Cross-Skill Triggers
-
-These triggers recommend using snippets from other skills:
-
-#### From Resources to Loading Skill
-
-- **If slow connection detected (2g/3g)** → Use **webperf-loading** skill:
-  - TTFB.js (latency is amplified on slow connections)
-  - Critical-CSS-Detection.js (reduce RTT by inlining critical CSS)
-  - Find-render-blocking-resources.js (minimize blocking resources)
-  - Resource-Hints-Validation.js (preconnect is critical for high RTT)
-  - Prefetch-Resource-Validation.js (avoid prefetch on slow connections)
-
-- **If high RTT detected (>200ms)** → Use **webperf-loading** skill:
-  - TTFB-Sub-Parts.js (break down latency components)
-  - Resource-Hints-Validation.js (preconnect to reduce RTT impact)
-  - Service-Worker-Analysis.js (caching is critical for high latency)
-
-#### From Resources to Media Skill
-
-- **If slow connection or save-data detected** → Use **webperf-media** skill:
-  - Image-Element-Audit.js (implement responsive images, aggressive compression)
-  - Video-Element-Audit.js (disable autoplay, reduce quality)
-
-#### From Resources to Core Web Vitals Skill
-
-- **If slow connection detected** → Check Core Web Vitals impact:
-  - Use **webperf-core-web-vitals:LCP.js** (LCP is heavily impacted by slow connections)
-  - Use **webperf-core-web-vitals:INP.js** (high latency can impact interaction responsiveness)
-
 ### Adaptive Loading Implementation Guide
 
 Based on Network Information API results, implement these strategies:
 
-**For slow-2g / 2g (< 50 Kbps):**
-```javascript
-// Detected by effectiveType: "slow-2g" or "2g"
-Strategies:
+**For slow-2g / 2g (< 50 Kbps):** (`effectiveType: "slow-2g"` or `"2g"`)
 - Serve low-res images (quality: 30-40)
 - Disable autoplay videos
 - Remove all prefetch hints
@@ -133,12 +104,8 @@ Strategies:
 - Defer all non-critical JavaScript
 - Use system fonts (no webfonts)
 - Aggressive lazy loading (load on scroll + buffer)
-```
 
-**For 3g (50-700 Kbps):**
-```javascript
-// Detected by effectiveType: "3g"
-Strategies:
+**For 3g (50-700 Kbps):** (`effectiveType: "3g"`)
 - Serve medium-res images (quality: 60-70)
 - Disable autoplay videos
 - Limited prefetch (critical only)
@@ -146,31 +113,21 @@ Strategies:
 - Defer non-critical JavaScript
 - Preload 1-2 critical fonts
 - Standard lazy loading
-```
 
-**For 4g+ (> 700 Kbps):**
-```javascript
-// Detected by effectiveType: "4g"
-Strategies:
+**For 4g+ (> 700 Kbps):** (`effectiveType: "4g"`)
 - Serve high-res images (quality: 80-90)
 - Allow autoplay videos (muted)
 - Strategic prefetch for navigation
-- Standard CSS loading
-- Standard JavaScript loading
+- Standard CSS loading and JavaScript loading
 - Preload critical fonts
 - Standard lazy loading
-```
 
-**For save-data mode:**
-```javascript
-// Detected by navigator.connection.saveData === true
-Strategies:
+**For save-data mode:** (`navigator.connection.saveData === true`)
 - Override connection type, treat as worse than actual
 - Show "Load high quality" toggle
 - Disable autoplay entirely
 - Minimal images, minimal quality
 - No prefetch, no preload (except critical)
-```
 
 ### Performance Budget by Connection Type
 
@@ -194,32 +151,6 @@ Adjust performance budgets based on connection quality:
 - JavaScript: < 1MB total
 - Videos: < 10MB
 
-### Real-World Scenarios
-
-**Scenario: User on 3G reports slow page load**
-1. Run Network-Bandwidth-Connection-Quality.js → confirms 3g
-2. Run webperf-loading:TTFB.js → high TTFB due to latency
-3. Run webperf-loading:Critical-CSS-Detection.js → CSS not inlined
-4. Recommendation: Inline critical CSS, implement adaptive loading
-
-**Scenario: User with save-data enabled complains about data usage**
-1. Run Network-Bandwidth-Connection-Quality.js → saveData: true
-2. Run webperf-media:Image-Element-Audit.js → high-res images served
-3. Run webperf-media:Video-Element-Audit.js → autoplay enabled
-4. Recommendation: Respect save-data, reduce quality, disable autoplay
-
-**Scenario: International users report slow LCP**
-1. Run Network-Bandwidth-Connection-Quality.js → high RTT (300ms+)
-2. Run webperf-core-web-vitals:LCP.js → LCP 4s+
-3. Run webperf-loading:TTFB-Sub-Parts.js → DNS + connection = 500ms
-4. Recommendation: Use CDN, implement preconnect, optimize for latency
-
-**Scenario: Mobile users in rural areas**
-1. Run Network-Bandwidth-Connection-Quality.js → 2g, high RTT, low downlink
-2. Run webperf-loading:Find-render-blocking-resources.js → many blocking
-3. Run webperf-media:Image-Element-Audit.js → all images eager-loaded
-4. Recommendation: Aggressive adaptive loading, inline critical CSS, lazy load all images
-
 ### Network Information API Limitations
 
 Be aware of API limitations and fallbacks:
@@ -240,20 +171,3 @@ Be aware of API limitations and fallbacks:
 - Values may be rounded or capped
 - Consider user privacy when making decisions
 
-### Testing Adaptive Loading
-
-To test adaptive loading implementations:
-
-1. Use Chrome DevTools Network Throttling
-2. Run Network-Bandwidth-Connection-Quality.js at each throttling level
-3. Verify adaptive strategies activate correctly
-4. Measure Core Web Vitals at each connection speed
-5. Adjust breakpoints and strategies based on results
-
-**Test matrix:**
-- Offline
-- slow-2g (50 Kbps, RTT 2000ms)
-- 2g (250 Kbps, RTT 300ms)
-- 3g (750 Kbps, RTT 100ms)
-- 4g (4 Mbps, RTT 20ms)
-- save-data enabled at each level

From e03a84a81aa2d8fabf86a42b0d772ae74b315296 Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Tue, 17 Mar 2026 23:43:09 +0100
Subject: [PATCH 4/9] feat: generate scripts-readable/ for external
 distribution
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add buildReadableScript() to generate-skills.js, producing a
skills/{category}/scripts-readable/ directory alongside the existing
minified scripts/ output.

Readable scripts are intended for contribution to external repos (e.g.
chrome-devtools-mcp) where minified code is not appropriate. They differ
from the minified build in three ways:
- No header comment (file path / sha256 / GitHub URL)
- No console.* output code (removed via Terser drop_console)
- Readable formatting (beautify, 2-space indent, mangle disabled)

Terser options used: defaults:false to suppress all transforms except
drop_console + unused DCE + dead_code removal. Post-processing restores
number literals shortened by the output generator (1e4 → 10000, .1 → 0.1)
and removes void 0 placeholders left by drop_console.

Note: display-only infrastructure (RATING constants, logXxx helpers) that
served only console output remains as inert stubs after console removal.
The scripts are functionally correct — stubs execute but have no effect.
---
 scripts/generate-skills.js                    |  44 +++-
 .../scripts-readable/CLS.js                   |  68 +++++
 .../scripts-readable/INP.js                   | 235 +++++++++++++++++
 .../scripts-readable/LCP-Image-Entropy.js     | 137 ++++++++++
 .../scripts-readable/LCP-Sub-Parts.js         | 226 ++++++++++++++++
 .../scripts-readable/LCP-Trail.js             | 164 ++++++++++++
 .../scripts-readable/LCP-Video-Candidate.js   | 145 ++++++++++
 .../scripts-readable/LCP.js                   |  91 +++++++
 .../Input-Latency-Breakdown.js                | 108 ++++++++
 .../scripts-readable/Interactions.js          | 222 ++++++++++++++++
 .../Layout-Shift-Loading-and-Interaction.js   | 163 ++++++++++++
 .../Long-Animation-Frames-Helpers.js          | 229 ++++++++++++++++
 ...ong-Animation-Frames-Script-Attribution.js | 133 ++++++++++
 .../scripts-readable/Long-Animation-Frames.js | 169 ++++++++++++
 .../scripts-readable/LongTask.js              | 125 +++++++++
 .../scripts-readable/Scroll-Performance.js    | 183 +++++++++++++
 .../scripts-readable/Back-Forward-Cache.js    | 233 ++++++++++++++++
 .../CSS-Media-Queries-Analysis.js             | 249 ++++++++++++++++++
 .../Client-Side-Redirect-Detection.js         | 133 ++++++++++
 .../scripts-readable/Content-Visibility.js    | 165 ++++++++++++
 .../Critical-CSS-Detection.js                 | 132 ++++++++++
 .../scripts-readable/Event-Processing-Time.js | 166 ++++++++++++
 .../webperf-loading/scripts-readable/FCP.js   |  60 +++++
 .../Find-Above-The-Fold-Lazy-Loaded-Images.js | 134 ++++++++++
 ...Find-Images-With-Lazy-and-Fetchpriority.js |  75 ++++++
 ...y-Loaded-Images-outside-of-the-viewport.js | 162 ++++++++++++
 .../Find-render-blocking-resources.js         |  80 ++++++
 .../First-And-Third-Party-Script-Info.js      | 123 +++++++++
 .../First-And-Third-Party-Script-Timings.js   | 198 ++++++++++++++
 ...reloaded-Loaded-and-used-above-the-fold.js | 138 ++++++++++
 .../Inline-CSS-Info-and-Size.js               | 136 ++++++++++
 .../Inline-Script-Info-and-Size.js            | 168 ++++++++++++
 .../JS-Execution-Time-Breakdown.js            | 176 +++++++++++++
 .../Prefetch-Resource-Validation.js           | 223 ++++++++++++++++
 .../scripts-readable/Priority-Hints-Audit.js  | 138 ++++++++++
 .../Resource-Hints-Validation.js              | 224 ++++++++++++++++
 .../scripts-readable/Resource-Hints.js        | 240 +++++++++++++++++
 .../SSR-Hydration-Data-Analysis.js            | 195 ++++++++++++++
 .../scripts-readable/Script-Loading.js        | 196 ++++++++++++++
 .../Service-Worker-Analysis.js                |  55 ++++
 .../scripts-readable/TTFB-Resources.js        |  73 +++++
 .../scripts-readable/TTFB-Sub-Parts.js        | 111 ++++++++
 .../webperf-loading/scripts-readable/TTFB.js  |  40 +++
 .../Validate-Preload-Async-Defer-Scripts.js   | 196 ++++++++++++++
 .../scripts-readable/Image-Element-Audit.js   | 231 ++++++++++++++++
 .../SVG-Embedded-Bitmap-Analysis.js           | 109 ++++++++
 .../scripts-readable/Video-Element-Audit.js   | 147 +++++++++++
 .../Network-Bandwidth-Connection-Quality.js   |  50 ++++
 48 files changed, 7195 insertions(+), 3 deletions(-)
 create mode 100644 skills/webperf-core-web-vitals/scripts-readable/CLS.js
 create mode 100644 skills/webperf-core-web-vitals/scripts-readable/INP.js
 create mode 100644 skills/webperf-core-web-vitals/scripts-readable/LCP-Image-Entropy.js
 create mode 100644 skills/webperf-core-web-vitals/scripts-readable/LCP-Sub-Parts.js
 create mode 100644 skills/webperf-core-web-vitals/scripts-readable/LCP-Trail.js
 create mode 100644 skills/webperf-core-web-vitals/scripts-readable/LCP-Video-Candidate.js
 create mode 100644 skills/webperf-core-web-vitals/scripts-readable/LCP.js
 create mode 100644 skills/webperf-interaction/scripts-readable/Input-Latency-Breakdown.js
 create mode 100644 skills/webperf-interaction/scripts-readable/Interactions.js
 create mode 100644 skills/webperf-interaction/scripts-readable/Layout-Shift-Loading-and-Interaction.js
 create mode 100644 skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Helpers.js
 create mode 100644 skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Script-Attribution.js
 create mode 100644 skills/webperf-interaction/scripts-readable/Long-Animation-Frames.js
 create mode 100644 skills/webperf-interaction/scripts-readable/LongTask.js
 create mode 100644 skills/webperf-interaction/scripts-readable/Scroll-Performance.js
 create mode 100644 skills/webperf-loading/scripts-readable/Back-Forward-Cache.js
 create mode 100644 skills/webperf-loading/scripts-readable/CSS-Media-Queries-Analysis.js
 create mode 100644 skills/webperf-loading/scripts-readable/Client-Side-Redirect-Detection.js
 create mode 100644 skills/webperf-loading/scripts-readable/Content-Visibility.js
 create mode 100644 skills/webperf-loading/scripts-readable/Critical-CSS-Detection.js
 create mode 100644 skills/webperf-loading/scripts-readable/Event-Processing-Time.js
 create mode 100644 skills/webperf-loading/scripts-readable/FCP.js
 create mode 100644 skills/webperf-loading/scripts-readable/Find-Above-The-Fold-Lazy-Loaded-Images.js
 create mode 100644 skills/webperf-loading/scripts-readable/Find-Images-With-Lazy-and-Fetchpriority.js
 create mode 100644 skills/webperf-loading/scripts-readable/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
 create mode 100644 skills/webperf-loading/scripts-readable/Find-render-blocking-resources.js
 create mode 100644 skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Info.js
 create mode 100644 skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Timings.js
 create mode 100644 skills/webperf-loading/scripts-readable/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
 create mode 100644 skills/webperf-loading/scripts-readable/Inline-CSS-Info-and-Size.js
 create mode 100644 skills/webperf-loading/scripts-readable/Inline-Script-Info-and-Size.js
 create mode 100644 skills/webperf-loading/scripts-readable/JS-Execution-Time-Breakdown.js
 create mode 100644 skills/webperf-loading/scripts-readable/Prefetch-Resource-Validation.js
 create mode 100644 skills/webperf-loading/scripts-readable/Priority-Hints-Audit.js
 create mode 100644 skills/webperf-loading/scripts-readable/Resource-Hints-Validation.js
 create mode 100644 skills/webperf-loading/scripts-readable/Resource-Hints.js
 create mode 100644 skills/webperf-loading/scripts-readable/SSR-Hydration-Data-Analysis.js
 create mode 100644 skills/webperf-loading/scripts-readable/Script-Loading.js
 create mode 100644 skills/webperf-loading/scripts-readable/Service-Worker-Analysis.js
 create mode 100644 skills/webperf-loading/scripts-readable/TTFB-Resources.js
 create mode 100644 skills/webperf-loading/scripts-readable/TTFB-Sub-Parts.js
 create mode 100644 skills/webperf-loading/scripts-readable/TTFB.js
 create mode 100644 skills/webperf-loading/scripts-readable/Validate-Preload-Async-Defer-Scripts.js
 create mode 100644 skills/webperf-media/scripts-readable/Image-Element-Audit.js
 create mode 100644 skills/webperf-media/scripts-readable/SVG-Embedded-Bitmap-Analysis.js
 create mode 100644 skills/webperf-media/scripts-readable/Video-Element-Audit.js
 create mode 100644 skills/webperf-resources/scripts-readable/Network-Bandwidth-Connection-Quality.js

diff --git a/scripts/generate-skills.js b/scripts/generate-skills.js
index 76df344..9887bdd 100755
--- a/scripts/generate-skills.js
+++ b/scripts/generate-skills.js
@@ -65,6 +65,42 @@ const CATEGORIES = {
   },
 }
 
+// Strips leading header comment lines (// Title\n// URL\n) before the IIFE
+function stripHeaderComments(source) {
+  return source.replace(/^(\/\/[^\n]*\n)+\n*/, '')
+}
+
+async function buildReadableScript(src, dst) {
+  const source = fs.readFileSync(src, 'utf-8')
+  const stripped = stripHeaderComments(source)
+
+  let code
+  try {
+    const result = await minify(stripped, {
+      compress: {
+        defaults: false,     // disable all default transforms
+        drop_console: true,  // only remove console.* calls
+        unused: true,        // remove vars made dead by console removal
+        dead_code: true,     // remove unreachable code
+        passes: 2,
+      },
+      mangle: false,
+      format: { beautify: true, comments: false, indent_level: 2 },
+    })
+    code = result.code
+      // Remove void 0 placeholders left by drop_console
+      .replace(/^\s*void 0;\s*\n/gm, '')
+      // Restore number literals: 1e4 → 10000, .1 → 0.1
+      .replace(/\b(\d+(?:\.\d+)?)e(\d+)\b/g, (_, m, e) => String(Number(`${m}e${e}`)))
+      .replace(/(?<![.\w])\.(\d)/g, '0.$1')
+  } catch (err) {
+    console.warn(`  ⚠ readable minify failed for ${path.basename(src)}: ${err.message} — stripping comments only`)
+    code = stripped
+  }
+
+  fs.writeFileSync(dst, code + '\n')
+}
+
 async function buildScript(src, dst, relPath) {
   const source = fs.readFileSync(src, 'utf-8')
   const hash = createHash('sha256').update(source).digest('hex').slice(0, 16)
@@ -234,16 +270,18 @@ async function generateCategorySkill(category, catConfig) {
 
   const skillDir = path.join(SKILLS_DIR, catConfig.skill)
   const scriptsDir = path.join(skillDir, 'scripts')
+  const scriptsReadableDir = path.join(skillDir, 'scripts-readable')
   const refsDir = path.join(skillDir, 'references')
   fs.mkdirSync(scriptsDir, { recursive: true })
+  fs.mkdirSync(scriptsReadableDir, { recursive: true })
   fs.mkdirSync(refsDir, { recursive: true })
 
   for (const snippetFile of snippetFiles) {
     const src = path.join(SNIPPETS_DIR, category, snippetFile)
-    const dst = path.join(scriptsDir, snippetFile)
-    await buildScript(src, dst, `snippets/${category}/${snippetFile}`)
+    await buildScript(src, path.join(scriptsDir, snippetFile), `snippets/${category}/${snippetFile}`)
+    await buildReadableScript(src, path.join(scriptsReadableDir, snippetFile))
   }
-  console.log(`  built ${snippetFiles.length} scripts to scripts/`)
+  console.log(`  built ${snippetFiles.length} scripts to scripts/ and scripts-readable/`)
 
   // Write references/snippets.md (L3 — loaded on demand)
   const snippetLines = []
diff --git a/skills/webperf-core-web-vitals/scripts-readable/CLS.js b/skills/webperf-core-web-vitals/scripts-readable/CLS.js
new file mode 100644
index 0000000..15d7c82
--- /dev/null
+++ b/skills/webperf-core-web-vitals/scripts-readable/CLS.js
@@ -0,0 +1,68 @@
+(() => {
+  let cls = 0;
+  const valueToRating = score => score <= 0.1 ? "good" : score <= 0.25 ? "needs-improvement" : "poor";
+  const RATING = {
+    good: {
+      icon: "🟢",
+      color: "#0CCE6A"
+    },
+    "needs-improvement": {
+      icon: "🟡",
+      color: "#FFA400"
+    },
+    poor: {
+      icon: "🔴",
+      color: "#FF4E42"
+    }
+  };
+  const logCLS = () => {
+    const rating = valueToRating(cls);
+    const {icon: icon, color: color} = RATING[rating];
+  };
+  const observer = new PerformanceObserver(list => {
+    for (const entry of list.getEntries()) if (!entry.hadRecentInput) cls += entry.value;
+    logCLS();
+  });
+  observer.observe({
+    type: "layout-shift",
+    buffered: true
+  });
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "hidden") {
+      observer.takeRecords();
+      logCLS();
+    }
+  });
+  window.getCLS = () => {
+    logCLS();
+    const rating = valueToRating(cls);
+    return {
+      script: "CLS",
+      status: "ok",
+      metric: "CLS",
+      value: Math.round(cls * 10000) / 10000,
+      unit: "score",
+      rating: rating,
+      thresholds: {
+        good: 0.1,
+        needsImprovement: 0.25
+      }
+    };
+  };
+  const clsSync = performance.getEntriesByType("layout-shift").reduce((sum, e) => !e.hadRecentInput ? sum + e.value : sum, 0);
+  const clsRating = valueToRating(clsSync);
+  return {
+    script: "CLS",
+    status: "ok",
+    metric: "CLS",
+    value: Math.round(clsSync * 10000) / 10000,
+    unit: "score",
+    rating: clsRating,
+    thresholds: {
+      good: 0.1,
+      needsImprovement: 0.25
+    },
+    message: "CLS tracking active. Call getCLS() for updated value after page interactions.",
+    getDataFn: "getCLS"
+  };
+})();
diff --git a/skills/webperf-core-web-vitals/scripts-readable/INP.js b/skills/webperf-core-web-vitals/scripts-readable/INP.js
new file mode 100644
index 0000000..4aa2c4a
--- /dev/null
+++ b/skills/webperf-core-web-vitals/scripts-readable/INP.js
@@ -0,0 +1,235 @@
+(() => {
+  const interactions = [];
+  let inpValue = 0;
+  let inpEntry = null;
+  const valueToRating = ms => ms <= 200 ? "good" : ms <= 500 ? "needs-improvement" : "poor";
+  const RATING = {
+    good: {
+      icon: "🟢",
+      color: "#0CCE6A"
+    },
+    "needs-improvement": {
+      icon: "🟡",
+      color: "#FFA400"
+    },
+    poor: {
+      icon: "🔴",
+      color: "#FF4E42"
+    }
+  };
+  const calculateINP = () => {
+    if (interactions.length === 0) return {
+      value: 0,
+      entry: null
+    };
+    const sorted = [ ...interactions ].sort((a, b) => b.duration - a.duration);
+    const index = interactions.length < 50 ? 0 : Math.floor(interactions.length * 0.02);
+    return {
+      value: sorted[index].duration,
+      entry: sorted[index]
+    };
+  };
+  const getInteractionName = entry => {
+    const target = entry.target;
+    if (!target) return entry.name;
+    let selector = target.tagName.toLowerCase();
+    if (target.id) selector += `#${target.id}`; else if (target.className && typeof target.className === "string") {
+      const classes = target.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) selector += `.${classes}`;
+    }
+    return `${entry.name} → ${selector}`;
+  };
+  const getPhaseBreakdown = entry => {
+    const phases = {
+      inputDelay: 0,
+      processingTime: 0,
+      presentationDelay: 0
+    };
+    if (entry.processingStart && entry.processingEnd) {
+      phases.inputDelay = entry.processingStart - entry.startTime;
+      phases.processingTime = entry.processingEnd - entry.processingStart;
+      phases.presentationDelay = entry.duration - phases.inputDelay - phases.processingTime;
+    }
+    return phases;
+  };
+  const observer = new PerformanceObserver(list => {
+    for (const entry of list.getEntries()) {
+      if (!entry.interactionId) continue;
+      const existing = interactions.find(i => i.interactionId === entry.interactionId);
+      if (!existing || entry.duration > existing.duration) {
+        if (existing) {
+          const idx = interactions.indexOf(existing);
+          interactions.splice(idx, 1);
+        }
+        interactions.push({
+          name: entry.name,
+          duration: entry.duration,
+          startTime: entry.startTime,
+          interactionId: entry.interactionId,
+          target: entry.target,
+          processingStart: entry.processingStart,
+          processingEnd: entry.processingEnd,
+          formattedName: getInteractionName(entry),
+          phases: getPhaseBreakdown(entry),
+          entry: entry
+        });
+      }
+      const result = calculateINP();
+      inpValue = result.value;
+      inpEntry = result.entry;
+    }
+  });
+  observer.observe({
+    type: "event",
+    buffered: true,
+    durationThreshold: 16
+  });
+  const logINP = () => {
+    const rating = valueToRating(inpValue);
+    const {icon: icon, color: color} = RATING[rating];
+    if (inpEntry) {
+      if (inpEntry.target) {
+        const getElementPath = el => {
+          if (!el) return "";
+          const parts = [];
+          let current = el;
+          while (current && current !== document.body && parts.length < 5) {
+            let selector = current.tagName.toLowerCase();
+            if (current.id) selector += `#${current.id}`; else if (current.className && typeof current.className === "string") {
+              const classes = current.className.trim().split(/\s+/).slice(0, 2).join(".");
+              if (classes) selector += `.${classes}`;
+            }
+            parts.unshift(selector);
+            current = current.parentElement;
+          }
+          return parts.join(" > ");
+        };
+        const path = getElementPath(inpEntry.target);
+        if (path) void 0;
+      }
+      const phases = inpEntry.phases;
+      if (phases.inputDelay > 0) {
+        const total = inpEntry.duration;
+        const barWidth = 40;
+        "▓".repeat(Math.round(phases.inputDelay / total * barWidth));
+        "█".repeat(Math.round(phases.processingTime / total * barWidth));
+        "░".repeat(Math.round(phases.presentationDelay / total * barWidth));
+      }
+      if (inpValue > 200 && phases.inputDelay > 0) {
+        if (phases.inputDelay > 100) void 0;
+        if (phases.processingTime > 200) {
+        }
+        if (phases.presentationDelay > 100) {
+        }
+      }
+    }
+    const slowInteractions = interactions.filter(i => i.duration > 200).sort((a, b) => b.duration - a.duration).slice(0, 10);
+    if (slowInteractions.length > 0) {
+      slowInteractions.slice(0, 3).forEach((interaction, idx) => {
+        if (interaction.target) void 0; else void 0;
+      });
+    }
+    const byType = {};
+    interactions.forEach(i => {
+      const type = i.name;
+      if (!byType[type]) byType[type] = {
+        count: 0,
+        totalDuration: 0,
+        maxDuration: 0
+      };
+      byType[type].count++;
+      byType[type].totalDuration += i.duration;
+      byType[type].maxDuration = Math.max(byType[type].maxDuration, i.duration);
+    });
+    if (Object.keys(byType).length > 0) {
+    }
+    if (inpValue > 200 && (!inpEntry || !inpEntry.phases || inpEntry.phases.inputDelay === 0)) {
+    }
+  };
+  window.getINP = () => {
+    const result = calculateINP();
+    inpValue = result.value;
+    inpEntry = result.entry;
+    logINP();
+    const rating = valueToRating(inpValue);
+    const details = {
+      totalInteractions: interactions.length
+    };
+    if (inpEntry) {
+      details.worstEvent = inpEntry.formattedName;
+      details.phases = {
+        inputDelay: Math.round(inpEntry.phases.inputDelay),
+        processingTime: Math.round(inpEntry.phases.processingTime),
+        presentationDelay: Math.round(inpEntry.phases.presentationDelay)
+      };
+    }
+    if (interactions.length === 0) return {
+      script: "INP",
+      status: "error",
+      error: "No interactions recorded yet. Interact with the page and call getINP() again.",
+      getDataFn: "getINP",
+      details: details
+    };
+    return {
+      script: "INP",
+      status: "ok",
+      metric: "INP",
+      value: Math.round(inpValue),
+      unit: "ms",
+      rating: rating,
+      thresholds: {
+        good: 200,
+        needsImprovement: 500
+      },
+      details: details
+    };
+  };
+  window.getINPDetails = () => {
+    if (interactions.length === 0) {
+      return [];
+    }
+    const sorted = [ ...interactions ].sort((a, b) => b.duration - a.duration);
+    const maxToShow = Math.min(sorted.length, 15);
+    sorted.slice(0, maxToShow).forEach((interaction, idx) => {
+      const phases = interaction.phases;
+      const hasPhases = phases.inputDelay > 0;
+      if (interaction.target) {
+        const getPath = el => {
+          if (!el) return "";
+          const parts = [];
+          let current = el;
+          while (current && current !== document.body && parts.length < 5) {
+            let selector = current.tagName.toLowerCase();
+            if (current.id) selector += `#${current.id}`; else if (current.className && typeof current.className === "string") {
+              const classes = current.className.trim().split(/\s+/).slice(0, 2).join(".");
+              if (classes) selector += `.${classes}`;
+            }
+            parts.unshift(selector);
+            current = current.parentElement;
+          }
+          return parts.join(" > ");
+        };
+        const path = getPath(interaction.target);
+        if (path) void 0;
+      } else void 0;
+      if (hasPhases) void 0;
+    });
+    if (sorted.length > maxToShow) void 0;
+    return sorted;
+  };
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "hidden") {
+      observer.takeRecords();
+      const result = calculateINP();
+      inpValue = result.value;
+      inpEntry = result.entry;
+      logINP();
+    }
+  });
+  return {
+    script: "INP",
+    status: "tracking",
+    message: "INP tracking active. Interact with the page then call getINP() for results.",
+    getDataFn: "getINP"
+  };
+})();
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Image-Entropy.js b/skills/webperf-core-web-vitals/scripts-readable/LCP-Image-Entropy.js
new file mode 100644
index 0000000..d143f16
--- /dev/null
+++ b/skills/webperf-core-web-vitals/scripts-readable/LCP-Image-Entropy.js
@@ -0,0 +1,137 @@
+(() => {
+  const formatBytes = bytes => {
+    if (!bytes) return "-";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+  };
+  const LCP_THRESHOLD = 0.05;
+  let lcpElement = null;
+  let lcpUrl = null;
+  const lcpObserver = new PerformanceObserver(list => {
+    const entries = list.getEntries();
+    const lastEntry = entries[entries.length - 1];
+    if (lastEntry) {
+      lcpElement = lastEntry.element;
+      lcpUrl = lastEntry.url;
+    }
+  });
+  lcpObserver.observe({
+    type: "largest-contentful-paint",
+    buffered: true
+  });
+  setTimeout(() => {
+    lcpObserver.disconnect();
+    const images = [ ...document.images ].filter(img => {
+      const src = img.currentSrc || img.src;
+      return src && !src.startsWith("data:image");
+    }).map(img => {
+      const src = img.currentSrc || img.src;
+      const resource = performance.getEntriesByName(src)[0];
+      const fileSize = resource?.encodedBodySize || 0;
+      const pixels = img.naturalWidth * img.naturalHeight;
+      const bpp = pixels > 0 ? fileSize * 8 / pixels : 0;
+      const isLowEntropy = bpp > 0 && bpp < LCP_THRESHOLD;
+      const isLCP = lcpElement === img || lcpUrl === src;
+      return {
+        element: img,
+        src: src,
+        shortSrc: src.split("/").pop()?.split("?")[0] || src,
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+        fileSize: fileSize,
+        bpp: bpp,
+        isLowEntropy: isLowEntropy,
+        isLCP: isLCP,
+        lcpEligible: !isLowEntropy && bpp > 0
+      };
+    }).filter(img => img.bpp > 0);
+    if (images.length === 0) {
+      return;
+    }
+    const lowEntropy = images.filter(img => img.isLowEntropy);
+    images.filter(img => !img.isLowEntropy);
+    const lcpImage = images.find(img => img.isLCP);
+    if (lcpImage) {
+      lcpImage.isLowEntropy;
+    }
+    images.sort((a, b) => b.bpp - a.bpp).map(img => ({
+      Image: img.shortSrc.length > 30 ? "..." + img.shortSrc.slice(-27) : img.shortSrc,
+      Dimensions: `${img.width}×${img.height}`,
+      Size: formatBytes(img.fileSize),
+      BPP: img.bpp.toFixed(4),
+      Entropy: img.isLowEntropy ? "🔴 Low" : "🟢 Normal",
+      "LCP Eligible": img.lcpEligible ? "✅" : "❌",
+      "Is LCP": img.isLCP ? "👈" : ""
+    }));
+    if (lowEntropy.length > 0) {
+      lowEntropy.forEach(img => {
+      });
+    }
+    if (lcpImage && lcpImage.isLowEntropy) {
+    }
+    images.forEach((img, i) => {
+      img.isLowEntropy;
+      img.isLCP;
+    });
+  }, 100);
+  const lcpEntriesSync = performance.getEntriesByType("largest-contentful-paint");
+  const lcpEntrySync = lcpEntriesSync.at(-1);
+  const lcpElementSync = lcpEntrySync?.element ?? null;
+  const lcpUrlSync = lcpEntrySync?.url ?? null;
+  const imagesSync = [ ...document.images ].filter(img => {
+    const src = img.currentSrc || img.src;
+    return src && !src.startsWith("data:image");
+  }).map(img => {
+    const src = img.currentSrc || img.src;
+    const resource = performance.getEntriesByName(src)[0];
+    const fileSize = resource?.encodedBodySize || 0;
+    const pixels = img.naturalWidth * img.naturalHeight;
+    const bpp = pixels > 0 ? fileSize * 8 / pixels : 0;
+    const isLowEntropy = bpp > 0 && bpp < LCP_THRESHOLD;
+    const isLCP = lcpElementSync === img || lcpUrlSync === src;
+    return {
+      url: src.split("/").pop()?.split("?")[0] || src,
+      width: img.naturalWidth,
+      height: img.naturalHeight,
+      fileSizeBytes: fileSize,
+      bpp: Math.round(bpp * 10000) / 10000,
+      isLowEntropy: isLowEntropy,
+      lcpEligible: !isLowEntropy && bpp > 0,
+      isLCP: isLCP
+    };
+  }).filter(img => img.bpp > 0);
+  const lowEntropyCount = imagesSync.filter(img => img.isLowEntropy).length;
+  const lcpImageSync = imagesSync.find(img => img.isLCP);
+  if (lcpElementSync) {
+    lcpElementSync.style.outline = "3px dashed lime";
+    lcpElementSync.style.outlineOffset = "2px";
+  }
+  const issuesSync = [];
+  if (lowEntropyCount > 0) issuesSync.push({
+    severity: "warning",
+    message: `${lowEntropyCount} image(s) have low entropy and are LCP-ineligible in Chrome 112+`
+  });
+  if (lcpImageSync?.isLowEntropy) issuesSync.push({
+    severity: "error",
+    message: "Current LCP image has low entropy and may be skipped by Chrome"
+  });
+  return {
+    script: "LCP-Image-Entropy",
+    status: "ok",
+    count: imagesSync.length,
+    details: {
+      totalImages: imagesSync.length,
+      lowEntropyCount: lowEntropyCount,
+      lcpImageEligible: lcpImageSync ? !lcpImageSync.isLowEntropy : null,
+      lcpImage: lcpImageSync ? {
+        url: lcpImageSync.url,
+        bpp: lcpImageSync.bpp,
+        isLowEntropy: lcpImageSync.isLowEntropy
+      } : null
+    },
+    items: imagesSync,
+    issues: issuesSync
+  };
+})();
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Sub-Parts.js b/skills/webperf-core-web-vitals/scripts-readable/LCP-Sub-Parts.js
new file mode 100644
index 0000000..38fb6b1
--- /dev/null
+++ b/skills/webperf-core-web-vitals/scripts-readable/LCP-Sub-Parts.js
@@ -0,0 +1,226 @@
+(() => {
+  const formatMs = ms => `${Math.round(ms)}ms`;
+  const formatPercent = (value, total) => `${Math.round(value / total * 100)}%`;
+  const valueToRating = ms => ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";
+  const RATING = {
+    good: {
+      icon: "🟢",
+      color: "#0CCE6A"
+    },
+    "needs-improvement": {
+      icon: "🟡",
+      color: "#FFA400"
+    },
+    poor: {
+      icon: "🔴",
+      color: "#FF4E42"
+    }
+  };
+  const SUB_PARTS = [ {
+    name: "Time to First Byte",
+    key: "ttfb",
+    target: 800
+  }, {
+    name: "Resource Load Delay",
+    key: "resourceLoadDelay",
+    targetPercent: 10
+  }, {
+    name: "Resource Load Time",
+    key: "resourceLoadTime",
+    targetPercent: 40
+  }, {
+    name: "Element Render Delay",
+    key: "elementRenderDelay",
+    targetPercent: 10
+  } ];
+  const getNavigationEntry = () => {
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    if (navEntry?.responseStart > 0 && navEntry.responseStart < performance.now()) return navEntry;
+    return null;
+  };
+  const observer = new PerformanceObserver(list => {
+    const lcpEntry = list.getEntries().at(-1);
+    if (!lcpEntry) return;
+    const navEntry = getNavigationEntry();
+    if (!navEntry) return;
+    const lcpResEntry = performance.getEntriesByType("resource").find(e => e.name === lcpEntry.url);
+    const activationStart = navEntry.activationStart || 0;
+    const ttfb = Math.max(0, navEntry.responseStart - activationStart);
+    const lcpRequestStart = Math.max(ttfb, lcpResEntry ? (lcpResEntry.requestStart || lcpResEntry.startTime) - activationStart : 0);
+    const lcpResponseEnd = Math.max(lcpRequestStart, lcpResEntry ? lcpResEntry.responseEnd - activationStart : 0);
+    const lcpRenderTime = Math.max(lcpResponseEnd, lcpEntry.startTime - activationStart);
+    const subPartValues = {
+      ttfb: ttfb,
+      resourceLoadDelay: lcpRequestStart - ttfb,
+      resourceLoadTime: lcpResponseEnd - lcpRequestStart,
+      elementRenderDelay: lcpRenderTime - lcpResponseEnd
+    };
+    const rating = valueToRating(lcpRenderTime);
+    const {icon: icon, color: color} = RATING[rating];
+    if (lcpEntry.element) {
+      const el = lcpEntry.element;
+      let selector = el.tagName.toLowerCase();
+      if (el.id) selector = `#${el.id}`; else if (el.className && typeof el.className === "string") {
+        const classes = el.className.trim().split(/\s+/).slice(0, 2).join(".");
+        if (classes) selector = `${el.tagName.toLowerCase()}.${classes}`;
+      }
+      if (lcpEntry.url) {
+        (() => {
+          try {
+            const u = new URL(lcpEntry.url);
+            return u.hostname !== location.hostname ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}` : u.pathname.split("/").pop()?.split("?")[0] || lcpEntry.url;
+          } catch {
+            return lcpEntry.url;
+          }
+        })();
+      }
+      el.style.outline = "3px dashed lime";
+      el.style.outlineOffset = "2px";
+    }
+    const phases = SUB_PARTS.map(part => ({
+      ...part,
+      value: subPartValues[part.key],
+      percent: subPartValues[part.key] / lcpRenderTime * 100
+    }));
+    const slowest = phases.reduce((a, b) => a.value > b.value ? a : b);
+    phases.map(part => {
+      const isSlowest = part.key === slowest.key;
+      const isOverTarget = part.target ? part.value > part.target : part.percent > part.targetPercent;
+      return {
+        "Sub-part": isSlowest ? `⚠️ ${part.name}` : part.name,
+        Time: formatMs(part.value),
+        "%": formatPercent(part.value, lcpRenderTime),
+        Status: isOverTarget ? "🔴 Over target" : "✅ OK"
+      };
+    });
+    const barWidth = 40;
+    const bars = phases.map(p => {
+      const width = Math.max(1, Math.round(p.value / lcpRenderTime * barWidth));
+      return {
+        key: p.key,
+        bar: width
+      };
+    });
+    "█".repeat(bars[0].bar);
+    "▓".repeat(bars[1].bar);
+    "▒".repeat(bars[2].bar);
+    "░".repeat(bars[3].bar);
+    if (slowest.key === "ttfb") {
+    } else if (slowest.key === "resourceLoadDelay") {
+    } else if (slowest.key === "resourceLoadTime") {
+    } else if (slowest.key === "elementRenderDelay") {
+    }
+    SUB_PARTS.forEach(part => performance.clearMeasures(part.name));
+    phases.forEach(part => {
+      const startTimes = {
+        ttfb: 0,
+        resourceLoadDelay: ttfb,
+        resourceLoadTime: lcpRequestStart,
+        elementRenderDelay: lcpResponseEnd
+      };
+      performance.measure(part.name, {
+        start: startTimes[part.key],
+        end: startTimes[part.key] + part.value
+      });
+    });
+  });
+  observer.observe({
+    type: "largest-contentful-paint",
+    buffered: true
+  });
+  const lcpBuffered = performance.getEntriesByType("largest-contentful-paint");
+  const lcpEntry = lcpBuffered.at(-1);
+  if (!lcpEntry) return {
+    script: "LCP-Sub-Parts",
+    status: "error",
+    error: "No LCP entries yet"
+  };
+  const navEntrySync = getNavigationEntry();
+  if (!navEntrySync) return {
+    script: "LCP-Sub-Parts",
+    status: "error",
+    error: "No navigation entry"
+  };
+  const lcpResEntrySync = performance.getEntriesByType("resource").find(e => e.name === lcpEntry.url);
+  const activationStartSync = navEntrySync.activationStart || 0;
+  const ttfbSync = Math.max(0, navEntrySync.responseStart - activationStartSync);
+  const lcpRequestStartSync = Math.max(ttfbSync, lcpResEntrySync ? (lcpResEntrySync.requestStart || lcpResEntrySync.startTime) - activationStartSync : 0);
+  const lcpResponseEndSync = Math.max(lcpRequestStartSync, lcpResEntrySync ? lcpResEntrySync.responseEnd - activationStartSync : 0);
+  const lcpRenderTimeSync = Math.max(lcpResponseEndSync, lcpEntry.startTime - activationStartSync);
+  const totalSync = Math.round(lcpRenderTimeSync);
+  const ratingSync = valueToRating(totalSync);
+  const ttfbVal = Math.round(ttfbSync);
+  const loadDelayVal = Math.round(lcpRequestStartSync - ttfbSync);
+  const loadTimeVal = Math.round(lcpResponseEndSync - lcpRequestStartSync);
+  const renderDelayVal = Math.round(lcpRenderTimeSync - lcpResponseEndSync);
+  const subPartsForRank = [ {
+    key: "ttfb",
+    value: ttfbVal
+  }, {
+    key: "resourceLoadDelay",
+    value: loadDelayVal
+  }, {
+    key: "resourceLoadTime",
+    value: loadTimeVal
+  }, {
+    key: "elementRenderDelay",
+    value: renderDelayVal
+  } ];
+  const slowestPhaseSync = subPartsForRank.reduce((a, b) => a.value > b.value ? a : b).key;
+  let lcpSelectorSync = null;
+  if (lcpEntry.element) {
+    const el = lcpEntry.element;
+    lcpSelectorSync = el.tagName.toLowerCase();
+    if (el.id) lcpSelectorSync = `#${el.id}`; else if (el.className && typeof el.className === "string") {
+      const classes = el.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) lcpSelectorSync = `${el.tagName.toLowerCase()}.${classes}`;
+    }
+  }
+  const shortUrlSync = lcpEntry.url ? (() => {
+    try {
+      const u = new URL(lcpEntry.url);
+      return u.hostname !== location.hostname ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}` : u.pathname.split("/").pop()?.split("?")[0] || lcpEntry.url;
+    } catch {
+      return lcpEntry.url;
+    }
+  })() : null;
+  return {
+    script: "LCP-Sub-Parts",
+    status: "ok",
+    metric: "LCP",
+    value: totalSync,
+    unit: "ms",
+    rating: ratingSync,
+    thresholds: {
+      good: 2500,
+      needsImprovement: 4000
+    },
+    details: {
+      element: lcpSelectorSync,
+      url: shortUrlSync,
+      subParts: {
+        ttfb: {
+          value: ttfbVal,
+          percent: Math.round(ttfbVal / totalSync * 100),
+          overTarget: ttfbVal > 800
+        },
+        resourceLoadDelay: {
+          value: loadDelayVal,
+          percent: Math.round(loadDelayVal / totalSync * 100),
+          overTarget: loadDelayVal / totalSync * 100 > 10
+        },
+        resourceLoadTime: {
+          value: loadTimeVal,
+          percent: Math.round(loadTimeVal / totalSync * 100),
+          overTarget: loadTimeVal / totalSync * 100 > 40
+        },
+        elementRenderDelay: {
+          value: renderDelayVal,
+          percent: Math.round(renderDelayVal / totalSync * 100),
+          overTarget: renderDelayVal / totalSync * 100 > 10
+        }
+      },
+      slowestPhase: slowestPhaseSync
+    }
+  };
+})();
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Trail.js b/skills/webperf-core-web-vitals/scripts-readable/LCP-Trail.js
new file mode 100644
index 0000000..81eb87e
--- /dev/null
+++ b/skills/webperf-core-web-vitals/scripts-readable/LCP-Trail.js
@@ -0,0 +1,164 @@
+(() => {
+  const PALETTE = [ {
+    color: "#EF4444",
+    name: "Red"
+  }, {
+    color: "#F97316",
+    name: "Orange"
+  }, {
+    color: "#22C55E",
+    name: "Green"
+  }, {
+    color: "#3B82F6",
+    name: "Blue"
+  }, {
+    color: "#A855F7",
+    name: "Purple"
+  }, {
+    color: "#EC4899",
+    name: "Pink"
+  } ];
+  const valueToRating = ms => ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";
+  const RATING = {
+    good: {
+      icon: "🟢",
+      color: "#0CCE6A"
+    },
+    "needs-improvement": {
+      icon: "🟡",
+      color: "#FFA400"
+    },
+    poor: {
+      icon: "🔴",
+      color: "#FF4E42"
+    }
+  };
+  const getActivationStart = () => {
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    return navEntry?.activationStart || 0;
+  };
+  const getSelector = element => {
+    if (element.id) return `#${element.id}`;
+    if (element.className && typeof element.className === "string") {
+      const classes = element.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) return `${element.tagName.toLowerCase()}.${classes}`;
+    }
+    return element.tagName.toLowerCase();
+  };
+  const getElementInfo = (element, entry) => {
+    const tag = element.tagName.toLowerCase();
+    if (tag === "img") return {
+      type: "Image",
+      url: entry.url || element.src
+    };
+    if (tag === "video") return {
+      type: "Video poster",
+      url: entry.url || element.poster
+    };
+    if (window.getComputedStyle(element).backgroundImage !== "none") return {
+      type: "Background image",
+      url: entry.url
+    };
+    return {
+      type: tag === "h1" || tag === "p" ? "Text block" : tag
+    };
+  };
+  const candidates = [];
+  const logTrail = () => {
+    const current = candidates[candidates.length - 1];
+    if (!current) return;
+    const rating = valueToRating(current.time);
+    const {icon: icon, color: ratingColor} = RATING[rating];
+    const {type: type, url: url} = getElementInfo(current.element, current.entry);
+    if (url) void 0;
+    if (current.element.naturalWidth) void 0;
+    if (current.entry.size) void 0;
+    candidates.forEach(({index: index, selector: selector, color: color, name: name, time: time, element: element}) => {
+      candidates.length;
+    });
+  };
+  const observer = new PerformanceObserver(list => {
+    const activationStart = getActivationStart();
+    const seen = new Set(candidates.map(c => c.element));
+    for (const entry of list.getEntries()) {
+      const {element: element} = entry;
+      if (!element || seen.has(element)) continue;
+      const {color: color, name: name} = PALETTE[candidates.length % PALETTE.length];
+      element.style.outline = `3px dashed ${color}`;
+      element.style.outlineOffset = "2px";
+      candidates.push({
+        index: candidates.length + 1,
+        element: element,
+        selector: getSelector(element),
+        color: color,
+        name: name,
+        time: Math.max(0, entry.startTime - activationStart),
+        entry: entry
+      });
+      seen.add(element);
+    }
+    logTrail();
+  });
+  observer.observe({
+    type: "largest-contentful-paint",
+    buffered: true
+  });
+  const trailEntries = performance.getEntriesByType("largest-contentful-paint");
+  if (trailEntries.length === 0) return {
+    script: "LCP-Trail",
+    status: "error",
+    error: "No LCP entries yet"
+  };
+  const trailActivationStart = getActivationStart();
+  const seenEls = new Set;
+  const syncCandidates = [];
+  for (const entry of trailEntries) {
+    const el = entry.element;
+    if (!el || seenEls.has(el)) continue;
+    seenEls.add(el);
+    const selector = getSelector(el);
+    const time = Math.round(Math.max(0, entry.startTime - trailActivationStart));
+    const {type: type, url: url} = getElementInfo(el, entry);
+    syncCandidates.push({
+      index: syncCandidates.length + 1,
+      selector: selector,
+      time: time,
+      elementType: type,
+      ...url ? {
+        url: (() => {
+          try {
+            const u = new URL(url);
+            return u.hostname !== location.hostname ? `${u.hostname}/…/${u.pathname.split("/").pop()?.split("?")[0]}` : u.pathname.split("/").pop()?.split("?")[0] || url;
+          } catch {
+            return url;
+          }
+        })()
+      } : {}
+    });
+  }
+  if (syncCandidates.length === 0) return {
+    script: "LCP-Trail",
+    status: "error",
+    error: "No LCP elements in DOM"
+  };
+  const lastCandidate = syncCandidates.at(-1);
+  const trailValue = lastCandidate.time;
+  const trailRating = valueToRating(trailValue);
+  return {
+    script: "LCP-Trail",
+    status: "ok",
+    metric: "LCP",
+    value: trailValue,
+    unit: "ms",
+    rating: trailRating,
+    thresholds: {
+      good: 2500,
+      needsImprovement: 4000
+    },
+    details: {
+      candidateCount: syncCandidates.length,
+      finalElement: lastCandidate.selector,
+      candidates: syncCandidates
+    }
+  };
+})();
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Video-Candidate.js b/skills/webperf-core-web-vitals/scripts-readable/LCP-Video-Candidate.js
new file mode 100644
index 0000000..84d8ea4
--- /dev/null
+++ b/skills/webperf-core-web-vitals/scripts-readable/LCP-Video-Candidate.js
@@ -0,0 +1,145 @@
+(() => {
+  const lcpEntries = performance.getEntriesByType("largest-contentful-paint");
+  if (lcpEntries.length === 0) {
+    return {
+      script: "LCP-Video-Candidate",
+      status: "error",
+      error: "No LCP entries found"
+    };
+  }
+  const lcp = lcpEntries[lcpEntries.length - 1];
+  const element = lcp.element;
+  function valueToRating(ms) {
+    return ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";
+  }
+  function detectFormat(url) {
+    if (!url) return "unknown";
+    const path = url.toLowerCase().split("?")[0];
+    const ext = path.match(/\.(avif|webp|jxl|png|gif|jpg|jpeg|svg)(?:[?#]|$)/);
+    if (ext) return ext[1] === "jpeg" ? "jpg" : ext[1];
+    return "unknown";
+  }
+  function normalizeUrl(url) {
+    try {
+      return new URL(url, location.origin).href;
+    } catch {
+      return url;
+    }
+  }
+  const activationStart = (() => {
+    const nav = performance.getEntriesByType("navigation")[0];
+    return nav?.activationStart || 0;
+  })();
+  const lcpTime = Math.round(Math.max(0, lcp.startTime - activationStart));
+  if (!element || element.tagName !== "VIDEO") {
+    element && element.tagName.toLowerCase();
+    const rating = valueToRating(lcpTime);
+    if (lcp.url) void 0;
+    if (element) void 0;
+    return {
+      script: "LCP-Video-Candidate",
+      status: "ok",
+      metric: "LCP",
+      value: lcpTime,
+      unit: "ms",
+      rating: rating,
+      thresholds: {
+        good: 2500,
+        needsImprovement: 4000
+      },
+      details: {
+        isVideo: false
+      },
+      issues: []
+    };
+  }
+  const posterAttr = element.getAttribute("poster") || "";
+  const posterUrl = posterAttr ? normalizeUrl(posterAttr) : "";
+  const lcpUrl = lcp.url || "";
+  const rating = valueToRating(lcpTime);
+  const posterFormat = detectFormat(lcpUrl || posterUrl);
+  const isModernFormat = [ "avif", "webp", "jxl" ].includes(posterFormat);
+  const isCrossOrigin = lcp.renderTime === 0 && lcp.loadTime > 0;
+  const preloadLinks = Array.from(document.querySelectorAll('link[rel="preload"][as="image"]'));
+  const posterPreload = preloadLinks.find(link => {
+    const href = link.getAttribute("href");
+    if (!href) return false;
+    try {
+      return normalizeUrl(href) === posterUrl || normalizeUrl(href) === lcpUrl;
+    } catch {
+      return false;
+    }
+  }) ?? null;
+  const preload = element.getAttribute("preload");
+  const autoplay = element.hasAttribute("autoplay");
+  const muted = element.hasAttribute("muted") || element.muted;
+  const playsinline = element.hasAttribute("playsinline");
+  const issues = [];
+  if (!posterAttr) issues.push({
+    s: "error",
+    msg: "No poster attribute — the browser has no image to use as LCP candidate"
+  });
+  if (posterAttr && !posterPreload) issues.push({
+    s: "warning",
+    msg: 'No <link rel="preload" as="image"> for the poster — browser discovers it late'
+  }); else if (posterPreload && posterPreload.getAttribute("fetchpriority") !== "high") issues.push({
+    s: "info",
+    msg: 'Preload found but missing fetchpriority="high" — may be deprioritised'
+  });
+  if (posterAttr && !isModernFormat && posterFormat !== "unknown") issues.push({
+    s: "info",
+    msg: `Poster uses ${posterFormat} — AVIF or WebP would reduce file size and LCP load time`
+  });
+  if (isCrossOrigin) issues.push({
+    s: "info",
+    msg: "renderTime is 0 — poster is cross-origin and the server does not send Timing-Allow-Origin"
+  });
+  if (!autoplay && preload === "none") issues.push({
+    s: "warning",
+    msg: 'preload="none" on a non-autoplay video may delay poster image loading in some browsers'
+  });
+  if (posterPreload) {
+    posterPreload.getAttribute("fetchpriority");
+  } else {
+    if (posterAttr) void 0;
+  }
+  if (issues.length > 0) {
+    issues.filter(i => i.s === "error").length;
+    issues.filter(i => i.s === "warning").length;
+    issues.filter(i => i.s === "info").length;
+    issues.forEach(issue => {
+      issue.s === "error" || issue.s;
+    });
+  } else {
+  }
+  return {
+    script: "LCP-Video-Candidate",
+    status: "ok",
+    metric: "LCP",
+    value: lcpTime,
+    unit: "ms",
+    rating: rating,
+    thresholds: {
+      good: 2500,
+      needsImprovement: 4000
+    },
+    details: {
+      isVideo: true,
+      posterUrl: lcpUrl || posterUrl || null,
+      posterFormat: posterFormat,
+      posterPreloaded: !!posterPreload,
+      fetchpriorityOnPreload: posterPreload?.getAttribute("fetchpriority") ?? null,
+      isCrossOrigin: isCrossOrigin,
+      videoAttributes: {
+        autoplay: autoplay,
+        muted: muted,
+        playsinline: playsinline,
+        preload: preload
+      }
+    },
+    issues: issues.map(i => ({
+      severity: i.s === "error" ? "error" : i.s === "warning" ? "warning" : "info",
+      message: i.msg
+    }))
+  };
+})();
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP.js b/skills/webperf-core-web-vitals/scripts-readable/LCP.js
new file mode 100644
index 0000000..5816c73
--- /dev/null
+++ b/skills/webperf-core-web-vitals/scripts-readable/LCP.js
@@ -0,0 +1,91 @@
+(() => {
+  const valueToRating = ms => ms <= 2500 ? "good" : ms <= 4000 ? "needs-improvement" : "poor";
+  const RATING = {
+    good: {
+      icon: "🟢",
+      color: "#0CCE6A"
+    },
+    "needs-improvement": {
+      icon: "🟡",
+      color: "#FFA400"
+    },
+    poor: {
+      icon: "🔴",
+      color: "#FF4E42"
+    }
+  };
+  const getActivationStart = () => {
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    return navEntry?.activationStart || 0;
+  };
+  const observer = new PerformanceObserver(list => {
+    const entries = list.getEntries();
+    const lastEntry = entries[entries.length - 1];
+    if (!lastEntry) return;
+    const activationStart = getActivationStart();
+    const lcpTime = Math.max(0, lastEntry.startTime - activationStart);
+    const rating = valueToRating(lcpTime);
+    const {icon: icon, color: color} = RATING[rating];
+    const element = lastEntry.element;
+    if (element) {
+      let selector = element.tagName.toLowerCase();
+      if (element.id) selector = `#${element.id}`; else if (element.className && typeof element.className === "string") {
+        const classes = element.className.trim().split(/\s+/).slice(0, 2).join(".");
+        if (classes) selector = `${element.tagName.toLowerCase()}.${classes}`;
+      }
+      const tagName = element.tagName.toLowerCase();
+      if (tagName === "img") {
+        if (element.naturalWidth) void 0;
+      } else if (tagName === "video") {
+      } else if (window.getComputedStyle(element).backgroundImage !== "none") {
+      } else void 0;
+      if (lastEntry.size) void 0;
+      element.style.outline = "3px dashed lime";
+      element.style.outlineOffset = "2px";
+    }
+  });
+  observer.observe({
+    type: "largest-contentful-paint",
+    buffered: true
+  });
+  const lcpEntries = performance.getEntriesByType("largest-contentful-paint");
+  const lastLcpEntry = lcpEntries.at(-1);
+  if (!lastLcpEntry) return {
+    script: "LCP",
+    status: "error",
+    error: "No LCP entries yet"
+  };
+  const lcpActivationStart = getActivationStart();
+  const lcpValue = Math.round(Math.max(0, lastLcpEntry.startTime - lcpActivationStart));
+  const lcpRating = valueToRating(lcpValue);
+  const lcpEl = lastLcpEntry.element;
+  let lcpSelector = null;
+  let lcpType = null;
+  if (lcpEl) {
+    lcpSelector = lcpEl.tagName.toLowerCase();
+    if (lcpEl.id) lcpSelector = `#${lcpEl.id}`; else if (lcpEl.className && typeof lcpEl.className === "string") {
+      const classes = lcpEl.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) lcpSelector = `${lcpEl.tagName.toLowerCase()}.${classes}`;
+    }
+    const tag = lcpEl.tagName.toLowerCase();
+    lcpType = tag === "img" ? "Image" : tag === "video" ? "Video poster" : window.getComputedStyle(lcpEl).backgroundImage !== "none" ? "Background image" : tag === "h1" || tag === "p" ? "Text block" : tag;
+  }
+  return {
+    script: "LCP",
+    status: "ok",
+    metric: "LCP",
+    value: lcpValue,
+    unit: "ms",
+    rating: lcpRating,
+    thresholds: {
+      good: 2500,
+      needsImprovement: 4000
+    },
+    details: {
+      element: lcpSelector,
+      elementType: lcpType,
+      url: lastLcpEntry.url || null,
+      sizePixels: lastLcpEntry.size || null
+    }
+  };
+})();
diff --git a/skills/webperf-interaction/scripts-readable/Input-Latency-Breakdown.js b/skills/webperf-interaction/scripts-readable/Input-Latency-Breakdown.js
new file mode 100644
index 0000000..deb017d
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/Input-Latency-Breakdown.js
@@ -0,0 +1,108 @@
+(() => {
+  const valueToRating = score => score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";
+  const RATING_COLORS = {
+    good: "#0CCE6A",
+    "needs-improvement": "#FFA400",
+    poor: "#FF4E42"
+  };
+  const RATING_ICONS = {
+    good: "🟢",
+    "needs-improvement": "🟡",
+    poor: "🔴"
+  };
+  const byEventType = {};
+  const observer = new PerformanceObserver(list => {
+    const interactions = {};
+    for (const entry of list.getEntries().filter(e => e.interactionId)) {
+      interactions[entry.interactionId] = interactions[entry.interactionId] || [];
+      interactions[entry.interactionId].push(entry);
+    }
+    for (const group of Object.values(interactions)) {
+      const entry = group.reduce((prev, curr) => prev.duration >= curr.duration ? prev : curr);
+      const eventType = entry.name;
+      const inputDelay = entry.processingStart - entry.startTime;
+      const processingTime = entry.processingEnd - entry.processingStart;
+      const presentationDelay = Math.max(4, entry.startTime + entry.duration - entry.processingEnd);
+      if (!byEventType[eventType]) byEventType[eventType] = {
+        count: 0,
+        durations: [],
+        inputDelays: [],
+        processingTimes: [],
+        presentationDelays: []
+      };
+      const bucket = byEventType[eventType];
+      bucket.count++;
+      bucket.durations.push(entry.duration);
+      bucket.inputDelays.push(inputDelay);
+      bucket.processingTimes.push(processingTime);
+      bucket.presentationDelays.push(presentationDelay);
+    }
+  });
+  observer.observe({
+    type: "event",
+    durationThreshold: 0,
+    buffered: true
+  });
+  const p75 = arr => {
+    const sorted = [ ...arr ].sort((a, b) => a - b);
+    return sorted[Math.floor(sorted.length * 0.75)] ?? sorted[sorted.length - 1];
+  };
+  window.getInputLatencyBreakdown = () => {
+    const types = Object.keys(byEventType);
+    if (types.length === 0) {
+      return;
+    }
+    for (const eventType of types.sort()) {
+      const b = byEventType[eventType];
+      const p75Total = p75(b.durations);
+      const p75InputDelay = p75(b.inputDelays);
+      const p75Processing = p75(b.processingTimes);
+      const p75Presentation = p75(b.presentationDelays);
+      const p75Sum = p75InputDelay + p75Processing + p75Presentation;
+      const phases = [ {
+        name: "Input Delay",
+        value: p75InputDelay
+      }, {
+        name: "Processing",
+        value: p75Processing
+      }, {
+        name: "Presentation",
+        value: p75Presentation
+      } ];
+      phases.reduce((a, b) => a.value > b.value ? a : b);
+      const rating = valueToRating(p75Total);
+      RATING_ICONS[rating];
+      RATING_COLORS[rating];
+      const barWidth = 36;
+      "█".repeat(Math.max(1, Math.round(p75InputDelay / p75Sum * barWidth)));
+      "▓".repeat(Math.max(1, Math.round(p75Processing / p75Sum * barWidth)));
+      "░".repeat(Math.max(1, Math.round(p75Presentation / p75Sum * barWidth)));
+      if (rating !== "good") void 0;
+    }
+    const worstType = types.reduce((a, b) => p75(byEventType[a].durations) >= p75(byEventType[b].durations) ? a : b);
+    const worstP75 = p75(byEventType[worstType].durations);
+    if (valueToRating(worstP75) !== "good") void 0;
+    const typeSummary = {};
+    for (const [type, b] of Object.entries(byEventType)) typeSummary[type] = {
+      count: b.count,
+      p75Ms: Math.round(p75(b.durations)),
+      inputDelayMs: Math.round(p75(b.inputDelays)),
+      processingMs: Math.round(p75(b.processingTimes)),
+      presentationMs: Math.round(p75(b.presentationDelays))
+    };
+    return {
+      script: "Input-Latency-Breakdown",
+      status: "ok",
+      count: types.length,
+      details: {
+        eventTypes: typeSummary
+      }
+    };
+  };
+  return {
+    script: "Input-Latency-Breakdown",
+    status: "tracking",
+    message: "Tracking input latency by event type. Interact with the page then call getInputLatencyBreakdown().",
+    getDataFn: "getInputLatencyBreakdown"
+  };
+})();
diff --git a/skills/webperf-interaction/scripts-readable/Interactions.js b/skills/webperf-interaction/scripts-readable/Interactions.js
new file mode 100644
index 0000000..a30bfdf
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/Interactions.js
@@ -0,0 +1,222 @@
+(() => {
+  const formatMs = (ms) => `${Math.round(ms)}ms`;
+
+  // INP thresholds
+  const valueToRating = (score) =>
+    score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";
+
+  const RATING_COLORS = {
+    good: "#0CCE6A",
+    "needs-improvement": "#FFA400",
+    poor: "#FF4E42",
+  };
+
+  const RATING_ICONS = {
+    good: "🟢",
+    "needs-improvement": "🟡",
+    poor: "🔴",
+  };
+
+  // Track all interactions for summary
+  const allInteractions = [];
+
+  const observer = new PerformanceObserver((list) => {
+    const interactions = {};
+
+    for (const entry of list
+      .getEntries()
+      .filter((entry) => entry.interactionId)) {
+      interactions[entry.interactionId] = interactions[entry.interactionId] || [];
+      interactions[entry.interactionId].push(entry);
+    }
+
+    for (const interaction of Object.values(interactions)) {
+      const entry = interaction.reduce((prev, curr) =>
+        prev.duration >= curr.duration ? prev : curr
+      );
+
+      const value = entry.duration;
+      const rating = valueToRating(value);
+      const icon = RATING_ICONS[rating];
+      const color = RATING_COLORS[rating];
+
+      // Store for summary
+      allInteractions.push({
+        duration: value,
+        rating,
+        target: entry.target,
+        type: entry.name,
+      });
+
+      // Calculate sub-parts
+      const inputDelay = entry.processingStart - entry.startTime;
+      const processingTime = entry.processingEnd - entry.processingStart;
+      const presentationDelay = Math.max(
+        4,
+        entry.startTime + entry.duration - entry.processingEnd
+      );
+      const total = inputDelay + processingTime + presentationDelay;
+
+      // Find longest sub-part
+      const subParts = [
+        { name: "Input Delay", value: inputDelay },
+        { name: "Processing Time", value: processingTime },
+        { name: "Presentation Delay", value: presentationDelay },
+      ];
+      const longest = subParts.reduce((a, b) => (a.value > b.value ? a : b));
+
+      console.groupCollapsed(
+        `%c${icon} Interaction: ${formatMs(value)} (${rating})`,
+        `font-weight: bold; color: ${color};`
+      );
+
+      // Target info
+      console.log("%cTarget:", "font-weight: bold;", entry.target);
+      console.log(`   Event type: ${entry.name}`);
+
+      // Sub-parts breakdown
+      console.log("");
+      console.log("%cSub-parts breakdown:", "font-weight: bold;");
+
+      const tableData = subParts.map((part) => {
+        const percent = ((part.value / total) * 100).toFixed(0);
+        const isLongest = part.name === longest.name;
+        return {
+          "Sub-part": isLongest ? `⚠️ ${part.name}` : part.name,
+          Duration: formatMs(part.value),
+          "%": `${percent}%`,
+        };
+      });
+
+      console.table(tableData);
+
+      // Visual bar
+      const barWidth = 40;
+      const inputBar = "█".repeat(Math.round((inputDelay / total) * barWidth));
+      const procBar = "▓".repeat(Math.round((processingTime / total) * barWidth));
+      const presBar = "░".repeat(Math.round((presentationDelay / total) * barWidth));
+      console.log(`   ${inputBar}${procBar}${presBar}`);
+      console.log("   █ Input  ▓ Processing  ░ Presentation");
+
+      // Recommendation if slow
+      if (rating !== "good") {
+        console.log("");
+        console.log("%c💡 Optimization hint:", "font-weight: bold; color: #3b82f6;");
+        if (longest.name === "Input Delay") {
+          console.log("   Break up long tasks blocking the main thread");
+          console.log("   Use requestIdleCallback or setTimeout for non-critical work");
+        } else if (longest.name === "Processing Time") {
+          console.log("   Optimize event handlers, reduce JavaScript complexity");
+          console.log("   Consider debouncing or using web workers");
+        } else {
+          console.log("   Reduce DOM size or complexity of updates");
+          console.log("   Avoid forced synchronous layouts");
+        }
+      }
+
+      console.groupEnd();
+    }
+  });
+
+  observer.observe({
+    type: "event",
+    durationThreshold: 0,
+    buffered: true,
+  });
+
+  // Summary function
+  window.getInteractionSummary = () => {
+    if (allInteractions.length === 0) {
+      console.log("%c📊 No interactions recorded yet.", "font-weight: bold;");
+      console.log("   Interact with the page (click, type, etc.) and call this again.");
+      return { script: "Interactions", status: "error", error: "No interactions recorded yet", count: 0 };
+    }
+
+    console.group("%c📊 Interaction Summary", "font-weight: bold; font-size: 14px;");
+
+    const durations = allInteractions.map((i) => i.duration);
+    const worst = Math.max(...durations);
+    const avg = durations.reduce((a, b) => a + b, 0) / durations.length;
+    const p75 = durations.sort((a, b) => a - b)[Math.floor(durations.length * 0.75)];
+
+    const worstRating = valueToRating(worst);
+    const p75Rating = valueToRating(p75);
+
+    console.log("");
+    console.log("%cStatistics:", "font-weight: bold;");
+    console.log(`   Total interactions: ${allInteractions.length}`);
+    console.log(
+      `   Worst: %c${formatMs(worst)} (${worstRating})`,
+      `color: ${RATING_COLORS[worstRating]};`
+    );
+    console.log(
+      `   P75 (INP): %c${formatMs(p75)} (${p75Rating})`,
+      `color: ${RATING_COLORS[p75Rating]};`
+    );
+    console.log(`   Average: ${formatMs(avg)}`);
+
+    // Rating breakdown
+    const good = allInteractions.filter((i) => i.rating === "good").length;
+    const needsImprovement = allInteractions.filter(
+      (i) => i.rating === "needs-improvement"
+    ).length;
+    const poor = allInteractions.filter((i) => i.rating === "poor").length;
+
+    console.log("");
+    console.log("%cBy rating:", "font-weight: bold;");
+    console.log(`   🟢 Good (≤200ms): ${good}`);
+    console.log(`   🟡 Needs Improvement (≤500ms): ${needsImprovement}`);
+    console.log(`   🔴 Poor (>500ms): ${poor}`);
+
+    // Slow interactions
+    const slowInteractions = allInteractions.filter((i) => i.rating !== "good");
+    if (slowInteractions.length > 0) {
+      console.log("");
+      console.log("%c⚠️ Slow interactions:", "font-weight: bold; color: #ef4444;");
+      slowInteractions.forEach((i, idx) => {
+        const icon = RATING_ICONS[i.rating];
+        console.log(`   ${idx + 1}. ${icon} ${i.type} - ${formatMs(i.duration)}`, i.target);
+      });
+    }
+
+    const durations2 = allInteractions.map((i) => i.duration);
+    const worst2 = Math.max(...durations2);
+    const avg2 = Math.round(durations2.reduce((a, b) => a + b, 0) / durations2.length);
+    const p75 = Math.round(durations2.sort((a, b) => a - b)[Math.floor(durations2.length * 0.75)]);
+    const byRating = {
+      good: allInteractions.filter((i) => i.rating === "good").length,
+      "needs-improvement": allInteractions.filter((i) => i.rating === "needs-improvement").length,
+      poor: allInteractions.filter((i) => i.rating === "poor").length,
+    };
+    console.groupEnd();
+    return {
+      script: "Interactions",
+      status: "ok",
+      count: allInteractions.length,
+      details: {
+        totalInteractions: allInteractions.length,
+        worstMs: Math.round(worst2),
+        avgMs: avg2,
+        p75Ms: p75,
+        byRating,
+      },
+      items: allInteractions.map((i) => ({
+        type: i.type,
+        durationMs: Math.round(i.duration),
+        rating: i.rating,
+      })),
+    };
+  };
+
+  console.log("%c👆 Interaction Tracking Active", "font-weight: bold; font-size: 14px;");
+  console.log("   Interact with the page to see interaction details.");
+  console.log("   Call %cgetInteractionSummary()%c for a summary.", "font-family: monospace; background: #f3f4f6; padding: 2px 4px;", "");
+
+  return {
+    script: "Interactions",
+    status: "tracking",
+    message: "Tracking interactions. Interact with the page then call getInteractionSummary() for results.",
+    getDataFn: "getInteractionSummary",
+  };
+})();
+
diff --git a/skills/webperf-interaction/scripts-readable/Layout-Shift-Loading-and-Interaction.js b/skills/webperf-interaction/scripts-readable/Layout-Shift-Loading-and-Interaction.js
new file mode 100644
index 0000000..9250056
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/Layout-Shift-Loading-and-Interaction.js
@@ -0,0 +1,163 @@
+(() => {
+  const valueToRating = score => score <= 0.1 ? "good" : score <= 0.25 ? "needs-improvement" : "poor";
+  const RATING_COLORS = {
+    good: "#0CCE6A",
+    "needs-improvement": "#FFA400",
+    poor: "#FF4E42"
+  };
+  const RATING_ICONS = {
+    good: "🟢",
+    "needs-improvement": "🟡",
+    poor: "🔴"
+  };
+  let totalCLS = 0;
+  const allShifts = [];
+  const elementShifts = new Map;
+  const getElementSelector = element => {
+    if (!element) return "(unknown)";
+    if (element.id) return `#${element.id}`;
+    if (element.className && typeof element.className === "string") {
+      const classes = element.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) return `${element.tagName.toLowerCase()}.${classes}`;
+    }
+    return element.tagName?.toLowerCase() || "(unknown)";
+  };
+  const observer = new PerformanceObserver(list => {
+    for (const entry of list.getEntries()) {
+      const countedForCLS = !entry.hadRecentInput;
+      if (countedForCLS) totalCLS += entry.value;
+      const sources = entry.sources || [];
+      const elements = sources.map(source => ({
+        element: source.node,
+        selector: getElementSelector(source.node),
+        previousRect: source.previousRect,
+        currentRect: source.currentRect
+      }));
+      elements.forEach(el => {
+        if (!elementShifts.has(el.selector)) elementShifts.set(el.selector, {
+          count: 0,
+          totalShift: 0,
+          element: el.element
+        });
+        const data = elementShifts.get(el.selector);
+        data.count++;
+        data.totalShift += entry.value;
+      });
+      const shift = {
+        value: entry.value,
+        countedForCLS: countedForCLS,
+        elements: elements,
+        time: entry.startTime,
+        entry: entry
+      };
+      allShifts.push(shift);
+      if (entry.value > 0.001) {
+        const rating = valueToRating(totalCLS);
+        countedForCLS && RATING_ICONS[rating];
+        RATING_COLORS[rating];
+        if (elements.length > 0) {
+          elements.forEach((el, i) => {
+            if (el.previousRect && el.currentRect) {
+              const dx = el.currentRect.x - el.previousRect.x;
+              const dy = el.currentRect.y - el.previousRect.y;
+              const dw = el.currentRect.width - el.previousRect.width;
+              const dh = el.currentRect.height - el.previousRect.height;
+              const changes = [];
+              if (Math.abs(dx) > 0) changes.push(`x: ${dx > 0 ? "+" : ""}${Math.round(dx)}px`);
+              if (Math.abs(dy) > 0) changes.push(`y: ${dy > 0 ? "+" : ""}${Math.round(dy)}px`);
+              if (Math.abs(dw) > 0) changes.push(`width: ${dw > 0 ? "+" : ""}${Math.round(dw)}px`);
+              if (Math.abs(dh) > 0) changes.push(`height: ${dh > 0 ? "+" : ""}${Math.round(dh)}px`);
+              if (changes.length > 0) void 0;
+            }
+          });
+        } else void 0;
+      }
+    }
+  });
+  observer.observe({
+    type: "layout-shift",
+    buffered: true
+  });
+  window.getLayoutShiftSummary = () => {
+    const rating = valueToRating(totalCLS);
+    RATING_ICONS[rating];
+    RATING_COLORS[rating];
+    const countedShifts = allShifts.filter(s => s.countedForCLS);
+    const excludedShifts = allShifts.filter(s => !s.countedForCLS);
+    if (countedShifts.length > 0) {
+      Math.max(...countedShifts.map(s => s.value));
+    }
+    if (elementShifts.size > 0) {
+      const sortedElements = Array.from(elementShifts.entries()).sort((a, b) => b[1].totalShift - a[1].totalShift).slice(0, 5);
+      sortedElements.map(([selector, data]) => ({
+        Element: selector,
+        "Shift Count": data.count,
+        "Total Impact": data.totalShift.toFixed(4)
+      }));
+      sortedElements.forEach(([selector, data], i) => {
+      });
+    }
+    if (countedShifts.length > 0) {
+      const significant = countedShifts.filter(s => s.value > 0.001);
+      if (significant.length > 0) {
+        significant.map(s => ({
+          "Time (ms)": Math.round(s.time),
+          Value: s.value.toFixed(4),
+          Elements: s.elements.map(e => e.selector).join(", ") || "(unknown)"
+        }));
+      } else void 0;
+    }
+    if (rating !== "good") {
+    }
+    const topElementsData = Array.from(elementShifts.entries()).sort((a, b) => b[1].totalShift - a[1].totalShift).slice(0, 5).map(([selector, data]) => ({
+      selector: selector,
+      shiftCount: data.count,
+      totalImpact: Math.round(data.totalShift * 10000) / 10000
+    }));
+    return {
+      script: "Layout-Shift-Loading-and-Interaction",
+      status: "ok",
+      metric: "CLS",
+      value: Math.round(totalCLS * 10000) / 10000,
+      unit: "score",
+      rating: rating,
+      thresholds: {
+        good: 0.1,
+        needsImprovement: 0.25
+      },
+      details: {
+        currentCLS: Math.round(totalCLS * 10000) / 10000,
+        shiftCount: allShifts.length,
+        countedShifts: countedShifts.length,
+        excludedShifts: excludedShifts.length,
+        topElements: topElementsData
+      }
+    };
+  };
+  const rating = valueToRating(totalCLS);
+  RATING_ICONS[rating];
+  const clsBufferedSync = performance.getEntriesByType("layout-shift").reduce((sum, e) => !e.hadRecentInput ? sum + e.value : sum, 0);
+  const countedSync = performance.getEntriesByType("layout-shift").filter(e => !e.hadRecentInput).length;
+  const excludedSync = performance.getEntriesByType("layout-shift").filter(e => e.hadRecentInput).length;
+  const clsRatingSync = valueToRating(clsBufferedSync);
+  return {
+    script: "Layout-Shift-Loading-and-Interaction",
+    status: "tracking",
+    metric: "CLS",
+    value: Math.round(clsBufferedSync * 10000) / 10000,
+    unit: "score",
+    rating: clsRatingSync,
+    thresholds: {
+      good: 0.1,
+      needsImprovement: 0.25
+    },
+    details: {
+      currentCLS: Math.round(clsBufferedSync * 10000) / 10000,
+      shiftCount: countedSync + excludedSync,
+      countedShifts: countedSync,
+      excludedShifts: excludedSync
+    },
+    message: "Layout shift tracking active. Call getLayoutShiftSummary() for full element attribution.",
+    getDataFn: "getLayoutShiftSummary"
+  };
+})();
diff --git a/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Helpers.js b/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Helpers.js
new file mode 100644
index 0000000..0c8b91a
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Helpers.js
@@ -0,0 +1,229 @@
+(() => {
+  "use strict";
+  if (!("PerformanceObserver" in window) || !PerformanceObserver.supportedEntryTypes.includes("long-animation-frame")) {
+    return {
+      script: "Long-Animation-Frames-Helpers",
+      status: "unsupported",
+      error: "Long Animation Frames API not supported. Requires Chrome 123+"
+    };
+  }
+  const capturedFrames = [];
+  const getSeverity = duration => {
+    if (duration > 200) return {
+      level: "critical",
+      icon: "🔴"
+    };
+    if (duration > 150) return {
+      level: "high",
+      icon: "🟠"
+    };
+    if (duration > 100) return {
+      level: "medium",
+      icon: "🟡"
+    };
+    return {
+      level: "low",
+      icon: "🟢"
+    };
+  };
+  const observer = new PerformanceObserver(list => {
+    for (const entry of list.getEntries()) {
+      const frameData = {
+        startTime: entry.startTime,
+        duration: entry.duration,
+        renderStart: entry.renderStart,
+        styleAndLayoutStart: entry.styleAndLayoutStart,
+        firstUIEventTimestamp: entry.firstUIEventTimestamp,
+        blockingDuration: entry.blockingDuration,
+        scripts: entry.scripts.map(s => ({
+          sourceURL: s.sourceURL || "",
+          sourceFunctionName: s.sourceFunctionName || "(anonymous)",
+          invoker: s.invoker || "",
+          invokerType: s.invokerType || "",
+          duration: s.duration,
+          executionStart: s.executionStart,
+          forcedStyleAndLayoutDuration: s.forcedStyleAndLayoutDuration || 0
+        }))
+      };
+      capturedFrames.push(frameData);
+    }
+  });
+  try {
+    observer.observe({
+      type: "long-animation-frame",
+      buffered: true
+    });
+  } catch (e) {
+    return {
+      script: "Long-Animation-Frames-Helpers",
+      status: "error",
+      error: e.message
+    };
+  }
+  window.loafHelpers = {
+    summary() {
+      if (capturedFrames.length === 0) {
+        return;
+      }
+      capturedFrames.reduce((sum, f) => sum + f.duration, 0);
+      capturedFrames.reduce((sum, f) => sum + f.blockingDuration, 0);
+      capturedFrames.length;
+      Math.max(...capturedFrames.map(f => f.duration));
+      capturedFrames.filter(f => f.duration > 200).length, capturedFrames.filter(f => f.duration > 150 && f.duration <= 200).length, 
+      capturedFrames.filter(f => f.duration > 100 && f.duration <= 150).length, capturedFrames.filter(f => f.duration <= 100).length;
+    },
+    topScripts(n = 10) {
+      if (capturedFrames.length === 0) {
+        return;
+      }
+      const allScripts = capturedFrames.flatMap(f => f.scripts);
+      if (allScripts.length === 0) {
+        return;
+      }
+      const scriptStats = new Map;
+      allScripts.forEach(s => {
+        const key = `${s.sourceURL}|${s.sourceFunctionName}`;
+        if (!scriptStats.has(key)) scriptStats.set(key, {
+          sourceURL: s.sourceURL,
+          functionName: s.sourceFunctionName,
+          totalDuration: 0,
+          count: 0,
+          maxDuration: 0,
+          totalForcedLayout: 0
+        });
+        const stats = scriptStats.get(key);
+        stats.totalDuration += s.duration;
+        stats.count++;
+        stats.maxDuration = Math.max(stats.maxDuration, s.duration);
+        stats.totalForcedLayout += s.forcedStyleAndLayoutDuration;
+      });
+      const sorted = Array.from(scriptStats.values()).sort((a, b) => b.totalDuration - a.totalDuration).slice(0, n);
+      sorted.map(s => {
+        let path = s.sourceURL;
+        try {
+          path = new URL(s.sourceURL || location.href).pathname;
+          if (path.length > 40) path = "..." + path.slice(-37);
+        } catch {}
+        return {
+          Script: path || "(inline)",
+          Function: s.functionName.length > 25 ? s.functionName.slice(0, 22) + "..." : s.functionName,
+          Count: s.count,
+          Total: `${s.totalDuration.toFixed(0)}ms`,
+          Max: `${s.maxDuration.toFixed(0)}ms`,
+          "Forced S&L": s.totalForcedLayout > 0 ? `${s.totalForcedLayout.toFixed(0)}ms` : "-"
+        };
+      });
+      return sorted;
+    },
+    filter(options = {}) {
+      if (capturedFrames.length === 0) {
+        return [];
+      }
+      let filtered = capturedFrames;
+      if (options.minDuration) filtered = filtered.filter(f => f.duration >= options.minDuration);
+      if (options.maxDuration) filtered = filtered.filter(f => f.duration <= options.maxDuration);
+      if (filtered.length > 0) {
+        filtered.map(f => {
+          const sev = getSeverity(f.duration);
+          return {
+            "": sev.icon,
+            Start: `${f.startTime.toFixed(0)}ms`,
+            Duration: `${f.duration.toFixed(0)}ms`,
+            Blocking: `${f.blockingDuration.toFixed(0)}ms`,
+            Scripts: f.scripts.length
+          };
+        });
+      }
+      return filtered;
+    },
+    findByURL(search) {
+      if (capturedFrames.length === 0) {
+        return [];
+      }
+      const matches = capturedFrames.filter(f => f.scripts.some(s => s.sourceURL.toLowerCase().includes(search.toLowerCase())));
+      if (matches.length > 0) {
+        matches.map(f => {
+          const matchingScript = f.scripts.find(s => s.sourceURL.toLowerCase().includes(search.toLowerCase()));
+          let scriptPath = matchingScript.sourceURL;
+          try {
+            scriptPath = new URL(scriptPath).pathname;
+            if (scriptPath.length > 35) scriptPath = "..." + scriptPath.slice(-32);
+          } catch {}
+          return {
+            "Frame Start": `${f.startTime.toFixed(0)}ms`,
+            "Frame Duration": `${f.duration.toFixed(0)}ms`,
+            Script: scriptPath,
+            "Script Duration": `${matchingScript.duration.toFixed(0)}ms`
+          };
+        });
+      }
+      return matches;
+    },
+    percentiles(pcts = [ 50, 75, 95, 99 ]) {
+      if (capturedFrames.length === 0) {
+        return {};
+      }
+      const durations = capturedFrames.map(f => f.duration).sort((a, b) => a - b);
+      const result = {};
+      pcts.forEach(p => {
+        const index = Math.ceil(p / 100 * durations.length) - 1;
+        const safeIndex = Math.max(0, Math.min(index, durations.length - 1));
+        result[`p${p}`] = durations[safeIndex];
+      });
+      Object.entries(result).forEach(([key, value]) => {
+        getSeverity(value);
+      });
+      return result;
+    },
+    exportJSON() {
+      if (capturedFrames.length === 0) {
+        return;
+      }
+      const data = JSON.stringify(capturedFrames, null, 2);
+      const blob = new Blob([ data ], {
+        type: "application/json"
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `loaf-data-${(new Date).toISOString().slice(0, 10)}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    },
+    exportCSV() {
+      if (capturedFrames.length === 0) {
+        return;
+      }
+      const rows = [ [ "Frame Start", "Duration", "Blocking", "Script URL", "Function", "Script Duration", "Forced S&L" ] ];
+      capturedFrames.forEach(f => {
+        if (f.scripts.length === 0) rows.push([ f.startTime.toFixed(2), f.duration.toFixed(2), f.blockingDuration.toFixed(2), "", "", "", "" ]); else f.scripts.forEach(s => {
+          rows.push([ f.startTime.toFixed(2), f.duration.toFixed(2), f.blockingDuration.toFixed(2), s.sourceURL, s.sourceFunctionName, s.duration.toFixed(2), s.forcedStyleAndLayoutDuration.toFixed(2) ]);
+        });
+      });
+      const csv = rows.map(row => row.map(cell => `"${cell}"`).join(",")).join("\n");
+      const blob = new Blob([ csv ], {
+        type: "text/csv"
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `loaf-data-${(new Date).toISOString().slice(0, 10)}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    },
+    getRawData() {
+      return capturedFrames;
+    },
+    clear() {
+      capturedFrames.length = 0;
+    },
+    help() {
+    }
+  };
+  return {
+    script: "Long-Animation-Frames-Helpers",
+    status: "tracking",
+    message: "LoAF Helpers loaded. Use loafHelpers.summary(), loafHelpers.topScripts(), etc. Call loafHelpers.getRawData() to get raw frame data.",
+    getDataFn: "loafHelpers.getRawData"
+  };
+})();
diff --git a/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Script-Attribution.js b/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Script-Attribution.js
new file mode 100644
index 0000000..bebd6b3
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Script-Attribution.js
@@ -0,0 +1,133 @@
+(() => {
+  if (!PerformanceObserver.supportedEntryTypes?.includes("long-animation-frame")) {
+    return {
+      script: "Long-Animation-Frames-Script-Attribution",
+      status: "unsupported",
+      error: "long-animation-frame not supported. Chrome 116+ required."
+    };
+  }
+  const frames = performance.getEntriesByType("long-animation-frame").map(entry => ({
+    duration: entry.duration,
+    blockingDuration: entry.blockingDuration || 0,
+    scripts: (entry.scripts || []).map(s => ({
+      sourceURL: s.sourceURL || "unknown",
+      sourceFunctionName: s.sourceFunctionName || "anonymous",
+      invoker: s.invoker || "unknown",
+      duration: s.duration || 0
+    }))
+  }));
+  if (frames.length === 0) {
+    return {
+      script: "Long-Animation-Frames-Script-Attribution",
+      status: "ok",
+      details: {
+        frameCount: 0,
+        totalBlockingMs: 0,
+        byCategory: {}
+      },
+      items: []
+    };
+  }
+  const allScripts = frames.flatMap(f => f.scripts);
+  const totalBlocking = frames.reduce((sum, f) => sum + f.blockingDuration, 0);
+  frames.reduce((sum, f) => sum + f.duration, 0);
+  const categorize = url => {
+    const u = url.toLowerCase();
+    const origin = location.origin.toLowerCase();
+    if (u === "" || u === "unknown") return "unknown";
+    if ([ "react", "vue", "angular", "svelte", "framework", "chunk", "webpack", "vite" ].some(fw => u.includes(fw))) return "framework";
+    if ([ "google-analytics", "gtag", "gtm", "analytics", "facebook", "twitter", "ads", "cdn", "unpkg", "jsdelivr", "segment", "amplitude" ].some(tp => u.includes(tp))) return "third-party";
+    if (u.startsWith("chrome-extension://") || u.startsWith("moz-extension://")) return "extension";
+    if (u.startsWith("http") && !u.includes(origin.replace(/^https?:\/\//, ""))) return "third-party";
+    return "first-party";
+  };
+  const byCategory = {};
+  allScripts.forEach(script => {
+    const cat = categorize(script.sourceURL);
+    if (!byCategory[cat]) byCategory[cat] = {
+      durationMs: 0,
+      count: 0
+    };
+    byCategory[cat].durationMs += script.duration;
+    byCategory[cat].count++;
+  });
+  const byFile = {};
+  allScripts.forEach(script => {
+    const file = script.sourceURL.split("/").pop() || "unknown";
+    if (!byFile[file]) byFile[file] = {
+      duration: 0,
+      count: 0,
+      category: categorize(script.sourceURL),
+      functions: []
+    };
+    byFile[file].duration += script.duration;
+    byFile[file].count++;
+    byFile[file].functions.push({
+      name: script.sourceFunctionName,
+      invoker: script.invoker,
+      duration: script.duration
+    });
+  });
+  const topFiles = Object.entries(byFile).sort((a, b) => b[1].duration - a[1].duration).slice(0, 10);
+  const totalScript = Object.values(byCategory).reduce((sum, cat) => sum + cat.durationMs, 0);
+  const categories = [ {
+    name: "Your Code",
+    key: "first-party",
+    icon: "🔵",
+    color: "#3b82f6"
+  }, {
+    name: "Framework",
+    key: "framework",
+    icon: "🟣",
+    color: "#8b5cf6"
+  }, {
+    name: "Third-Party",
+    key: "third-party",
+    icon: "🟠",
+    color: "#f59e0b"
+  }, {
+    name: "Extensions",
+    key: "extension",
+    icon: "🟤",
+    color: "#92400e"
+  }, {
+    name: "Unknown",
+    key: "unknown",
+    icon: "⚫",
+    color: "#6b7280"
+  } ];
+  categories.forEach(({name: name, key: key, icon: icon, color: color}) => {
+    const data = byCategory[key];
+    if (data?.durationMs > 0) {
+      const pct = totalScript > 0 ? data.durationMs / totalScript * 100 : 0;
+      const barLen = Math.round(pct / 2);
+      "█".repeat(barLen), "░".repeat(Math.max(0, 50 - barLen));
+    }
+  });
+  topFiles.forEach(([file, data], idx) => {
+    totalScript > 0 && data.duration;
+    categories.find(c => c.key === data.category);
+    const topFns = data.functions.sort((a, b) => b.duration - a.duration).slice(0, 3);
+    if (topFns.length > 0) {
+      topFns.forEach((fn, i) => {});
+    }
+  });
+  return {
+    script: "Long-Animation-Frames-Script-Attribution",
+    status: "ok",
+    details: {
+      frameCount: frames.length,
+      totalBlockingMs: Math.round(totalBlocking),
+      byCategory: Object.fromEntries(Object.entries(byCategory).map(([k, v]) => [ k, {
+        durationMs: Math.round(v.durationMs),
+        count: v.count
+      } ]))
+    },
+    items: topFiles.map(([file, data]) => ({
+      file: file,
+      category: data.category,
+      durationMs: Math.round(data.duration),
+      count: data.count
+    }))
+  };
+})();
diff --git a/skills/webperf-interaction/scripts-readable/Long-Animation-Frames.js b/skills/webperf-interaction/scripts-readable/Long-Animation-Frames.js
new file mode 100644
index 0000000..06847dc
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/Long-Animation-Frames.js
@@ -0,0 +1,169 @@
+(() => {
+  const formatMs = ms => `${Math.round(ms)}ms`;
+  const valueToRating = blockingDuration => blockingDuration === 0 ? "good" : blockingDuration <= 100 ? "needs-improvement" : "poor";
+  const RATING_COLORS = {
+    good: "#0CCE6A",
+    "needs-improvement": "#FFA400",
+    poor: "#FF4E42"
+  };
+  const RATING_ICONS = {
+    good: "🟢",
+    "needs-improvement": "🟡",
+    poor: "🔴"
+  };
+  const allLoAFs = [];
+  const allEvents = [];
+  const getScriptSummary = script => {
+    const invoker = script.invoker || script.name || "(anonymous)";
+    const source = script.sourceURL ? script.sourceURL.split("/").pop()?.split("?")[0] || script.sourceURL : "";
+    return {
+      invoker: invoker,
+      source: source,
+      type: script.invokerType || "unknown"
+    };
+  };
+  const processLoAF = entry => {
+    const endTime = entry.startTime + entry.duration;
+    const workDuration = entry.renderStart ? entry.renderStart - entry.startTime : entry.duration;
+    const renderDuration = entry.renderStart ? endTime - entry.renderStart : 0;
+    const styleAndLayoutDuration = entry.styleAndLayoutStart ? endTime - entry.styleAndLayoutStart : 0;
+    const totalForcedStyleAndLayout = entry.scripts.reduce((sum, script) => sum + (script.forcedStyleAndLayoutDuration || 0), 0);
+    const scripts = entry.scripts.map(script => ({
+      ...getScriptSummary(script),
+      duration: Math.round(script.duration),
+      execDuration: Math.round(script.executionStart ? script.startTime + script.duration - script.executionStart : script.duration),
+      forcedStyleAndLayout: Math.round(script.forcedStyleAndLayoutDuration || 0),
+      startTime: Math.round(script.startTime)
+    }));
+    return {
+      startTime: Math.round(entry.startTime),
+      duration: Math.round(entry.duration),
+      blockingDuration: Math.round(entry.blockingDuration),
+      workDuration: Math.round(workDuration),
+      renderDuration: Math.round(renderDuration),
+      styleAndLayoutDuration: Math.round(styleAndLayoutDuration),
+      totalForcedStyleAndLayout: Math.round(totalForcedStyleAndLayout),
+      scripts: scripts,
+      entry: entry
+    };
+  };
+  const overlap = (e1, e2) => e1.startTime < e2.startTime + e2.duration && e2.startTime < e1.startTime + e1.duration;
+  const loafObserver = new PerformanceObserver(list => {
+    for (const entry of list.getEntries()) {
+      const processed = processLoAF(entry);
+      allLoAFs.push(processed);
+      if (entry.blockingDuration > 0) {
+        const rating = valueToRating(entry.blockingDuration);
+        RATING_ICONS[rating];
+        RATING_COLORS[rating];
+        formatMs(processed.workDuration), formatMs(processed.renderDuration), formatMs(processed.styleAndLayoutDuration);
+        const total = processed.duration;
+        const barWidth = 40;
+        "█".repeat(Math.round(processed.workDuration / total * barWidth));
+        "░".repeat(Math.round(processed.renderDuration / total * barWidth));
+        if (processed.totalForcedStyleAndLayout > 0) {
+        }
+        if (processed.scripts.length > 0) {
+          processed.scripts.map(s => ({
+            Invoker: s.invoker.length > 40 ? s.invoker.slice(0, 37) + "..." : s.invoker,
+            Type: s.type,
+            Duration: formatMs(s.duration),
+            "Forced S&L": s.forcedStyleAndLayout > 0 ? formatMs(s.forcedStyleAndLayout) : "-",
+            Source: s.source.length > 25 ? "..." + s.source.slice(-22) : s.source
+          }));
+        }
+        const overlappingEvents = allEvents.filter(e => overlap(e, entry));
+        if (overlappingEvents.length > 0) {
+          overlappingEvents.forEach(e => {
+          });
+        }
+      }
+    }
+  });
+  const eventObserver = new PerformanceObserver(list => {
+    for (const entry of list.getEntries()) if (entry.interactionId) allEvents.push(entry);
+  });
+  loafObserver.observe({
+    type: "long-animation-frame",
+    buffered: true
+  });
+  eventObserver.observe({
+    type: "event",
+    buffered: true
+  });
+  window.getLoAFSummary = () => {
+    if (allLoAFs.length === 0) {
+      return;
+    }
+    const blocking = allLoAFs.filter(l => l.blockingDuration > 0);
+    const totalBlocking = blocking.reduce((sum, l) => sum + l.blockingDuration, 0);
+    const worstBlocking = Math.max(...allLoAFs.map(l => l.blockingDuration));
+    allLoAFs.reduce((sum, l) => sum + l.duration, 0), allLoAFs.length;
+    const scriptStats = new Map;
+    allLoAFs.forEach(loaf => {
+      loaf.scripts.forEach(script => {
+        const key = `${script.invoker}|${script.source}`;
+        if (!scriptStats.has(key)) scriptStats.set(key, {
+          invoker: script.invoker,
+          source: script.source,
+          count: 0,
+          totalDuration: 0,
+          totalForcedSL: 0
+        });
+        const stats = scriptStats.get(key);
+        stats.count++;
+        stats.totalDuration += script.duration;
+        stats.totalForcedSL += script.forcedStyleAndLayout;
+      });
+    });
+    if (scriptStats.size > 0) {
+      const topScripts = Array.from(scriptStats.values()).sort((a, b) => b.totalDuration - a.totalDuration).slice(0, 10);
+      topScripts.map(s => ({
+        Invoker: s.invoker.length > 35 ? s.invoker.slice(0, 32) + "..." : s.invoker,
+        Count: s.count,
+        "Total Duration": formatMs(s.totalDuration),
+        "Forced S&L": s.totalForcedSL > 0 ? formatMs(s.totalForcedSL) : "-",
+        Source: s.source.length > 20 ? "..." + s.source.slice(-17) : s.source
+      }));
+    }
+    const forcedSLTotal = allLoAFs.reduce((sum, l) => sum + l.totalForcedStyleAndLayout, 0);
+    if (forcedSLTotal > 0) {
+    }
+    if (worstBlocking > 50) {
+    }
+    return {
+      script: "Long-Animation-Frames",
+      status: "ok",
+      count: allLoAFs.length,
+      details: {
+        totalLoAFs: allLoAFs.length,
+        withBlockingTime: blocking.length,
+        totalBlockingTimeMs: Math.round(totalBlocking),
+        worstBlockingMs: Math.round(worstBlocking),
+        topScripts: Array.from(scriptStats.values()).sort((a, b) => b.totalDuration - a.totalDuration).slice(0, 5).map(s => ({
+          invoker: s.invoker,
+          source: s.source,
+          totalDurationMs: Math.round(s.totalDuration),
+          count: s.count
+        }))
+      }
+    };
+  };
+  const loafBuffered = performance.getEntriesByType("long-animation-frame");
+  const blockingLoafs = loafBuffered.filter(e => e.blockingDuration > 0);
+  const totalBlockingSync = blockingLoafs.reduce((sum, e) => sum + e.blockingDuration, 0);
+  const worstBlockingSync = loafBuffered.length > 0 ? Math.max(...loafBuffered.map(e => e.blockingDuration)) : 0;
+  return {
+    script: "Long-Animation-Frames",
+    status: "tracking",
+    count: loafBuffered.length,
+    details: {
+      totalLoAFs: loafBuffered.length,
+      withBlockingTime: blockingLoafs.length,
+      totalBlockingTimeMs: Math.round(totalBlockingSync),
+      worstBlockingMs: Math.round(worstBlockingSync)
+    },
+    message: "Tracking long animation frames. Call getLoAFSummary() for full script attribution.",
+    getDataFn: "getLoAFSummary"
+  };
+})();
diff --git a/skills/webperf-interaction/scripts-readable/LongTask.js b/skills/webperf-interaction/scripts-readable/LongTask.js
new file mode 100644
index 0000000..424ead2
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/LongTask.js
@@ -0,0 +1,125 @@
+(() => {
+  const formatMs = ms => `${Math.round(ms)}ms`;
+  const getSeverity = duration => {
+    if (duration > 250) return {
+      level: "critical",
+      icon: "🔴",
+      color: "#ef4444"
+    };
+    if (duration > 150) return {
+      level: "high",
+      icon: "🟠",
+      color: "#f97316"
+    };
+    if (duration > 100) return {
+      level: "medium",
+      icon: "🟡",
+      color: "#eab308"
+    };
+    return {
+      level: "low",
+      icon: "🟢",
+      color: "#22c55e"
+    };
+  };
+  const allTasks = [];
+  let totalBlockingTime = 0;
+  try {
+    const observer = new PerformanceObserver(list => {
+      for (const entry of list.getEntries()) {
+        const duration = entry.duration;
+        const blockingTime = Math.max(0, duration - 50);
+        totalBlockingTime += blockingTime;
+        const sev = getSeverity(duration);
+        const task = {
+          startTime: entry.startTime,
+          duration: duration,
+          blockingTime: blockingTime,
+          severity: sev.level,
+          attribution: entry.attribution?.[0]?.containerType || "unknown",
+          containerId: entry.attribution?.[0]?.containerId || "",
+          containerName: entry.attribution?.[0]?.containerName || ""
+        };
+        allTasks.push(task);
+        if (entry.attribution && entry.attribution.length > 0) {
+          entry.attribution.forEach(attr => {
+            if (attr.containerName) void 0;
+            if (attr.containerId) void 0;
+            if (attr.containerSrc) void 0;
+          });
+        }
+      }
+    });
+    observer.observe({
+      type: "longtask",
+      buffered: true
+    });
+    window.getLongTaskSummary = () => {
+      if (allTasks.length === 0) {
+        return;
+      }
+      const durations = allTasks.map(t => t.duration);
+      const worst = Math.max(...durations);
+      const avg = durations.reduce((a, b) => a + b, 0) / durations.length;
+      getSeverity(worst);
+      const bySeverity = {
+        critical: allTasks.filter(t => t.severity === "critical").length,
+        high: allTasks.filter(t => t.severity === "high").length,
+        medium: allTasks.filter(t => t.severity === "medium").length,
+        low: allTasks.filter(t => t.severity === "low").length
+      };
+      if (allTasks.length > 0) {
+        allTasks.sort((a, b) => b.duration - a.duration).slice(0, 10).map(t => {
+          const sev = getSeverity(t.duration);
+          return {
+            "": sev.icon,
+            Start: formatMs(t.startTime),
+            Duration: formatMs(t.duration),
+            Blocking: formatMs(t.blockingTime),
+            Container: t.attribution
+          };
+        });
+      }
+      if (totalBlockingTime > 300) {
+      }
+      return {
+        script: "LongTask",
+        status: "ok",
+        count: allTasks.length,
+        details: {
+          totalBlockingTimeMs: Math.round(totalBlockingTime),
+          worstTaskMs: Math.round(worst),
+          avgDurationMs: Math.round(avg),
+          bySeverity: bySeverity
+        }
+      };
+    };
+    const longtaskBuffered = performance.getEntriesByType("longtask");
+    const totalBlockingSync = longtaskBuffered.reduce((sum, t) => sum + Math.max(0, t.duration - 50), 0);
+    const worstTaskSync = longtaskBuffered.length > 0 ? Math.max(...longtaskBuffered.map(t => t.duration)) : 0;
+    const bySeveritySync = {
+      critical: longtaskBuffered.filter(t => t.duration > 250).length,
+      high: longtaskBuffered.filter(t => t.duration > 150 && t.duration <= 250).length,
+      medium: longtaskBuffered.filter(t => t.duration > 100 && t.duration <= 150).length,
+      low: longtaskBuffered.filter(t => t.duration >= 50 && t.duration <= 100).length
+    };
+    return {
+      script: "LongTask",
+      status: "tracking",
+      count: longtaskBuffered.length,
+      details: {
+        totalBlockingTimeMs: Math.round(totalBlockingSync),
+        worstTaskMs: Math.round(worstTaskSync),
+        bySeverity: bySeveritySync
+      },
+      message: "Tracking long tasks. Call getLongTaskSummary() for statistics.",
+      getDataFn: "getLongTaskSummary"
+    };
+  } catch (e) {
+    return {
+      script: "LongTask",
+      status: "unsupported",
+      error: e.message
+    };
+  }
+})();
diff --git a/skills/webperf-interaction/scripts-readable/Scroll-Performance.js b/skills/webperf-interaction/scripts-readable/Scroll-Performance.js
new file mode 100644
index 0000000..661517c
--- /dev/null
+++ b/skills/webperf-interaction/scripts-readable/Scroll-Performance.js
@@ -0,0 +1,183 @@
+(() => {
+  const TARGET_FRAME_MS = 1000 / 60;
+  const DROP_THRESHOLD_MS = TARGET_FRAME_MS * 1.5;
+  const RATING = {
+    good: {
+      icon: "🟢",
+      color: "#0CCE6A",
+      label: "Good"
+    },
+    "needs-improvement": {
+      icon: "🟡",
+      color: "#FFA400",
+      label: "Needs Improvement"
+    },
+    poor: {
+      icon: "🔴",
+      color: "#FF4E42",
+      label: "Poor"
+    }
+  };
+  const fpsRating = fps => fps >= 55 ? "good" : fps >= 40 ? "needs-improvement" : "poor";
+  const nonPassiveListeners = [];
+  const SCROLL_EVENT_TYPES = new Set([ "scroll", "wheel", "touchstart", "touchmove", "touchend" ]);
+  const _origAddEventListener = EventTarget.prototype.addEventListener;
+  EventTarget.prototype.addEventListener = function(type, listener, options) {
+    if (SCROLL_EVENT_TYPES.has(type)) {
+      const isPassive = options === true ? false : typeof options === "object" && options !== null ? options.passive === true : false;
+      if (!isPassive) {
+        const entry = {
+          type: type,
+          element: this.tagName || this.constructor?.name || "unknown",
+          id: this.id || "",
+          passive: false
+        };
+        nonPassiveListeners.push(entry);
+      }
+    }
+    return _origAddEventListener.call(this, type, listener, options);
+  };
+  const sessions = [];
+  let currentSession = null;
+  let rafId = null;
+  let lastFrameTime = null;
+  let endTimer = null;
+  const trackFrame = now => {
+    if (!currentSession) return;
+    if (lastFrameTime !== null) {
+      const frameTime = now - lastFrameTime;
+      currentSession.frames.push(frameTime);
+      if (frameTime > DROP_THRESHOLD_MS) currentSession.drops++;
+    }
+    lastFrameTime = now;
+    rafId = requestAnimationFrame(trackFrame);
+  };
+  const endSession = () => {
+    if (!currentSession) return;
+    cancelAnimationFrame(rafId);
+    const {frames: frames, drops: drops} = currentSession;
+    if (frames.length < 2) {
+      currentSession = null;
+      return;
+    }
+    const avgFrameTime = frames.reduce((a, b) => a + b, 0) / frames.length;
+    const avgFps = 1000 / avgFrameTime;
+    const minFps = 1000 / Math.max(...frames);
+    const dropRate = drops / frames.length * 100;
+    const rating = fpsRating(avgFps);
+    RATING[rating];
+    const session = {
+      avgFps: avgFps,
+      minFps: minFps,
+      frames: frames.length,
+      drops: drops,
+      dropRate: dropRate,
+      rating: rating
+    };
+    sessions.push(session);
+    if (drops > 0) {
+      Math.max(...frames);
+    }
+    currentSession = null;
+    lastFrameTime = null;
+  };
+  window.addEventListener("scroll", () => {
+    if (!currentSession) {
+      currentSession = {
+        frames: [],
+        drops: 0
+      };
+      lastFrameTime = null;
+      rafId = requestAnimationFrame(trackFrame);
+    }
+    clearTimeout(endTimer);
+    endTimer = setTimeout(endSession, 200);
+  }, {
+    passive: true
+  });
+  const auditScrollCSS = () => {
+    const results = {
+      smoothScrollElements: [],
+      willChangeElements: [],
+      contentVisibilityElements: [],
+      overscrollElements: []
+    };
+    document.querySelectorAll("*").forEach(el => {
+      const cs = getComputedStyle(el);
+      const label = el.tagName.toLowerCase() + (el.id ? `#${el.id}` : el.className ? `.${String(el.className).trim().split(/\s+/)[0]}` : "");
+      if (cs.scrollBehavior === "smooth") results.smoothScrollElements.push(label);
+      if (cs.willChange && cs.willChange !== "auto") results.willChangeElements.push({
+        element: label,
+        value: cs.willChange
+      });
+      if (cs.contentVisibility && cs.contentVisibility !== "visible") results.contentVisibilityElements.push({
+        element: label,
+        value: cs.contentVisibility
+      });
+      if (cs.overscrollBehavior && cs.overscrollBehavior !== "auto") results.overscrollElements.push({
+        element: label,
+        value: cs.overscrollBehavior
+      });
+    });
+    return results;
+  };
+  window.getScrollSummary = () => {
+    if (sessions.length === 0) void 0; else {
+      const allFps = sessions.map(s => s.avgFps);
+      allFps.reduce((a, b) => a + b, 0), allFps.length;
+      Math.min(...allFps);
+      sessions.reduce((a, s) => a + s.drops, 0);
+    }
+    if (nonPassiveListeners.length === 0) void 0; else {
+    }
+    const css = auditScrollCSS();
+    if (css.contentVisibilityElements.length > 0) void 0; else void 0;
+    if (css.smoothScrollElements.length > 0) {
+    }
+    if (css.willChangeElements.length > 0) {
+    }
+    if (css.overscrollElements.length > 0) {
+    }
+    const hasJank = sessions.some(s => s.rating !== "good");
+    const hasNonPassive = nonPassiveListeners.length > 0;
+    if (hasJank || hasNonPassive) {
+      if (hasNonPassive) void 0;
+      if (hasJank) {
+      }
+    }
+    const cssAuditResult = auditScrollCSS();
+    return {
+      script: "Scroll-Performance",
+      status: "ok",
+      details: {
+        nonPassiveListeners: nonPassiveListeners.length,
+        cssAudit: {
+          smoothScrollElements: cssAuditResult.smoothScrollElements.length,
+          willChangeElements: cssAuditResult.willChangeElements.length,
+          contentVisibilityElements: cssAuditResult.contentVisibilityElements.length
+        },
+        sessionCount: sessions.length,
+        ...sessions.length > 0 ? {
+          avgFps: Math.round(sessions.reduce((a, s) => a + s.avgFps, 0) / sessions.length),
+          worstSessionFps: Math.round(Math.min(...sessions.map(s => s.avgFps))),
+          totalDrops: sessions.reduce((a, s) => a + s.drops, 0)
+        } : {}
+      }
+    };
+  };
+  const cssSnapshot = auditScrollCSS();
+  return {
+    script: "Scroll-Performance",
+    status: "tracking",
+    details: {
+      nonPassiveListeners: nonPassiveListeners.length,
+      cssAudit: {
+        smoothScrollElements: cssSnapshot.smoothScrollElements.length,
+        willChangeElements: cssSnapshot.willChangeElements.length,
+        contentVisibilityElements: cssSnapshot.contentVisibilityElements.length
+      }
+    },
+    message: "Scroll performance tracking active. Scroll the page then call getScrollSummary() for FPS data.",
+    getDataFn: "getScrollSummary"
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Back-Forward-Cache.js b/skills/webperf-loading/scripts-readable/Back-Forward-Cache.js
new file mode 100644
index 0000000..68465f7
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Back-Forward-Cache.js
@@ -0,0 +1,233 @@
+(() => {
+  const results = {
+    supported: "PerformanceNavigationTiming" in window,
+    wasRestored: false,
+    eligibility: null,
+    blockingReasons: [],
+    recommendations: []
+  };
+  const checkRestoration = () => {
+    window.addEventListener("pageshow", event => {
+      if (event.persisted) {
+        results.wasRestored = true;
+      }
+    });
+    if (results.supported) {
+      const navEntry = performance.getEntriesByType("navigation")[0];
+      if (navEntry && navEntry.type === "back_forward") if (navEntry.activationStart > 0) results.wasRestored = true;
+    }
+  };
+  const testEligibility = () => {
+    const issues = [];
+    const recs = [];
+    const hasUnload = window.onunload !== null || window.onbeforeunload !== null;
+    if (hasUnload) {
+      issues.push({
+        reason: "unload/beforeunload handler detected",
+        severity: "high",
+        description: "These handlers block bfcache"
+      });
+      recs.push("Remove unload/beforeunload handlers. Use pagehide or visibilitychange instead.");
+    }
+    const meta = document.querySelector('meta[http-equiv="Cache-Control"]');
+    if (meta && meta.content.includes("no-store")) {
+      issues.push({
+        reason: "Cache-Control: no-store in meta tag",
+        severity: "high",
+        description: "Prevents page from being cached"
+      });
+      recs.push("Remove Cache-Control: no-store or change to no-cache.");
+    }
+    if (window.indexedDB) {
+      const hasIndexedDB = performance.getEntriesByType("resource").some(r => r.name.includes("indexedDB"));
+      if (hasIndexedDB) {
+        issues.push({
+          reason: "IndexedDB may be in use",
+          severity: "medium",
+          description: "Open IndexedDB transactions block bfcache"
+        });
+        recs.push("Close IndexedDB connections before page hide.");
+      }
+    }
+    if (window.BroadcastChannel) issues.push({
+      reason: "BroadcastChannel API available (check if in use)",
+      severity: "low",
+      description: "Open BroadcastChannel connections may block bfcache"
+    });
+    const iframes = document.querySelectorAll("iframe");
+    if (iframes.length > 0) {
+      issues.push({
+        reason: `${iframes.length} iframe(s) detected`,
+        severity: "medium",
+        description: "Iframes with bfcache blockers will block parent page"
+      });
+      recs.push("Ensure iframes are also bfcache compatible.");
+    }
+    if ("serviceWorker" in navigator && navigator.serviceWorker.controller) issues.push({
+      reason: "Service Worker active",
+      severity: "info",
+      description: "Service Workers with fetch handlers are generally OK, but check for ongoing operations"
+    });
+    if (window.WebSocket) {
+      issues.push({
+        reason: "WebSocket API available (check if connections are open)",
+        severity: "medium",
+        description: "Open WebSocket connections block bfcache"
+      });
+      recs.push("Close WebSocket connections before page hide.");
+    }
+    const resources = performance.getEntriesByType("resource");
+    const recent = resources.filter(r => r.responseEnd === 0 || performance.now() - r.responseEnd < 100);
+    if (recent.length > 0) {
+      issues.push({
+        reason: `${recent.length} recent/ongoing network requests`,
+        severity: "low",
+        description: "Ongoing requests may prevent bfcache"
+      });
+      recs.push("Ensure requests complete or are aborted on page hide.");
+    }
+    results.blockingReasons = issues;
+    results.recommendations = recs;
+    const highSeverity = issues.filter(i => i.severity === "high").length;
+    const mediumSeverity = issues.filter(i => i.severity === "medium").length;
+    if (highSeverity > 0) results.eligibility = "blocked"; else if (mediumSeverity > 1) results.eligibility = "likely-blocked"; else if (issues.length > 0) results.eligibility = "potentially-eligible"; else results.eligibility = "likely-eligible";
+    return results.eligibility;
+  };
+  const displayResults = () => {
+    const statusIcons = {
+      "likely-eligible": "🟢",
+      "potentially-eligible": "🟡",
+      "likely-blocked": "🟠",
+      blocked: "🔴"
+    };
+    const statusColors = {
+      "likely-eligible": "#22c55e",
+      "potentially-eligible": "#f59e0b",
+      "likely-blocked": "#fb923c",
+      blocked: "#ef4444"
+    };
+    const statusText = {
+      "likely-eligible": "Likely Eligible",
+      "potentially-eligible": "Potentially Eligible",
+      "likely-blocked": "Likely Blocked",
+      blocked: "Blocked"
+    };
+    statusIcons[results.eligibility];
+    statusColors[results.eligibility];
+    statusText[results.eligibility];
+    if (results.wasRestored) {
+    } else {
+    }
+    if (results.supported) {
+      const navEntry = performance.getEntriesByType("navigation")[0];
+      if (navEntry) {
+        if (navEntry.type === "back_forward") if (navEntry.duration < 10) void 0; else void 0;
+      }
+    }
+    if (results.blockingReasons.length > 0) {
+      results.blockingReasons.map(issue => ({
+        Severity: issue.severity.toUpperCase(),
+        Issue: issue.reason,
+        Impact: issue.description
+      }));
+    } else {
+    }
+    if (results.recommendations.length > 0) {
+      results.recommendations.forEach((rec, idx) => {
+      });
+    }
+    return results;
+  };
+  const checkNotRestoredReasons = () => {
+    if (!("PerformanceNavigationTiming" in window)) return null;
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    if (!navEntry || !navEntry.notRestoredReasons) return null;
+    const reasons = navEntry.notRestoredReasons;
+    if (reasons.blocked === true) void 0; else void 0;
+    if (reasons.url) void 0;
+    if (reasons.id) void 0;
+    if (reasons.name) void 0;
+    if (reasons.src) void 0;
+    if (reasons.reasons && reasons.reasons.length > 0) {
+      reasons.reasons.forEach((reasonDetail, idx) => {
+        const reasonName = reasonDetail.reason || "Unknown reason";
+        reasonDetail.source;
+        const reasonExplanations = {
+          WebSocket: "Open WebSocket connections prevent bfcache. Close them on pagehide event.",
+          "unload-listener": "unload event listeners block bfcache. Use pagehide or visibilitychange instead.",
+          "response-cache-control-no-store": "Cache-Control: no-store header prevents caching. Change to no-cache.",
+          IndexedDB: "Open IndexedDB transactions block bfcache. Close connections on pagehide.",
+          BroadcastChannel: "Open BroadcastChannel prevents bfcache. Close it on pagehide.",
+          "dedicated-worker": "Dedicated workers can block bfcache. Terminate them on pagehide."
+        };
+        if (reasonExplanations[reasonName]) void 0;
+      });
+    }
+    if (reasons.children && reasons.children.length > 0) {
+      reasons.children.forEach((child, idx) => {
+        if (child.blocked) void 0; else void 0;
+        if (child.id) void 0;
+        if (child.name) void 0;
+        if (child.reasons && child.reasons.length > 0) {
+          child.reasons.forEach(reasonDetail => {
+            if (reasonDetail.source) void 0;
+          });
+        }
+      });
+    }
+    if (reasons.reasons && reasons.reasons.length > 0) {
+      reasons.reasons.map(r => ({
+        Reason: r.reason || "Unknown",
+        Source: r.source || "N/A"
+      }));
+    }
+    return reasons;
+  };
+  const checkExecutionTiming = () => {
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    if (navEntry && navEntry.type === "back_forward") {
+    }
+  };
+  checkRestoration();
+  testEligibility();
+  setTimeout(() => {
+    checkExecutionTiming();
+    displayResults();
+    const notRestoredReasons = checkNotRestoredReasons();
+    if (!notRestoredReasons) {
+    }
+  }, 100);
+  window.checkBfcache = () => {
+    testEligibility();
+    displayResults();
+    checkNotRestoredReasons();
+    return {
+      script: "Back-Forward-Cache",
+      status: "ok",
+      details: {
+        eligibility: results.eligibility,
+        wasRestored: results.wasRestored,
+        supported: results.supported
+      },
+      issues: results.blockingReasons.map(i => ({
+        severity: i.severity === "high" ? "error" : i.severity === "medium" ? "warning" : "info",
+        message: i.reason
+      }))
+    };
+  };
+  return {
+    script: "Back-Forward-Cache",
+    status: "ok",
+    details: {
+      eligibility: results.eligibility,
+      wasRestored: results.wasRestored,
+      supported: results.supported
+    },
+    issues: results.blockingReasons.map(i => ({
+      severity: i.severity === "high" ? "error" : i.severity === "medium" ? "warning" : "info",
+      message: i.reason
+    })),
+    message: "bfcache analysis running. Call checkBfcache() to re-run analysis.",
+    getDataFn: "checkBfcache"
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/CSS-Media-Queries-Analysis.js b/skills/webperf-loading/scripts-readable/CSS-Media-Queries-Analysis.js
new file mode 100644
index 0000000..84051d7
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/CSS-Media-Queries-Analysis.js
@@ -0,0 +1,249 @@
+async function analyzeCSSMediaQueries(minWidth = 768) {
+  const stylesheets = [ ...document.styleSheets ];
+  const inlineMediaQueries = [];
+  const fileMediaQueries = [];
+  let inlineTotalClasses = 0;
+  let inlineTotalProperties = 0;
+  let filesTotalClasses = 0;
+  let filesTotalProperties = 0;
+  let inlineTotalBytes = 0;
+  let filesTotalBytes = 0;
+  let corsBlockedCount = 0;
+  function isBiggerThanBreakpoint(mediaText) {
+    if (!mediaText) return false;
+    const minWidthMatch = mediaText.match(/min-width:\s*(\d+)(px|em|rem)/i);
+    if (minWidthMatch) {
+      const value = parseInt(minWidthMatch[1]);
+      const unit = minWidthMatch[2].toLowerCase();
+      if (unit === "px" && value > minWidth) return true;
+      if (unit === "em" && value > minWidth / 16) return true;
+      if (unit === "rem" && value > minWidth / 16) return true;
+    }
+    const maxWidthMatch = mediaText.match(/max-width:\s*(\d+)(px|em|rem)/i);
+    if (maxWidthMatch && !minWidthMatch) return false;
+    return false;
+  }
+  function countClassesAndProperties(cssText) {
+    const classMatches = cssText.match(/\.[a-zA-Z0-9_-]+/g) || [];
+    const propertyMatches = cssText.match(/[a-z-]+\s*:/g) || [];
+    return {
+      classes: classMatches.length,
+      properties: propertyMatches.length
+    };
+  }
+  function getByteSize(text) {
+    return new Blob([ text ]).size;
+  }
+  function formatBytes(bytes) {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = [ "Bytes", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+  function parseMediaQueriesFromCSS(cssText, source, isInline) {
+    const mediaRegex = /@media\s*([^{]+)\{((?:[^{}]|\{[^{}]*\})*)\}/g;
+    let match;
+    while ((match = mediaRegex.exec(cssText)) !== null) {
+      const mediaText = match[1].trim();
+      const mediaContent = match[2];
+      if (isBiggerThanBreakpoint(mediaText)) {
+        const counts = countClassesAndProperties(mediaContent);
+        const byteSize = getByteSize(match[0]);
+        const mediaQueryData = {
+          source: source,
+          mediaQuery: mediaText,
+          classes: counts.classes,
+          properties: counts.properties,
+          bytes: byteSize,
+          bytesFormatted: formatBytes(byteSize)
+        };
+        if (isInline) {
+          inlineMediaQueries.push(mediaQueryData);
+          inlineTotalClasses += counts.classes;
+          inlineTotalProperties += counts.properties;
+          inlineTotalBytes += byteSize;
+        } else {
+          fileMediaQueries.push(mediaQueryData);
+          filesTotalClasses += counts.classes;
+          filesTotalProperties += counts.properties;
+          filesTotalBytes += byteSize;
+        }
+      }
+    }
+  }
+  for (let sheetIndex = 0; sheetIndex < stylesheets.length; sheetIndex++) {
+    const sheet = stylesheets[sheetIndex];
+    const isInline = !sheet.href;
+    const source = sheet.href || `<style> tag #${sheetIndex}`;
+    try {
+      const rules = sheet.cssRules || sheet.rules;
+      if (rules) [ ...rules ].forEach(rule => {
+        if (rule.type === CSSRule.MEDIA_RULE) {
+          const mediaText = rule.media.mediaText;
+          if (isBiggerThanBreakpoint(mediaText)) {
+            const cssText = rule.cssText;
+            const counts = countClassesAndProperties(cssText);
+            const byteSize = getByteSize(cssText);
+            const mediaQueryData = {
+              source: source,
+              mediaQuery: mediaText,
+              classes: counts.classes,
+              properties: counts.properties,
+              bytes: byteSize,
+              bytesFormatted: formatBytes(byteSize)
+            };
+            if (isInline) {
+              inlineMediaQueries.push(mediaQueryData);
+              inlineTotalClasses += counts.classes;
+              inlineTotalProperties += counts.properties;
+              inlineTotalBytes += byteSize;
+            } else {
+              fileMediaQueries.push(mediaQueryData);
+              filesTotalClasses += counts.classes;
+              filesTotalProperties += counts.properties;
+              filesTotalBytes += byteSize;
+            }
+          }
+        }
+      });
+    } catch (e) {
+      if (sheet.href) try {
+        const response = await fetch(sheet.href);
+        const cssText = await response.text();
+        parseMediaQueriesFromCSS(cssText, sheet.href, false);
+      } catch (fetchError) {
+        corsBlockedCount++;
+      }
+    }
+  }
+  const totalBytes = inlineTotalBytes + filesTotalBytes;
+  if (inlineMediaQueries.length === 0) void 0;
+  if (fileMediaQueries.length === 0) void 0;
+  if (corsBlockedCount > 0) {
+  }
+  return {
+    summary: {
+      total: {
+        mediaQueries: inlineMediaQueries.length + fileMediaQueries.length,
+        classes: inlineTotalClasses + filesTotalClasses,
+        properties: inlineTotalProperties + filesTotalProperties,
+        bytes: totalBytes,
+        bytesFormatted: formatBytes(totalBytes)
+      },
+      inline: {
+        mediaQueries: inlineMediaQueries.length,
+        classes: inlineTotalClasses,
+        properties: inlineTotalProperties,
+        bytes: inlineTotalBytes,
+        bytesFormatted: formatBytes(inlineTotalBytes)
+      },
+      files: {
+        mediaQueries: fileMediaQueries.length,
+        classes: filesTotalClasses,
+        properties: filesTotalProperties,
+        bytes: filesTotalBytes,
+        bytesFormatted: formatBytes(filesTotalBytes)
+      },
+      corsBlocked: corsBlockedCount
+    },
+    details: {
+      inline: inlineMediaQueries,
+      files: fileMediaQueries
+    }
+  };
+}
+
+async function analyzeCSSPerformanceImpact(minWidth = 768) {
+  const mediaQueryResults = await analyzeCSSMediaQueries(minWidth);
+  const unnecessaryBytes = mediaQueryResults.summary.total.bytes;
+  if (unnecessaryBytes === 0 && mediaQueryResults.summary.corsBlocked > 0) {
+    return null;
+  }
+  if (unnecessaryBytes === 0) {
+    return null;
+  }
+  const deviceProfiles = {
+    "High-end (Pixel 7, iPhone 14)": {
+      cssParsingSpeed: 1.5,
+      cssSelectorMatchingMultiplier: 1,
+      networkSpeed: 10,
+      description: "Top 25% devices"
+    },
+    "Mid-range (Moto G Power, iPhone SE)": {
+      cssParsingSpeed: 0.8,
+      cssSelectorMatchingMultiplier: 1.8,
+      networkSpeed: 5,
+      description: "Median mobile device"
+    },
+    "Low-end (Moto E, older devices)": {
+      cssParsingSpeed: 0.3,
+      cssSelectorMatchingMultiplier: 3.5,
+      networkSpeed: 2,
+      description: "Bottom 25% devices"
+    }
+  };
+  const totalClasses = mediaQueryResults.summary.total.classes;
+  const totalProperties = mediaQueryResults.summary.total.properties;
+  Object.entries(deviceProfiles).forEach(([deviceName, profile]) => {
+    const downloadTimeMs = unnecessaryBytes * 8 / (profile.networkSpeed * 1000);
+    const parsingTimeMs = unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed * 1000;
+    const cssomConstructionMs = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;
+    profile.cssSelectorMatchingMultiplier;
+    profile.cssSelectorMatchingMultiplier;
+    const totalBlockingTime = downloadTimeMs + parsingTimeMs + cssomConstructionMs;
+    Math.max(0, totalBlockingTime - 50);
+  });
+  const midRangeProfile = deviceProfiles["Mid-range (Moto G Power, iPhone SE)"];
+  const midRangeDownload = unnecessaryBytes * 8 / (midRangeProfile.networkSpeed * 1000);
+  const midRangeParsing = unnecessaryBytes / (1024 * 1024) / midRangeProfile.cssParsingSpeed * 1000;
+  const midRangeCSSOM = totalProperties * 0.01 * midRangeProfile.cssSelectorMatchingMultiplier;
+  const midRangeTotalBlocking = midRangeDownload + midRangeParsing + midRangeCSSOM;
+  mediaQueryResults.summary.total.mediaQueries;
+  if (mediaQueryResults.summary.corsBlocked > 0) {
+  }
+  return {
+    unnecessaryBytes: unnecessaryBytes,
+    unnecessaryCss: mediaQueryResults.summary.total.bytesFormatted,
+    totalClasses: totalClasses,
+    totalProperties: totalProperties,
+    corsBlockedCount: mediaQueryResults.summary.corsBlocked,
+    deviceImpact: Object.entries(deviceProfiles).reduce((acc, [name, profile]) => {
+      const download = unnecessaryBytes * 8 / (profile.networkSpeed * 1000);
+      const parsing = unnecessaryBytes / (1024 * 1024) / profile.cssParsingSpeed * 1000;
+      const cssom = totalProperties * 0.01 * profile.cssSelectorMatchingMultiplier;
+      const totalBlocking = download + parsing + cssom;
+      const runtime = (totalClasses * 0.005 + totalProperties * 0.002) * profile.cssSelectorMatchingMultiplier;
+      acc[name] = {
+        renderBlockingTimeMs: totalBlocking,
+        runtimeOverheadMs: runtime,
+        fcpImpactMs: totalBlocking * 0.6,
+        lcpImpactMs: totalBlocking * 0.4,
+        inpOverheadMs: runtime
+      };
+      return acc;
+    }, {}),
+    estimatedConversionLift: (midRangeTotalBlocking * 0.6 / 100).toFixed(2) + "%"
+  };
+}
+
+(async () => {
+  const result = await analyzeCSSMediaQueries();
+  if (!result) return {
+    script: "CSS-Media-Queries-Analysis",
+    status: "error",
+    error: "No analyzable CSS found (CORS blocked or no desktop media queries)"
+  };
+  return {
+    script: "CSS-Media-Queries-Analysis",
+    status: "ok",
+    count: result.summary.total.mediaQueries,
+    details: {
+      total: result.summary.total,
+      inline: result.summary.inline,
+      files: result.summary.files,
+      corsBlockedCount: result.summary.corsBlocked
+    },
+    items: [ ...result.details.inline, ...result.details.files ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Client-Side-Redirect-Detection.js b/skills/webperf-loading/scripts-readable/Client-Side-Redirect-Detection.js
new file mode 100644
index 0000000..56d16d2
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Client-Side-Redirect-Detection.js
@@ -0,0 +1,133 @@
+(async () => {
+  const navEntries = performance.getEntriesByType("navigation");
+  if (navEntries.length === 0) {
+    return {
+      script: "Client-Side-Redirect-Detection",
+      status: "unsupported",
+      error: "Navigation Timing not available"
+    };
+  }
+  const navEntry = navEntries[0];
+  const currentURL = new URL(window.location.href);
+  const resources = performance.getEntriesByType("resource");
+  const documentNavigations = resources.filter(r => {
+    if (r.initiatorType !== "navigation") return false;
+    try {
+      const resourceURL = new URL(r.name);
+      return resourceURL.origin === currentURL.origin;
+    } catch {
+      return false;
+    }
+  });
+  const serverRedirects = navEntry.redirectCount || 0;
+  const redirectTime = navEntry.redirectEnd - navEntry.redirectStart;
+  const hasSPARouter = !!window.history?.state;
+  const historyLength = window.history.length;
+  const referrer = document.referrer ? new URL(document.referrer) : null;
+  const sameOrigin = referrer && referrer.origin === currentURL.origin;
+  const referrerPath = referrer?.pathname || "";
+  const currentPath = currentURL.pathname;
+  const hasRedirectParam = currentURL.searchParams.has("redirect") || currentURL.searchParams.has("from") || currentURL.searchParams.has("origin");
+  if (referrer) {
+  } else void 0;
+  if (serverRedirects > 0) {
+  } else void 0;
+  let hasClientRedirect = false;
+  const indicators = [];
+  if (sameOrigin && referrerPath !== currentPath && referrerPath !== "") {
+    hasClientRedirect = true;
+    indicators.push({
+      type: "Same-origin navigation",
+      from: referrerPath,
+      to: currentPath,
+      severity: "warning"
+    });
+  }
+  if (documentNavigations.length > 0) {
+    hasClientRedirect = true;
+    documentNavigations.forEach(nav => {
+      indicators.push({
+        type: "Document navigation",
+        url: nav.name,
+        duration: nav.duration.toFixed(1) + "ms",
+        severity: "error"
+      });
+    });
+  }
+  if (hasRedirectParam) indicators.push({
+    type: "Redirect parameter in URL",
+    params: Array.from(currentURL.searchParams.entries()).filter(([key]) => key.toLowerCase().includes("redirect") || key.toLowerCase().includes("from") || key.toLowerCase().includes("origin")).map(([key, val]) => `${key}=${val}`).join(", "),
+    severity: "info"
+  });
+  if (hasSPARouter && historyLength > 1) indicators.push({
+    type: "SPA router detected",
+    historyLength: historyLength,
+    state: JSON.stringify(window.history.state)?.slice(0, 100) || "{}",
+    severity: "info"
+  });
+  navEntry.loadEventEnd, navEntry.startTime;
+  const domContentLoaded = navEntry.domContentLoadedEventEnd - navEntry.startTime;
+  const responseSize = navEntry.transferSize || navEntry.encodedBodySize || 0;
+  if (sameOrigin && domContentLoaded < 500 && responseSize < 10000) indicators.push({
+    type: "Fast minimal-content navigation",
+    duration: domContentLoaded.toFixed(1) + "ms",
+    size: (responseSize / 1024).toFixed(1) + " KB",
+    note: "Small page that loads quickly - possible redirect page",
+    severity: "warning"
+  });
+  if (indicators.length === 0) void 0; else {
+    indicators.forEach((indicator, index) => {
+      indicator.severity === "error" || indicator.severity;
+      Object.entries(indicator).forEach(([key, value]) => {
+        if (key !== "type" && key !== "severity") void 0;
+      });
+      if (index < indicators.length - 1) void 0;
+    });
+  }
+  if (hasClientRedirect && documentNavigations.length > 0) {
+    const totalRedirectOverhead = documentNavigations.reduce((sum, nav) => sum + nav.duration, 0);
+    if (totalRedirectOverhead > 3000) {
+    } else if (totalRedirectOverhead > 1000) void 0; else void 0;
+  }
+  const hasDocumentNavigation = documentNavigations.length > 0;
+  const hasSameOriginRedirect = sameOrigin && referrerPath !== currentPath && referrerPath !== "";
+  hasDocumentNavigation && documentNavigations.reduce((sum, nav) => sum + nav.duration, 0);
+  if (hasDocumentNavigation || serverRedirects > 0) {
+    if (serverRedirects > 0) {
+    }
+    if (hasDocumentNavigation) {
+      if (referrerPath && currentPath) {
+        if (referrerPath === "/" && currentPath.match(/^\/[a-z]{2}\//)) {
+        }
+      }
+    } else if (hasSameOriginRedirect) {
+    }
+  }
+  if (documentNavigations.length > 0) {
+  }
+  if (hasDocumentNavigation) void 0; else if (hasSameOriginRedirect) void 0; else void 0;
+  return {
+    script: "Client-Side-Redirect-Detection",
+    status: "ok",
+    details: {
+      serverRedirects: serverRedirects,
+      redirectTimeMs: Math.round(redirectTime),
+      clientRedirectIndicators: indicators.length,
+      documentNavigations: documentNavigations.length,
+      hasSPARouter: hasSPARouter,
+      historyLength: historyLength,
+      currentPath: currentPath,
+      referrerPath: referrerPath
+    },
+    issues: [ ...serverRedirects > 0 ? [ {
+      severity: "warning",
+      message: `${serverRedirects} server-side redirect(s) detected (${Math.round(redirectTime)}ms)`
+    } ] : [], ...documentNavigations.length > 0 ? [ {
+      severity: "error",
+      message: `${documentNavigations.length} same-origin document navigation(s) detected — likely client-side redirect`
+    } ] : [], ...indicators.filter(i => i.severity === "warning").map(i => ({
+      severity: "warning",
+      message: i.type
+    })) ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Content-Visibility.js b/skills/webperf-loading/scripts-readable/Content-Visibility.js
new file mode 100644
index 0000000..5efe265
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Content-Visibility.js
@@ -0,0 +1,165 @@
+function detectContentVisibility() {
+  const results = {
+    autoElements: [],
+    hiddenElements: [],
+    visibleElements: [],
+    nodeArray: []
+  };
+  function getName(node) {
+    const name = node.nodeName;
+    return node.nodeType === 1 ? name.toLowerCase() : name.toUpperCase().replace(/^#/, "");
+  }
+  function getSelector(node) {
+    let sel = "";
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const part = el.id ? "#" + el.id : getName(el) + (el.classList && el.classList.value && el.classList.value.trim() && el.classList.value.trim().length ? "." + el.classList.value.trim().replace(/\s+/g, ".") : "");
+        if (sel.length + part.length > 100 - 1) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch (err) {}
+    return sel;
+  }
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
+  }
+  function getElementInfo(node) {
+    const rect = node.getBoundingClientRect();
+    const cs = window.getComputedStyle(node);
+    return {
+      selector: getSelector(node),
+      contentVisibility: cs["content-visibility"],
+      containIntrinsicSize: cs["contain-intrinsic-size"] || "not set",
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      top: Math.round(rect.top + window.scrollY),
+      inViewport: isInViewport(node)
+    };
+  }
+  function findContentVisibilityElements(node) {
+    const cs = window.getComputedStyle(node);
+    const cv = cs["content-visibility"];
+    if (cv && cv !== "visible") {
+      const info = getElementInfo(node);
+      if (cv === "auto") {
+        results.autoElements.push(info);
+        results.nodeArray.push(node);
+      } else if (cv === "hidden") results.hiddenElements.push(info);
+    }
+    for (let i = 0; i < node.children.length; i++) findContentVisibilityElements(node.children[i]);
+  }
+  findContentVisibilityElements(document.body);
+  if (results.autoElements.length === 0 && results.hiddenElements.length === 0) {
+  } else {
+    if (results.autoElements.length > 0) {
+    }
+    if (results.hiddenElements.length > 0) {
+    }
+    const missingIntrinsicSize = results.autoElements.filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none");
+    if (missingIntrinsicSize.length > 0) {
+    }
+    results.nodeArray.forEach((node, i) => {
+    });
+  }
+  return results;
+}
+
+function analyzeContentVisibilityOpportunities(options = {}) {
+  const {threshold: threshold = 0, minHeight: minHeight = 100, minChildren: minChildren = 5} = options;
+  const viewportHeight = window.innerHeight;
+  const opportunities = [];
+  const processedElements = new Set;
+  function getSelector(node) {
+    let sel = "";
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const name = el.nodeName.toLowerCase();
+        const part = el.id ? "#" + el.id : name + (el.classList && el.classList.value && el.classList.value.trim() ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".") : "");
+        if (sel.length + part.length > 80) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch (err) {}
+    return sel;
+  }
+  function estimateRenderSavings(childCount) {
+    const baseMs = childCount * 0.2;
+    if (baseMs < 5) return "Low (~" + baseMs.toFixed(1) + "ms)";
+    if (baseMs < 20) return "Medium (~" + baseMs.toFixed(1) + "ms)";
+    return "High (~" + baseMs.toFixed(1) + "ms)";
+  }
+  function isAncestorProcessed(el) {
+    let parent = el.parentElement;
+    while (parent) {
+      if (processedElements.has(parent)) return true;
+      parent = parent.parentElement;
+    }
+    return false;
+  }
+  function analyzeElement(el) {
+    if (processedElements.has(el) || isAncestorProcessed(el)) return;
+    const rect = el.getBoundingClientRect();
+    const cs = window.getComputedStyle(el);
+    if (cs["content-visibility"] && cs["content-visibility"] !== "visible") return;
+    if (rect.height < minHeight || rect.width === 0) return;
+    const distanceFromViewport = rect.top - viewportHeight;
+    if (distanceFromViewport < threshold) return;
+    const childCount = el.querySelectorAll("*").length;
+    if (childCount < minChildren) return;
+    processedElements.add(el);
+    opportunities.push({
+      selector: getSelector(el),
+      height: Math.round(rect.height) + "px",
+      distanceFromViewport: Math.round(distanceFromViewport) + "px",
+      childElements: childCount,
+      estimatedSavings: estimateRenderSavings(childCount),
+      element: el
+    });
+  }
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false);
+  while (walker.nextNode()) analyzeElement(walker.currentNode);
+  opportunities.sort((a, b) => b.childElements - a.childElements);
+  if (opportunities.length === 0) {
+  } else {
+    opportunities.slice(0, 20).map(({element: element, ...rest}) => rest);
+    if (opportunities.length > 20) void 0;
+    opportunities.slice(0, 10).forEach((opp, i) => {
+    });
+  }
+  return {
+    opportunities: opportunities.map(({element: element, ...rest}) => rest),
+    totalElements: opportunities.length,
+    highImpact: opportunities.filter(o => o.estimatedSavings.startsWith("High")).length,
+    elements: opportunities.map(o => o.element)
+  };
+}
+
+(() => {
+  const cvResults = detectContentVisibility();
+  return {
+    script: "Content-Visibility",
+    status: "ok",
+    count: cvResults.autoElements.length + cvResults.hiddenElements.length,
+    details: {
+      autoCount: cvResults.autoElements.length,
+      hiddenCount: cvResults.hiddenElements.length
+    },
+    items: [ ...cvResults.autoElements.map(el => ({
+      ...el,
+      type: "auto"
+    })), ...cvResults.hiddenElements.map(el => ({
+      ...el,
+      type: "hidden"
+    })) ],
+    issues: cvResults.autoElements.filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none").map(el => ({
+      severity: "warning",
+      message: `${el.selector}: missing contain-intrinsic-size (CLS risk)`
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Critical-CSS-Detection.js b/skills/webperf-loading/scripts-readable/Critical-CSS-Detection.js
new file mode 100644
index 0000000..6fadc89
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Critical-CSS-Detection.js
@@ -0,0 +1,132 @@
+(() => {
+  const formatBytes = bytes => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
+  };
+  const criticalBudget = 14 * 1024;
+  const linkStylesheets = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
+  const perfEntries = performance.getEntriesByType("resource");
+  const externalCSSData = linkStylesheets.map(link => {
+    const href = link.href;
+    const media = link.getAttribute("media") || "all";
+    const perfEntry = perfEntries.find(e => e.name === href);
+    let isRenderBlocking;
+    if (perfEntry && perfEntry.renderBlockingStatus !== void 0) isRenderBlocking = perfEntry.renderBlockingStatus === "blocking"; else isRenderBlocking = media === "all" || media === "" || media === "screen" || media.toLowerCase().includes("screen") && !media.toLowerCase().includes("print");
+    const transferSize = perfEntry ? perfEntry.transferSize : 0;
+    const decodedSize = perfEntry ? perfEntry.decodedBodySize : 0;
+    const preloadLink = document.querySelector(`link[rel="preload"][as="style"][href="${href}"]`);
+    let ruleCount = 0;
+    let corsBlocked = false;
+    try {
+      const sheet = Array.from(document.styleSheets).find(s => s.href === href);
+      if (sheet && sheet.cssRules) ruleCount = sheet.cssRules.length;
+    } catch (_) {
+      corsBlocked = true;
+    }
+    return {
+      filename: href.split("/").pop().split("?")[0] || href,
+      href: href,
+      media: media,
+      isRenderBlocking: isRenderBlocking,
+      transferSize: transferSize,
+      decodedSize: decodedSize,
+      ruleCount: ruleCount,
+      corsBlocked: corsBlocked,
+      preloaded: preloadLink !== null
+    };
+  });
+  const inlineStyles = Array.from(document.querySelectorAll("style")).map((style, i) => {
+    const content = style.innerHTML;
+    const size = new Blob([ content ]).size;
+    const ruleCount = (content.match(/\{[^}]*\}/g) || []).length;
+    return {
+      index: i + 1,
+      size: size,
+      ruleCount: ruleCount,
+      inHead: style.closest("head") !== null
+    };
+  });
+  const renderBlockingCSS = externalCSSData.filter(s => s.isRenderBlocking);
+  const nonBlockingCSS = externalCSSData.filter(s => !s.isRenderBlocking);
+  const totalInlineBytes = inlineStyles.reduce((sum, s) => sum + s.size, 0);
+  const totalRenderBlockingDecoded = renderBlockingCSS.reduce((sum, s) => sum + s.decodedSize, 0);
+  const totalExternalTransfer = externalCSSData.reduce((sum, s) => sum + s.transferSize, 0);
+  if (renderBlockingCSS.length > 0) {
+    const budgetPct = Math.min(totalRenderBlockingDecoded / criticalBudget * 100, 200);
+    const barWidth = Math.min(Math.round(budgetPct / 10), 20);
+    "█".repeat(barWidth), "░".repeat(20 - barWidth);
+  } else {
+  }
+  if (nonBlockingCSS.length > 0) {
+  }
+  if (inlineStyles.length > 0) {
+    (totalInlineBytes / criticalBudget * 100).toFixed(0);
+  }
+  const issues = [];
+  if (renderBlockingCSS.length > 0 && inlineStyles.length === 0) issues.push({
+    severity: "high",
+    message: "No critical CSS inlined — all CSS loads via render-blocking requests",
+    suggestion: "Extract above-the-fold styles into a <style> tag in <head> and defer the rest"
+  });
+  if (totalRenderBlockingDecoded > criticalBudget) issues.push({
+    severity: "high",
+    message: `Render-blocking CSS (${formatBytes(totalRenderBlockingDecoded)}) exceeds the 14 KB critical budget`,
+    suggestion: "Inline critical CSS and defer non-critical stylesheets using the media/onload pattern"
+  });
+  const largeUnpreloaded = renderBlockingCSS.filter(s => !s.preloaded && s.transferSize > 10 * 1024);
+  if (largeUnpreloaded.length > 0) issues.push({
+    severity: "medium",
+    message: `${largeUnpreloaded.length} large render-blocking stylesheet(s) without preload`,
+    details: largeUnpreloaded.map(s => `• ${s.filename} (${formatBytes(s.transferSize)})`),
+    suggestion: 'Add <link rel="preload" as="style" href="..."> to start download earlier'
+  });
+  if (totalInlineBytes > criticalBudget) issues.push({
+    severity: "high",
+    message: `Inline CSS (${formatBytes(totalInlineBytes)}) exceeds the 14 KB critical budget`,
+    suggestion: "Keep inline critical CSS under 14 KB. Move non-critical styles to an external deferred file."
+  });
+  const bodyInlineStyles = inlineStyles.filter(s => !s.inHead);
+  if (bodyInlineStyles.length > 0) issues.push({
+    severity: "medium",
+    message: `${bodyInlineStyles.length} inline style block(s) found in <body>`,
+    suggestion: "Move critical styles to <head> to avoid potential render-blocking reflows"
+  });
+  if (issues.length > 0) {
+    issues.forEach(issue => {
+      issue.severity === "high" || issue.severity;
+      if (issue.details) issue.details.forEach(d => {});
+    });
+  } else {
+  }
+  return {
+    script: "Critical-CSS-Detection",
+    status: "ok",
+    count: externalCSSData.length,
+    details: {
+      renderBlockingCount: renderBlockingCSS.length,
+      nonBlockingCount: nonBlockingCSS.length,
+      inlineCount: inlineStyles.length,
+      totalExternalTransferBytes: totalExternalTransfer,
+      renderBlockingDecodedBytes: totalRenderBlockingDecoded,
+      inlineBytes: totalInlineBytes,
+      criticalBudgetBytes: criticalBudget
+    },
+    items: externalCSSData.map(s => ({
+      filename: s.filename,
+      media: s.media,
+      isRenderBlocking: s.isRenderBlocking,
+      transferBytes: s.transferSize,
+      decodedBytes: s.decodedSize,
+      ruleCount: s.ruleCount,
+      preloaded: s.preloaded,
+      corsBlocked: s.corsBlocked
+    })),
+    issues: issues.map(i => ({
+      severity: i.severity === "high" ? "error" : "warning",
+      message: i.message
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Event-Processing-Time.js b/skills/webperf-loading/scripts-readable/Event-Processing-Time.js
new file mode 100644
index 0000000..e4b6719
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Event-Processing-Time.js
@@ -0,0 +1,166 @@
+(() => {
+  const phases = [ {
+    name: "Redirect",
+    start: "redirectStart",
+    end: "redirectEnd",
+    icon: "🔄"
+  }, {
+    name: "DNS Lookup",
+    start: "domainLookupStart",
+    end: "domainLookupEnd",
+    icon: "🔍"
+  }, {
+    name: "TCP Connection",
+    start: "connectStart",
+    end: "connectEnd",
+    icon: "🔌"
+  }, {
+    name: "SSL/TLS",
+    start: "secureConnectionStart",
+    end: "connectEnd",
+    icon: "🔒"
+  }, {
+    name: "Request",
+    start: "requestStart",
+    end: "responseStart",
+    icon: "📤"
+  }, {
+    name: "Response",
+    start: "responseStart",
+    end: "responseEnd",
+    icon: "📥"
+  }, {
+    name: "DOM Processing",
+    start: "responseEnd",
+    end: "domContentLoadedEventStart",
+    icon: "🏗️"
+  }, {
+    name: "DOMContentLoaded",
+    start: "domContentLoadedEventStart",
+    end: "domContentLoadedEventEnd",
+    icon: "📄"
+  }, {
+    name: "Resource Loading",
+    start: "domContentLoadedEventEnd",
+    end: "loadEventStart",
+    icon: "📦"
+  }, {
+    name: "Load Event",
+    start: "loadEventStart",
+    end: "loadEventEnd",
+    icon: "✅"
+  } ];
+  new PerformanceObserver(list => {
+    const [entry] = list.getEntries();
+    const formatMs = ms => ms.toFixed(2) + " ms";
+    const formatBar = (ms, total) => {
+      const pct = total > 0 ? ms / total * 100 : 0;
+      const width = Math.min(Math.round(pct / 2.5), 40);
+      return "█".repeat(width) + "░".repeat(Math.max(0, 20 - width));
+    };
+    const phaseData = phases.map(phase => {
+      const start = entry[phase.start] || 0;
+      const end = entry[phase.end] || 0;
+      let duration = end - start;
+      if (phase.name === "SSL/TLS" && entry.secureConnectionStart > 0) duration = entry.connectEnd - entry.secureConnectionStart; else if (phase.name === "TCP Connection" && entry.secureConnectionStart > 0) duration = entry.secureConnectionStart - entry.connectStart;
+      return {
+        ...phase,
+        start: start,
+        end: end,
+        duration: Math.max(0, duration)
+      };
+    }).filter(p => p.duration > 0 || p.name === "Redirect");
+    const totalTime = entry.loadEventEnd - entry.startTime;
+    entry.responseEnd, entry.startTime;
+    let rating, color;
+    if (totalTime <= 2500) {
+      rating = "Fast";
+      color = "#22c55e";
+    } else if (totalTime <= 4000) {
+      rating = "Moderate";
+      color = "#f59e0b";
+    } else {
+      rating = "Slow";
+      color = "#ef4444";
+    }
+    phaseData.forEach(({name: name, duration: duration, icon: icon}) => {
+      const pct = duration / totalTime * 100;
+      formatBar(duration, totalTime);
+      formatMs(duration).padStart(12);
+      `${pct.toFixed(1)}%`.padStart(7);
+      let phaseColor = "";
+      if (duration > totalTime * 0.3) phaseColor = "color: #ef4444;"; else if (duration > totalTime * 0.15) phaseColor = "color: #f59e0b;";
+    });
+    const longestPhase = phaseData.reduce((a, b) => a.duration > b.duration ? a : b);
+    if (longestPhase.duration > totalTime * 0.25) {
+    }
+  }).observe({
+    type: "navigation",
+    buffered: true
+  });
+  const [navSync] = performance.getEntriesByType("navigation");
+  if (!navSync) return {
+    script: "Event-Processing-Time",
+    status: "error",
+    error: "No navigation entry"
+  };
+  const totalTimeSync = navSync.loadEventEnd - navSync.startTime;
+  const networkTimeSync = (navSync.responseEnd || 0) - navSync.startTime;
+  const ratingSync = totalTimeSync <= 2500 ? "good" : totalTimeSync <= 4000 ? "needs-improvement" : "poor";
+  const phasesSync = [ {
+    key: "redirect",
+    duration: Math.max(0, navSync.redirectEnd - navSync.redirectStart)
+  }, {
+    key: "dnsLookup",
+    duration: Math.max(0, navSync.domainLookupEnd - navSync.domainLookupStart)
+  }, {
+    key: "tcpConnection",
+    duration: Math.max(0, (navSync.secureConnectionStart > 0 ? navSync.secureConnectionStart : navSync.connectEnd) - navSync.connectStart)
+  }, {
+    key: "sslTls",
+    duration: navSync.secureConnectionStart > 0 ? Math.max(0, navSync.connectEnd - navSync.secureConnectionStart) : 0
+  }, {
+    key: "request",
+    duration: Math.max(0, navSync.responseStart - navSync.requestStart)
+  }, {
+    key: "response",
+    duration: Math.max(0, navSync.responseEnd - navSync.responseStart)
+  }, {
+    key: "domProcessing",
+    duration: Math.max(0, navSync.domContentLoadedEventStart - navSync.responseEnd)
+  }, {
+    key: "domContentLoaded",
+    duration: Math.max(0, navSync.domContentLoadedEventEnd - navSync.domContentLoadedEventStart)
+  }, {
+    key: "resourceLoading",
+    duration: Math.max(0, navSync.loadEventStart - navSync.domContentLoadedEventEnd)
+  }, {
+    key: "loadEvent",
+    duration: Math.max(0, navSync.loadEventEnd - navSync.loadEventStart)
+  } ];
+  const nonZeroPhases = phasesSync.filter(p => p.duration > 0);
+  const slowestPhase = nonZeroPhases.length > 0 ? nonZeroPhases.reduce((a, b) => a.duration > b.duration ? a : b) : phasesSync[0];
+  return {
+    script: "Event-Processing-Time",
+    status: "ok",
+    value: Math.round(totalTimeSync),
+    unit: "ms",
+    rating: ratingSync,
+    thresholds: {
+      good: 2500,
+      needsImprovement: 4000
+    },
+    details: {
+      networkTimeMs: Math.round(networkTimeSync),
+      processingTimeMs: Math.round(totalTimeSync - networkTimeSync),
+      ttfbMs: Math.round(navSync.responseStart),
+      domContentLoadedMs: Math.round(navSync.domContentLoadedEventEnd),
+      loadCompleteMs: Math.round(navSync.loadEventEnd),
+      phases: Object.fromEntries(phasesSync.map(p => [ p.key, {
+        value: Math.round(p.duration),
+        unit: "ms"
+      } ])),
+      slowestPhase: slowestPhase.key
+    }
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/FCP.js b/skills/webperf-loading/scripts-readable/FCP.js
new file mode 100644
index 0000000..907fb14
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/FCP.js
@@ -0,0 +1,60 @@
+(() => {
+  const valueToRating = ms => ms <= 1800 ? "good" : ms <= 3000 ? "needs-improvement" : "poor";
+  const RATING = {
+    good: {
+      icon: "🟢",
+      color: "#0CCE6A"
+    },
+    "needs-improvement": {
+      icon: "🟡",
+      color: "#FFA400"
+    },
+    poor: {
+      icon: "🔴",
+      color: "#FF4E42"
+    }
+  };
+  new PerformanceObserver(list => {
+    const fcpEntry = list.getEntriesByName("first-contentful-paint")[0];
+    if (!fcpEntry) return;
+    const fcpTime = fcpEntry.startTime;
+    const rating = valueToRating(fcpTime);
+    const {icon: icon, color: color} = RATING[rating];
+    const navEntry = performance.getEntriesByType("navigation")[0];
+    const ttfb = navEntry?.responseStart ?? 0;
+    const resources = performance.getEntriesByType("resource");
+    const blockingResources = resources.filter(r => r.renderBlockingStatus === "blocking");
+    const lastBlockingEnd = blockingResources.length ? Math.max(...blockingResources.map(r => r.responseEnd)) : ttfb;
+    if (blockingResources.length > 0) void 0;
+    if (blockingResources.length > 0) {
+      Math.max(0, lastBlockingEnd - ttfb);
+      blockingResources.sort((a, b) => b.responseEnd - a.responseEnd).forEach(r => {
+        r.name.split("/").pop().split("?")[0] || r.name;
+        r.initiatorType;
+      });
+    } else void 0;
+  }).observe({
+    type: "paint",
+    buffered: true
+  });
+  const fcpEntrySync = performance.getEntriesByName("first-contentful-paint")[0];
+  if (!fcpEntrySync) return {
+    script: "FCP",
+    status: "error",
+    error: "No FCP entry yet"
+  };
+  const fcpTimeSync = fcpEntrySync.startTime;
+  const ratingSync = valueToRating(fcpTimeSync);
+  return {
+    script: "FCP",
+    status: "ok",
+    metric: "FCP",
+    value: Math.round(fcpTimeSync),
+    unit: "ms",
+    rating: ratingSync,
+    thresholds: {
+      good: 1800,
+      needsImprovement: 3000
+    }
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Find-Above-The-Fold-Lazy-Loaded-Images.js b/skills/webperf-loading/scripts-readable/Find-Above-The-Fold-Lazy-Loaded-Images.js
new file mode 100644
index 0000000..4a91cc5
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Find-Above-The-Fold-Lazy-Loaded-Images.js
@@ -0,0 +1,134 @@
+(function() {
+  function getSelector(node) {
+    let sel = "";
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const name = el.nodeName.toLowerCase();
+        const part = el.id ? "#" + el.id : name + (el.classList && el.classList.value && el.classList.value.trim() ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".") : "");
+        if (sel.length + part.length > 80) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch (err) {}
+    return sel;
+  }
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0 && rect.width > 0 && rect.height > 0;
+  }
+  function getDistanceFromViewportEdge(element) {
+    const rect = element.getBoundingClientRect();
+    const distances = [ rect.top, window.innerHeight - rect.bottom, rect.left, window.innerWidth - rect.right ];
+    return Math.min(...distances.map(d => Math.abs(d)));
+  }
+  function getFileSize(src) {
+    if (!src) return null;
+    try {
+      const entries = performance.getEntriesByType("resource");
+      const entry = entries.find(e => e.name === src || e.name.includes(src.split("/").pop()));
+      if (entry && entry.transferSize) return (entry.transferSize / 1024).toFixed(1) + " KB";
+    } catch (err) {}
+    return null;
+  }
+  function getLazyType(element) {
+    const hasLoadingLazy = element.getAttribute("loading") === "lazy";
+    const hasDataSrc = element.hasAttribute("data-src") || element.hasAttribute("data-lazy");
+    if (hasLoadingLazy && hasDataSrc) return "both";
+    if (hasLoadingLazy) return "loading-lazy";
+    if (hasDataSrc) return "data-src";
+    return null;
+  }
+  function getElementInfo(img) {
+    const rect = img.getBoundingClientRect();
+    const area = rect.width * rect.height;
+    return {
+      selector: getSelector(img),
+      lazyType: getLazyType(img),
+      dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
+      position: {
+        top: Math.round(rect.top + window.scrollY),
+        left: Math.round(rect.left + window.scrollX)
+      },
+      distanceFromEdge: Math.round(getDistanceFromViewportEdge(img)) + "px",
+      src: img.currentSrc || img.src || img.getAttribute("data-src") || "",
+      srcset: img.srcset || null,
+      sizes: img.sizes || null,
+      alt: img.alt || "(no alt)",
+      fetchPriority: img.fetchPriority || "auto",
+      fileSize: getFileSize(img.currentSrc || img.src),
+      area: area,
+      element: img
+    };
+  }
+  const results = {
+    lazyImages: [],
+    lcpCandidate: null,
+    nodeArray: [],
+    summary: {
+      total: 0,
+      withLoadingLazy: 0,
+      withDataSrc: 0,
+      lcpAffected: false
+    }
+  };
+  const lazySelectors = '[loading="lazy"], [data-src], [data-lazy]';
+  const lazyElements = document.querySelectorAll(`img${lazySelectors}, picture source${lazySelectors}`);
+  const allViewportImages = Array.from(document.querySelectorAll("img")).filter(img => isInViewport(img) && img.getBoundingClientRect().width > 0);
+  let lcpCandidate = null;
+  let maxArea = 0;
+  allViewportImages.forEach(img => {
+    const rect = img.getBoundingClientRect();
+    const area = rect.width * rect.height;
+    if (area > maxArea) {
+      maxArea = area;
+      lcpCandidate = img;
+    }
+  });
+  lazyElements.forEach(element => {
+    const img = element.tagName === "SOURCE" ? element.closest("picture")?.querySelector("img") : element;
+    if (!img || !isInViewport(img)) return;
+    const info = getElementInfo(img);
+    info.isLcpCandidate = img === lcpCandidate;
+    results.lazyImages.push(info);
+    results.nodeArray.push(img);
+    results.summary.total++;
+    if (info.lazyType === "loading-lazy" || info.lazyType === "both") results.summary.withLoadingLazy++;
+    if (info.lazyType === "data-src" || info.lazyType === "both") results.summary.withDataSrc++;
+    if (info.isLcpCandidate) {
+      results.summary.lcpAffected = true;
+      results.lcpCandidate = info;
+    }
+  });
+  if (results.lazyImages.length === 0) void 0; else {
+    if (results.summary.lcpAffected) {
+    }
+    results.lazyImages.map(({element: element, area: area, position: position, ...rest}) => ({
+      ...rest,
+      top: position.top + "px",
+      isLcpCandidate: rest.isLcpCandidate ? "⚠️ YES" : "no"
+    }));
+    results.nodeArray.forEach((node, i) => {
+    });
+  }
+  return {
+    script: "Find-Above-The-Fold-Lazy-Loaded-Images",
+    status: "ok",
+    count: results.lazyImages.length,
+    details: {
+      total: results.summary.total,
+      withLoadingLazy: results.summary.withLoadingLazy,
+      withDataSrc: results.summary.withDataSrc,
+      lcpAffected: results.summary.lcpAffected
+    },
+    items: results.lazyImages.map(({element: element, area: area, ...rest}) => rest),
+    issues: [ ...results.summary.lcpAffected ? [ {
+      severity: "error",
+      message: 'LCP candidate image has lazy loading — remove loading="lazy" and add fetchpriority="high"'
+    } ] : [], ...results.lazyImages.filter(i => !i.isLcpCandidate).length > 0 ? [ {
+      severity: "warning",
+      message: `${results.lazyImages.filter(i => !i.isLcpCandidate).length} above-fold image(s) have lazy loading — remove loading="lazy"`
+    } ] : [] ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Find-Images-With-Lazy-and-Fetchpriority.js b/skills/webperf-loading/scripts-readable/Find-Images-With-Lazy-and-Fetchpriority.js
new file mode 100644
index 0000000..7733688
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Find-Images-With-Lazy-and-Fetchpriority.js
@@ -0,0 +1,75 @@
+(() => {
+  function getSelector(node) {
+    let sel = "";
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const name = el.nodeName.toLowerCase();
+        const part = el.id ? "#" + el.id : name + (el.classList && el.classList.value && el.classList.value.trim() ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".") : "");
+        if (sel.length + part.length > 80) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch (err) {}
+    return sel;
+  }
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0 && rect.width > 0 && rect.height > 0;
+  }
+  const viewportImages = Array.from(document.querySelectorAll("img")).filter(img => isInViewport(img) && img.getBoundingClientRect().width > 0);
+  let lcpCandidate = null;
+  let maxArea = 0;
+  viewportImages.forEach(img => {
+    const rect = img.getBoundingClientRect();
+    const area = rect.width * rect.height;
+    if (area > maxArea) {
+      maxArea = area;
+      lcpCandidate = img;
+    }
+  });
+  const conflictingElements = document.querySelectorAll("[loading=lazy][fetchpriority=high]");
+  if (conflictingElements.length === 0) void 0; else {
+    const tableData = Array.from(conflictingElements).map(el => {
+      const rect = el.getBoundingClientRect();
+      const inViewport = isInViewport(el);
+      const isLcp = el === lcpCandidate;
+      return {
+        selector: getSelector(el),
+        dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
+        inViewport: inViewport ? "Yes" : "No",
+        isLcpCandidate: isLcp ? "⚠️ Yes" : "No",
+        src: (el.currentSrc || el.src || "").slice(-50),
+        element: el
+      };
+    });
+    tableData.forEach(({element: element, selector: selector, isLcpCandidate: isLcpCandidate}, i) => {
+    });
+    tableData.forEach(({selector: selector, inViewport: inViewport, isLcpCandidate: isLcpCandidate}) => {
+      if (inViewport === "Yes" || isLcpCandidate === "⚠️ Yes") {
+      } else {
+      }
+    });
+  }
+  return {
+    script: "Find-Images-With-Lazy-and-Fetchpriority",
+    status: "ok",
+    count: conflictingElements.length,
+    items: Array.from(conflictingElements).map(el => {
+      const rect = el.getBoundingClientRect();
+      return {
+        selector: getSelector(el),
+        src: el.currentSrc || el.src || "",
+        inViewport: isInViewport(el),
+        isLcpCandidate: el === lcpCandidate,
+        widthPx: Math.round(rect.width),
+        heightPx: Math.round(rect.height)
+      };
+    }),
+    issues: conflictingElements.length > 0 ? [ {
+      severity: "error",
+      message: `${conflictingElements.length} element(s) have conflicting loading="lazy" and fetchpriority="high"`
+    } ] : []
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js b/skills/webperf-loading/scripts-readable/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
new file mode 100644
index 0000000..54985ac
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
@@ -0,0 +1,162 @@
+(function() {
+  function getSelector(node) {
+    let sel = "";
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const name = el.nodeName.toLowerCase();
+        const part = el.id ? "#" + el.id : name + (el.classList && el.classList.value && el.classList.value.trim() ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".") : "");
+        if (sel.length + part.length > 80) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch (err) {}
+    return sel;
+  }
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0 && rect.width > 0 && rect.height > 0;
+  }
+  function isInHiddenContainer(element) {
+    let parent = element.parentElement;
+    const hiddenSelectors = [ "[hidden]", '[aria-hidden="true"]', ".modal:not(.show)", ".tab-pane:not(.active)", '[role="tabpanel"]:not(.active)', ".accordion-collapse:not(.show)", ".carousel-item:not(.active)", ".swiper-slide:not(.swiper-slide-active)" ];
+    while (parent && parent !== document.body) {
+      const cs = window.getComputedStyle(parent);
+      if (cs.display === "none" || cs.visibility === "hidden") return {
+        hidden: true,
+        reason: "CSS hidden",
+        container: getSelector(parent)
+      };
+      for (const selector of hiddenSelectors) try {
+        if (parent.matches(selector)) return {
+          hidden: true,
+          reason: selector,
+          container: getSelector(parent)
+        };
+      } catch (e) {}
+      parent = parent.parentElement;
+    }
+    return {
+      hidden: false
+    };
+  }
+  function getImageSize(imgElement) {
+    const src = imgElement.currentSrc || imgElement.src;
+    if (!src || src.startsWith("data:")) return 0;
+    const perfEntries = performance.getEntriesByType("resource");
+    const imgEntry = perfEntries.find(entry => entry.name === src);
+    if (imgEntry) return imgEntry.transferSize || imgEntry.encodedBodySize || 0;
+    return 0;
+  }
+  function formatBytes(bytes) {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = [ "Bytes", "KB", "MB", "GB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  }
+  const allViewportImages = Array.from(document.querySelectorAll("img")).filter(img => isInViewport(img) && img.getBoundingClientRect().width > 0);
+  let lcpCandidate = null;
+  let maxArea = 0;
+  allViewportImages.forEach(img => {
+    const rect = img.getBoundingClientRect();
+    const area = rect.width * rect.height;
+    if (area > maxArea) {
+      maxArea = area;
+      lcpCandidate = img;
+    }
+  });
+  const notLazyImages = document.querySelectorAll('img:not([data-src]):not([loading="lazy"])');
+  const results = {
+    belowFold: [],
+    hiddenContainers: [],
+    excluded: {
+      inViewport: 0,
+      lcpCandidate: null,
+      tooSmall: 0
+    },
+    elements: []
+  };
+  notLazyImages.forEach(img => {
+    const rect = img.getBoundingClientRect();
+    if (isInViewport(img)) {
+      if (img === lcpCandidate) results.excluded.lcpCandidate = getSelector(img); else results.excluded.inViewport++;
+      return;
+    }
+    if (rect.width < 50 || rect.height < 50) {
+      results.excluded.tooSmall++;
+      return;
+    }
+    const src = img.currentSrc || img.src;
+    const size = getImageSize(img);
+    const hiddenCheck = isInHiddenContainer(img);
+    const imageData = {
+      selector: getSelector(img),
+      src: src.length > 60 ? "..." + src.slice(-57) : src,
+      fullSrc: src,
+      dimensions: `${img.naturalWidth}×${img.naturalHeight}`,
+      size: size,
+      sizeFormatted: size > 0 ? formatBytes(size) : "unknown",
+      element: img
+    };
+    if (hiddenCheck.hidden) {
+      imageData.hiddenReason = hiddenCheck.reason;
+      imageData.container = hiddenCheck.container;
+      results.hiddenContainers.push(imageData);
+    } else {
+      imageData.distanceFromViewport = Math.round(rect.top - window.innerHeight) + "px";
+      results.belowFold.push(imageData);
+    }
+    results.elements.push(img);
+  });
+  results.belowFold.sort((a, b) => parseInt(b.distanceFromViewport) - parseInt(a.distanceFromViewport));
+  const totalImages = results.belowFold.length + results.hiddenContainers.length;
+  const totalSize = [ ...results.belowFold, ...results.hiddenContainers ].reduce((sum, img) => sum + img.size, 0);
+  if (totalImages === 0) void 0; else {
+    if (totalSize > 0) void 0;
+    if (results.belowFold.length > 0) {
+      results.belowFold.slice(0, 20).map(({element: element, fullSrc: fullSrc, ...rest}) => rest);
+      if (results.belowFold.length > 20) void 0;
+    }
+    if (results.hiddenContainers.length > 0) {
+      results.hiddenContainers.slice(0, 15).map(({element: element, fullSrc: fullSrc, distanceFromViewport: distanceFromViewport, ...rest}) => rest);
+      if (results.hiddenContainers.length > 15) void 0;
+    }
+    results.elements.slice(0, 15).forEach((img, i) => {});
+    if (results.elements.length > 15) void 0;
+  }
+  return {
+    script: "Find-non-Lazy-Loaded-Images-outside-of-the-viewport",
+    status: "ok",
+    count: totalImages,
+    details: {
+      belowFoldCount: results.belowFold.length,
+      hiddenContainerCount: results.hiddenContainers.length,
+      totalSizeBytes: totalSize,
+      excluded: {
+        inViewport: results.excluded.inViewport,
+        lcpCandidate: results.excluded.lcpCandidate,
+        tooSmall: results.excluded.tooSmall
+      }
+    },
+    items: [ ...results.belowFold.map(img => ({
+      selector: img.selector,
+      src: img.fullSrc,
+      sizeBytes: img.size,
+      category: "below-fold",
+      distancePx: parseInt(img.distanceFromViewport)
+    })), ...results.hiddenContainers.map(img => ({
+      selector: img.selector,
+      src: img.fullSrc,
+      sizeBytes: img.size,
+      category: "hidden-container",
+      hiddenReason: img.hiddenReason,
+      container: img.container
+    })) ],
+    issues: totalImages > 0 ? [ {
+      severity: "warning",
+      message: `${totalImages} image(s) outside the viewport are missing loading="lazy"`
+    } ] : []
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Find-render-blocking-resources.js b/skills/webperf-loading/scripts-readable/Find-render-blocking-resources.js
new file mode 100644
index 0000000..2851111
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Find-render-blocking-resources.js
@@ -0,0 +1,80 @@
+(() => {
+  const testEntry = performance.getEntriesByType("resource")[0];
+  if (testEntry && !("renderBlockingStatus" in testEntry)) {
+    return {
+      script: "Find-render-blocking-resources",
+      status: "unsupported",
+      error: "renderBlockingStatus API requires Chrome 107+"
+    };
+  }
+  const blockingResources = performance.getEntriesByType("resource").filter(entry => entry.renderBlockingStatus === "blocking").map(entry => {
+    const url = new URL(entry.name);
+    return {
+      name: entry.name,
+      shortName: url.pathname.split("/").pop() || url.pathname,
+      type: entry.initiatorType,
+      startTime: entry.startTime,
+      duration: entry.duration,
+      responseEnd: entry.responseEnd,
+      size: entry.transferSize || 0
+    };
+  }).sort((a, b) => b.responseEnd - a.responseEnd);
+  if (blockingResources.length === 0) {
+  } else {
+    const lastBlockingEnd = Math.max(...blockingResources.map(r => r.responseEnd));
+    const totalSize = blockingResources.reduce((sum, r) => sum + r.size, 0);
+    const byType = blockingResources.reduce((acc, r) => {
+      acc[r.type] = (acc[r.type] || 0) + 1;
+      return acc;
+    }, {});
+    if (totalSize > 0) {
+      (totalSize / 1024).toFixed(1);
+    }
+    const formatBar = (end, max) => {
+      const pct = end / max * 100;
+      const width = Math.round(pct / 5);
+      return "█".repeat(width) + "░".repeat(20 - width);
+    };
+    blockingResources.forEach(r => {
+      formatBar(r.responseEnd, lastBlockingEnd);
+      r.size > 0 && (r.size / 1024).toFixed(1);
+    });
+    blockingResources.map(r => ({
+      Type: r.type,
+      "Response End": r.responseEnd.toFixed(0) + "ms",
+      Duration: r.duration.toFixed(0) + "ms",
+      Size: r.size > 0 ? (r.size / 1024).toFixed(1) + " KB" : "N/A",
+      Resource: r.name.length > 60 ? "..." + r.name.slice(-57) : r.name
+    }));
+    if (byType.script) {
+    }
+    if (byType.link || byType.css) {
+    }
+    if (byType.font) {
+    }
+  }
+  const lastBlockingEnd = blockingResources.length ? Math.max(...blockingResources.map(r => r.responseEnd)) : 0;
+  const totalSizeBytes = blockingResources.reduce((sum, r) => sum + r.size, 0);
+  const byType = blockingResources.reduce((acc, r) => {
+    acc[r.type] = (acc[r.type] || 0) + 1;
+    return acc;
+  }, {});
+  return {
+    script: "Find-render-blocking-resources",
+    status: "ok",
+    count: blockingResources.length,
+    details: {
+      totalBlockingUntilMs: Math.round(lastBlockingEnd),
+      totalSizeBytes: totalSizeBytes,
+      byType: byType
+    },
+    items: blockingResources.map(r => ({
+      type: r.type,
+      url: r.name,
+      shortName: r.shortName,
+      responseEndMs: Math.round(r.responseEnd),
+      durationMs: Math.round(r.duration),
+      sizeBytes: r.size
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Info.js b/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Info.js
new file mode 100644
index 0000000..c3efbce
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Info.js
@@ -0,0 +1,123 @@
+(() => {
+  function getRootDomain(hostname) {
+    const parts = hostname.split(".");
+    if (parts.length > 2) {
+      const sld = parts[parts.length - 2];
+      if (sld.length <= 3 && [ "co", "com", "org", "net", "gov", "edu" ].includes(sld)) return parts.slice(-3).join(".");
+      return parts.slice(-2).join(".");
+    }
+    return hostname;
+  }
+  const currentRootDomain = getRootDomain(location.hostname);
+  function isFirstParty(hostname) {
+    return getRootDomain(hostname) === currentRootDomain;
+  }
+  function formatBytes(bytes) {
+    if (!bytes || bytes === 0) return "N/A";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+  }
+  const scripts = performance.getEntriesByType("resource").filter(r => r.initiatorType === "script").map(r => {
+    const url = new URL(r.name);
+    const firstParty = isFirstParty(url.hostname);
+    return {
+      name: r.name,
+      shortName: url.pathname.split("/").pop() || url.pathname,
+      host: url.hostname,
+      firstParty: firstParty,
+      duration: r.duration,
+      transferSize: r.transferSize || 0,
+      startTime: r.startTime,
+      responseEnd: r.responseEnd,
+      renderBlocking: r.renderBlockingStatus === "blocking"
+    };
+  });
+  const firstParty = scripts.filter(s => s.firstParty);
+  const thirdParty = scripts.filter(s => !s.firstParty);
+  const calcMetrics = list => ({
+    count: list.length,
+    totalSize: list.reduce((sum, s) => sum + s.transferSize, 0),
+    totalDuration: list.reduce((sum, s) => sum + s.duration, 0),
+    blocking: list.filter(s => s.renderBlocking).length,
+    hosts: [ ...new Set(list.map(s => s.host)) ]
+  });
+  const firstMetrics = calcMetrics(firstParty);
+  const thirdMetrics = calcMetrics(thirdParty);
+  const totalScripts = scripts.length;
+  const thirdPartyPct = totalScripts > 0 ? (thirdParty.length / totalScripts * 100).toFixed(0) : 0;
+  if (thirdParty.length > firstParty.length) void 0;
+  if (firstParty.length === 0) void 0; else {
+    firstParty.sort((a, b) => b.transferSize - a.transferSize).map(s => ({
+      Script: s.shortName,
+      Size: formatBytes(s.transferSize),
+      Duration: s.duration.toFixed(0) + "ms",
+      Blocking: s.renderBlocking ? "⚠️ Yes" : "No",
+      Host: s.host
+    }));
+  }
+  if (thirdParty.length === 0) void 0; else {
+    const byHost = thirdParty.reduce((acc, s) => {
+      if (!acc[s.host]) acc[s.host] = {
+        count: 0,
+        size: 0,
+        blocking: 0
+      };
+      acc[s.host].count++;
+      acc[s.host].size += s.transferSize;
+      if (s.renderBlocking) acc[s.host].blocking++;
+      return acc;
+    }, {});
+    Object.entries(byHost).sort((a, b) => b[1].size - a[1].size).forEach(([host, data]) => {
+      data.blocking;
+    });
+    thirdParty.sort((a, b) => b.transferSize - a.transferSize).map(s => ({
+      Script: s.shortName,
+      Host: s.host,
+      Size: formatBytes(s.transferSize),
+      Duration: s.duration.toFixed(0) + "ms",
+      Blocking: s.renderBlocking ? "⚠️ Yes" : "No"
+    }));
+  }
+  if (thirdParty.length > 0) {
+    if (thirdMetrics.blocking > 0) {
+    }
+    if (thirdMetrics.hosts.length > 3) {
+    }
+    if (thirdMetrics.totalSize > 100 * 1024) {
+    }
+  }
+  return {
+    script: "First-And-Third-Party-Script-Info",
+    status: "ok",
+    count: totalScripts,
+    details: {
+      firstPartyCount: firstParty.length,
+      thirdPartyCount: thirdParty.length,
+      thirdPartyPercent: Number(thirdPartyPct),
+      firstPartySizeBytes: firstMetrics.totalSize,
+      thirdPartySizeBytes: thirdMetrics.totalSize,
+      thirdPartyBlockingCount: thirdMetrics.blocking,
+      thirdPartyHostCount: thirdMetrics.hosts.length
+    },
+    items: scripts.map(s => ({
+      shortName: s.shortName,
+      host: s.host,
+      firstParty: s.firstParty,
+      transferBytes: s.transferSize,
+      durationMs: Math.round(s.duration),
+      renderBlocking: s.renderBlocking
+    })),
+    issues: [ ...thirdMetrics.blocking > 0 ? [ {
+      severity: "error",
+      message: `${thirdMetrics.blocking} render-blocking third-party script(s)`
+    } ] : [], ...thirdMetrics.hosts.length > 3 ? [ {
+      severity: "warning",
+      message: `${thirdMetrics.hosts.length} different third-party hosts require separate DNS lookups`
+    } ] : [], ...thirdMetrics.totalSize > 100 * 1024 ? [ {
+      severity: "warning",
+      message: `Third-party scripts total ${Math.round(thirdMetrics.totalSize / 1024)} KB`
+    } ] : [] ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Timings.js b/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Timings.js
new file mode 100644
index 0000000..db9c32b
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Timings.js
@@ -0,0 +1,198 @@
+(() => {
+  function getRootDomain(hostname) {
+    const parts = hostname.split(".");
+    if (parts.length > 2) {
+      const sld = parts[parts.length - 2];
+      if (sld.length <= 3 && [ "co", "com", "org", "net", "gov", "edu" ].includes(sld)) return parts.slice(-3).join(".");
+      return parts.slice(-2).join(".");
+    }
+    return hostname;
+  }
+  const currentRootDomain = getRootDomain(location.hostname);
+  function isFirstParty(hostname) {
+    return getRootDomain(hostname) === currentRootDomain;
+  }
+  const scripts = performance.getEntriesByType("resource").filter(r => r.initiatorType === "script").map(r => {
+    const url = new URL(r.name);
+    const firstParty = isFirstParty(url.hostname);
+    const hasTiming = r.requestStart > 0;
+    const timings = {
+      dns: r.domainLookupEnd - r.domainLookupStart,
+      tcp: r.connectEnd - r.connectStart,
+      tls: r.secureConnectionStart > 0 ? r.connectEnd - r.secureConnectionStart : 0,
+      request: r.responseStart - r.requestStart,
+      response: r.responseEnd - r.responseStart,
+      total: r.responseEnd - r.startTime
+    };
+    if (r.secureConnectionStart > 0) timings.tcp = r.secureConnectionStart - r.connectStart;
+    return {
+      name: r.name,
+      shortName: url.pathname.split("/").pop() || url.hostname,
+      host: url.hostname,
+      firstParty: firstParty,
+      hasTiming: hasTiming,
+      size: r.transferSize || 0,
+      ...timings
+    };
+  });
+  const firstParty = scripts.filter(s => s.firstParty);
+  const thirdParty = scripts.filter(s => !s.firstParty);
+  function calcStats(list) {
+    const withTiming = list.filter(s => s.hasTiming);
+    const phases = [ "dns", "tcp", "tls", "request", "response", "total" ];
+    const stats = {};
+    phases.forEach(phase => {
+      const values = withTiming.map(s => s[phase]).filter(v => v > 0);
+      if (values.length > 0) stats[phase] = {
+        avg: values.reduce((a, b) => a + b, 0) / values.length,
+        max: Math.max(...values),
+        total: values.reduce((a, b) => a + b, 0)
+      }; else stats[phase] = {
+        avg: 0,
+        max: 0,
+        total: 0
+      };
+    });
+    return {
+      count: list.length,
+      withTiming: withTiming.length,
+      withoutTiming: list.length - withTiming.length,
+      stats: stats
+    };
+  }
+  const firstStats = calcStats(firstParty);
+  const thirdStats = calcStats(thirdParty);
+  const formatMs = ms => ms > 0 ? ms.toFixed(1) + "ms" : "-";
+  const formatBar = (value, max) => {
+    if (value <= 0 || max <= 0) return "";
+    const width = Math.min(Math.round(value / max * 15), 15);
+    return "█".repeat(width) + "░".repeat(15 - width);
+  };
+  const phases = [ {
+    key: "dns",
+    name: "DNS Lookup",
+    icon: "🔍"
+  }, {
+    key: "tcp",
+    name: "TCP Connection",
+    icon: "🔌"
+  }, {
+    key: "tls",
+    name: "TLS/SSL",
+    icon: "🔒"
+  }, {
+    key: "request",
+    name: "Request (TTFB)",
+    icon: "📤"
+  }, {
+    key: "response",
+    name: "Response",
+    icon: "📥"
+  }, {
+    key: "total",
+    name: "Total",
+    icon: "⏱️"
+  } ];
+  phases.forEach(({key: key, name: name, icon: icon}) => {
+    formatMs(firstStats.stats[key]?.avg || 0).padStart(10);
+    formatMs(thirdStats.stats[key]?.avg || 0).padStart(10);
+  });
+  if (firstParty.length === 0) void 0; else {
+    if (firstStats.withoutTiming > 0) void 0;
+    const maxTotal = Math.max(...firstParty.map(s => s.total));
+    firstParty.sort((a, b) => b.total - a.total).slice(0, 15).map(s => ({
+      Script: s.shortName,
+      DNS: formatMs(s.dns),
+      TCP: formatMs(s.tcp),
+      TLS: formatMs(s.tls),
+      Request: formatMs(s.request),
+      Response: formatMs(s.response),
+      Total: formatMs(s.total),
+      "": formatBar(s.total, maxTotal)
+    }));
+    if (firstParty.length > 15) void 0;
+  }
+  if (thirdParty.length === 0) void 0; else {
+    const corsRestricted = thirdStats.withoutTiming;
+    if (corsRestricted > 0) {
+    }
+    const maxTotal = Math.max(...thirdParty.map(s => s.total));
+    thirdParty.sort((a, b) => b.total - a.total).slice(0, 15).map(s => ({
+      Script: s.shortName,
+      Host: s.host.length > 25 ? s.host.slice(0, 22) + "..." : s.host,
+      DNS: formatMs(s.dns),
+      TCP: formatMs(s.tcp),
+      TLS: formatMs(s.tls),
+      Request: formatMs(s.request),
+      Response: formatMs(s.response),
+      Total: formatMs(s.total),
+      "": formatBar(s.total, maxTotal)
+    }));
+    if (thirdParty.length > 15) void 0;
+  }
+  const slowThreshold = 500;
+  const slowScripts = scripts.filter(s => s.total > slowThreshold);
+  if (slowScripts.length > 0) {
+    slowScripts.sort((a, b) => b.total - a.total).forEach(s => {
+      s.firstParty;
+      const phases = [];
+      if (s.dns > 50) phases.push(`DNS: ${formatMs(s.dns)}`);
+      if (s.tcp > 50) phases.push(`TCP: ${formatMs(s.tcp)}`);
+      if (s.tls > 50) phases.push(`TLS: ${formatMs(s.tls)}`);
+      if (s.request > 100) phases.push(`Request: ${formatMs(s.request)}`);
+      if (s.response > 200) phases.push(`Response: ${formatMs(s.response)}`);
+      if (phases.length > 0 && s.hasTiming) void 0;
+    });
+  }
+  const hasSlowDns = scripts.some(s => s.dns > 100);
+  const hasSlowTcp = scripts.some(s => s.tcp > 100);
+  const hasSlowRequest = scripts.some(s => s.request > 200);
+  const hasCorsIssues = thirdStats.withoutTiming > 0;
+  if (hasSlowDns || hasSlowTcp || hasSlowRequest || hasCorsIssues) {
+    if (hasSlowDns) {
+    }
+    if (hasSlowTcp) {
+    }
+    if (hasSlowRequest) {
+    }
+    if (hasCorsIssues) {
+    }
+  }
+  return {
+    script: "First-And-Third-Party-Script-Timings",
+    status: "ok",
+    count: scripts.length,
+    details: {
+      firstPartyCount: firstParty.length,
+      thirdPartyCount: thirdParty.length,
+      corsRestrictedCount: thirdStats.withoutTiming,
+      slowScriptCount: slowScripts.length,
+      firstPartyAvgTotalMs: Math.round(firstStats.stats.total?.avg || 0),
+      thirdPartyAvgTotalMs: Math.round(thirdStats.stats.total?.avg || 0)
+    },
+    items: scripts.map(s => ({
+      shortName: s.shortName,
+      host: s.host,
+      firstParty: s.firstParty,
+      totalMs: Math.round(s.total),
+      dnsMs: Math.round(s.dns),
+      tcpMs: Math.round(s.tcp),
+      requestMs: Math.round(s.request),
+      responseMs: Math.round(s.response),
+      hasTiming: s.hasTiming
+    })),
+    issues: [ ...slowScripts.length > 0 ? [ {
+      severity: "warning",
+      message: `${slowScripts.length} script(s) take over ${slowThreshold}ms to load`
+    } ] : [], ...hasSlowDns ? [ {
+      severity: "warning",
+      message: "Slow DNS lookups detected (>100ms). Add dns-prefetch or preconnect."
+    } ] : [], ...hasSlowTcp ? [ {
+      severity: "warning",
+      message: "Slow TCP connections detected (>100ms). Add preconnect for critical origins."
+    } ] : [], ...hasSlowRequest ? [ {
+      severity: "warning",
+      message: "Slow server response times detected (>200ms). Consider CDN or self-hosting."
+    } ] : [] ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Fonts-Preloaded-Loaded-and-used-above-the-fold.js b/skills/webperf-loading/scripts-readable/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
new file mode 100644
index 0000000..cc3c84e
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
@@ -0,0 +1,138 @@
+(() => {
+  function getFontName(url) {
+    try {
+      const path = new URL(url).pathname;
+      return path.split("/").pop() || path;
+    } catch {
+      return url;
+    }
+  }
+  function isThirdParty(url) {
+    try {
+      return new URL(url).hostname !== location.hostname;
+    } catch {
+      return false;
+    }
+  }
+  function normalizeFontFamily(family) {
+    return family.split(",")[0].trim().replace(/["']/g, "").toLowerCase();
+  }
+  const preloadedFonts = Array.from(document.querySelectorAll('link[rel="preload"][as="font"]')).map(link => ({
+    href: link.href,
+    name: getFontName(link.href),
+    crossorigin: link.crossOrigin,
+    type: link.type || "unknown",
+    thirdParty: isThirdParty(link.href)
+  }));
+  const loadedFonts = Array.from(document.fonts.values()).filter(font => font.status === "loaded").map(font => ({
+    family: font.family.replace(/["']/g, ""),
+    weight: font.weight,
+    style: font.style,
+    display: font.display || "unknown",
+    key: `${font.family.replace(/["']/g, "")}-${font.weight}-${font.style}`
+  }));
+  const uniqueLoadedFonts = Array.from(new Map(loadedFonts.map(f => [ f.key, f ])).values());
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+  const aboveFoldElements = Array.from(document.querySelectorAll("body *:not(script):not(style):not(link):not(source)")).filter(el => {
+    const rect = el.getBoundingClientRect();
+    return rect.top < viewportHeight && rect.bottom > 0 && rect.left < viewportWidth && rect.right > 0 && rect.width > 0 && rect.height > 0;
+  });
+  const usedFontsMap = new Map;
+  aboveFoldElements.forEach(el => {
+    const style = getComputedStyle(el);
+    const family = style.fontFamily;
+    const weight = style.fontWeight;
+    const fontStyle = style.fontStyle;
+    const key = `${family}-${weight}-${fontStyle}`;
+    if (!usedFontsMap.has(key)) usedFontsMap.set(key, {
+      family: family.split(",")[0].trim().replace(/["']/g, ""),
+      fullFamily: family,
+      weight: weight,
+      style: fontStyle,
+      elements: 1
+    }); else usedFontsMap.get(key).elements++;
+  });
+  const usedFonts = Array.from(usedFontsMap.values());
+  const preloadedNames = preloadedFonts.map(f => normalizeFontFamily(f.name.replace(/\.(woff2?|ttf|otf|eot)$/i, "")));
+  uniqueLoadedFonts.map(f => normalizeFontFamily(f.family));
+  const usedFamilies = usedFonts.map(f => normalizeFontFamily(f.family));
+  const preloadedNotUsed = preloadedFonts.filter(f => {
+    const name = normalizeFontFamily(f.name.replace(/\.(woff2?|ttf|otf|eot)$/i, ""));
+    return !usedFamilies.some(used => used.includes(name) || name.includes(used));
+  });
+  const usedNotPreloaded = usedFonts.filter(f => {
+    const family = normalizeFontFamily(f.family);
+    const systemFonts = [ "arial", "helvetica", "times", "georgia", "verdana", "system-ui", "-apple-system", "segoe ui", "roboto", "sans-serif", "serif", "monospace" ];
+    if (systemFonts.some(sf => family.includes(sf))) return false;
+    return !preloadedNames.some(preloaded => preloaded.includes(family) || family.includes(preloaded));
+  });
+  if (preloadedFonts.length === 0) void 0; else {
+    preloadedFonts.map(f => ({
+      Font: f.name,
+      Type: f.type,
+      "Third-Party": f.thirdParty ? "Yes" : "No",
+      Crossorigin: f.crossorigin || "missing ⚠️"
+    }));
+    const missingCrossorigin = preloadedFonts.filter(f => !f.crossorigin);
+    if (missingCrossorigin.length > 0) void 0;
+  }
+  if (uniqueLoadedFonts.length === 0) void 0; else {
+    uniqueLoadedFonts.map(f => ({
+      Family: f.family,
+      Weight: f.weight,
+      Style: f.style,
+      Display: f.display
+    }));
+    const autoDisplay = uniqueLoadedFonts.filter(f => f.display === "auto" || f.display === "unknown");
+    if (autoDisplay.length > 0) void 0;
+  }
+  if (usedFonts.length === 0) void 0; else {
+    usedFonts.sort((a, b) => b.elements - a.elements).map(f => ({
+      Family: f.family,
+      Weight: f.weight,
+      Style: f.style,
+      "Elements Using": f.elements
+    }));
+  }
+  const hasIssues = preloadedNotUsed.length > 0 || usedNotPreloaded.length > 0;
+  if (hasIssues) {
+    if (preloadedNotUsed.length > 0) {
+      preloadedNotUsed.forEach(f => {
+      });
+    }
+    if (usedNotPreloaded.length > 0) {
+      usedNotPreloaded.forEach(f => {
+      });
+    }
+  } else if (preloadedFonts.length > 0 && usedFonts.length > 0) {
+  }
+  return {
+    script: "Fonts-Preloaded-Loaded-and-used-above-the-fold",
+    status: "ok",
+    count: uniqueLoadedFonts.length,
+    details: {
+      preloadedCount: preloadedFonts.length,
+      loadedCount: uniqueLoadedFonts.length,
+      usedAboveFoldCount: usedFonts.length,
+      preloadedNotUsedCount: preloadedNotUsed.length,
+      usedNotPreloadedCount: usedNotPreloaded.length
+    },
+    items: uniqueLoadedFonts.map(f => ({
+      family: f.family,
+      weight: f.weight,
+      style: f.style,
+      display: f.display
+    })),
+    issues: [ ...preloadedNotUsed.map(f => ({
+      severity: "warning",
+      message: `Preloaded but not used above fold: ${f.name}`
+    })), ...usedNotPreloaded.map(f => ({
+      severity: "warning",
+      message: `Used above fold but not preloaded: ${f.family} (${f.weight})`
+    })), ...preloadedFonts.filter(f => !f.crossorigin).map(f => ({
+      severity: "error",
+      message: `Font preloaded without crossorigin (double fetch): ${f.name}`
+    })) ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Inline-CSS-Info-and-Size.js b/skills/webperf-loading/scripts-readable/Inline-CSS-Info-and-Size.js
new file mode 100644
index 0000000..bc21b18
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Inline-CSS-Info-and-Size.js
@@ -0,0 +1,136 @@
+(() => {
+  const formatBytes = bytes => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
+  };
+  const formatKB = bytes => (bytes / 1024).toFixed(2);
+  const styleTags = Array.from(document.querySelectorAll("style"));
+  if (styleTags.length === 0) {
+    return {
+      script: "Inline-CSS-Info-and-Size",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  const styles = styleTags.map((style, index) => {
+    const content = style.innerHTML;
+    const size = new Blob([ content ]).size;
+    const parent = style.parentElement?.tagName.toLowerCase() || "unknown";
+    const inHead = style.closest("head") !== null;
+    const ruleCount = (content.match(/\{[^}]*\}/g) || []).length;
+    const preview = content.replace(/\s+/g, " ").trim().slice(0, 80);
+    const hasMediaQueries = /@media/i.test(content);
+    const hasKeyframes = /@keyframes/i.test(content);
+    return {
+      index: index + 1,
+      element: style,
+      size: size,
+      sizeKB: formatKB(size),
+      parent: parent,
+      inHead: inHead,
+      ruleCount: ruleCount,
+      preview: preview + (content.length > 80 ? "..." : ""),
+      hasMediaQueries: hasMediaQueries,
+      hasKeyframes: hasKeyframes,
+      content: content
+    };
+  });
+  const totalSize = styles.reduce((sum, s) => sum + s.size, 0);
+  const totalRules = styles.reduce((sum, s) => sum + s.ruleCount, 0);
+  const criticalBudget = 14 * 1024;
+  const contentMap = new Map;
+  styles.forEach(s => {
+    const normalized = s.content.replace(/\s+/g, " ").trim();
+    if (!contentMap.has(normalized)) contentMap.set(normalized, []);
+    contentMap.get(normalized).push(s.index);
+  });
+  const duplicates = Array.from(contentMap.entries()).filter(([_, indices]) => indices.length > 1).map(([_, indices]) => indices);
+  let rating, ratingColor;
+  if (totalSize <= criticalBudget * 0.5) {
+    rating = "Good";
+    ratingColor = "#22c55e";
+  } else if (totalSize <= criticalBudget) {
+    rating = "Acceptable";
+    ratingColor = "#f59e0b";
+  } else {
+    rating = "Too Large";
+    ratingColor = "#ef4444";
+  }
+  const budgetPct = Math.min(totalSize / criticalBudget * 100, 100);
+  const barWidth = Math.round(budgetPct / 5);
+  "█".repeat(barWidth), "░".repeat(20 - barWidth);
+  styles.map(s => ({
+    "#": s.index,
+    Location: s.inHead ? "head" : "body",
+    Size: formatBytes(s.size),
+    Rules: s.ruleCount,
+    "Media Queries": s.hasMediaQueries ? "Yes" : "-",
+    Animations: s.hasKeyframes ? "Yes" : "-",
+    Preview: s.preview
+  }));
+  styles.forEach(s => {
+    s.size;
+  });
+  const issues = [];
+  if (totalSize > criticalBudget) issues.push({
+    type: "size",
+    message: `Total inline CSS (${formatBytes(totalSize)}) exceeds 14 KB critical budget`,
+    suggestion: "Move non-critical styles to external stylesheet"
+  });
+  if (duplicates.length > 0) issues.push({
+    type: "duplicate",
+    message: `Found ${duplicates.length} duplicated style block(s)`,
+    details: duplicates.map(d => `Tags #${d.join(", #")} have identical content`),
+    suggestion: "Consolidate duplicate styles into a single block"
+  });
+  const largeBlocks = styles.filter(s => s.size > 5 * 1024);
+  if (largeBlocks.length > 0) issues.push({
+    type: "large",
+    message: `${largeBlocks.length} style block(s) over 5 KB`,
+    details: largeBlocks.map(s => `Tag #${s.index}: ${formatBytes(s.size)}`),
+    suggestion: "Consider moving large blocks to external cached stylesheets"
+  });
+  const bodyStyles = styles.filter(s => !s.inHead);
+  if (bodyStyles.length > 0) issues.push({
+    type: "location",
+    message: `${bodyStyles.length} style block(s) in <body>`,
+    details: bodyStyles.map(s => `Tag #${s.index}`),
+    suggestion: "Move styles to <head> or use external stylesheets for better parsing"
+  });
+  if (issues.length > 0) {
+    issues.forEach(issue => {
+      if (issue.details) issue.details.forEach(d => {});
+    });
+  } else {
+  }
+  return {
+    script: "Inline-CSS-Info-and-Size",
+    status: "ok",
+    count: styles.length,
+    details: {
+      totalSizeBytes: totalSize,
+      totalRules: totalRules,
+      criticalBudgetBytes: criticalBudget,
+      duplicateBlocks: duplicates.length,
+      bodyStyleBlocks: styles.filter(s => !s.inHead).length
+    },
+    items: styles.map(s => ({
+      index: s.index,
+      sizeBytes: s.size,
+      parent: s.parent,
+      inHead: s.inHead,
+      ruleCount: s.ruleCount,
+      hasMediaQueries: s.hasMediaQueries,
+      hasKeyframes: s.hasKeyframes
+    })),
+    issues: issues.map(i => ({
+      severity: "warning",
+      message: i.message
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Inline-Script-Info-and-Size.js b/skills/webperf-loading/scripts-readable/Inline-Script-Info-and-Size.js
new file mode 100644
index 0000000..e0d7791
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Inline-Script-Info-and-Size.js
@@ -0,0 +1,168 @@
+(() => {
+  const formatBytes = bytes => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
+  };
+  const formatKB = bytes => (bytes / 1024).toFixed(2);
+  const scriptTags = Array.from(document.querySelectorAll("script:not([src])")).filter(s => s.innerHTML.trim().length > 0);
+  if (scriptTags.length === 0) {
+    return {
+      script: "Inline-Script-Info-and-Size",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  const scripts = scriptTags.map((script, index) => {
+    const content = script.innerHTML;
+    const size = new Blob([ content ]).size;
+    const type = script.type || "text/javascript";
+    const inHead = script.closest("head") !== null;
+    let category = "classic";
+    if (type === "module") category = "module"; else if (type === "application/ld+json") category = "json-ld"; else if (type.includes("template") || type === "text/html") category = "template"; else if (type !== "text/javascript" && type !== "") category = "other";
+    const isParserBlocking = category === "classic" && !script.hasAttribute("async") && !script.hasAttribute("defer");
+    const preview = content.replace(/\s+/g, " ").trim().slice(0, 80);
+    const hasGlobalVars = /^(var|let|const|window\.)/.test(content.trim());
+    const isConfig = /config|settings|options|__/i.test(content.slice(0, 200));
+    const isAnalytics = /gtag|analytics|gtm|fbq|_gaq/i.test(content);
+    return {
+      index: index + 1,
+      element: script,
+      size: size,
+      sizeKB: formatKB(size),
+      type: type,
+      category: category,
+      inHead: inHead,
+      isParserBlocking: isParserBlocking,
+      hasGlobalVars: hasGlobalVars,
+      isConfig: isConfig,
+      isAnalytics: isAnalytics,
+      preview: preview + (content.length > 80 ? "..." : ""),
+      content: content
+    };
+  });
+  const executableScripts = scripts.filter(s => s.category === "classic" || s.category === "module");
+  const jsonLdScripts = scripts.filter(s => s.category === "json-ld");
+  const otherScripts = scripts.filter(s => s.category === "template" || s.category === "other");
+  const totalSize = executableScripts.reduce((sum, s) => sum + s.size, 0);
+  const parserBlockingScripts = executableScripts.filter(s => s.isParserBlocking);
+  const parserBlockingInHead = parserBlockingScripts.filter(s => s.inHead);
+  const contentMap = new Map;
+  executableScripts.forEach(s => {
+    const normalized = s.content.replace(/\s+/g, " ").trim();
+    if (normalized.length > 50) {
+      if (!contentMap.has(normalized)) contentMap.set(normalized, []);
+      contentMap.get(normalized).push(s.index);
+    }
+  });
+  const duplicates = Array.from(contentMap.entries()).filter(([_, indices]) => indices.length > 1).map(([_, indices]) => indices);
+  let rating, ratingColor;
+  const inlineThreshold = 3 * 1024;
+  if (totalSize <= inlineThreshold && parserBlockingInHead.length === 0) {
+    rating = "Good";
+    ratingColor = "#22c55e";
+  } else if (totalSize <= inlineThreshold * 2 || parserBlockingInHead.length <= 2) {
+    rating = "Needs Review";
+    ratingColor = "#f59e0b";
+  } else {
+    rating = "Needs Optimization";
+    ratingColor = "#ef4444";
+  }
+  if (jsonLdScripts.length > 0) void 0;
+  if (otherScripts.length > 0) void 0;
+  if (parserBlockingInHead.length > 0) void 0;
+  if (executableScripts.length > 0) {
+    executableScripts.sort((a, b) => b.size - a.size).map(s => ({
+      "#": s.index,
+      Location: s.inHead ? "head" : "body",
+      Type: s.category,
+      Size: formatBytes(s.size),
+      "Parser-Blocking": s.isParserBlocking ? "⚠️ Yes" : "No",
+      Pattern: s.isAnalytics ? "Analytics" : s.isConfig ? "Config" : s.hasGlobalVars ? "Globals" : "-",
+      Preview: s.preview
+    }));
+    executableScripts.sort((a, b) => b.size - a.size).forEach(s => {
+      const warnings = [];
+      if (s.isParserBlocking && s.inHead) warnings.push("blocking");
+      if (s.size > 2 * 1024) warnings.push("large");
+      warnings.length > 0 && warnings.join(", ");
+    });
+  }
+  if (jsonLdScripts.length > 0) {
+    jsonLdScripts.map(s => {
+      let schemaType = "-";
+      try {
+        const parsed = JSON.parse(s.content);
+        schemaType = parsed["@type"] || (Array.isArray(parsed) ? "Array" : "-");
+      } catch {}
+      return {
+        "#": s.index,
+        "Schema Type": schemaType,
+        Size: formatBytes(s.size)
+      };
+    });
+  }
+  const issues = [];
+  if (parserBlockingInHead.length > 0) issues.push({
+    type: "blocking",
+    message: `${parserBlockingInHead.length} parser-blocking script(s) in <head>`,
+    details: parserBlockingInHead.map(s => `Script #${s.index}: ${formatBytes(s.size)}`),
+    suggestion: "Move to end of <body> or add 'defer' attribute"
+  });
+  const largeScripts = executableScripts.filter(s => s.size > 2 * 1024);
+  if (largeScripts.length > 0) issues.push({
+    type: "large",
+    message: `${largeScripts.length} script(s) over 2 KB`,
+    details: largeScripts.map(s => `Script #${s.index}: ${formatBytes(s.size)}`),
+    suggestion: "Consider moving large scripts to external cacheable files"
+  });
+  if (duplicates.length > 0) issues.push({
+    type: "duplicate",
+    message: `${duplicates.length} duplicated script(s) detected`,
+    details: duplicates.map(d => `Scripts #${d.join(", #")} have identical content`),
+    suggestion: "Remove duplicate scripts or consolidate into one"
+  });
+  const analyticsInHead = executableScripts.filter(s => s.isAnalytics && s.inHead && s.isParserBlocking);
+  if (analyticsInHead.length > 0) issues.push({
+    type: "analytics",
+    message: `${analyticsInHead.length} analytics script(s) blocking in <head>`,
+    details: analyticsInHead.map(s => `Script #${s.index}`),
+    suggestion: "Load analytics scripts with 'async' or move to <body>"
+  });
+  if (issues.length > 0) {
+    issues.forEach(issue => {
+      if (issue.details) issue.details.forEach(d => {});
+    });
+  } else if (executableScripts.length > 0) {
+  }
+  return {
+    script: "Inline-Script-Info-and-Size",
+    status: "ok",
+    count: scripts.length,
+    details: {
+      executableCount: executableScripts.length,
+      jsonLdCount: jsonLdScripts.length,
+      otherCount: otherScripts.length,
+      totalSizeBytes: totalSize,
+      parserBlockingCount: parserBlockingScripts.length,
+      parserBlockingInHeadCount: parserBlockingInHead.length
+    },
+    items: executableScripts.map(s => ({
+      index: s.index,
+      sizeBytes: s.size,
+      category: s.category,
+      inHead: s.inHead,
+      isParserBlocking: s.isParserBlocking,
+      isAnalytics: s.isAnalytics,
+      isConfig: s.isConfig
+    })),
+    issues: issues.map(i => ({
+      severity: i.type === "blocking" ? "error" : "warning",
+      message: i.message
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/JS-Execution-Time-Breakdown.js b/skills/webperf-loading/scripts-readable/JS-Execution-Time-Breakdown.js
new file mode 100644
index 0000000..84b9206
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/JS-Execution-Time-Breakdown.js
@@ -0,0 +1,176 @@
+(() => {
+  const formatMs = ms => ms > 0 ? ms.toFixed(0) + "ms" : "-";
+  const formatBytes = bytes => {
+    if (!bytes || bytes === 0) return "-";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(Math.max(bytes, 1)) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+  };
+  const formatBar = (value, max, width = 16) => {
+    if (value <= 0 || max <= 0) return "░".repeat(width);
+    const filled = Math.min(Math.round(value / max * width), width);
+    return "█".repeat(filled) + "░".repeat(width - filled);
+  };
+  const nav = performance.getEntriesByType("navigation")[0];
+  const domInteractive = nav?.domInteractive || 0;
+  const domContentLoaded = nav?.domContentLoadedEventEnd || 0;
+  const loadEvent = nav?.loadEventEnd || 0;
+  const scriptResources = performance.getEntriesByType("resource").filter(r => r.initiatorType === "script").map(r => {
+    let shortName;
+    try {
+      const url = new URL(r.name);
+      shortName = url.pathname.split("/").pop() || url.hostname;
+    } catch {
+      shortName = r.name.split("/").pop() || r.name;
+    }
+    const transferSize = r.transferSize || 0;
+    const decodedSize = r.decodedBodySize || 0;
+    const downloadDuration = Math.round(r.responseEnd - r.startTime);
+    const corsRestricted = transferSize === 0 && decodedSize === 0 && downloadDuration > 0;
+    const estimatedParseMobile = Math.round(decodedSize / 1024);
+    const estimatedParseDesktop = Math.round(decodedSize / 1024 / 3);
+    return {
+      name: r.name,
+      shortName: shortName.split("?")[0] || shortName,
+      startTime: r.startTime,
+      responseEnd: r.responseEnd,
+      downloadDuration: downloadDuration,
+      transferSize: transferSize,
+      decodedSize: decodedSize,
+      corsRestricted: corsRestricted,
+      estimatedParseMobile: estimatedParseMobile,
+      estimatedParseDesktop: estimatedParseDesktop,
+      totalCostMs: downloadDuration + estimatedParseMobile
+    };
+  }).sort((a, b) => a.startTime - b.startTime);
+  const blockingSet = new Set;
+  Array.from(document.querySelectorAll("script[src]")).forEach(el => {
+    const isModule = el.type === "module";
+    if (!el.async && !el.defer && !isModule && el.closest("head")) blockingSet.add(el.src);
+  });
+  const scripts = scriptResources.map(s => ({
+    ...s,
+    isBlocking: blockingSet.has(s.name)
+  }));
+  const blocking = scripts.filter(s => s.isBlocking);
+  const nonBlocking = scripts.filter(s => !s.isBlocking);
+  const totalDownload = scripts.reduce((sum, s) => sum + s.downloadDuration, 0);
+  const totalEstParse = scripts.reduce((sum, s) => sum + s.estimatedParseMobile, 0);
+  const totalSize = scripts.reduce((sum, s) => sum + s.transferSize, 0);
+  const totalDecodedSize = scripts.reduce((sum, s) => sum + s.decodedSize, 0);
+  const blockingCriticalPathEnd = blocking.reduce((max, s) => {
+    const estimatedDone = s.responseEnd + s.estimatedParseMobile;
+    return Math.max(max, estimatedDone);
+  }, 0);
+  const jsBlockingDelay = blocking.length > 0 && domInteractive > 0 ? Math.min(blockingCriticalPathEnd, domInteractive) : 0;
+  const SPLIT_THRESHOLD = 50 * 1024;
+  const splitCandidates = scripts.filter(s => s.decodedSize > SPLIT_THRESHOLD);
+  if (domInteractive > 0) {
+    const timelineMax = loadEvent || domContentLoaded || domInteractive;
+    const rows = [ {
+      label: "Navigation start",
+      time: 0
+    }, {
+      label: "DOM Interactive",
+      time: domInteractive
+    }, {
+      label: "DOM Content Loaded",
+      time: domContentLoaded
+    }, {
+      label: "Load event",
+      time: loadEvent
+    } ].filter(r => r.time > 0);
+    rows.forEach(({label: label, time: time}) => {
+      formatBar(time, timelineMax, 20);
+    });
+    if (domInteractive > 0) {
+      domInteractive > 0 && (jsBlockingDelay / domInteractive * 100).toFixed(0);
+    }
+  } else void 0;
+  if (scripts.length > 0) {
+    const corsCount = scripts.filter(s => s.corsRestricted).length;
+    if (corsCount > 0) {
+    }
+    const maxCost = Math.max(...scripts.map(s => s.totalCostMs));
+    scripts.sort((a, b) => b.totalCostMs - a.totalCostMs).slice(0, 20).map(s => {
+      const name = s.shortName.length > 35 ? s.shortName.slice(0, 32) + "..." : s.shortName;
+      return {
+        "": s.isBlocking ? "🔴" : "✅",
+        Script: name,
+        Download: formatMs(s.downloadDuration),
+        "Parse(mob)": s.corsRestricted ? "CORS" : formatMs(s.estimatedParseMobile),
+        "Parse(dsk)": s.corsRestricted ? "CORS" : formatMs(s.estimatedParseDesktop),
+        Transfer: s.corsRestricted ? "CORS" : formatBytes(s.transferSize),
+        Decoded: s.corsRestricted ? "CORS" : formatBytes(s.decodedSize),
+        "": formatBar(s.totalCostMs, maxCost)
+      };
+    });
+    if (scripts.length > 20) void 0;
+    const criticalBundles = scripts.filter(s => !s.corsRestricted && s.decodedSize > 1024 * 1024);
+    if (criticalBundles.length > 0) {
+      criticalBundles.sort((a, b) => b.decodedSize - a.decodedSize).forEach(s => {
+      });
+    }
+  }
+  if (blocking.length > 0) {
+    blocking.sort((a, b) => b.totalCostMs - a.totalCostMs).forEach(s => {
+      s.shortName.length > 40 ? s.shortName.slice(0, 37) : s.shortName;
+    });
+  }
+  if (splitCandidates.length > 0) {
+    splitCandidates.sort((a, b) => b.decodedSize - a.decodedSize).forEach(s => {
+      s.shortName.length > 40 ? s.shortName.slice(0, 37) : s.shortName;
+    });
+  }
+  const hasHighParseTime = totalEstParse > 500;
+  const hasBlockingScripts = blocking.length > 0;
+  const compressionRatio = totalDecodedSize / Math.max(totalSize, 1);
+  const poorCompression = compressionRatio < 2 && totalSize > 10 * 1024;
+  if (!hasBlockingScripts && !hasHighParseTime && splitCandidates.length === 0) void 0;
+  if (hasBlockingScripts) {
+  }
+  if (hasHighParseTime) {
+  }
+  if (poorCompression) {
+  }
+  return {
+    script: "JS-Execution-Time-Breakdown",
+    status: "ok",
+    count: scripts.length,
+    details: {
+      blockingCount: blocking.length,
+      nonBlockingCount: nonBlocking.length,
+      totalTransferBytes: totalSize,
+      totalDecodedBytes: totalDecodedSize,
+      totalDownloadMs: Math.round(totalDownload),
+      totalEstParseMobileMs: Math.round(totalEstParse),
+      splitCandidatesCount: splitCandidates.length,
+      domInteractiveMs: Math.round(domInteractive),
+      domContentLoadedMs: Math.round(domContentLoaded),
+      loadEventMs: Math.round(loadEvent)
+    },
+    items: scripts.slice(0, 50).map(s => ({
+      shortName: s.shortName,
+      isBlocking: s.isBlocking,
+      downloadMs: Math.round(s.downloadDuration),
+      estimatedParseMobileMs: s.estimatedParseMobile,
+      transferBytes: s.transferSize,
+      decodedBytes: s.decodedSize,
+      corsRestricted: s.corsRestricted
+    })),
+    issues: [ ...blocking.length > 0 ? [ {
+      severity: "error",
+      message: `${blocking.length} render-blocking script(s) delay HTML parsing`
+    } ] : [], ...hasHighParseTime ? [ {
+      severity: "warning",
+      message: `High estimated parse cost (~${Math.round(totalEstParse)}ms on mobile)`
+    } ] : [], ...splitCandidates.length > 0 ? [ {
+      severity: "warning",
+      message: `${splitCandidates.length} script(s) over 50KB decoded — consider code splitting`
+    } ] : [], ...poorCompression ? [ {
+      severity: "warning",
+      message: `Low compression ratio (${compressionRatio.toFixed(1)}x) — enable Brotli/gzip`
+    } ] : [] ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Prefetch-Resource-Validation.js b/skills/webperf-loading/scripts-readable/Prefetch-Resource-Validation.js
new file mode 100644
index 0000000..1476fb9
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Prefetch-Resource-Validation.js
@@ -0,0 +1,223 @@
+(() => {
+  const prefetchLinks = Array.from(document.querySelectorAll('link[rel="prefetch"]'));
+  if (prefetchLinks.length === 0) {
+    return {
+      script: "Prefetch-Resource-Validation",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  const performanceEntries = performance.getEntriesByType("resource");
+  const entryUrlMap = new Map;
+  performanceEntries.forEach(entry => {
+    try {
+      const normalizedUrl = new URL(entry.name, location.origin).href;
+      if (!entryUrlMap.has(normalizedUrl)) entryUrlMap.set(normalizedUrl, []);
+      entryUrlMap.get(normalizedUrl).push(entry);
+    } catch {}
+  });
+  const validAsValues = new Set([ "script", "style", "font", "image", "video", "audio", "document", "fetch", "track", "worker" ]);
+  const THRESHOLDS = {
+    maxCount: 10,
+    largeFileSize: 500 * 1024,
+    largeScriptSize: 1024 * 1024,
+    totalSizeWarning: 2 * 1024 * 1024,
+    totalSizeCritical: 5 * 1024 * 1024
+  };
+  const issues = [];
+  const validPrefetch = [];
+  const seenUrls = new Set;
+  let totalSize = 0;
+  let totalTransferSize = 0;
+  prefetchLinks.forEach(link => {
+    const href = link.href;
+    const as = link.getAttribute("as") || "unknown";
+    const shortUrl = href.split("/").pop()?.split("?")[0]?.split("#")[0] || href;
+    let normalizedUrl;
+    try {
+      normalizedUrl = new URL(href, location.origin).href;
+    } catch {
+      normalizedUrl = href;
+    }
+    const matchingEntries = entryUrlMap.get(normalizedUrl) || [];
+    const perfEntry = matchingEntries[0];
+    const analysis = {
+      link: link,
+      href: href,
+      shortUrl: shortUrl,
+      as: as,
+      size: 0,
+      transferSize: 0,
+      duration: 0,
+      loaded: false,
+      isCurrentPage: false,
+      warnings: []
+    };
+    if (as === "unknown") analysis.warnings.push({
+      type: "missing-as",
+      severity: "warning",
+      message: "Missing 'as' attribute - browser cannot apply correct MIME type matching"
+    }); else if (!validAsValues.has(as)) analysis.warnings.push({
+      type: "invalid-as",
+      severity: "warning",
+      message: `Invalid 'as' value: "${as}" - should be one of: ${Array.from(validAsValues).join(", ")}`
+    });
+    if (seenUrls.has(normalizedUrl)) analysis.warnings.push({
+      type: "duplicate-prefetch",
+      severity: "warning",
+      message: "Duplicate prefetch - this URL is prefetched multiple times"
+    });
+    seenUrls.add(normalizedUrl);
+    if (perfEntry) {
+      analysis.loaded = true;
+      analysis.size = perfEntry.decodedBodySize || 0;
+      analysis.transferSize = perfEntry.transferSize || 0;
+      analysis.duration = perfEntry.duration || 0;
+      if (perfEntry.encodedBodySize > 0 && perfEntry.transferSize === 0) analysis.cacheStatus = "cached"; else if (perfEntry.encodedBodySize === 0 && perfEntry.transferSize === 0) analysis.cacheStatus = "unknown (CORS)"; else analysis.cacheStatus = "network";
+      totalSize += analysis.size;
+      totalTransferSize += analysis.transferSize;
+      const isCurrentPageResource = matchingEntries.some(entry => entry.initiatorType !== "link" && entry.startTime < 5000);
+      if (isCurrentPageResource) {
+        analysis.isCurrentPage = true;
+        analysis.warnings.push({
+          type: "wrong-hint",
+          severity: "error",
+          message: "Resource used on current page - should use preload instead"
+        });
+      }
+      if (analysis.size > THRESHOLDS.largeFileSize) {
+        const sizeMB = (analysis.size / (1024 * 1024)).toFixed(2);
+        analysis.warnings.push({
+          type: "large-file",
+          severity: "warning",
+          message: `Large file (${sizeMB}MB) - consider if prefetch is appropriate`
+        });
+      }
+      let isInappropriate = false;
+      let inappropriateReason = "";
+      if (as === "video" || as === "audio") {
+        isInappropriate = true;
+        inappropriateReason = "Video/audio files are typically too large for prefetch";
+      } else if (as === "image" && analysis.size > 200 * 1024) {
+        isInappropriate = true;
+        inappropriateReason = `Image is ${(analysis.size / 1024).toFixed(0)}KB (>200KB threshold)`;
+      } else if (as === "script" && analysis.size > THRESHOLDS.largeScriptSize) {
+        isInappropriate = true;
+        inappropriateReason = `Script is ${(analysis.size / 1024).toFixed(0)}KB (>1MB threshold)`;
+      }
+      if (isInappropriate) analysis.warnings.push({
+        type: "inappropriate-type",
+        severity: "warning",
+        message: `Type "${as}" may not be suitable for prefetch: ${inappropriateReason}`
+      });
+    } else analysis.warnings.push({
+      type: "not-loaded",
+      severity: "info",
+      message: "Not loaded yet or failed to load"
+    });
+    if (analysis.warnings.length > 0) issues.push(analysis); else validPrefetch.push(analysis);
+  });
+  const countIssues = [];
+  if (prefetchLinks.length > THRESHOLDS.maxCount) countIssues.push({
+    type: "excessive-count",
+    severity: "warning",
+    message: `${prefetchLinks.length} prefetch hints found (recommended: <${THRESHOLDS.maxCount})`,
+    explanation: "Excessive prefetch can waste bandwidth, especially on mobile networks"
+  });
+  const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);
+  (totalTransferSize / (1024 * 1024)).toFixed(2);
+  if (totalSize > THRESHOLDS.totalSizeCritical) countIssues.push({
+    type: "excessive-size",
+    severity: "error",
+    message: `Total prefetch size: ${totalSizeMB}MB (critical threshold exceeded)`,
+    explanation: "This is very high and will significantly impact mobile users"
+  }); else if (totalSize > THRESHOLDS.totalSizeWarning) countIssues.push({
+    type: "high-size",
+    severity: "warning",
+    message: `Total prefetch size: ${totalSizeMB}MB (warning threshold exceeded)`,
+    explanation: "Consider reducing prefetch to improve mobile experience"
+  });
+  const loadedCount = [ ...issues, ...validPrefetch ].filter(item => item.loaded).length;
+  const meaningfulIssues = issues.filter(i => i.warnings.some(w => w.severity === "error" || w.severity === "warning"));
+  const totalMeaningfulIssues = meaningfulIssues.length + countIssues.length;
+  if (countIssues.length > 0) {
+    countIssues.forEach(issue => {
+      issue.severity;
+      issue.severity;
+    });
+  }
+  const errors = issues.filter(i => i.warnings.some(w => w.severity === "error"));
+  const warnings = issues.filter(i => !i.warnings.some(w => w.severity === "error") && i.warnings.some(w => w.severity === "warning"));
+  const infos = issues.filter(i => i.warnings.every(w => w.severity === "info"));
+  if (errors.length > 0) {
+    errors.map(item => ({
+      Resource: item.shortUrl,
+      Type: item.as,
+      Size: item.size > 0 ? `${(item.size / 1024).toFixed(1)} KB` : "Unknown",
+      Duration: item.duration > 0 ? `${item.duration.toFixed(0)} ms` : "N/A",
+      Issue: item.warnings.map(w => w.message).join("; ")
+    }));
+    errors.forEach((item, i) => {
+      if (item.size > 0) void 0;
+      item.warnings.forEach(w => {
+      });
+    });
+  }
+  if (warnings.length > 0) {
+    warnings.map(item => ({
+      Resource: item.shortUrl,
+      Type: item.as,
+      Size: item.size > 0 ? `${(item.size / 1024).toFixed(1)} KB` : "Unknown",
+      Duration: item.duration > 0 ? `${item.duration.toFixed(0)} ms` : "N/A",
+      Issue: item.warnings.map(w => w.message).join("; ")
+    }));
+  }
+  if (infos.length > 0) {
+    infos.map(item => ({
+      Resource: item.shortUrl,
+      Type: item.as,
+      Status: item.warnings.map(w => w.message).join("; ")
+    }));
+  }
+  if (validPrefetch.length > 0) {
+    validPrefetch.map(item => ({
+      Resource: item.shortUrl,
+      Type: item.as,
+      Size: item.size > 0 ? `${(item.size / 1024).toFixed(1)} KB` : "Unknown",
+      Duration: item.duration > 0 ? `${item.duration.toFixed(0)} ms` : "N/A",
+      Status: item.loaded ? "✅ Loaded" : "Pending",
+      Cache: item.cacheStatus || "N/A"
+    }));
+  }
+  if (totalMeaningfulIssues === 0) {
+  } else {
+  }
+  return {
+    script: "Prefetch-Resource-Validation",
+    status: "ok",
+    count: prefetchLinks.length,
+    details: {
+      loadedCount: loadedCount,
+      validCount: validPrefetch.length,
+      issueCount: totalMeaningfulIssues,
+      totalSizeBytes: totalSize,
+      totalTransferBytes: totalTransferSize
+    },
+    items: [ ...validPrefetch, ...issues ].map(item => ({
+      href: item.shortUrl,
+      as: item.as,
+      sizeBytes: item.size,
+      loaded: item.loaded,
+      isCurrentPage: item.isCurrentPage || false
+    })),
+    issues: [ ...countIssues.map(i => ({
+      severity: i.severity === "error" ? "error" : "warning",
+      message: i.message
+    })), ...issues.flatMap(item => item.warnings.filter(w => w.severity !== "info").map(w => ({
+      severity: w.severity,
+      message: `${item.shortUrl}: ${w.message}`
+    }))) ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Priority-Hints-Audit.js b/skills/webperf-loading/scripts-readable/Priority-Hints-Audit.js
new file mode 100644
index 0000000..9cdee5c
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Priority-Hints-Audit.js
@@ -0,0 +1,138 @@
+(() => {
+  function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0 && rect.width > 0 && rect.height > 0;
+  }
+  function findLcpCandidate() {
+    const imgs = Array.from(document.querySelectorAll("img")).filter(isInViewport);
+    let candidate = null;
+    let maxArea = 0;
+    imgs.forEach(img => {
+      const {width: width, height: height} = img.getBoundingClientRect();
+      const area = width * height;
+      if (area > maxArea) {
+        maxArea = area;
+        candidate = img;
+      }
+    });
+    return candidate;
+  }
+  function shortUrl(el) {
+    const src = el.src || el.href || el.getAttribute("href") || "";
+    return src.split("/").pop()?.split("?")[0] || src.slice(-50) || "(unknown)";
+  }
+  const entryMap = new Map;
+  performance.getEntriesByType("resource").forEach(e => {
+    try {
+      entryMap.set(new URL(e.name, location.origin).href, e);
+    } catch {}
+  });
+  function getEntry(el) {
+    const src = el.src || el.href || el.getAttribute("href") || "";
+    if (!src) return null;
+    try {
+      return entryMap.get(new URL(src, location.origin).href) || null;
+    } catch {
+      return null;
+    }
+  }
+  const allElements = Array.from(document.querySelectorAll("[fetchpriority]"));
+  const nonImageElements = allElements.filter(el => el.tagName !== "IMG");
+  allElements.filter(el => el.tagName === "IMG");
+  const preloadsWithPriority = Array.from(document.querySelectorAll('link[rel="preload"][fetchpriority]'));
+  const lcpCandidate = findLcpCandidate();
+  const issues = [];
+  preloadsWithPriority.filter(link => link.getAttribute("fetchpriority") === "low").forEach(link => {
+    issues.push({
+      severity: "error",
+      element: link,
+      resource: shortUrl(link),
+      message: 'preload + fetchpriority="low" is contradictory',
+      detail: 'preload signals this resource is critical for the current page; fetchpriority="low" contradicts that.',
+      fix: 'Remove fetchpriority="low", or use fetchpriority="high" if the resource is truly critical'
+    });
+  });
+  allElements.filter(el => el.getAttribute("fetchpriority") === "low").forEach(el => {
+    const entry = getEntry(el);
+    if (entry && entry.startTime < 500) issues.push({
+      severity: "warning",
+      element: el,
+      resource: shortUrl(el),
+      message: `fetchpriority="low" but loaded at ${entry.startTime.toFixed(0)}ms`,
+      detail: "This resource loaded very early. If it's genuinely non-critical, the browser is deprioritizing it correctly. Otherwise, reconsider the priority.",
+      fix: 'Verify the resource is non-critical, or remove fetchpriority="low"'
+    });
+  });
+  allElements.filter(el => el.getAttribute("fetchpriority") === "high").forEach(el => {
+    const entry = getEntry(el);
+    if (entry && entry.startTime > 3000) issues.push({
+      severity: "warning",
+      element: el,
+      resource: shortUrl(el),
+      message: `fetchpriority="high" but loaded at ${entry.startTime.toFixed(0)}ms`,
+      detail: "High-priority resources should load early. A late start may indicate render-blocking dependencies or incorrect placement in the document.",
+      fix: "Move the element earlier in the HTML or investigate render-blocking dependencies"
+    });
+  });
+  if (lcpCandidate && lcpCandidate.getAttribute("fetchpriority") !== "high") {
+    const fp = lcpCandidate.getAttribute("fetchpriority");
+    issues.push({
+      severity: "warning",
+      element: lcpCandidate,
+      resource: (lcpCandidate.currentSrc || lcpCandidate.src).split("/").pop()?.split("?")[0] || "LCP image",
+      message: `LCP candidate image ${fp ? `has fetchpriority="${fp}"` : "has no fetchpriority set"}`,
+      detail: 'The largest visible image is likely the LCP element and benefits most from fetchpriority="high".',
+      fix: 'Add fetchpriority="high" to the LCP image to improve Largest Contentful Paint'
+    });
+  }
+  const highCount = allElements.filter(el => el.getAttribute("fetchpriority") === "high").length;
+  const lowCount = allElements.filter(el => el.getAttribute("fetchpriority") === "low").length;
+  const autoCount = allElements.filter(el => el.getAttribute("fetchpriority") === "auto").length;
+  if (allElements.length === 0 && !lcpCandidate) {
+    return {
+      script: "Priority-Hints-Audit",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  if (lcpCandidate) {
+    lcpCandidate.getAttribute("fetchpriority");
+  }
+  if (nonImageElements.length > 0) {
+    nonImageElements.forEach((el, i) => {});
+  }
+  if (preloadsWithPriority.length > 0) {
+  }
+  const errors = issues.filter(i => i.severity === "error");
+  const warnings = issues.filter(i => i.severity === "warning");
+  if (issues.length > 0) {
+    [ ...errors, ...warnings ].forEach(issue => {
+      issue.severity;
+      issue.severity;
+    });
+  } else {
+  }
+  return {
+    script: "Priority-Hints-Audit",
+    status: "ok",
+    count: allElements.length,
+    details: {
+      highCount: highCount,
+      lowCount: lowCount,
+      autoCount: autoCount,
+      preloadsWithPriorityCount: preloadsWithPriority.length,
+      lcpCandidateHasFetchpriority: lcpCandidate ? lcpCandidate.getAttribute("fetchpriority") === "high" : null
+    },
+    items: allElements.map(el => ({
+      tag: el.tagName.toLowerCase(),
+      fetchpriority: el.getAttribute("fetchpriority"),
+      resource: (el.src || el.href || el.getAttribute("href") || "").split("/").pop()?.split("?")[0] || ""
+    })),
+    issues: issues.map(i => ({
+      severity: i.severity,
+      message: i.message
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Resource-Hints-Validation.js b/skills/webperf-loading/scripts-readable/Resource-Hints-Validation.js
new file mode 100644
index 0000000..77798fe
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Resource-Hints-Validation.js
@@ -0,0 +1,224 @@
+(() => {
+  if (document.readyState !== "complete") {
+  }
+  const preloadLinks = Array.from(document.querySelectorAll('link[rel="preload"]'));
+  const preconnectLinks = Array.from(document.querySelectorAll('link[rel="preconnect"]'));
+  const dnsPrefetchLinks = Array.from(document.querySelectorAll('link[rel="dns-prefetch"]'));
+  const resources = performance.getEntriesByType("resource");
+  const getDomain = url => {
+    try {
+      const absoluteUrl = url.startsWith("http") ? url : new URL(url, location.href).href;
+      return new URL(absoluteUrl).origin;
+    } catch {
+      return null;
+    }
+  };
+  const normalizeUrl = url => {
+    try {
+      const parsed = new URL(url, location.origin);
+      return parsed.origin + parsed.pathname + parsed.search;
+    } catch {
+      return url;
+    }
+  };
+  const formatSize = bytes => {
+    if (!bytes) return "N/A";
+    const kb = bytes / 1024;
+    return kb.toFixed(1) + " KB";
+  };
+  const usedResourceUrls = new Set(resources.map(r => normalizeUrl(r.name)));
+  const usedDomains = new Set(resources.map(r => getDomain(r.name)).filter(Boolean));
+  usedDomains.add(location.origin);
+  const allImgElements = document.querySelectorAll("img[src]");
+  if (preloadLinks.length === 0) void 0; else {
+    const preloadResults = preloadLinks.map(link => {
+      const href = link.href;
+      const as = link.getAttribute("as") || "unknown";
+      const media = link.getAttribute("media");
+      const normalizedUrl = normalizeUrl(href);
+      const shortUrl = href.split("/").pop()?.split("?").shift() || href;
+      const wasUsed = usedResourceUrls.has(normalizedUrl);
+      const perfEntry = resources.find(r => normalizeUrl(r.name) === normalizedUrl);
+      let mediaMatches = true;
+      if (media) try {
+        mediaMatches = window.matchMedia(media).matches;
+      } catch {
+        mediaMatches = false;
+      }
+      return {
+        shortUrl: shortUrl,
+        href: href,
+        as: as,
+        media: media,
+        mediaMatches: mediaMatches,
+        wasUsed: wasUsed,
+        size: perfEntry ? formatSize(perfEntry.decodedBodySize || perfEntry.transferSize) : "N/A",
+        link: link
+      };
+    });
+    const usedPreloads = preloadResults.filter(r => r.wasUsed);
+    const unusedPreloads = preloadResults.filter(r => !r.wasUsed && (!r.media || r.mediaMatches));
+    const conditionalPreloads = preloadResults.filter(r => !r.wasUsed && r.media && !r.mediaMatches);
+    if (unusedPreloads.length > 0) {
+    }
+    if (conditionalPreloads.length > 0) {
+    }
+    if (usedPreloads.length > 0) {
+    }
+    const activePreloads = preloadLinks.length - conditionalPreloads.length;
+    activePreloads > 0 && Math.round(usedPreloads.length / activePreloads * 100);
+    if (unusedPreloads.length === 0) void 0; else void 0;
+  }
+  const lazyLoadedDomains = new Set;
+  allImgElements.forEach(img => {
+    try {
+      const domain = getDomain(img.src);
+      if (domain && domain !== location.origin && !usedDomains.has(domain)) lazyLoadedDomains.add(domain);
+    } catch {}
+  });
+  if (preconnectLinks.length === 0) void 0; else {
+    const preconnectResults = preconnectLinks.map(link => {
+      const href = link.href;
+      const domain = getDomain(href);
+      const wasUsed = domain ? usedDomains.has(domain) : false;
+      const isLazyLoaded = domain ? lazyLoadedDomains.has(domain) : false;
+      const requestCount = resources.filter(r => getDomain(r.name) === domain).length;
+      return {
+        domain: domain,
+        href: href,
+        wasUsed: wasUsed,
+        isLazyLoaded: isLazyLoaded,
+        requestCount: requestCount,
+        link: link
+      };
+    });
+    const usedPreconnects = preconnectResults.filter(r => r.wasUsed);
+    const lazyLoadedPreconnects = preconnectResults.filter(r => !r.wasUsed && r.isLazyLoaded);
+    const unusedPreconnects = preconnectResults.filter(r => !r.wasUsed && !r.isLazyLoaded);
+    if (unusedPreconnects.length > 0) {
+    }
+    if (lazyLoadedPreconnects.length > 0) {
+    }
+    if (usedPreconnects.length > 0) {
+    }
+    const effectivePreconnects = usedPreconnects.length + lazyLoadedPreconnects.length;
+    Math.round(effectivePreconnects / preconnectLinks.length * 100);
+    if (unusedPreconnects.length === 0) void 0; else void 0;
+  }
+  if (dnsPrefetchLinks.length === 0) void 0; else {
+    const dnsPrefetchResults = dnsPrefetchLinks.map(link => {
+      const href = link.href;
+      const domain = getDomain(href);
+      const wasUsed = domain ? usedDomains.has(domain) : false;
+      const isLazyLoaded = domain ? lazyLoadedDomains.has(domain) : false;
+      const requestCount = resources.filter(r => getDomain(r.name) === domain).length;
+      return {
+        domain: domain,
+        href: href,
+        wasUsed: wasUsed,
+        isLazyLoaded: isLazyLoaded,
+        requestCount: requestCount,
+        link: link
+      };
+    });
+    const usedDnsPrefetch = dnsPrefetchResults.filter(r => r.wasUsed);
+    const lazyLoadedDnsPrefetch = dnsPrefetchResults.filter(r => !r.wasUsed && r.isLazyLoaded);
+    const unusedDnsPrefetch = dnsPrefetchResults.filter(r => !r.wasUsed && !r.isLazyLoaded);
+    if (unusedDnsPrefetch.length > 0) {
+    }
+    if (lazyLoadedDnsPrefetch.length > 0) {
+    }
+    if (usedDnsPrefetch.length > 0) {
+    }
+    const effectiveDnsPrefetch = usedDnsPrefetch.length + lazyLoadedDnsPrefetch.length;
+    Math.round(effectiveDnsPrefetch / dnsPrefetchLinks.length * 100);
+  }
+  const preconnectDomains = new Set(preconnectLinks.map(l => getDomain(l.href)).filter(Boolean));
+  const dnsPrefetchDomains = new Set(dnsPrefetchLinks.map(l => getDomain(l.href)).filter(Boolean));
+  const redundantDomains = Array.from(preconnectDomains).filter(d => dnsPrefetchDomains.has(d));
+  if (redundantDomains.length > 0) {
+    redundantDomains.forEach(domain => {
+    });
+  } else void 0;
+  const imgDomains = new Set;
+  allImgElements.forEach(img => {
+    try {
+      const domain = getDomain(img.src);
+      if (domain && domain !== location.origin) imgDomains.add(domain);
+    } catch {}
+  });
+  const missingFromPerf = Array.from(imgDomains).filter(domain => !usedDomains.has(domain));
+  if (missingFromPerf.length > 0) {
+    const domainsWithCounts = missingFromPerf.map(domain => {
+      const imgCount = Array.from(allImgElements).filter(img => {
+        try {
+          return getDomain(img.src) === domain;
+        } catch {
+          return false;
+        }
+      }).length;
+      return {
+        domain: domain,
+        imgCount: imgCount
+      };
+    }).filter(item => item.domain && item.domain !== "null").sort((a, b) => b.imgCount - a.imgCount);
+    domainsWithCounts.forEach(item => {
+    });
+  } else void 0;
+  const hintedDomains = new Set([ ...preconnectLinks.map(l => getDomain(l.href)), ...dnsPrefetchLinks.map(l => getDomain(l.href)) ]);
+  const domainRequestCounts = {};
+  resources.forEach(r => {
+    const domain = getDomain(r.name);
+    if (domain && domain !== location.origin) domainRequestCounts[domain] = (domainRequestCounts[domain] || 0) + 1;
+  });
+  const missingHints = Object.entries(domainRequestCounts).filter(([domain, count]) => count >= 2 && !hintedDomains.has(domain)).sort((a, b) => b[1] - a[1]);
+  const topPreconnects = missingHints.filter(([_, count]) => count >= 5).slice(0, 3);
+  const topDnsPrefetch = missingHints.filter(([_, count]) => count >= 2 && count < 5).slice(0, 5);
+  const shownHints = [ ...topPreconnects, ...topDnsPrefetch ];
+  if (missingHints.length > 0) {
+    if (shownHints.length < missingHints.length) {
+    }
+    shownHints.forEach(([domain, count]) => {
+    });
+  } else void 0;
+  const lazyLoadedDomainsForSummary = new Set;
+  allImgElements.forEach(img => {
+    try {
+      const domain = getDomain(img.src);
+      if (domain && domain !== location.origin && !usedDomains.has(domain)) lazyLoadedDomainsForSummary.add(domain);
+    } catch {}
+  });
+  const totalIssues = preloadLinks.filter(l => !usedResourceUrls.has(normalizeUrl(l.href))).length + preconnectLinks.filter(l => {
+    const domain = getDomain(l.href);
+    return domain && !usedDomains.has(domain) && !lazyLoadedDomainsForSummary.has(domain);
+  }).length + dnsPrefetchLinks.filter(l => {
+    const domain = getDomain(l.href);
+    return domain && !usedDomains.has(domain) && !lazyLoadedDomainsForSummary.has(domain);
+  }).length;
+  if (totalIssues === 0 && missingHints.length === 0) void 0; else {
+  }
+  return {
+    script: "Resource-Hints-Validation",
+    status: "ok",
+    count: preloadLinks.length + preconnectLinks.length + dnsPrefetchLinks.length,
+    details: {
+      preloadCount: preloadLinks.length,
+      preconnectCount: preconnectLinks.length,
+      dnsPrefetchCount: dnsPrefetchLinks.length,
+      totalResourcesLoaded: resources.length,
+      unusedHints: totalIssues,
+      missingPreconnects: missingHints.length,
+      redundantHints: redundantDomains.length
+    },
+    issues: [ ...totalIssues > 0 ? [ {
+      severity: "warning",
+      message: `${totalIssues} unused hint(s) waste bandwidth`
+    } ] : [], ...missingHints.length > 0 ? [ {
+      severity: "info",
+      message: `${missingHints.length} domain(s) could benefit from connection hints`
+    } ] : [], ...redundantDomains.length > 0 ? [ {
+      severity: "warning",
+      message: `${redundantDomains.length} domain(s) have both preconnect and dns-prefetch (redundant)`
+    } ] : [] ]
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Resource-Hints.js b/skills/webperf-loading/scripts-readable/Resource-Hints.js
new file mode 100644
index 0000000..5a7c1fe
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Resource-Hints.js
@@ -0,0 +1,240 @@
+(() => {
+  const formatBytes = bytes => {
+    if (!bytes || bytes === 0) return "-";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+  };
+  const hintTypes = [ {
+    rel: "preload",
+    icon: "⚡",
+    description: "Critical resource for current page",
+    requiresAs: true
+  }, {
+    rel: "modulepreload",
+    icon: "📦",
+    description: "ES module for current page",
+    requiresAs: false
+  }, {
+    rel: "preconnect",
+    icon: "🔌",
+    description: "Early connection to origin",
+    requiresAs: false
+  }, {
+    rel: "dns-prefetch",
+    icon: "🔍",
+    description: "DNS lookup for origin",
+    requiresAs: false
+  }, {
+    rel: "prefetch",
+    icon: "📥",
+    description: "Resource for future navigation",
+    requiresAs: false
+  }, {
+    rel: "prerender",
+    icon: "🖼️",
+    description: "Pre-render page",
+    requiresAs: false
+  } ];
+  const allHints = [];
+  const issues = [];
+  hintTypes.forEach(type => {
+    const links = document.querySelectorAll(`link[rel="${type.rel}"]`);
+    links.forEach(link => {
+      const href = link.href || link.getAttribute("href") || "";
+      let hostname = "";
+      try {
+        hostname = new URL(href, location.origin).hostname;
+      } catch {}
+      const hint = {
+        rel: type.rel,
+        icon: type.icon,
+        href: href,
+        shortHref: href.length > 50 ? "..." + href.slice(-47) : href,
+        hostname: hostname,
+        as: link.getAttribute("as") || "",
+        crossorigin: link.crossOrigin || link.getAttribute("crossorigin") || "",
+        fetchpriority: link.fetchPriority || link.getAttribute("fetchpriority") || "",
+        type: link.type || "",
+        media: link.media || "",
+        element: link
+      };
+      allHints.push(hint);
+      if (type.requiresAs && !hint.as) issues.push({
+        hint: hint,
+        issue: "Missing 'as' attribute (required for preload)",
+        severity: "error",
+        fix: `Add as="script|style|font|image|fetch"`
+      });
+      if (hint.as === "font" && !hint.crossorigin) issues.push({
+        hint: hint,
+        issue: "Font preload without crossorigin (causes double fetch)",
+        severity: "error",
+        fix: 'Add crossorigin="anonymous"'
+      });
+      if (type.rel === "preconnect" && !hint.crossorigin) {
+        const corsResources = performance.getEntriesByType("resource").filter(r => r.name.includes(hostname) && (r.initiatorType === "script" || r.initiatorType === "css" || r.initiatorType === "font"));
+        if (corsResources.length > 0) issues.push({
+          hint: hint,
+          issue: "Preconnect may need crossorigin for CORS resources",
+          severity: "warning",
+          fix: 'Consider adding crossorigin="anonymous"'
+        });
+      }
+    });
+  });
+  const preloads = allHints.filter(h => h.rel === "preload");
+  const loadedResources = performance.getEntriesByType("resource");
+  preloads.forEach(preload => {
+    const wasUsed = loadedResources.some(r => r.name === preload.href);
+    if (!wasUsed) issues.push({
+      hint: preload,
+      issue: "Preloaded resource not used within page load",
+      severity: "warning",
+      fix: "Remove unused preload or verify it's needed"
+    });
+  });
+  const preconnects = allHints.filter(h => h.rel === "preconnect" || h.rel === "dns-prefetch");
+  preconnects.forEach(pc => {
+    const hasResources = loadedResources.some(r => {
+      try {
+        return new URL(r.name).hostname === pc.hostname;
+      } catch {
+        return false;
+      }
+    });
+    if (!hasResources && pc.hostname) issues.push({
+      hint: pc,
+      issue: `No resources loaded from ${pc.hostname}`,
+      severity: "warning",
+      fix: "Remove unused preconnect or verify it's needed for future resources"
+    });
+  });
+  if (preloads.length > 6) issues.push({
+    hint: {
+      rel: "preload",
+      href: `${preloads.length} preloads`
+    },
+    issue: `Too many preloads (${preloads.length}) - they compete for bandwidth`,
+    severity: "warning",
+    fix: "Limit to 5-6 most critical resources"
+  });
+  const thirdPartyOrigins = new Map;
+  loadedResources.forEach(r => {
+    try {
+      const url = new URL(r.name);
+      if (url.hostname !== location.hostname) {
+        if (!thirdPartyOrigins.has(url.origin)) thirdPartyOrigins.set(url.origin, {
+          count: 0,
+          size: 0,
+          types: new Set
+        });
+        const data = thirdPartyOrigins.get(url.origin);
+        data.count++;
+        data.size += r.transferSize || 0;
+        data.types.add(r.initiatorType);
+      }
+    } catch {}
+  });
+  const preconnectedOrigins = new Set([ ...preconnects ].map(p => {
+    try {
+      return new URL(p.href).origin;
+    } catch {
+      return "";
+    }
+  }));
+  const missingPreconnects = [];
+  thirdPartyOrigins.forEach((data, origin) => {
+    if (!preconnectedOrigins.has(origin) && data.count >= 2) missingPreconnects.push({
+      origin: origin,
+      ...data
+    });
+  });
+  const summary = hintTypes.map(type => {
+    const count = allHints.filter(h => h.rel === type.rel).length;
+    return {
+      type: type.rel,
+      count: count,
+      icon: type.icon
+    };
+  });
+  summary.forEach(s => {
+    s.count;
+  });
+  hintTypes.forEach(type => {
+    const hints = allHints.filter(h => h.rel === type.rel);
+    if (hints.length === 0) return;
+    hints.map(h => {
+      const row = {
+        Resource: h.shortHref
+      };
+      if (type.rel === "preload" || type.rel === "modulepreload") {
+        row.As = h.as || "⚠️ missing";
+        row.Crossorigin = h.crossorigin || "-";
+        if (h.fetchpriority) row.Priority = h.fetchpriority;
+        const used = loadedResources.some(r => r.name === h.href);
+        row.Used = used ? "✅" : "⚠️ No";
+      }
+      if (type.rel === "preconnect" || type.rel === "dns-prefetch") {
+        row.Origin = h.hostname;
+        row.Crossorigin = h.crossorigin || "-";
+        const originResources = loadedResources.filter(r => {
+          try {
+            return new URL(r.name).hostname === h.hostname;
+          } catch {
+            return false;
+          }
+        });
+        row["Resources Loaded"] = originResources.length;
+      }
+      return row;
+    });
+    hints.forEach((h, i) => {
+    });
+  });
+  const errors = issues.filter(i => i.severity === "error");
+  const warnings = issues.filter(i => i.severity === "warning");
+  if (issues.length > 0) {
+    if (errors.length > 0) {
+      errors.forEach(issue => {
+      });
+    }
+    if (warnings.length > 0) {
+      warnings.forEach(issue => {
+        if (issue.hint.href) void 0;
+      });
+    }
+  } else {
+  }
+  if (missingPreconnects.length > 0) {
+    missingPreconnects.sort((a, b) => b.count - a.count).slice(0, 5).map(o => ({
+      Origin: o.origin,
+      Resources: o.count,
+      Size: formatBytes(o.size),
+      Types: Array.from(o.types).join(", ")
+    }));
+    missingPreconnects.slice(0, 3).forEach(o => {
+    });
+  }
+  return {
+    script: "Resource-Hints",
+    status: "ok",
+    count: allHints.length,
+    details: {
+      byType: Object.fromEntries(hintTypes.map(t => [ t.rel, allHints.filter(h => h.rel === t.rel).length ])),
+      missingPreconnectsCount: missingPreconnects.length
+    },
+    items: allHints.map(h => ({
+      rel: h.rel,
+      href: h.shortHref,
+      as: h.as,
+      crossorigin: h.crossorigin,
+      fetchpriority: h.fetchpriority
+    })),
+    issues: issues.map(i => ({
+      severity: i.severity,
+      message: `${i.hint.rel}: ${i.issue}. Fix: ${i.fix}`
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/SSR-Hydration-Data-Analysis.js b/skills/webperf-loading/scripts-readable/SSR-Hydration-Data-Analysis.js
new file mode 100644
index 0000000..a8058b7
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/SSR-Hydration-Data-Analysis.js
@@ -0,0 +1,195 @@
+(() => {
+  const formatBytes = bytes => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
+  };
+  const frameworks = [ {
+    name: "Next.js",
+    selector: "#__NEXT_DATA__",
+    type: "json",
+    threshold: 128 * 1024,
+    docs: "https://nextjs.org/docs/messages/large-page-data"
+  }, {
+    name: "Nuxt 3",
+    selector: "#__NUXT_DATA__",
+    type: "json-array",
+    threshold: 100 * 1024,
+    docs: "https://nuxt.com/docs/api/composables/use-hydration"
+  }, {
+    name: "Nuxt 2",
+    pattern: /window\.__NUXT__\s*=/,
+    type: "script",
+    threshold: 100 * 1024,
+    docs: "https://nuxtjs.org/"
+  }, {
+    name: "Remix",
+    selector: "#__remixContext",
+    type: "script",
+    threshold: 100 * 1024,
+    docs: "https://remix.run/docs/en/main/guides/performance"
+  }, {
+    name: "Gatsby",
+    selector: "#___gatsby",
+    pattern: /window\.___/,
+    type: "script",
+    threshold: 100 * 1024,
+    docs: "https://www.gatsbyjs.com/docs/"
+  }, {
+    name: "SvelteKit",
+    selector: "[data-sveltekit-hydrate]",
+    type: "json",
+    threshold: 100 * 1024,
+    docs: "https://kit.svelte.dev/docs/performance"
+  }, {
+    name: "Astro",
+    selector: "astro-island",
+    type: "props",
+    threshold: 50 * 1024,
+    docs: "https://docs.astro.build/en/concepts/islands/"
+  } ];
+  const detected = [];
+  const allInlineScripts = Array.from(document.querySelectorAll("script:not([src])")).filter(s => s.innerHTML.trim().length > 0);
+  frameworks.forEach(fw => {
+    let elements = [];
+    let content = "";
+    let size = 0;
+    if (fw.selector) {
+      const el = document.querySelector(fw.selector);
+      if (el) {
+        elements = [ el ];
+        content = el.innerHTML || el.textContent || "";
+        size = new Blob([ content ]).size;
+      }
+    }
+    if (fw.pattern && elements.length === 0) allInlineScripts.forEach(script => {
+      if (fw.pattern.test(script.innerHTML)) {
+        elements.push(script);
+        content = script.innerHTML;
+        size += new Blob([ content ]).size;
+      }
+    });
+    if (fw.name === "Astro") {
+      const islands = document.querySelectorAll("astro-island");
+      if (islands.length > 0) {
+        elements = Array.from(islands);
+        let totalProps = 0;
+        islands.forEach(island => {
+          const props = island.getAttribute("props");
+          if (props) totalProps += new Blob([ props ]).size;
+        });
+        size = totalProps;
+        content = `${islands.length} islands with props`;
+      }
+    }
+    if (elements.length > 0) detected.push({
+      ...fw,
+      elements: elements,
+      content: content,
+      size: size,
+      exceedsThreshold: size > fw.threshold
+    });
+  });
+  const frameworkScripts = new Set(detected.flatMap(d => d.elements));
+  const otherScripts = allInlineScripts.filter(s => !frameworkScripts.has(s));
+  const otherSize = otherScripts.reduce((sum, s) => sum + new Blob([ s.innerHTML ]).size, 0);
+  if (detected.length === 0) {
+    return {
+      script: "SSR-Hydration-Data-Analysis",
+      status: "ok",
+      count: 0,
+      details: {
+        frameworksFound: 0,
+        totalHydrationBytes: 0,
+        otherInlineBytes: otherSize
+      },
+      items: [],
+      issues: []
+    };
+  }
+  detected.forEach(fw => {
+    fw.exceedsThreshold;
+  });
+  const totalHydrationSize = detected.reduce((sum, d) => sum + d.size, 0);
+  detected.forEach(fw => {
+    if (fw.type === "json" && fw.content) try {
+      const data = JSON.parse(fw.content);
+      if (fw.name === "Next.js" && data.props) {
+        const pageProps = data.props?.pageProps || {};
+        const pagePropsSize = new Blob([ JSON.stringify(pageProps) ]).size;
+        const propsKeys = Object.keys(pageProps);
+        if (propsKeys.length > 0) {
+          const propSizes = propsKeys.map(key => ({
+            key: key,
+            size: new Blob([ JSON.stringify(pageProps[key]) ]).size
+          }));
+          propSizes.sort((a, b) => b.size - a.size);
+          propSizes.slice(0, 10).forEach(prop => {
+            const pct = (prop.size / pagePropsSize * 100).toFixed(1);
+            "█".repeat(Math.min(Math.round(parseFloat(pct) / 5), 20));
+          });
+          if (propsKeys.length > 10) void 0;
+        }
+        const largeArrays = propsKeys.filter(key => {
+          const val = pageProps[key];
+          return Array.isArray(val) && val.length > 50;
+        });
+        if (largeArrays.length > 0) void 0;
+        const checkDepth = (obj, depth = 0) => {
+          if (depth > 5) return true;
+          if (typeof obj !== "object" || obj === null) return false;
+          return Object.values(obj).some(v => checkDepth(v, depth + 1));
+        };
+        if (checkDepth(pageProps)) void 0;
+        const sensitivePatterns = /password|secret|token|apikey|api_key|private/i;
+        const propsString = JSON.stringify(pageProps);
+        if (sensitivePatterns.test(propsString)) void 0;
+        if (largeArrays.length === 0 && !checkDepth(pageProps) && !sensitivePatterns.test(propsString)) void 0;
+      }
+    } catch (e) {
+    }
+    if (fw.name === "Astro") {
+      fw.elements.map((island, i) => {
+        const props = island.getAttribute("props");
+        const clientDirective = island.getAttribute("client") || Array.from(island.attributes).find(a => a.name.startsWith("client:"))?.name.replace("client:", "") || "unknown";
+        return {
+          "#": i + 1,
+          Component: island.getAttribute("component-url")?.split("/").pop() || "Unknown",
+          Client: clientDirective,
+          "Props Size": props ? formatBytes(new Blob([ props ]).size) : "0 B"
+        };
+      });
+    }
+    fw.elements.forEach((el, i) => {
+    });
+  });
+  const hasIssues = detected.some(d => d.exceedsThreshold);
+  if (hasIssues) {
+    const nextJs = detected.find(d => d.name === "Next.js");
+    if (nextJs) {
+    }
+  }
+  return {
+    script: "SSR-Hydration-Data-Analysis",
+    status: "ok",
+    count: detected.length,
+    details: {
+      frameworksFound: detected.length,
+      totalHydrationBytes: totalHydrationSize,
+      otherInlineBytes: otherSize,
+      hasExceedingThreshold: detected.some(d => d.exceedsThreshold)
+    },
+    items: detected.map(fw => ({
+      name: fw.name,
+      sizeBytes: fw.size,
+      thresholdBytes: fw.threshold,
+      exceedsThreshold: fw.exceedsThreshold
+    })),
+    issues: detected.filter(fw => fw.exceedsThreshold).map(fw => ({
+      severity: "warning",
+      message: `${fw.name} hydration data (${Math.round(fw.size / 1024)} KB) exceeds ${Math.round(fw.threshold / 1024)} KB threshold`
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Script-Loading.js b/skills/webperf-loading/scripts-readable/Script-Loading.js
new file mode 100644
index 0000000..371af99
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Script-Loading.js
@@ -0,0 +1,196 @@
+(() => {
+  const formatBytes = bytes => {
+    if (!bytes || bytes === 0) return "-";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB" ];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+  };
+  const formatMs = ms => ms > 0 ? ms.toFixed(0) + "ms" : "-";
+  const getRootDomain = hostname => {
+    const parts = hostname.split(".");
+    if (parts.length > 2) {
+      const sld = parts[parts.length - 2];
+      if ([ "co", "com", "org", "net", "gov", "edu" ].includes(sld) && sld.length <= 3) return parts.slice(-3).join(".");
+      return parts.slice(-2).join(".");
+    }
+    return hostname;
+  };
+  const currentDomain = getRootDomain(location.hostname);
+  const isFirstParty = url => {
+    try {
+      return getRootDomain(new URL(url).hostname) === currentDomain;
+    } catch {
+      return true;
+    }
+  };
+  const resourceTiming = new Map;
+  performance.getEntriesByType("resource").forEach(r => {
+    if (r.initiatorType === "script") resourceTiming.set(r.name, {
+      size: r.transferSize || 0,
+      duration: r.duration,
+      startTime: r.startTime
+    });
+  });
+  const externalScripts = Array.from(document.querySelectorAll("script[src]"));
+  Array.from(document.querySelectorAll("script:not([src])")).filter(s => s.innerHTML.trim().length > 0);
+  const scripts = externalScripts.map(script => {
+    const src = script.src;
+    const timing = resourceTiming.get(src) || {};
+    const inHead = script.closest("head") !== null;
+    const isModule = script.type === "module";
+    const isAsync = script.async;
+    const isDefer = script.defer;
+    let strategy = "blocking";
+    if (isModule && isAsync) strategy = "async module"; else if (isModule) strategy = "module"; else if (isAsync) strategy = "async"; else if (isDefer) strategy = "defer";
+    const isBlocking = strategy === "blocking";
+    const firstParty = isFirstParty(src);
+    return {
+      src: src,
+      shortSrc: src.split("/").pop()?.split("?")[0] || src,
+      strategy: strategy,
+      isBlocking: isBlocking,
+      inHead: inHead,
+      firstParty: firstParty,
+      isModule: isModule,
+      isAsync: isAsync,
+      isDefer: isDefer,
+      size: timing.size || 0,
+      duration: timing.duration || 0,
+      startTime: timing.startTime || 0,
+      element: script
+    };
+  });
+  const blocking = scripts.filter(s => s.isBlocking);
+  const blockingInHead = blocking.filter(s => s.inHead);
+  const asyncScripts = scripts.filter(s => s.strategy === "async" || s.strategy === "async module");
+  const deferScripts = scripts.filter(s => s.strategy === "defer");
+  const moduleScripts = scripts.filter(s => s.strategy === "module");
+  const thirdPartyBlocking = blocking.filter(s => !s.firstParty);
+  const totalSize = scripts.reduce((sum, s) => sum + s.size, 0);
+  blocking.reduce((sum, s) => sum + s.size, 0);
+  let rating, ratingColor;
+  if (blockingInHead.length === 0) {
+    rating = "Good";
+    ratingColor = "#22c55e";
+  } else if (blockingInHead.length <= 2 && thirdPartyBlocking.length === 0) {
+    rating = "Needs Review";
+    ratingColor = "#f59e0b";
+  } else {
+    rating = "Needs Optimization";
+    ratingColor = "#ef4444";
+  }
+  if (scripts.length > 0) {
+    scripts.sort((a, b) => {
+      if (a.isBlocking !== b.isBlocking) return a.isBlocking ? -1 : 1;
+      return b.size - a.size;
+    }).map(s => ({
+      Script: s.shortSrc,
+      Strategy: s.isBlocking ? `🔴 ${s.strategy}` : s.strategy,
+      Location: s.inHead ? "head" : "body",
+      Party: s.firstParty ? "1st" : "3rd",
+      Size: formatBytes(s.size),
+      Duration: formatMs(s.duration)
+    }));
+    scripts.sort((a, b) => a.startTime - b.startTime).forEach((s, i) => {
+      s.isBlocking;
+    });
+  }
+  const issues = [];
+  if (blockingInHead.length > 0) issues.push({
+    severity: "error",
+    message: `${blockingInHead.length} blocking script(s) in <head>`,
+    scripts: blockingInHead,
+    fix: "Add 'defer' or 'async' attribute, or move to end of <body>"
+  });
+  if (thirdPartyBlocking.length > 0) issues.push({
+    severity: "error",
+    message: `${thirdPartyBlocking.length} third-party blocking script(s)`,
+    scripts: thirdPartyBlocking,
+    fix: "Add 'async' for independent scripts, or load dynamically"
+  });
+  const largeBlocking = blocking.filter(s => s.size > 50 * 1024);
+  if (largeBlocking.length > 0) issues.push({
+    severity: "warning",
+    message: `${largeBlocking.length} large blocking script(s) (> 50 KB)`,
+    scripts: largeBlocking,
+    fix: "Split code, use defer, or lazy load"
+  });
+  const couldDefer = blocking.filter(s => {
+    const bodyScripts = Array.from(document.body.querySelectorAll("script[src]"));
+    const isLastInBody = bodyScripts.indexOf(s.element) >= bodyScripts.length - 3;
+    return isLastInBody;
+  });
+  if (couldDefer.length > 0 && blocking.length > couldDefer.length) issues.push({
+    severity: "info",
+    message: `${blocking.length - couldDefer.length} blocking script(s) could potentially use defer`,
+    fix: "Test with defer attribute to improve parsing performance"
+  });
+  if (issues.length > 0) {
+    issues.forEach(issue => {
+      issue.severity === "error" || issue.severity;
+      if (issue.scripts) issue.scripts.forEach(s => {
+      });
+    });
+  } else if (scripts.length > 0) {
+  }
+  const firstPartyScripts = scripts.filter(s => s.firstParty);
+  const thirdPartyScripts = scripts.filter(s => !s.firstParty);
+  if (thirdPartyScripts.length > 0) {
+    const thirdPartyByHost = new Map;
+    thirdPartyScripts.forEach(s => {
+      try {
+        const host = new URL(s.src).hostname;
+        if (!thirdPartyByHost.has(host)) thirdPartyByHost.set(host, {
+          count: 0,
+          size: 0,
+          blocking: 0
+        });
+        const data = thirdPartyByHost.get(host);
+        data.count++;
+        data.size += s.size;
+        if (s.isBlocking) data.blocking++;
+      } catch {}
+    });
+    Array.from(thirdPartyByHost.entries()).sort((a, b) => b[1].size - a[1].size).map(([host, data]) => ({
+      Host: host,
+      Scripts: data.count,
+      Size: formatBytes(data.size),
+      Blocking: data.blocking > 0 ? `⚠️ ${data.blocking}` : "0"
+    }));
+  }
+  const agentRating = blockingInHead.length === 0 ? "good" : blockingInHead.length <= 2 && thirdPartyBlocking.length === 0 ? "needs-improvement" : "poor";
+  return {
+    script: "Script-Loading",
+    status: "ok",
+    count: scripts.length,
+    rating: agentRating,
+    details: {
+      totalSizeBytes: totalSize,
+      byStrategy: {
+        blocking: blocking.length,
+        async: asyncScripts.length,
+        defer: deferScripts.length,
+        module: moduleScripts.length
+      },
+      byParty: {
+        firstParty: firstPartyScripts.length,
+        thirdParty: thirdPartyScripts.length
+      },
+      thirdPartyBlockingCount: thirdPartyBlocking.length
+    },
+    items: scripts.map(s => ({
+      url: s.src,
+      shortName: s.shortSrc,
+      strategy: s.strategy,
+      location: s.inHead ? "head" : "body",
+      party: s.firstParty ? "first" : "third",
+      sizeBytes: s.size,
+      durationMs: Math.round(s.duration)
+    })),
+    issues: issues.map(i => ({
+      severity: i.severity,
+      message: i.message
+    }))
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Service-Worker-Analysis.js b/skills/webperf-loading/scripts-readable/Service-Worker-Analysis.js
new file mode 100644
index 0000000..84dcd77
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Service-Worker-Analysis.js
@@ -0,0 +1,55 @@
+(async () => {
+  if (!("serviceWorker" in navigator)) {
+    return;
+  }
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  const controller = navigator.serviceWorker.controller;
+  const navEntry = performance.getEntriesByType("navigation")[0];
+  const resources = performance.getEntriesByType("resource");
+  const swResources = resources.filter(r => r.workerStart > 0);
+  const fromCache = swResources.filter(r => r.transferSize === 0);
+  swResources.filter(r => r.transferSize > 0);
+  resources.filter(r => r.workerStart === 0);
+  if (registrations.length === 0) {
+    return;
+  }
+  for (const reg of registrations) {
+    if (reg.active) {
+    }
+    if (reg.waiting) {
+    }
+    if (reg.installing) void 0;
+    if (reg.navigationPreload) try {
+      const preload = await reg.navigationPreload.getState();
+      if (preload.enabled) {
+      } else {
+      }
+    } catch (_) {}
+  }
+  if (controller) {
+  } else {
+  }
+  if (navEntry && navEntry.workerStart > 0) {
+    const workerStart = navEntry.workerStart - navEntry.startTime;
+    const fetchStart = navEntry.fetchStart - navEntry.startTime;
+    const swOverhead = Math.max(fetchStart - workerStart, 0);
+    if (swOverhead > 100) void 0; else if (swOverhead > 50) void 0; else void 0;
+  }
+  if (swResources.length > 0) {
+    const hitRate = (fromCache.length / swResources.length * 100).toFixed(1);
+    (fromCache.reduce((sum, r) => sum + (r.encodedBodySize || 0), 0) / 1024).toFixed(1);
+    const rate = parseFloat(hitRate);
+    if (rate >= 80) void 0; else if (rate >= 50) void 0; else void 0;
+  }
+  if ("caches" in window) try {
+    const cacheNames = await caches.keys();
+    if (cacheNames.length > 0) {
+      let totalEntries = 0;
+      for (const name of cacheNames) {
+        const cache = await caches.open(name);
+        const keys = await cache.keys();
+        totalEntries += keys.length;
+      }
+    }
+  } catch (_) {}
+})();
diff --git a/skills/webperf-loading/scripts-readable/TTFB-Resources.js b/skills/webperf-loading/scripts-readable/TTFB-Resources.js
new file mode 100644
index 0000000..ff35c12
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/TTFB-Resources.js
@@ -0,0 +1,73 @@
+(() => {
+  new PerformanceObserver(entryList => {
+    const entries = entryList.getEntries();
+    const resourcesData = entries.filter(entry => entry.responseStart > 0).map(entry => {
+      const url = new URL(entry.name);
+      const isThirdParty = url.hostname !== location.hostname;
+      return {
+        ttfb: entry.responseStart,
+        duration: entry.duration,
+        type: entry.initiatorType,
+        thirdParty: isThirdParty,
+        resource: entry.name.length > 70 ? "..." + entry.name.slice(-67) : entry.name,
+        fullUrl: entry.name
+      };
+    }).sort((a, b) => b.ttfb - a.ttfb);
+    if (resourcesData.length === 0) {
+      return;
+    }
+    const ttfbValues = resourcesData.map(r => r.ttfb);
+    ttfbValues.reduce((a, b) => a + b, 0), ttfbValues.length;
+    Math.max(...ttfbValues);
+    Math.min(...ttfbValues);
+    resourcesData.filter(r => r.thirdParty).length;
+    const slowResources = resourcesData.filter(r => r.ttfb > 500).length;
+    if (slowResources > 0) void 0;
+    resourcesData.slice(0, 25).map(({fullUrl: fullUrl, ...rest}) => ({
+      "TTFB (ms)": rest.ttfb.toFixed(0),
+      "Duration (ms)": rest.duration.toFixed(0),
+      Type: rest.type,
+      "3rd Party": rest.thirdParty ? "Yes" : "",
+      Resource: rest.resource
+    }));
+    if (resourcesData.length > 25) void 0;
+    const slowest = resourcesData.slice(0, 5);
+    if (slowest[0].ttfb > 500) {
+      slowest.forEach((r, i) => {
+        r.thirdParty;
+      });
+    }
+  }).observe({
+    type: "resource",
+    buffered: true
+  });
+  const resourcesSync = performance.getEntriesByType("resource").filter(entry => entry.responseStart > 0).map(entry => {
+    const url = new URL(entry.name);
+    return {
+      url: entry.name,
+      ttfbMs: Math.round(entry.responseStart),
+      durationMs: Math.round(entry.duration),
+      type: entry.initiatorType,
+      isThirdParty: url.hostname !== location.hostname
+    };
+  }).sort((a, b) => b.ttfbMs - a.ttfbMs);
+  if (resourcesSync.length === 0) return {
+    script: "TTFB-Resources",
+    status: "error",
+    error: "No resources with TTFB data available"
+  };
+  const ttfbVals = resourcesSync.map(r => r.ttfbMs);
+  return {
+    script: "TTFB-Resources",
+    status: "ok",
+    count: resourcesSync.length,
+    details: {
+      avgTtfbMs: Math.round(ttfbVals.reduce((a, b) => a + b, 0) / ttfbVals.length),
+      maxTtfbMs: Math.max(...ttfbVals),
+      minTtfbMs: Math.min(...ttfbVals),
+      thirdPartyCount: resourcesSync.filter(r => r.isThirdParty).length,
+      slowCount: resourcesSync.filter(r => r.ttfbMs > 500).length
+    },
+    items: resourcesSync
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/TTFB-Sub-Parts.js b/skills/webperf-loading/scripts-readable/TTFB-Sub-Parts.js
new file mode 100644
index 0000000..cd2e346
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/TTFB-Sub-Parts.js
@@ -0,0 +1,111 @@
+(() => {
+  new PerformanceObserver(entryList => {
+    const [pageNav] = entryList.getEntriesByType("navigation");
+    const activationStart = pageNav.activationStart || 0;
+    const waitEnd = Math.max((pageNav.workerStart || pageNav.fetchStart) - activationStart, 0);
+    const dnsStart = Math.max(pageNav.domainLookupStart - activationStart, 0);
+    const tcpStart = Math.max(pageNav.connectStart - activationStart, 0);
+    const sslStart = Math.max(pageNav.secureConnectionStart - activationStart, 0);
+    const tcpEnd = Math.max(pageNav.connectEnd - activationStart, 0);
+    const responseStart = Math.max(pageNav.responseStart - activationStart, 0);
+    let rating, color;
+    if (responseStart <= 800) {
+      rating = "Good";
+      color = "#22c55e";
+    } else if (responseStart <= 1800) {
+      rating = "Needs Improvement";
+      color = "#f59e0b";
+    } else {
+      rating = "Poor";
+      color = "#ef4444";
+    }
+    const subParts = [ {
+      name: "Redirect/Wait",
+      duration: waitEnd,
+      icon: "🔄"
+    }, {
+      name: "Service Worker/Cache",
+      duration: dnsStart - waitEnd,
+      icon: "⚙️"
+    }, {
+      name: "DNS Lookup",
+      duration: tcpStart - dnsStart,
+      icon: "🔍"
+    }, {
+      name: "TCP Connection",
+      duration: sslStart - tcpStart,
+      icon: "🔌"
+    }, {
+      name: "SSL/TLS",
+      duration: tcpEnd - sslStart,
+      icon: "🔒"
+    }, {
+      name: "Server Response",
+      duration: responseStart - tcpEnd,
+      icon: "📥"
+    } ];
+    subParts.forEach(({name: name, duration: duration, icon: icon}) => {
+      if (duration > 0) void 0;
+    });
+    const longestPhase = subParts.reduce((a, b) => a.duration > b.duration ? a : b);
+    if (longestPhase.duration > responseStart * 0.4 && responseStart > 800) {
+    }
+  }).observe({
+    type: "navigation",
+    buffered: true
+  });
+  const [navSync] = performance.getEntriesByType("navigation");
+  if (!navSync) return {
+    script: "TTFB-Sub-Parts",
+    status: "error",
+    error: "No navigation entry"
+  };
+  const activStartSync = navSync.activationStart || 0;
+  const ttfbValueSync = Math.max(0, navSync.responseStart - activStartSync);
+  const value = Math.round(ttfbValueSync);
+  const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
+  const waitEndSync = Math.max((navSync.workerStart || navSync.fetchStart) - activStartSync, 0);
+  const dnsStartSync = Math.max(navSync.domainLookupStart - activStartSync, 0);
+  const tcpStartSync = Math.max(navSync.connectStart - activStartSync, 0);
+  const sslStartSync = Math.max(navSync.secureConnectionStart - activStartSync, 0);
+  const tcpEndSync = Math.max(navSync.connectEnd - activStartSync, 0);
+  const subPartsSync = [ {
+    key: "redirectWait",
+    duration: waitEndSync
+  }, {
+    key: "serviceWorkerCache",
+    duration: dnsStartSync - waitEndSync
+  }, {
+    key: "dnsLookup",
+    duration: tcpStartSync - dnsStartSync
+  }, {
+    key: "tcpConnection",
+    duration: sslStartSync - tcpStartSync
+  }, {
+    key: "sslTls",
+    duration: tcpEndSync - sslStartSync
+  }, {
+    key: "serverResponse",
+    duration: ttfbValueSync - tcpEndSync
+  } ];
+  const slowestSync = subPartsSync.reduce((a, b) => a.duration > b.duration ? a : b);
+  return {
+    script: "TTFB-Sub-Parts",
+    status: "ok",
+    metric: "TTFB",
+    value: value,
+    unit: "ms",
+    rating: rating,
+    thresholds: {
+      good: 800,
+      needsImprovement: 1800
+    },
+    details: {
+      subParts: Object.fromEntries(subPartsSync.map(p => [ p.key, {
+        value: Math.round(p.duration),
+        unit: "ms"
+      } ])),
+      slowestPhase: slowestSync.key
+    }
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/TTFB.js b/skills/webperf-loading/scripts-readable/TTFB.js
new file mode 100644
index 0000000..02b5b3c
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/TTFB.js
@@ -0,0 +1,40 @@
+(() => {
+  new PerformanceObserver(entryList => {
+    const [pageNav] = entryList.getEntriesByType("navigation");
+    const ttfb = pageNav.responseStart;
+    let rating, color;
+    if (ttfb <= 800) {
+      rating = "Good";
+      color = "#22c55e";
+    } else if (ttfb <= 1800) {
+      rating = "Needs Improvement";
+      color = "#f59e0b";
+    } else {
+      rating = "Poor";
+      color = "#ef4444";
+    }
+  }).observe({
+    type: "navigation",
+    buffered: true
+  });
+  const [nav] = performance.getEntriesByType("navigation");
+  if (!nav) return {
+    script: "TTFB",
+    status: "error",
+    error: "No navigation entry"
+  };
+  const value = Math.round(nav.responseStart);
+  const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
+  return {
+    script: "TTFB",
+    status: "ok",
+    metric: "TTFB",
+    value: value,
+    unit: "ms",
+    rating: rating,
+    thresholds: {
+      good: 800,
+      needsImprovement: 1800
+    }
+  };
+})();
diff --git a/skills/webperf-loading/scripts-readable/Validate-Preload-Async-Defer-Scripts.js b/skills/webperf-loading/scripts-readable/Validate-Preload-Async-Defer-Scripts.js
new file mode 100644
index 0000000..38c2eef
--- /dev/null
+++ b/skills/webperf-loading/scripts-readable/Validate-Preload-Async-Defer-Scripts.js
@@ -0,0 +1,196 @@
+(() => {
+  const preloadedScripts = Array.from(document.querySelectorAll('link[rel="preload"][as="script"]'));
+  if (preloadedScripts.length === 0) {
+    return {
+      script: "Validate-Preload-Async-Defer-Scripts",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  const performanceScripts = performance.getEntriesByType("resource").filter(r => r.initiatorType === "script" || r.initiatorType === "link");
+  const issues = [];
+  const validPreloads = [];
+  const allScripts = Array.from(document.querySelectorAll("script[src]"));
+  preloadedScripts.forEach(preload => {
+    const preloadHref = preload.href;
+    const preloadUrl = new URL(preloadHref, location.origin).href;
+    const matchingScript = allScripts.find(script => {
+      try {
+        const scriptUrl = new URL(script.src, location.origin).href;
+        return scriptUrl === preloadUrl;
+      } catch {
+        return false;
+      }
+    });
+    const shortUrl = preloadHref.split("/").pop()?.split("?")[0] || preloadHref;
+    if (!matchingScript) {
+      const wasLoaded = performanceScripts.some(entry => {
+        try {
+          if (entry.name === preloadUrl) return true;
+          const entryUrl = new URL(entry.name, location.origin);
+          const preloadUrlObj = new URL(preloadUrl, location.origin);
+          return entryUrl.pathname.endsWith(preloadUrlObj.pathname);
+        } catch {
+          return false;
+        }
+      });
+      if (wasLoaded) validPreloads.push({
+        type: "dynamic",
+        preload: preload,
+        url: preloadHref,
+        shortUrl: shortUrl,
+        note: "Dynamic script (not in DOM, but loaded)"
+      }); else issues.push({
+        type: "orphan",
+        severity: "warning",
+        preload: preload,
+        url: preloadHref,
+        shortUrl: shortUrl,
+        message: "Preloaded script not found or loaded",
+        explanation: "This preload appears unused - script not in DOM and not in Performance API",
+        fix: "Verify the script is needed, or remove the preload"
+      });
+    } else {
+      const isAsync = matchingScript.async;
+      const isDefer = matchingScript.defer;
+      const isModule = matchingScript.type === "module";
+      const inHead = matchingScript.closest("head") !== null;
+      const scriptLocation = inHead ? "head" : "body";
+      const fetchPriority = matchingScript.getAttribute("fetchpriority");
+      let naturalPriority = "Medium/High";
+      let executionPriority = "Low";
+      if (isAsync) {
+        naturalPriority = "Lowest/Low";
+        executionPriority = "High";
+      } else if (isDefer) {
+        naturalPriority = "Lowest/Low";
+        executionPriority = "VeryLow";
+      } else if (inHead) {
+        naturalPriority = "Medium/High";
+        executionPriority = "VeryHigh";
+      }
+      if (isAsync || isDefer) {
+        const attributes = [];
+        if (isAsync) attributes.push("async");
+        if (isDefer) attributes.push("defer");
+        if (isModule) attributes.push("type='module'");
+        const hasMitigation = fetchPriority === "low";
+        if (hasMitigation) validPreloads.push({
+          type: "mitigated",
+          preload: preload,
+          script: matchingScript,
+          url: preloadHref,
+          shortUrl: shortUrl,
+          location: scriptLocation,
+          attributes: attributes.join(" + ") + " + fetchpriority='low'",
+          naturalPriority: naturalPriority,
+          note: "Early discovery with low priority - acceptable pattern"
+        }); else issues.push({
+          type: "async-defer-preload",
+          severity: "error",
+          preload: preload,
+          script: matchingScript,
+          url: preloadHref,
+          shortUrl: shortUrl,
+          attributes: attributes.join(" + "),
+          location: scriptLocation,
+          naturalPriority: naturalPriority,
+          preloadPriority: "Medium/High",
+          fetchPriority: fetchPriority || "not set",
+          message: `Script has ${attributes.join("/")} but is also preloaded`,
+          explanation: `${attributes.join("/")} scripts load at ${naturalPriority} priority. Preloading escalates them to Medium/High, causing bandwidth competition with critical resources.`,
+          fix: `Remove the preload, OR add fetchpriority="low" to the <script> tag to keep early discovery without priority escalation`
+        });
+      } else if (isModule) issues.push({
+        type: "module-preload",
+        severity: "warning",
+        preload: preload,
+        script: matchingScript,
+        url: preloadHref,
+        shortUrl: shortUrl,
+        attributes: "type='module'",
+        location: scriptLocation,
+        naturalPriority: "Lowest/Low (module default)",
+        preloadPriority: "Medium/High",
+        message: "ES module is using rel='preload' instead of rel='modulepreload'",
+        explanation: "ES modules behave like defer scripts by default (low priority). Using rel='preload' as='script' escalates priority unnecessarily. For modules, use rel='modulepreload' instead.",
+        fix: "Change <link rel='preload' as='script'> to <link rel='modulepreload'> for proper module preloading"
+      }); else {
+        const needsReview = !inHead;
+        validPreloads.push({
+          preload: preload,
+          script: matchingScript,
+          url: preloadHref,
+          shortUrl: shortUrl,
+          location: scriptLocation,
+          naturalPriority: naturalPriority,
+          needsReview: needsReview,
+          reviewNote: needsReview ? "Consider using 'defer' instead" : "Valid for critical scripts"
+        });
+      }
+    }
+  });
+  const errors = issues.filter(i => i.severity === "error");
+  const warnings = issues.filter(i => i.severity === "warning");
+  if (errors.length > 0) {
+    const errorTable = errors.filter(e => e.type === "async-defer-preload").map(issue => ({
+      Script: issue.shortUrl,
+      Location: issue.location,
+      Attributes: issue.attributes,
+      "Natural Priority": issue.naturalPriority,
+      "Preload Priority": "⚠️ Medium/High",
+      Issue: "❌ Priority escalation"
+    }));
+    if (errorTable.length > 0) void 0;
+    errors.filter(e => e.type === "async-defer-preload").forEach((issue, i) => {
+    });
+  }
+  if (warnings.length > 0) {
+    warnings.forEach(issue => {
+    });
+  }
+  if (validPreloads.length > 0) {
+    const blockingScripts = validPreloads.filter(v => v.type !== "dynamic");
+    const dynamicScripts = validPreloads.filter(v => v.type === "dynamic");
+    if (blockingScripts.length > 0) {
+      blockingScripts.map(v => ({
+        Script: v.shortUrl,
+        Location: v.location,
+        Priority: v.naturalPriority,
+        Status: v.needsReview ? "⚠️ Review needed" : "✅ Valid",
+        Note: v.reviewNote
+      }));
+      if (blockingScripts.some(v => v.needsReview)) {
+      }
+    }
+    if (dynamicScripts.length > 0) {
+      dynamicScripts.map(v => ({
+        Script: v.shortUrl,
+        Type: "Dynamic/Code-split",
+        Status: "✅ OK",
+        Note: v.note
+      }));
+    }
+  }
+  if (errors.length === 0 && warnings.length === 0) {
+  } else {
+  }
+  return {
+    script: "Validate-Preload-Async-Defer-Scripts",
+    status: "ok",
+    count: preloadedScripts.length,
+    details: {
+      validCount: validPreloads.length,
+      issueCount: issues.length
+    },
+    items: preloadedScripts.map(p => ({
+      url: p.href.split("/").pop()?.split("?")[0] || p.href
+    })),
+    issues: issues.map(i => ({
+      severity: i.severity,
+      message: i.message
+    }))
+  };
+})();
diff --git a/skills/webperf-media/scripts-readable/Image-Element-Audit.js b/skills/webperf-media/scripts-readable/Image-Element-Audit.js
new file mode 100644
index 0000000..aaa5ff5
--- /dev/null
+++ b/skills/webperf-media/scripts-readable/Image-Element-Audit.js
@@ -0,0 +1,231 @@
+(async () => {
+  function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0 && rect.width > 0 && rect.height > 0;
+  }
+  function findLcpCandidate(imgs) {
+    let candidate = null;
+    let maxArea = 0;
+    imgs.filter(isInViewport).forEach(img => {
+      const {width: width, height: height} = img.getBoundingClientRect();
+      const area = width * height;
+      if (area > maxArea) {
+        maxArea = area;
+        candidate = img;
+      }
+    });
+    return candidate;
+  }
+  function detectFormat(url) {
+    if (!url) return "unknown";
+    const lower = url.toLowerCase();
+    const path = lower.split("?")[0];
+    const query = lower.includes("?") ? lower.split("?")[1] : "";
+    const cloudinaryMatch = path.match(/\/f_(auto|avif|webp|jxl|png|jpg|jpeg|gif|svg)[,/]/);
+    if (cloudinaryMatch) {
+      const fmt = cloudinaryMatch[1];
+      return fmt === "auto" ? "auto (cdn)" : fmt === "jpeg" ? "jpg" : fmt;
+    }
+    const qMatch = query.match(/(?:^|&)(?:fm|format)=(avif|webp|jxl|png|jpg|jpeg|gif|svg)(?:&|$)/);
+    if (qMatch) return qMatch[1] === "jpeg" ? "jpg" : qMatch[1];
+    const extMatch = path.match(/\.(avif|webp|jxl|png|gif|svg|jpg|jpeg)(?:[?#]|$)/);
+    if (extMatch) return extMatch[1] === "jpeg" ? "jpg" : extMatch[1];
+    const lastSegment = path.split("/").pop() || "";
+    if (!lastSegment.includes(".")) return "auto (cdn?)";
+    return "unknown";
+  }
+  function isModernFormat(format) {
+    return [ "avif", "webp", "jxl", "auto (cdn)", "auto (cdn?)" ].includes(format);
+  }
+  async function fetchFormat(url) {
+    if (!url) return detectFormat(url);
+    try {
+      const res = await fetch(url, {
+        cache: "force-cache"
+      });
+      const ct = res.headers.get("content-type")?.split(";")[0]?.trim() || "";
+      if (ct.includes("avif")) return "avif";
+      if (ct.includes("webp")) return "webp";
+      if (ct.includes("jxl")) return "jxl";
+      if (ct.includes("png")) return "png";
+      if (ct.includes("gif")) return "gif";
+      if (ct.includes("svg")) return "svg";
+      if (ct.includes("jpeg")) return "jpg";
+    } catch {}
+    return detectFormat(url);
+  }
+  function shortSrc(url) {
+    if (!url) return "";
+    return url.split("/").pop()?.split("?")[0]?.slice(0, 40) || url.slice(-40);
+  }
+  function normalizeUrl(url) {
+    try {
+      return new URL(url, location.origin).href;
+    } catch {
+      return url;
+    }
+  }
+  function findPreloadForLcp(img, preloads) {
+    const src = normalizeUrl(img.currentSrc || img.src || "");
+    return preloads.find(link => {
+      const href = link.getAttribute("href");
+      const imagesrcset = link.getAttribute("imagesrcset") || "";
+      if (href && normalizeUrl(href) === src) return true;
+      if (imagesrcset) return imagesrcset.split(",").map(s => normalizeUrl(s.trim().split(/\s+/)[0])).includes(src);
+      return false;
+    }) ?? null;
+  }
+  const images = Array.from(document.querySelectorAll("img"));
+  if (images.length === 0) {
+    return {
+      script: "Image-Element-Audit",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  const lcpCandidate = findLcpCandidate(images);
+  const imagePreloads = Array.from(document.querySelectorAll('link[rel="preload"][as="image"]'));
+  const formats = await Promise.all(images.map(img => fetchFormat(img.currentSrc || img.src)));
+  const audited = images.map((img, i) => {
+    const inViewport = isInViewport(img);
+    const isLcp = img === lcpCandidate;
+    const rect = img.getBoundingClientRect();
+    const src = img.currentSrc || img.src || "";
+    const format = formats[i];
+    const inPicture = img.parentElement?.tagName === "PICTURE";
+    const loading = img.getAttribute("loading");
+    const decoding = img.getAttribute("decoding");
+    const fetchpriority = img.getAttribute("fetchpriority");
+    const hasDimensions = img.hasAttribute("width") && img.hasAttribute("height");
+    const issues = [];
+    let lcpPreload = null;
+    if (isLcp) {
+      if (fetchpriority !== "high") issues.push({
+        s: "error",
+        msg: 'Add fetchpriority="high" to the LCP image'
+      });
+      if (loading === "lazy") issues.push({
+        s: "error",
+        msg: 'Remove loading="lazy" from the LCP image'
+      });
+      if (decoding !== "sync") issues.push({
+        s: "warning",
+        msg: 'Consider decoding="sync" for the LCP image'
+      });
+      lcpPreload = findPreloadForLcp(img, imagePreloads);
+      if (!lcpPreload) issues.push({
+        s: "warning",
+        msg: 'LCP image has no <link rel="preload" as="image">'
+      }); else if (lcpPreload.getAttribute("fetchpriority") !== "high") issues.push({
+        s: "info",
+        msg: 'LCP image preload is missing fetchpriority="high"'
+      });
+    } else if (inViewport) {
+      if (loading === "lazy") issues.push({
+        s: "warning",
+        msg: 'Remove loading="lazy" (image is above the fold)'
+      });
+    } else {
+      if (loading !== "lazy") issues.push({
+        s: "warning",
+        msg: 'Add loading="lazy" (image is off-viewport)'
+      });
+      if (fetchpriority === "high") issues.push({
+        s: "error",
+        msg: 'Remove fetchpriority="high" (image is off-viewport)'
+      });
+    }
+    if (loading === "lazy" && fetchpriority === "high") issues.push({
+      s: "error",
+      msg: 'Conflict: loading="lazy" + fetchpriority="high"'
+    });
+    if (!hasDimensions) issues.push({
+      s: "warning",
+      msg: "Missing width/height attributes (CLS risk)"
+    });
+    if (!isModernFormat(format) && !inPicture && format !== "svg") issues.push({
+      s: "info",
+      msg: "No modern format detected (WebP / AVIF / JXL)"
+    });
+    return {
+      img: img,
+      inViewport: inViewport,
+      isLcp: isLcp,
+      src: src,
+      format: format,
+      loading: loading ?? "(not set)",
+      decoding: decoding ?? "(not set)",
+      fetchpriority: fetchpriority ?? "(not set)",
+      hasDimensions: hasDimensions,
+      hasSrcset: img.hasAttribute("srcset"),
+      hasSizes: img.hasAttribute("sizes"),
+      inPicture: inPicture,
+      dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
+      lcpPreload: lcpPreload,
+      issues: issues
+    };
+  });
+  const withIssues = audited.filter(r => r.issues.length > 0);
+  const totalErrors = audited.flatMap(r => r.issues.filter(i => i.s === "error")).length;
+  const totalWarnings = audited.flatMap(r => r.issues.filter(i => i.s === "warning")).length;
+  const totalInfos = audited.flatMap(r => r.issues.filter(i => i.s === "info")).length;
+  if (lcpCandidate) {
+    const lcp = audited.find(r => r.isLcp);
+    lcp.fetchpriority;
+    lcp.lcpPreload && lcp.lcpPreload.getAttribute("fetchpriority");
+    if (lcp.lcpPreload) void 0;
+  }
+  if (withIssues.length > 0) {
+    withIssues.forEach(r => {
+      r.issues.some(i => i.s === "error");
+      r.issues.forEach(issue => {
+        issue.s === "error" || issue.s;
+      });
+    });
+  } else {
+  }
+  const lcpData = lcpCandidate ? audited.find(r => r.isLcp) : null;
+  return {
+    script: "Image-Element-Audit",
+    status: "ok",
+    count: images.length,
+    details: {
+      totalImages: images.length,
+      inViewport: audited.filter(r => r.inViewport).length,
+      offViewport: audited.filter(r => !r.inViewport).length,
+      totalErrors: totalErrors,
+      totalWarnings: totalWarnings,
+      totalInfos: totalInfos,
+      lcpCandidate: lcpData ? {
+        selector: shortSrc(lcpData.src),
+        format: lcpData.format,
+        fetchpriority: lcpData.fetchpriority,
+        loading: lcpData.loading,
+        preloaded: !!lcpData.lcpPreload
+      } : null
+    },
+    items: audited.map(r => ({
+      url: r.src,
+      format: r.format,
+      inViewport: r.inViewport,
+      isLCP: r.isLcp,
+      loading: r.loading,
+      decoding: r.decoding,
+      fetchpriority: r.fetchpriority,
+      hasDimensions: r.hasDimensions,
+      hasSrcset: r.hasSrcset,
+      hasSizes: r.hasSizes,
+      inPicture: r.inPicture,
+      issues: r.issues.map(i => ({
+        severity: i.s,
+        message: i.msg
+      }))
+    })),
+    issues: audited.flatMap(r => r.issues.map(i => ({
+      severity: i.s,
+      message: `${shortSrc(r.src) || "(no src)"}: ${i.msg}`
+    })))
+  };
+})();
diff --git a/skills/webperf-media/scripts-readable/SVG-Embedded-Bitmap-Analysis.js b/skills/webperf-media/scripts-readable/SVG-Embedded-Bitmap-Analysis.js
new file mode 100644
index 0000000..402486e
--- /dev/null
+++ b/skills/webperf-media/scripts-readable/SVG-Embedded-Bitmap-Analysis.js
@@ -0,0 +1,109 @@
+void (async () => {
+  function shortName(url) {
+    try {
+      const path = new URL(url).pathname;
+      const name = path.split("/").pop() || path;
+      return name.length > 45 ? "…" + name.slice(-42) : name;
+    } catch {
+      return url.slice(-45);
+    }
+  }
+  function compressionFromEntry(entry) {
+    if (entry.transferSize === 0 && entry.encodedBodySize === 0) return "cached";
+    if (entry.encodedBodySize === 0) return "unknown";
+    if (entry.encodedBodySize < entry.decodedBodySize) return "compressed";
+    return "none";
+  }
+  function findEmbeddedBitmaps(svgText) {
+    const found = [];
+    const dataRe = /data:image\/(png|jpe?g|gif|webp|avif|bmp|tiff?|ico);base64,([A-Za-z0-9+/=]*)/gi;
+    let m;
+    while ((m = dataRe.exec(svgText)) !== null) found.push({
+      kind: "inline",
+      format: m[1].replace("jpeg", "jpg"),
+      estimatedBytes: Math.floor(m[2].length * 3 / 4)
+    });
+    const hrefRe = /(?:xlink:)?href=["']([^"']*\.(?:png|jpe?g|gif|webp|avif|bmp|tiff?|ico))["']/gi;
+    while ((m = hrefRe.exec(svgText)) !== null) found.push({
+      kind: "external",
+      format: m[1].split(".").pop().toLowerCase().replace("jpeg", "jpg"),
+      url: m[1]
+    });
+    return found;
+  }
+  const svgEntries = performance.getEntriesByType("resource").filter(e => e.name.split("?")[0].toLowerCase().endsWith(".svg"));
+  const externalResults = await Promise.all(svgEntries.map(async entry => {
+    let compression = compressionFromEntry(entry);
+    let bitmaps = [];
+    try {
+      const res = await fetch(entry.name, {
+        cache: "force-cache"
+      });
+      const ce = res.headers.get("content-encoding");
+      if (ce) compression = ce;
+      bitmaps = findEmbeddedBitmaps(await res.text());
+    } catch {}
+    const transferSize = entry.transferSize > 0 ? entry.transferSize : entry.encodedBodySize;
+    return {
+      name: shortName(entry.name),
+      url: entry.name,
+      transferSize: transferSize,
+      compression: compression,
+      bitmaps: bitmaps
+    };
+  }));
+  const inlineSvgs = Array.from(document.querySelectorAll("svg"));
+  const inlineSvgTotal = inlineSvgs.length;
+  const svgsWithUse = inlineSvgs.filter(svg => svg.querySelector("use")).length;
+  const standaloneInlineSvgs = inlineSvgTotal - svgsWithUse;
+  const inlineResults = Array.from(document.querySelectorAll("svg")).map((svg, i) => {
+    const html = svg.outerHTML;
+    const bitmaps = findEmbeddedBitmaps(html);
+    if (!bitmaps.length) return null;
+    return {
+      name: svg.id ? `#${svg.id}` : `inline-svg[${i + 1}]`,
+      transferSize: new Blob([ html ]).size,
+      compression: "N/A",
+      bitmaps: bitmaps
+    };
+  }).filter(Boolean);
+  const withBitmaps = [ ...externalResults.filter(r => r.bitmaps.length > 0), ...inlineResults ];
+  if (svgEntries.length === 0 && inlineSvgTotal === 0) {
+    return {
+      script: "SVG-Embedded-Bitmap-Analysis",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  if (externalResults.length > 0) {
+  }
+  if (withBitmaps.length > 0) {
+    withBitmaps.forEach(r => {
+      r.bitmaps.forEach(b => {
+        if (b.kind === "inline") void 0; else void 0;
+      });
+    });
+  } else {
+  }
+  if (standaloneInlineSvgs >= 5) {
+  }
+  return {
+    script: "SVG-Embedded-Bitmap-Analysis",
+    status: "ok",
+    count: withBitmaps.length,
+    items: withBitmaps.map(r => ({
+      url: r.url || r.name,
+      name: r.name,
+      hasBitmap: true,
+      bitmapCount: r.bitmaps.length,
+      bitmapTypes: r.bitmaps.map(b => b.format).join(", "),
+      sizeBytes: r.transferSize
+    })),
+    issues: withBitmaps.length > 0 ? [ {
+      severity: "warning",
+      message: `${withBitmaps.length} SVG file(s) contain embedded bitmaps`
+    } ] : []
+  };
+})();
diff --git a/skills/webperf-media/scripts-readable/Video-Element-Audit.js b/skills/webperf-media/scripts-readable/Video-Element-Audit.js
new file mode 100644
index 0000000..d873b75
--- /dev/null
+++ b/skills/webperf-media/scripts-readable/Video-Element-Audit.js
@@ -0,0 +1,147 @@
+(() => {
+  function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0 && rect.width > 0 && rect.height > 0;
+  }
+  function detectBestCodec(video) {
+    const sources = Array.from(video.querySelectorAll("source"));
+    const types = sources.map(s => s.getAttribute("type") || "").filter(Boolean).map(t => t.toLowerCase());
+    const allSrcs = [ (video.currentSrc || "").toLowerCase(), (video.getAttribute("src") || "").toLowerCase(), ...sources.map(s => (s.getAttribute("src") || "").toLowerCase()) ];
+    if (types.some(t => t.includes("av01") || t.includes("av1"))) return "AV1";
+    if (types.some(t => t.includes("vp9"))) return "VP9";
+    if (types.some(t => t.includes("webm")) || allSrcs.some(s => s.endsWith(".webm"))) return "WebM";
+    if (types.some(t => t.includes("mp4")) || allSrcs.some(s => s.endsWith(".mp4") || s.endsWith(".mov"))) return "MP4";
+    if (types.some(t => t.includes("ogg")) || allSrcs.some(s => s.endsWith(".ogv"))) return "OGG";
+    return sources.length > 0 || video.getAttribute("src") ? "unknown" : "no source";
+  }
+  function isModernCodec(codec) {
+    return [ "AV1", "VP9", "WebM" ].includes(codec);
+  }
+  function shortSrc(url) {
+    if (!url) return "";
+    return url.split("/").pop()?.split("?")[0]?.slice(0, 40) || url.slice(-40);
+  }
+  const videos = Array.from(document.querySelectorAll("video"));
+  if (videos.length === 0) {
+    return {
+      script: "Video-Element-Audit",
+      status: "ok",
+      count: 0,
+      items: [],
+      issues: []
+    };
+  }
+  const audited = videos.map(video => {
+    const inViewport = isInViewport(video);
+    const rect = video.getBoundingClientRect();
+    const src = video.currentSrc || video.getAttribute("src") || "";
+    const preload = video.getAttribute("preload");
+    const autoplay = video.hasAttribute("autoplay");
+    const muted = video.hasAttribute("muted") || video.muted;
+    const playsinline = video.hasAttribute("playsinline");
+    const loop = video.hasAttribute("loop");
+    const controls = video.hasAttribute("controls");
+    const poster = video.getAttribute("poster");
+    const hasDimensions = video.hasAttribute("width") && video.hasAttribute("height");
+    const sources = Array.from(video.querySelectorAll("source"));
+    const codec = detectBestCodec(video);
+    const issues = [];
+    if (preload === "auto" && !autoplay) issues.push({
+      s: "error",
+      msg: 'preload="auto" loads the full video eagerly — use preload="none" or preload="metadata"'
+    });
+    if (!autoplay && !inViewport && preload !== "none") issues.push({
+      s: "warning",
+      msg: 'Off-viewport video without preload="none" — set preload="none" to avoid unnecessary loading'
+    });
+    if (autoplay && !muted) issues.push({
+      s: "error",
+      msg: "autoplay without muted — browsers block unmuted autoplay"
+    });
+    if (autoplay && !playsinline) issues.push({
+      s: "warning",
+      msg: "autoplay without playsinline — iOS Safari forces fullscreen mode"
+    });
+    if (!poster) issues.push({
+      s: "warning",
+      msg: "Missing poster — no preview frame shown before playback starts"
+    });
+    if (!hasDimensions) issues.push({
+      s: "warning",
+      msg: "Missing width/height attributes (CLS risk)"
+    });
+    if (!isModernCodec(codec) && codec !== "no source") issues.push({
+      s: "info",
+      msg: "No modern codec source detected — consider adding a WebM source (VP9 or AV1) for better compression"
+    });
+    if (!controls && !autoplay) issues.push({
+      s: "info",
+      msg: "No controls attribute and no autoplay — users may not be able to play the video"
+    });
+    return {
+      video: video,
+      inViewport: inViewport,
+      src: src,
+      codec: codec,
+      preload: preload ?? "(not set)",
+      autoplay: autoplay,
+      muted: muted,
+      playsinline: playsinline,
+      loop: loop,
+      controls: controls,
+      poster: poster ? "✓" : "(not set)",
+      hasDimensions: hasDimensions,
+      sourceCount: sources.length,
+      dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
+      issues: issues
+    };
+  });
+  const withIssues = audited.filter(r => r.issues.length > 0);
+  const totalErrors = audited.flatMap(r => r.issues.filter(i => i.s === "error")).length;
+  const totalWarnings = audited.flatMap(r => r.issues.filter(i => i.s === "warning")).length;
+  const totalInfos = audited.flatMap(r => r.issues.filter(i => i.s === "info")).length;
+  if (withIssues.length > 0) {
+    withIssues.forEach(r => {
+      r.issues.some(i => i.s === "error");
+      r.issues.forEach(issue => {
+        issue.s === "error" || issue.s;
+      });
+    });
+  } else {
+  }
+  return {
+    script: "Video-Element-Audit",
+    status: "ok",
+    count: videos.length,
+    details: {
+      totalVideos: videos.length,
+      inViewport: audited.filter(r => r.inViewport).length,
+      offViewport: audited.filter(r => !r.inViewport).length,
+      totalErrors: totalErrors,
+      totalWarnings: totalWarnings,
+      totalInfos: totalInfos
+    },
+    items: audited.map(r => ({
+      src: r.src,
+      codec: r.codec,
+      inViewport: r.inViewport,
+      preload: r.preload,
+      autoplay: r.autoplay,
+      muted: r.muted,
+      playsinline: r.playsinline,
+      loop: r.loop,
+      controls: r.controls,
+      hasPoster: r.poster !== "(not set)",
+      hasDimensions: r.hasDimensions,
+      sourceCount: r.sourceCount,
+      issues: r.issues.map(i => ({
+        severity: i.s,
+        message: i.msg
+      }))
+    })),
+    issues: audited.flatMap(r => r.issues.map(i => ({
+      severity: i.s,
+      message: `${shortSrc(r.src) || "(no src)"}: ${i.msg}`
+    })))
+  };
+})();
diff --git a/skills/webperf-resources/scripts-readable/Network-Bandwidth-Connection-Quality.js b/skills/webperf-resources/scripts-readable/Network-Bandwidth-Connection-Quality.js
new file mode 100644
index 0000000..2ef12a8
--- /dev/null
+++ b/skills/webperf-resources/scripts-readable/Network-Bandwidth-Connection-Quality.js
@@ -0,0 +1,50 @@
+(() => {
+  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+  if (!connection) {
+    return {
+      script: "Network-Bandwidth-Connection-Quality",
+      status: "unsupported",
+      error: "Network Information API not supported"
+    };
+  }
+  const effectiveTypeRating = {
+    "slow-2g": {
+      label: "Slow 2G",
+      color: "#ef4444"
+    },
+    "2g": {
+      label: "2G",
+      color: "#f97316"
+    },
+    "3g": {
+      label: "3G",
+      color: "#f59e0b"
+    },
+    "4g": {
+      label: "4G",
+      color: "#22c55e"
+    }
+  };
+  const effectiveType = connection.effectiveType || "unknown";
+  effectiveTypeRating[effectiveType];
+  if (connection.saveData) {
+  }
+  if (effectiveType === "slow-2g" || effectiveType === "2g") {
+  }
+  const onChange = () => {
+    const updated = connection.effectiveType || "unknown";
+    effectiveTypeRating[updated];
+  };
+  connection.addEventListener("change", onChange);
+  return {
+    script: "Network-Bandwidth-Connection-Quality",
+    status: "ok",
+    details: {
+      effectiveType: effectiveType,
+      downlink: connection.downlink,
+      rtt: connection.rtt,
+      saveData: connection.saveData,
+      type: connection.type || "unknown"
+    }
+  };
+})();

From 40b945ad54eb24bdac114a9a76f4ae1c0da02866 Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Tue, 17 Mar 2026 23:54:44 +0100
Subject: [PATCH 5/9] fix: move readable scripts from skills/ to dist/ (out of
 distribution)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

scripts-readable/ was generated inside skills/{category}/, causing it to
be included in the skills distribution package (npx install-from-release,
install-skills, install-global). These scripts are build artifacts for
external repo contribution, not part of the skill consumed by agents.

Move output to dist/{skill}/ at repo root. The dist/ directory is never
copied to .claude/skills/ nor included in the release zip.

Output structure:
  skills/{skill}/scripts/  — minified, for Claude Code skill loading
  dist/{skill}/            — readable, no headers/console, for external repos
---
 .../webperf-core-web-vitals}/CLS.js                    |  0
 .../webperf-core-web-vitals}/INP.js                    |  0
 .../webperf-core-web-vitals}/LCP-Image-Entropy.js      |  0
 .../webperf-core-web-vitals}/LCP-Sub-Parts.js          |  0
 .../webperf-core-web-vitals}/LCP-Trail.js              |  0
 .../webperf-core-web-vitals}/LCP-Video-Candidate.js    |  0
 .../webperf-core-web-vitals}/LCP.js                    |  0
 .../webperf-interaction}/Input-Latency-Breakdown.js    |  0
 .../webperf-interaction}/Interactions.js               |  0
 .../Layout-Shift-Loading-and-Interaction.js            |  0
 .../Long-Animation-Frames-Helpers.js                   |  0
 .../Long-Animation-Frames-Script-Attribution.js        |  0
 .../webperf-interaction}/Long-Animation-Frames.js      |  0
 .../webperf-interaction}/LongTask.js                   |  0
 .../webperf-interaction}/Scroll-Performance.js         |  0
 .../webperf-loading}/Back-Forward-Cache.js             |  0
 .../webperf-loading}/CSS-Media-Queries-Analysis.js     |  0
 .../webperf-loading}/Client-Side-Redirect-Detection.js |  0
 .../webperf-loading}/Content-Visibility.js             |  0
 .../webperf-loading}/Critical-CSS-Detection.js         |  0
 .../webperf-loading}/Event-Processing-Time.js          |  0
 .../scripts-readable => dist/webperf-loading}/FCP.js   |  0
 .../Find-Above-The-Fold-Lazy-Loaded-Images.js          |  0
 .../Find-Images-With-Lazy-and-Fetchpriority.js         |  0
 ...d-non-Lazy-Loaded-Images-outside-of-the-viewport.js |  0
 .../webperf-loading}/Find-render-blocking-resources.js |  0
 .../First-And-Third-Party-Script-Info.js               |  0
 .../First-And-Third-Party-Script-Timings.js            |  0
 .../Fonts-Preloaded-Loaded-and-used-above-the-fold.js  |  0
 .../webperf-loading}/Inline-CSS-Info-and-Size.js       |  0
 .../webperf-loading}/Inline-Script-Info-and-Size.js    |  0
 .../webperf-loading}/JS-Execution-Time-Breakdown.js    |  0
 .../webperf-loading}/Prefetch-Resource-Validation.js   |  0
 .../webperf-loading}/Priority-Hints-Audit.js           |  0
 .../webperf-loading}/Resource-Hints-Validation.js      |  0
 .../webperf-loading}/Resource-Hints.js                 |  0
 .../webperf-loading}/SSR-Hydration-Data-Analysis.js    |  0
 .../webperf-loading}/Script-Loading.js                 |  0
 .../webperf-loading}/Service-Worker-Analysis.js        |  0
 .../webperf-loading}/TTFB-Resources.js                 |  0
 .../webperf-loading}/TTFB-Sub-Parts.js                 |  0
 .../scripts-readable => dist/webperf-loading}/TTFB.js  |  0
 .../Validate-Preload-Async-Defer-Scripts.js            |  0
 .../webperf-media}/Image-Element-Audit.js              |  0
 .../webperf-media}/SVG-Embedded-Bitmap-Analysis.js     |  0
 .../webperf-media}/Video-Element-Audit.js              |  0
 .../Network-Bandwidth-Connection-Quality.js            |  0
 scripts/generate-skills.js                             | 10 ++++++----
 48 files changed, 6 insertions(+), 4 deletions(-)
 rename {skills/webperf-core-web-vitals/scripts-readable => dist/webperf-core-web-vitals}/CLS.js (100%)
 rename {skills/webperf-core-web-vitals/scripts-readable => dist/webperf-core-web-vitals}/INP.js (100%)
 rename {skills/webperf-core-web-vitals/scripts-readable => dist/webperf-core-web-vitals}/LCP-Image-Entropy.js (100%)
 rename {skills/webperf-core-web-vitals/scripts-readable => dist/webperf-core-web-vitals}/LCP-Sub-Parts.js (100%)
 rename {skills/webperf-core-web-vitals/scripts-readable => dist/webperf-core-web-vitals}/LCP-Trail.js (100%)
 rename {skills/webperf-core-web-vitals/scripts-readable => dist/webperf-core-web-vitals}/LCP-Video-Candidate.js (100%)
 rename {skills/webperf-core-web-vitals/scripts-readable => dist/webperf-core-web-vitals}/LCP.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/Input-Latency-Breakdown.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/Interactions.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/Layout-Shift-Loading-and-Interaction.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/Long-Animation-Frames-Helpers.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/Long-Animation-Frames-Script-Attribution.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/Long-Animation-Frames.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/LongTask.js (100%)
 rename {skills/webperf-interaction/scripts-readable => dist/webperf-interaction}/Scroll-Performance.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Back-Forward-Cache.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/CSS-Media-Queries-Analysis.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Client-Side-Redirect-Detection.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Content-Visibility.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Critical-CSS-Detection.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Event-Processing-Time.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/FCP.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Find-Above-The-Fold-Lazy-Loaded-Images.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Find-Images-With-Lazy-and-Fetchpriority.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Find-render-blocking-resources.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/First-And-Third-Party-Script-Info.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/First-And-Third-Party-Script-Timings.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Fonts-Preloaded-Loaded-and-used-above-the-fold.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Inline-CSS-Info-and-Size.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Inline-Script-Info-and-Size.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/JS-Execution-Time-Breakdown.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Prefetch-Resource-Validation.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Priority-Hints-Audit.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Resource-Hints-Validation.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Resource-Hints.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/SSR-Hydration-Data-Analysis.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Script-Loading.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Service-Worker-Analysis.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/TTFB-Resources.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/TTFB-Sub-Parts.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/TTFB.js (100%)
 rename {skills/webperf-loading/scripts-readable => dist/webperf-loading}/Validate-Preload-Async-Defer-Scripts.js (100%)
 rename {skills/webperf-media/scripts-readable => dist/webperf-media}/Image-Element-Audit.js (100%)
 rename {skills/webperf-media/scripts-readable => dist/webperf-media}/SVG-Embedded-Bitmap-Analysis.js (100%)
 rename {skills/webperf-media/scripts-readable => dist/webperf-media}/Video-Element-Audit.js (100%)
 rename {skills/webperf-resources/scripts-readable => dist/webperf-resources}/Network-Bandwidth-Connection-Quality.js (100%)

diff --git a/skills/webperf-core-web-vitals/scripts-readable/CLS.js b/dist/webperf-core-web-vitals/CLS.js
similarity index 100%
rename from skills/webperf-core-web-vitals/scripts-readable/CLS.js
rename to dist/webperf-core-web-vitals/CLS.js
diff --git a/skills/webperf-core-web-vitals/scripts-readable/INP.js b/dist/webperf-core-web-vitals/INP.js
similarity index 100%
rename from skills/webperf-core-web-vitals/scripts-readable/INP.js
rename to dist/webperf-core-web-vitals/INP.js
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Image-Entropy.js b/dist/webperf-core-web-vitals/LCP-Image-Entropy.js
similarity index 100%
rename from skills/webperf-core-web-vitals/scripts-readable/LCP-Image-Entropy.js
rename to dist/webperf-core-web-vitals/LCP-Image-Entropy.js
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Sub-Parts.js b/dist/webperf-core-web-vitals/LCP-Sub-Parts.js
similarity index 100%
rename from skills/webperf-core-web-vitals/scripts-readable/LCP-Sub-Parts.js
rename to dist/webperf-core-web-vitals/LCP-Sub-Parts.js
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Trail.js b/dist/webperf-core-web-vitals/LCP-Trail.js
similarity index 100%
rename from skills/webperf-core-web-vitals/scripts-readable/LCP-Trail.js
rename to dist/webperf-core-web-vitals/LCP-Trail.js
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP-Video-Candidate.js b/dist/webperf-core-web-vitals/LCP-Video-Candidate.js
similarity index 100%
rename from skills/webperf-core-web-vitals/scripts-readable/LCP-Video-Candidate.js
rename to dist/webperf-core-web-vitals/LCP-Video-Candidate.js
diff --git a/skills/webperf-core-web-vitals/scripts-readable/LCP.js b/dist/webperf-core-web-vitals/LCP.js
similarity index 100%
rename from skills/webperf-core-web-vitals/scripts-readable/LCP.js
rename to dist/webperf-core-web-vitals/LCP.js
diff --git a/skills/webperf-interaction/scripts-readable/Input-Latency-Breakdown.js b/dist/webperf-interaction/Input-Latency-Breakdown.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/Input-Latency-Breakdown.js
rename to dist/webperf-interaction/Input-Latency-Breakdown.js
diff --git a/skills/webperf-interaction/scripts-readable/Interactions.js b/dist/webperf-interaction/Interactions.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/Interactions.js
rename to dist/webperf-interaction/Interactions.js
diff --git a/skills/webperf-interaction/scripts-readable/Layout-Shift-Loading-and-Interaction.js b/dist/webperf-interaction/Layout-Shift-Loading-and-Interaction.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/Layout-Shift-Loading-and-Interaction.js
rename to dist/webperf-interaction/Layout-Shift-Loading-and-Interaction.js
diff --git a/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Helpers.js b/dist/webperf-interaction/Long-Animation-Frames-Helpers.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Helpers.js
rename to dist/webperf-interaction/Long-Animation-Frames-Helpers.js
diff --git a/skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Script-Attribution.js b/dist/webperf-interaction/Long-Animation-Frames-Script-Attribution.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/Long-Animation-Frames-Script-Attribution.js
rename to dist/webperf-interaction/Long-Animation-Frames-Script-Attribution.js
diff --git a/skills/webperf-interaction/scripts-readable/Long-Animation-Frames.js b/dist/webperf-interaction/Long-Animation-Frames.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/Long-Animation-Frames.js
rename to dist/webperf-interaction/Long-Animation-Frames.js
diff --git a/skills/webperf-interaction/scripts-readable/LongTask.js b/dist/webperf-interaction/LongTask.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/LongTask.js
rename to dist/webperf-interaction/LongTask.js
diff --git a/skills/webperf-interaction/scripts-readable/Scroll-Performance.js b/dist/webperf-interaction/Scroll-Performance.js
similarity index 100%
rename from skills/webperf-interaction/scripts-readable/Scroll-Performance.js
rename to dist/webperf-interaction/Scroll-Performance.js
diff --git a/skills/webperf-loading/scripts-readable/Back-Forward-Cache.js b/dist/webperf-loading/Back-Forward-Cache.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Back-Forward-Cache.js
rename to dist/webperf-loading/Back-Forward-Cache.js
diff --git a/skills/webperf-loading/scripts-readable/CSS-Media-Queries-Analysis.js b/dist/webperf-loading/CSS-Media-Queries-Analysis.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/CSS-Media-Queries-Analysis.js
rename to dist/webperf-loading/CSS-Media-Queries-Analysis.js
diff --git a/skills/webperf-loading/scripts-readable/Client-Side-Redirect-Detection.js b/dist/webperf-loading/Client-Side-Redirect-Detection.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Client-Side-Redirect-Detection.js
rename to dist/webperf-loading/Client-Side-Redirect-Detection.js
diff --git a/skills/webperf-loading/scripts-readable/Content-Visibility.js b/dist/webperf-loading/Content-Visibility.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Content-Visibility.js
rename to dist/webperf-loading/Content-Visibility.js
diff --git a/skills/webperf-loading/scripts-readable/Critical-CSS-Detection.js b/dist/webperf-loading/Critical-CSS-Detection.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Critical-CSS-Detection.js
rename to dist/webperf-loading/Critical-CSS-Detection.js
diff --git a/skills/webperf-loading/scripts-readable/Event-Processing-Time.js b/dist/webperf-loading/Event-Processing-Time.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Event-Processing-Time.js
rename to dist/webperf-loading/Event-Processing-Time.js
diff --git a/skills/webperf-loading/scripts-readable/FCP.js b/dist/webperf-loading/FCP.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/FCP.js
rename to dist/webperf-loading/FCP.js
diff --git a/skills/webperf-loading/scripts-readable/Find-Above-The-Fold-Lazy-Loaded-Images.js b/dist/webperf-loading/Find-Above-The-Fold-Lazy-Loaded-Images.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Find-Above-The-Fold-Lazy-Loaded-Images.js
rename to dist/webperf-loading/Find-Above-The-Fold-Lazy-Loaded-Images.js
diff --git a/skills/webperf-loading/scripts-readable/Find-Images-With-Lazy-and-Fetchpriority.js b/dist/webperf-loading/Find-Images-With-Lazy-and-Fetchpriority.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Find-Images-With-Lazy-and-Fetchpriority.js
rename to dist/webperf-loading/Find-Images-With-Lazy-and-Fetchpriority.js
diff --git a/skills/webperf-loading/scripts-readable/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js b/dist/webperf-loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
rename to dist/webperf-loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
diff --git a/skills/webperf-loading/scripts-readable/Find-render-blocking-resources.js b/dist/webperf-loading/Find-render-blocking-resources.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Find-render-blocking-resources.js
rename to dist/webperf-loading/Find-render-blocking-resources.js
diff --git a/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Info.js b/dist/webperf-loading/First-And-Third-Party-Script-Info.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Info.js
rename to dist/webperf-loading/First-And-Third-Party-Script-Info.js
diff --git a/skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Timings.js b/dist/webperf-loading/First-And-Third-Party-Script-Timings.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/First-And-Third-Party-Script-Timings.js
rename to dist/webperf-loading/First-And-Third-Party-Script-Timings.js
diff --git a/skills/webperf-loading/scripts-readable/Fonts-Preloaded-Loaded-and-used-above-the-fold.js b/dist/webperf-loading/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
rename to dist/webperf-loading/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
diff --git a/skills/webperf-loading/scripts-readable/Inline-CSS-Info-and-Size.js b/dist/webperf-loading/Inline-CSS-Info-and-Size.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Inline-CSS-Info-and-Size.js
rename to dist/webperf-loading/Inline-CSS-Info-and-Size.js
diff --git a/skills/webperf-loading/scripts-readable/Inline-Script-Info-and-Size.js b/dist/webperf-loading/Inline-Script-Info-and-Size.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Inline-Script-Info-and-Size.js
rename to dist/webperf-loading/Inline-Script-Info-and-Size.js
diff --git a/skills/webperf-loading/scripts-readable/JS-Execution-Time-Breakdown.js b/dist/webperf-loading/JS-Execution-Time-Breakdown.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/JS-Execution-Time-Breakdown.js
rename to dist/webperf-loading/JS-Execution-Time-Breakdown.js
diff --git a/skills/webperf-loading/scripts-readable/Prefetch-Resource-Validation.js b/dist/webperf-loading/Prefetch-Resource-Validation.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Prefetch-Resource-Validation.js
rename to dist/webperf-loading/Prefetch-Resource-Validation.js
diff --git a/skills/webperf-loading/scripts-readable/Priority-Hints-Audit.js b/dist/webperf-loading/Priority-Hints-Audit.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Priority-Hints-Audit.js
rename to dist/webperf-loading/Priority-Hints-Audit.js
diff --git a/skills/webperf-loading/scripts-readable/Resource-Hints-Validation.js b/dist/webperf-loading/Resource-Hints-Validation.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Resource-Hints-Validation.js
rename to dist/webperf-loading/Resource-Hints-Validation.js
diff --git a/skills/webperf-loading/scripts-readable/Resource-Hints.js b/dist/webperf-loading/Resource-Hints.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Resource-Hints.js
rename to dist/webperf-loading/Resource-Hints.js
diff --git a/skills/webperf-loading/scripts-readable/SSR-Hydration-Data-Analysis.js b/dist/webperf-loading/SSR-Hydration-Data-Analysis.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/SSR-Hydration-Data-Analysis.js
rename to dist/webperf-loading/SSR-Hydration-Data-Analysis.js
diff --git a/skills/webperf-loading/scripts-readable/Script-Loading.js b/dist/webperf-loading/Script-Loading.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Script-Loading.js
rename to dist/webperf-loading/Script-Loading.js
diff --git a/skills/webperf-loading/scripts-readable/Service-Worker-Analysis.js b/dist/webperf-loading/Service-Worker-Analysis.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Service-Worker-Analysis.js
rename to dist/webperf-loading/Service-Worker-Analysis.js
diff --git a/skills/webperf-loading/scripts-readable/TTFB-Resources.js b/dist/webperf-loading/TTFB-Resources.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/TTFB-Resources.js
rename to dist/webperf-loading/TTFB-Resources.js
diff --git a/skills/webperf-loading/scripts-readable/TTFB-Sub-Parts.js b/dist/webperf-loading/TTFB-Sub-Parts.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/TTFB-Sub-Parts.js
rename to dist/webperf-loading/TTFB-Sub-Parts.js
diff --git a/skills/webperf-loading/scripts-readable/TTFB.js b/dist/webperf-loading/TTFB.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/TTFB.js
rename to dist/webperf-loading/TTFB.js
diff --git a/skills/webperf-loading/scripts-readable/Validate-Preload-Async-Defer-Scripts.js b/dist/webperf-loading/Validate-Preload-Async-Defer-Scripts.js
similarity index 100%
rename from skills/webperf-loading/scripts-readable/Validate-Preload-Async-Defer-Scripts.js
rename to dist/webperf-loading/Validate-Preload-Async-Defer-Scripts.js
diff --git a/skills/webperf-media/scripts-readable/Image-Element-Audit.js b/dist/webperf-media/Image-Element-Audit.js
similarity index 100%
rename from skills/webperf-media/scripts-readable/Image-Element-Audit.js
rename to dist/webperf-media/Image-Element-Audit.js
diff --git a/skills/webperf-media/scripts-readable/SVG-Embedded-Bitmap-Analysis.js b/dist/webperf-media/SVG-Embedded-Bitmap-Analysis.js
similarity index 100%
rename from skills/webperf-media/scripts-readable/SVG-Embedded-Bitmap-Analysis.js
rename to dist/webperf-media/SVG-Embedded-Bitmap-Analysis.js
diff --git a/skills/webperf-media/scripts-readable/Video-Element-Audit.js b/dist/webperf-media/Video-Element-Audit.js
similarity index 100%
rename from skills/webperf-media/scripts-readable/Video-Element-Audit.js
rename to dist/webperf-media/Video-Element-Audit.js
diff --git a/skills/webperf-resources/scripts-readable/Network-Bandwidth-Connection-Quality.js b/dist/webperf-resources/Network-Bandwidth-Connection-Quality.js
similarity index 100%
rename from skills/webperf-resources/scripts-readable/Network-Bandwidth-Connection-Quality.js
rename to dist/webperf-resources/Network-Bandwidth-Connection-Quality.js
diff --git a/scripts/generate-skills.js b/scripts/generate-skills.js
index 9887bdd..81aeb9d 100755
--- a/scripts/generate-skills.js
+++ b/scripts/generate-skills.js
@@ -2,6 +2,7 @@
 /**
  * Generates skill.md files from /snippets/ JS files + /pages/ MDX documentation.
  * Output: /skills/webperf-{category}/skill.md + scripts/*.js
+ *         /dist/webperf-{category}/*.js  (readable, no console, no headers — for external repos)
  *
  * Run: node scripts/generate-skills.js
  */
@@ -18,6 +19,7 @@ const SNIPPETS_DIR = path.join(ROOT, 'snippets')
 const PAGES_DIR = path.join(ROOT, 'pages')
 const SKILLS_DIR = path.join(ROOT, 'skills')
 const CLAUDE_SKILLS_DIR = path.join(ROOT, '.claude', 'skills')
+const DIST_DIR = path.join(ROOT, 'dist')
 
 const pkg = JSON.parse(fs.readFileSync(path.join(ROOT, 'package.json'), 'utf-8'))
 
@@ -270,18 +272,18 @@ async function generateCategorySkill(category, catConfig) {
 
   const skillDir = path.join(SKILLS_DIR, catConfig.skill)
   const scriptsDir = path.join(skillDir, 'scripts')
-  const scriptsReadableDir = path.join(skillDir, 'scripts-readable')
   const refsDir = path.join(skillDir, 'references')
+  const distDir = path.join(DIST_DIR, catConfig.skill)
   fs.mkdirSync(scriptsDir, { recursive: true })
-  fs.mkdirSync(scriptsReadableDir, { recursive: true })
   fs.mkdirSync(refsDir, { recursive: true })
+  fs.mkdirSync(distDir, { recursive: true })
 
   for (const snippetFile of snippetFiles) {
     const src = path.join(SNIPPETS_DIR, category, snippetFile)
     await buildScript(src, path.join(scriptsDir, snippetFile), `snippets/${category}/${snippetFile}`)
-    await buildReadableScript(src, path.join(scriptsReadableDir, snippetFile))
+    await buildReadableScript(src, path.join(distDir, snippetFile))
   }
-  console.log(`  built ${snippetFiles.length} scripts to scripts/ and scripts-readable/`)
+  console.log(`  built ${snippetFiles.length} scripts to scripts/ and dist/`)
 
   // Write references/snippets.md (L3 — loaded on demand)
   const snippetLines = []

From 1fe45eb7e78a1a1bbe9c17cada99f6fbe5266268 Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Wed, 18 Mar 2026 00:05:40 +0100
Subject: [PATCH 6/9] fix: sync .claude/skills/ cleanly without preserving
 stale subdirs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

copyRecursive was additive — subdirectories removed from skills/ (like
scripts-readable/) were never deleted from .claude/skills/. Fix: remove
each destination subdirectory before copying, keeping stale files out
while preserving unmanaged files (e.g. evals/) at the top level.
---
 .claude/skills/SCHEMA.md   | 656 -------------------------------------
 scripts/generate-skills.js |   2 +
 2 files changed, 2 insertions(+), 656 deletions(-)
 delete mode 100644 .claude/skills/SCHEMA.md

diff --git a/.claude/skills/SCHEMA.md b/.claude/skills/SCHEMA.md
deleted file mode 100644
index f7e8b16..0000000
--- a/.claude/skills/SCHEMA.md
+++ /dev/null
@@ -1,656 +0,0 @@
-# Script Return Value Schema
-
-All scripts in the skills directory must return a structured JSON object as the IIFE return value. This allows agents using `mcp__chrome-devtools__evaluate_script` to read structured data directly from the return value, rather than parsing human-readable console output.
-
-## Why this matters
-
-`evaluate_script` captures **both** the console output **and** the return value of the evaluated expression. Console output (with `%c` CSS styling, emojis, tables) is meant for humans reading DevTools. The return value is meant for agents.
-
-```
-// Agent workflow
-result = evaluate_script(scriptCode)  // return value → structured JSON for agent
-get_console_message()                  // console output → human debugging only
-```
-
----
-
-## Base Shape
-
-Every script must return an object matching this shape:
-
-```typescript
-{
-  // Required in all scripts
-  script: string;        // Script name, e.g. "LCP", "TTFB", "Script-Loading"
-  status: "ok"           // Script ran, has data
-       | "tracking"      // Observer active, data accumulates over time
-       | "error"         // Failed or no data available
-       | "unsupported";  // Browser API not supported
-
-  // Metric scripts (LCP, CLS, INP, TTFB, FCP)
-  metric?: string;       // Short metric name: "LCP", "CLS", "INP", "TTFB", "FCP"
-  value?: number;        // Always a number, never a formatted string
-  unit?: "ms"            // Milliseconds
-       | "score"         // Unitless score (CLS)
-       | "count"         // Integer count
-       | "bytes"         // Raw bytes
-       | "bpp"           // Bits per pixel
-       | "fps";          // Frames per second
-  rating?: "good" | "needs-improvement" | "poor";
-  thresholds?: {
-    good: number;        // Upper bound for "good"
-    needsImprovement: number;  // Upper bound for "needs-improvement"
-  };
-
-  // Audit/inspection scripts (render-blocking, images, scripts)
-  count?: number;        // Total number of items found
-  items?: object[];      // Array of individual findings
-
-  // Script-specific structured data
-  details?: object;
-
-  // Issues detected (for audit scripts)
-  issues?: Array<{
-    severity: "error" | "warning" | "info";
-    message: string;
-  }>;
-
-  // Tracking scripts (status: "tracking")
-  message?: string;      // Human-readable status message
-  getDataFn?: string;    // window function name to call for data: evaluate_script(`${getDataFn}()`)
-
-  // Error info (status: "error" or "unsupported")
-  error?: string;
-}
-```
-
----
-
-## Execution Patterns
-
-### Pattern 1: Fully synchronous
-
-Scripts that read DOM or `performance.getEntriesByType()` directly. Return JSON at the end of the IIFE.
-
-```js
-// Example: TTFB.js
-(() => {
-  const [nav] = performance.getEntriesByType("navigation");
-  if (!nav) return { script: "TTFB", status: "error", error: "No navigation entry" };
-
-  const value = Math.round(nav.responseStart);
-  const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
-
-  // Human output
-  console.log(`TTFB: ${value}ms (${rating})`);
-
-  // Agent output
-  return { script: "TTFB", status: "ok", metric: "TTFB", value, unit: "ms", rating,
-           thresholds: { good: 800, needsImprovement: 1800 } };
-})();
-```
-
-**Scripts using this pattern:** TTFB, TTFB-Sub-Parts, FCP, Find-render-blocking-resources, Script-Loading, LCP-Video-Candidate, Resource-Hints, Resource-Hints-Validation, Priority-Hints-Audit, Validate-Preload-Async-Defer-Scripts, Fonts-Preloaded, Service-Worker-Analysis, Back-Forward-Cache, Content-Visibility, Critical-CSS-Detection, Inline-CSS-Info-and-Size, Inline-Script-Info-and-Size, First-And-Third-Party-Script-Info, First-And-Third-Party-Script-Timings, JS-Execution-Time-Breakdown, CSS-Media-Queries-Analysis, Client-Side-Redirect-Detection, SSR-Hydration-Data-Analysis, Network-Bandwidth-Connection-Quality, Find-Above-The-Fold-Lazy-Loaded-Images, Find-Images-With-Lazy-and-Fetchpriority, Find-non-Lazy-Loaded-Images-outside-of-the-viewport, SVG-Embedded-Bitmap-Analysis, Prefetch-Resource-Validation, TTFB-Resources.
-
-### Pattern 2: PerformanceObserver → getEntriesByType
-
-Scripts using `PerformanceObserver` with `buffered: true` can read the same data synchronously via `performance.getEntriesByType()`. The observer stays for human console display; the return value is computed synchronously.
-
-```js
-// Example: LCP.js
-(() => {
-  // Synchronous data for agent (computed at top)
-  const entries = performance.getEntriesByType("largest-contentful-paint");
-  const lastEntry = entries.at(-1);
-  if (!lastEntry) {
-    // Still set up the observer for human display
-    // observer.observe(...)
-    return { script: "LCP", status: "error", error: "No LCP entries yet" };
-  }
-
-  const activationStart = performance.getEntriesByType("navigation")[0]?.activationStart ?? 0;
-  const value = Math.round(Math.max(0, lastEntry.startTime - activationStart));
-  const rating = value <= 2500 ? "good" : value <= 4000 ? "needs-improvement" : "poor";
-
-  // Human output via PerformanceObserver (unchanged)
-  const observer = new PerformanceObserver(...);
-  observer.observe({ type: "largest-contentful-paint", buffered: true });
-
-  // Agent return value
-  return {
-    script: "LCP", status: "ok", metric: "LCP", value, unit: "ms", rating,
-    thresholds: { good: 2500, needsImprovement: 4000 },
-    details: { element: selector, elementType: type, url: lastEntry.url, sizePixels: lastEntry.size }
-  };
-})();
-```
-
-**Scripts using this pattern:** LCP, CLS, LCP-Sub-Parts, LCP-Trail, LCP-Image-Entropy, Event-Processing-Time, Long-Animation-Frames (buffered LoAFs), LongTask (buffered tasks).
-
-### Pattern 3: Tracking observers
-
-Scripts that observe ongoing user interactions cannot return meaningful data synchronously. They return `status: "tracking"` immediately, and expose a `window.getXxx()` function for agents to call later.
-
-```js
-// Return at the end of the IIFE:
-return {
-  script: "INP",
-  status: "tracking",
-  message: "INP tracking active. Interact with the page then call getINP() for results.",
-  getDataFn: "getINP"
-};
-```
-
-**Agent workflow for tracking scripts:**
-```
-1. evaluate_script(INP.js)          → { status: "tracking", getDataFn: "getINP" }
-2. (user interacts with the page)
-3. evaluate_script("getINP()")      → { script: "INP", status: "ok", value: 350, rating: "needs-improvement", ... }
-```
-
-**The window function must also return a structured object** matching the same schema.
-
-**Scripts using this pattern:** INP, Interactions, Input-Latency-Breakdown, Layout-Shift-Loading-and-Interaction, Scroll-Performance, Long-Animation-Frames (ongoing tracking), LongTask (ongoing tracking), Long-Animation-Frames-Script-Attribution.
-
-### Pattern 4: Async scripts
-
-Scripts that use `async/await` or `setTimeout`. The IIFE returns a Promise, which `evaluate_script` can await (Chrome DevTools `awaitPromise`).
-
-Keep the existing `async () => {}` wrapper. Add a `return` statement with structured data at the end. The agent receives the resolved value.
-
-**Scripts using this pattern:** Image-Element-Audit (fetches content-type headers), Video-Element-Audit, Long-Animation-Frames-Script-Attribution (should be converted to return buffered data immediately instead of waiting 10s).
-
----
-
-## Script-Specific Schemas
-
-### Core Web Vitals
-
-#### LCP
-```json
-{
-  "script": "LCP",
-  "status": "ok",
-  "metric": "LCP",
-  "value": 1240,
-  "unit": "ms",
-  "rating": "good",
-  "thresholds": { "good": 2500, "needsImprovement": 4000 },
-  "details": {
-    "element": "img.hero",
-    "elementType": "Image",
-    "url": "https://example.com/hero.jpg",
-    "sizePixels": 756000
-  }
-}
-```
-
-#### CLS
-Returns buffered CLS immediately and keeps tracking. Always call `getCLS()` after interactions to get an updated value.
-```json
-{
-  "script": "CLS",
-  "status": "ok",
-  "metric": "CLS",
-  "value": 0.05,
-  "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"
-}
-```
-`getCLS()` returns the same shape with the latest accumulated value.
-
-#### INP (tracking)
-```json
-{
-  "script": "INP",
-  "status": "tracking",
-  "message": "INP tracking active. Interact with the page then call getINP() for results.",
-  "getDataFn": "getINP"
-}
-```
-`getINP()` returns:
-```json
-{
-  "script": "INP",
-  "status": "ok",
-  "metric": "INP",
-  "value": 350,
-  "unit": "ms",
-  "rating": "needs-improvement",
-  "thresholds": { "good": 200, "needsImprovement": 500 },
-  "details": {
-    "totalInteractions": 5,
-    "worstEvent": "click -> button.submit",
-    "phases": { "inputDelay": 120, "processingTime": 180, "presentationDelay": 50 }
-  }
-}
-```
-If no interactions yet, `getINP()` returns `status: "error"` with `getDataFn: "getINP"` — retry after user interaction.
-
-`getINPDetails()` returns the full sorted interaction list (array of up to 15 entries). Use when `getINP()` shows poor INP and you need to identify patterns across multiple slow interactions:
-```json
-[
-  { "formattedName": "click → button.submit", "duration": 450, "startTime": 1200,
-    "phases": { "inputDelay": 120, "processingTime": 280, "presentationDelay": 50 } }
-]
-```
-
-#### LCP-Sub-Parts
-```json
-{
-  "script": "LCP-Sub-Parts",
-  "status": "ok",
-  "metric": "LCP",
-  "value": 2100,
-  "unit": "ms",
-  "rating": "needs-improvement",
-  "thresholds": { "good": 2500, "needsImprovement": 4000 },
-  "details": {
-    "element": "img.hero",
-    "url": "hero.jpg",
-    "subParts": {
-      "ttfb": { "value": 450, "percent": 21, "overTarget": false },
-      "resourceLoadDelay": { "value": 120, "percent": 6, "overTarget": false },
-      "resourceLoadTime": { "value": 1200, "percent": 57, "overTarget": true },
-      "elementRenderDelay": { "value": 330, "percent": 16, "overTarget": true }
-    },
-    "slowestPhase": "resourceLoadTime"
-  }
-}
-```
-
-#### LCP-Trail
-```json
-{
-  "script": "LCP-Trail",
-  "status": "ok",
-  "metric": "LCP",
-  "value": 1240,
-  "unit": "ms",
-  "rating": "good",
-  "thresholds": { "good": 2500, "needsImprovement": 4000 },
-  "details": {
-    "candidateCount": 2,
-    "finalElement": "img.hero",
-    "candidates": [
-      { "index": 1, "selector": "h1", "time": 800, "elementType": "Text block" },
-      { "index": 2, "selector": "img.hero", "time": 1240, "elementType": "Image", "url": "hero.jpg" }
-    ]
-  }
-}
-```
-
-#### LCP-Image-Entropy
-```json
-{
-  "script": "LCP-Image-Entropy",
-  "status": "ok",
-  "count": 5,
-  "details": {
-    "totalImages": 5,
-    "lowEntropyCount": 1,
-    "lcpImageEligible": true,
-    "lcpImage": {
-      "url": "hero.jpg",
-      "bpp": 1.65,
-      "isLowEntropy": false
-    }
-  },
-  "items": [
-    { "url": "hero.jpg", "width": 1200, "height": 630, "fileSizeBytes": 156000, "bpp": 1.65, "isLowEntropy": false, "lcpEligible": true, "isLCP": true }
-  ],
-  "issues": []
-}
-```
-
-#### LCP-Video-Candidate
-```json
-{
-  "script": "LCP-Video-Candidate",
-  "status": "ok",
-  "metric": "LCP",
-  "value": 1800,
-  "unit": "ms",
-  "rating": "good",
-  "thresholds": { "good": 2500, "needsImprovement": 4000 },
-  "details": {
-    "isVideo": true,
-    "posterUrl": "https://example.com/hero.avif",
-    "posterFormat": "avif",
-    "posterPreloaded": true,
-    "fetchpriorityOnPreload": "high",
-    "isCrossOrigin": false,
-    "videoAttributes": { "autoplay": true, "muted": true, "playsinline": true, "preload": "auto" }
-  },
-  "issues": []
-}
-```
-
-### Loading
-
-#### TTFB
-```json
-{
-  "script": "TTFB",
-  "status": "ok",
-  "metric": "TTFB",
-  "value": 245,
-  "unit": "ms",
-  "rating": "good",
-  "thresholds": { "good": 800, "needsImprovement": 1800 }
-}
-```
-
-#### TTFB-Sub-Parts
-```json
-{
-  "script": "TTFB-Sub-Parts",
-  "status": "ok",
-  "metric": "TTFB",
-  "value": 245,
-  "unit": "ms",
-  "rating": "good",
-  "thresholds": { "good": 800, "needsImprovement": 1800 },
-  "details": {
-    "subParts": {
-      "redirectWait": { "value": 0, "unit": "ms" },
-      "serviceWorkerCache": { "value": 0, "unit": "ms" },
-      "dnsLookup": { "value": 5, "unit": "ms" },
-      "tcpConnection": { "value": 30, "unit": "ms" },
-      "sslTls": { "value": 45, "unit": "ms" },
-      "serverResponse": { "value": 165, "unit": "ms" }
-    },
-    "slowestPhase": "serverResponse"
-  }
-}
-```
-
-#### Find-render-blocking-resources
-```json
-{
-  "script": "Find-render-blocking-resources",
-  "status": "ok",
-  "count": 3,
-  "details": {
-    "totalBlockingUntilMs": 450,
-    "totalSizeBytes": 135000,
-    "byType": { "link": 2, "script": 1 }
-  },
-  "items": [
-    { "type": "link", "url": "https://example.com/style.css", "shortName": "style.css", "responseEndMs": 450, "durationMs": 200, "sizeBytes": 45000 }
-  ]
-}
-```
-
-#### Script-Loading
-```json
-{
-  "script": "Script-Loading",
-  "status": "ok",
-  "count": 8,
-  "rating": "needs-improvement",
-  "details": {
-    "totalSizeBytes": 245000,
-    "byStrategy": { "blocking": 2, "async": 4, "defer": 1, "module": 1 },
-    "byParty": { "firstParty": 5, "thirdParty": 3 },
-    "thirdPartyBlockingCount": 1
-  },
-  "items": [
-    { "url": "https://example.com/app.js", "shortName": "app.js", "strategy": "blocking", "location": "head", "party": "first", "sizeBytes": 85000, "durationMs": 120 }
-  ],
-  "issues": [
-    { "severity": "error", "message": "2 blocking scripts in <head>" },
-    { "severity": "error", "message": "1 third-party blocking script" }
-  ]
-}
-```
-
-### Interaction
-
-#### Interactions (tracking)
-```json
-{
-  "script": "Interactions",
-  "status": "tracking",
-  "message": "Tracking interactions. Interact with the page then call getInteractionSummary() for results.",
-  "getDataFn": "getInteractionSummary"
-}
-```
-
-#### Input-Latency-Breakdown (tracking)
-```json
-{
-  "script": "Input-Latency-Breakdown",
-  "status": "tracking",
-  "message": "Tracking input latency by event type. Interact with the page then call getInputLatencyBreakdown().",
-  "getDataFn": "getInputLatencyBreakdown"
-}
-```
-
-#### Layout-Shift-Loading-and-Interaction
-Immediately returns buffered CLS data, plus exposes summary function for ongoing tracking.
-```json
-{
-  "script": "Layout-Shift-Loading-and-Interaction",
-  "status": "tracking",
-  "metric": "CLS",
-  "value": 0.08,
-  "unit": "score",
-  "rating": "good",
-  "thresholds": { "good": 0.1, "needsImprovement": 0.25 },
-  "details": {
-    "currentCLS": 0.08,
-    "shiftCount": 3,
-    "countedShifts": 3,
-    "excludedShifts": 0
-  },
-  "message": "Layout shift tracking active. Call getLayoutShiftSummary() for full element attribution.",
-  "getDataFn": "getLayoutShiftSummary"
-}
-```
-
-#### Long-Animation-Frames
-Returns buffered LoAF data immediately. Ongoing tracking continues.
-```json
-{
-  "script": "Long-Animation-Frames",
-  "status": "tracking",
-  "count": 3,
-  "details": {
-    "totalLoAFs": 3,
-    "withBlockingTime": 2,
-    "totalBlockingTimeMs": 280,
-    "worstBlockingMs": 180
-  },
-  "message": "Tracking long animation frames. Call getLoAFSummary() for full script attribution.",
-  "getDataFn": "getLoAFSummary"
-}
-```
-
-#### Long-Animation-Frames-Script-Attribution
-Returns buffered LoAF data immediately (do not wait for a timer):
-```json
-{
-  "script": "Long-Animation-Frames-Script-Attribution",
-  "status": "ok",
-  "details": {
-    "frameCount": 5,
-    "totalBlockingMs": 420,
-    "byCategory": {
-      "first-party": { "durationMs": 180, "count": 3 },
-      "third-party": { "durationMs": 210, "count": 2 },
-      "framework": { "durationMs": 30, "count": 1 }
-    }
-  },
-  "items": [
-    { "file": "app.js", "category": "first-party", "durationMs": 180, "count": 3 }
-  ]
-}
-```
-
-#### Scroll-Performance (tracking)
-```json
-{
-  "script": "Scroll-Performance",
-  "status": "tracking",
-  "details": {
-    "nonPassiveListeners": 2,
-    "cssAudit": {
-      "smoothScrollElements": 1,
-      "willChangeElements": 0,
-      "contentVisibilityElements": 3
-    }
-  },
-  "message": "Scroll performance tracking active. Scroll the page then call getScrollSummary() for FPS data.",
-  "getDataFn": "getScrollSummary"
-}
-```
-
-#### LongTask
-Returns buffered long tasks immediately. Ongoing tracking continues.
-```json
-{
-  "script": "LongTask",
-  "status": "tracking",
-  "count": 4,
-  "details": {
-    "totalBlockingTimeMs": 380,
-    "worstTaskMs": 220,
-    "bySeverity": { "critical": 1, "high": 1, "medium": 2, "low": 0 }
-  },
-  "message": "Tracking long tasks. Call getLongTaskSummary() for statistics.",
-  "getDataFn": "getLongTaskSummary"
-}
-```
-
-### Media
-
-#### Image-Element-Audit (async)
-```json
-{
-  "script": "Image-Element-Audit",
-  "status": "ok",
-  "count": 8,
-  "details": {
-    "totalImages": 8,
-    "inViewport": 3,
-    "offViewport": 5,
-    "totalErrors": 2,
-    "totalWarnings": 3,
-    "totalInfos": 1,
-    "lcpCandidate": {
-      "selector": "img.hero",
-      "format": "avif",
-      "fetchpriority": "high",
-      "loading": "(not set)",
-      "preloaded": true
-    }
-  },
-  "items": [
-    {
-      "selector": "img.hero",
-      "url": "hero.avif",
-      "format": "avif",
-      "inViewport": true,
-      "isLCP": true,
-      "loading": "(not set)",
-      "decoding": "sync",
-      "fetchpriority": "high",
-      "hasDimensions": true,
-      "hasSrcset": false,
-      "hasSizes": false,
-      "inPicture": false,
-      "issues": []
-    }
-  ],
-  "issues": [
-    { "severity": "warning", "message": "img.thumbnail: Missing width/height attributes (CLS risk)" }
-  ]
-}
-```
-
-#### Video-Element-Audit
-Same shape as Image-Element-Audit but for video elements.
-
-#### SVG-Embedded-Bitmap-Analysis
-```json
-{
-  "script": "SVG-Embedded-Bitmap-Analysis",
-  "status": "ok",
-  "count": 2,
-  "items": [
-    { "url": "icon.svg", "hasBitmap": true, "bitmapType": "image/png", "sizeBytes": 4500 }
-  ],
-  "issues": [
-    { "severity": "warning", "message": "2 SVG files contain embedded bitmaps" }
-  ]
-}
-```
-
-### Resources
-
-#### Network-Bandwidth-Connection-Quality
-```json
-{
-  "script": "Network-Bandwidth-Connection-Quality",
-  "status": "ok",
-  "details": {
-    "effectiveType": "4g",
-    "downlink": 10,
-    "rtt": 50,
-    "saveData": false
-  }
-}
-```
-
----
-
-## Guidelines for Agents
-
-### Reading results
-
-```
-// Prefer return value over console output
-result = evaluate_script(scriptCode)
-if result.status == "ok" → use result.value, result.rating, result.details, result.items
-if result.status == "tracking" → call evaluate_script(`${result.getDataFn}()`) after user interaction
-if result.status == "error" → check result.error, the browser may not have loaded the page yet
-if result.status == "unsupported" → browser does not support the required API (check: Chrome 107+?)
-```
-
-### Tracking scripts workflow
-
-```
-// 1. Start tracking
-result = evaluate_script(INP_js)
-// result = { status: "tracking", getDataFn: "getINP" }
-
-// 2. Wait for/trigger user interactions
-
-// 3. Collect data
-data = evaluate_script("getINP()")
-// data = { status: "ok", value: 350, rating: "needs-improvement", ... }
-```
-
-### Making decisions from return values
-
-- `rating === "good"` → no action needed for this metric
-- `rating === "needs-improvement"` → investigate, check `details` and `issues`
-- `rating === "poor"` → high priority fix, check `issues` for specific problems
-- `count > 0` and `issues.length > 0` → audit found actionable problems
-- `count === 0` → nothing to audit (no render-blocking resources, no images, etc.)
-
----
-
-## Implementation Rules
-
-1. **Numbers are numbers** — never `"245ms"`, always `245`. The agent formats as needed.
-2. **Consistent field names** — `value` for the metric, `unit` for its unit, `rating` for the threshold assessment.
-3. **Issues are actionable** — each issue message describes what to fix, not what was found.
-4. **Items are homogeneous** — all objects in `items[]` have the same fields.
-5. **No DOM references in return value** — elements can't be serialized to JSON.
-6. **Keep console output unchanged** — the return value is additive, not a replacement.
-7. **Window functions match the schema** — `getINP()`, `getLoAFSummary()`, etc. return the same structured shape.
diff --git a/scripts/generate-skills.js b/scripts/generate-skills.js
index 81aeb9d..e166b95 100755
--- a/scripts/generate-skills.js
+++ b/scripts/generate-skills.js
@@ -471,6 +471,8 @@ async function main() {
       const destPath = path.join(dest, entry.name)
 
       if (entry.isDirectory()) {
+        // Replace dest subdirectory entirely to avoid stale files
+        if (fs.existsSync(destPath)) fs.rmSync(destPath, { recursive: true, force: true })
         copyRecursive(srcPath, destPath)
       } else {
         fs.copyFileSync(srcPath, destPath)

From 4fcaa5fda2aa5cce787a7cb55d1dfd93e1c2ebde Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Wed, 18 Mar 2026 00:07:20 +0100
Subject: [PATCH 7/9] chore: sync package-lock.json with version bump to 1.1.0

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 54aec94..2e5965a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "webperf-snippets",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "webperf-snippets",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
         "next": "^13.4.19",

From 3c211c15233721a188c0d3dac86fb8a0a251aa83 Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Wed, 18 Mar 2026 00:08:56 +0100
Subject: [PATCH 8/9] chore: bump version to 1.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2e5965a..d7356ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "webperf-snippets",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "webperf-snippets",
-      "version": "1.1.0",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "next": "^13.4.19",
diff --git a/package.json b/package.json
index c5e09ed..7d8300c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webperf-snippets",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Web Performance Snippets",
   "scripts": {
     "dev": "next dev",

From dc9c31d2af257be3ce7a89d08c1f026cd3117904 Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Wed, 18 Mar 2026 00:14:36 +0100
Subject: [PATCH 9/9] fix: update Node to 22 and sync package-lock.json for CI

---
 .github/workflows/release.yml |  2 +-
 package-lock.json             | 99 +++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 1aa9ba2..eae2056 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Install dependencies
         run: npm ci
diff --git a/package-lock.json b/package-lock.json
index d7356ec..e8d41dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
       },
       "devDependencies": {
         "eslint": "^10.0.2",
+        "terser": "^5.36.0",
         "vercel": "^32.4.1"
       }
     },
@@ -469,6 +470,28 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -479,6 +502,28 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/source-map/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -2896,6 +2941,13 @@
         "node": "*"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -18779,6 +18831,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/space-separated-tokens": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
@@ -19221,6 +19294,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/terser": {
+      "version": "5.46.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.1.tgz",
+      "integrity": "sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",