Skip to content

Commit 6d80039

Browse files
nucliwebnucliweb
committed
Enhance agent skills system with local installation and updated documentation
- Add install-skills.js script for local Claude Code installation - Add install-global.js script for global skills setup - Update generate-skills.js to copy snippets to .claude/skills/ - Update all SKILL.md files with improved descriptions and compatibility notes - Add SKILLS.md documentation for agent skills usage - Configure .claude/settings.json with all webperf skills - Update README with agent skills section
1 parent ef29e91 commit 6d80039

65 files changed

Lines changed: 12369 additions & 348 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.claude/settings.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"skills": [
3+
{
4+
"path": "./skills/webperf"
5+
},
6+
{
7+
"path": "./skills/webperf-core-web-vitals"
8+
},
9+
{
10+
"path": "./skills/webperf-interaction"
11+
},
12+
{
13+
"path": "./skills/webperf-loading"
14+
},
15+
{
16+
"path": "./skills/webperf-media"
17+
},
18+
{
19+
"path": "./skills/webperf-resources"
20+
}
21+
]
22+
}

‎.claude/skills/webperf-core-web-vitals/SKILL.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
name: webperf-core-web-vitals
3+
description: Measure and debug Core Web Vitals (LCP, CLS, INP). Use when the user asks about LCP, CLS, INP, page loading performance, or wants to analyze Core Web Vitals on a URL or current page. Compatible with Chrome DevTools MCP.
4+
---
5+
6+
# WebPerf: Core Web Vitals
7+
8+
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with `mcp__chrome-devtools__evaluate_script`, capture output with `mcp__chrome-devtools__get_console_message`.
9+
10+
## Available Snippets
11+
12+
| Snippet | Description | File |
13+
|---------|-------------|------|
14+
| Cumulative Layout Shift (CLS) | Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual stability | scripts/CLS.js |
15+
| Interaction to Next Paint (INP) | Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness | scripts/INP.js |
16+
| LCP Image Entropy | Checks if images qualify as LCP candidates based on their entropy (bits per pixel) | scripts/LCP-Image-Entropy.js |
17+
| LCP Sub-Parts | Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities | scripts/LCP-Sub-Parts.js |
18+
| LCP Trail | Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-c | scripts/LCP-Trail.js |
19+
| LCP Video Candidate | Detects whether the LCP element is a <video> and audits the poster image configuration — the most co | scripts/LCP-Video-Candidate.js |
20+
| Largest Contentful Paint (LCP) | Quick check for Largest Contentful Paint, a Core Web Vital that measures loading performance | scripts/LCP.js |
21+
22+
## Execution with Chrome DevTools MCP
23+
24+
```
25+
1. mcp__chrome-devtools__navigate_page → navigate to target URL
26+
2. mcp__chrome-devtools__evaluate_script → run snippet code (read from scripts/ file)
27+
3. mcp__chrome-devtools__get_console_message → capture console output
28+
4. Interpret results using thresholds below, provide recommendations
29+
```
30+
31+
---
32+
33+
## Cumulative Layout Shift (CLS)
34+
35+
Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual stability. CLS tracks how much the page layout shifts unexpectedly during its lifetime, providing a single score that represents the cumulative impact of all unexpected layout shifts.
36+
37+
**Script:** `scripts/CLS.js`
38+
39+
**Thresholds:**
40+
41+
| Rating | Score | Meaning |
42+
|--------|-------|---------|
43+
| 🟢 Good | ≤ 0.1 | Stable, minimal shifting |
44+
| 🟡 Needs Improvement | ≤ 0.25 | Noticeable shifting |
45+
| 🔴 Poor | > 0.25 | Significant layout instability |
46+
47+
---
48+
49+
## Interaction to Next Paint (INP)
50+
51+
Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness. INP evaluates how quickly a page responds to user interactions throughout the entire page visit, replacing First Input Delay (FID) as a Core Web Vital in March 2024.
52+
53+
**Script:** `scripts/INP.js`
54+
55+
**Thresholds:**
56+
57+
| Rating | Time | Meaning |
58+
|--------|------|---------|
59+
| 🟢 Good | ≤ 200ms | Responsive, feels instant |
60+
| 🟡 Needs Improvement | ≤ 500ms | Noticeable delay |
61+
| 🔴 Poor | > 500ms | Slow, frustrating experience |
62+
63+
---
64+
65+
## LCP Image Entropy
66+
67+
Checks if images qualify as LCP candidates based on their entropy (bits per pixel). Since Chrome 112, low-entropy images are ignored for LCP measurement.
68+
69+
**Script:** `scripts/LCP-Image-Entropy.js`
70+
71+
**Thresholds:**
72+
73+
| BPP | Entropy | LCP Eligible | Example |
74+
|-----|---------|--------------|---------|
75+
| < 0.05 | 🔴 Low | ❌ No | Solid colors, simple gradients, placeholders |
76+
| ≥ 0.05 | 🟢 Normal | ✅ Yes | Photos, complex graphics |
77+
78+
---
79+
80+
## LCP Sub-Parts
81+
82+
Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities. Understanding which phase is slowest helps you focus your optimization efforts where they'll have the most impact. Based on the Web Vitals Chrome Extension.
83+
84+
**Script:** `scripts/LCP-Sub-Parts.js`
85+
86+
---
87+
88+
## LCP Trail
89+
90+
Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-colored dashed outline — so you can see the full trail from first candidate to final LCP.
91+
92+
**Script:** `scripts/LCP-Trail.js`
93+
94+
---
95+
96+
## LCP Video Candidate
97+
98+
Detects whether the LCP element is a <video> and audits the poster image configuration — the most common source of avoidable LCP delay when video is the hero element.
99+
100+
**Script:** `scripts/LCP-Video-Candidate.js`
101+
102+
---
103+
104+
## Largest Contentful Paint (LCP)
105+
106+
Quick check for Largest Contentful Paint, a Core Web Vital that measures loading performance. LCP marks when the largest content element becomes visible in the viewport.
107+
108+
**Script:** `scripts/LCP.js`
109+
110+
**Thresholds:**
111+
112+
| Rating | Time | Meaning |
113+
|--------|------|---------|
114+
| 🟢 Good | ≤ 2.5s | Fast, content appears quickly |
115+
| 🟡 Needs Improvement | ≤ 4s | Moderate delay |
116+
| 🔴 Poor | > 4s | Slow, users may abandon |

‎.claude/skills/webperf-core-web-vitals/scripts/CLS.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// CLS Quick Check
2+
// https://webperf-snippets.nucliweb.net
3+
4+
(() => {
5+
let cls = 0;
6+
7+
const valueToRating = (score) =>
8+
score <= 0.1 ? "good" : score <= 0.25 ? "needs-improvement" : "poor";
9+
10+
const RATING = {
11+
good: { icon: "🟢", color: "#0CCE6A" },
12+
"needs-improvement": { icon: "🟡", color: "#FFA400" },
13+
poor: { icon: "🔴", color: "#FF4E42" },
14+
};
15+
16+
const logCLS = () => {
17+
const rating = valueToRating(cls);
18+
const { icon, color } = RATING[rating];
19+
console.log(
20+
`%cCLS: ${icon} ${cls.toFixed(4)} (${rating})`,
21+
`color: ${color}; font-weight: bold; font-size: 14px;`
22+
);
23+
};
24+
25+
const observer = new PerformanceObserver((list) => {
26+
for (const entry of list.getEntries()) {
27+
if (!entry.hadRecentInput) {
28+
cls += entry.value;
29+
}
30+
}
31+
logCLS();
32+
});
33+
34+
observer.observe({ type: "layout-shift", buffered: true });
35+
36+
// Update on visibility change (final CLS)
37+
document.addEventListener("visibilitychange", () => {
38+
if (document.visibilityState === "hidden") {
39+
observer.takeRecords();
40+
console.log("%c📊 Final CLS (on page hide):", "font-weight: bold;");
41+
logCLS();
42+
}
43+
});
44+
45+
// Expose function for manual check
46+
window.getCLS = () => {
47+
logCLS();
48+
return cls;
49+
};
50+
51+
console.log(
52+
" Call %cgetCLS()%c anytime to check current value.",
53+
"font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
54+
""
55+
);
56+
})();

0 commit comments

Comments
 (0)