Skill
component-common-domai…
Finds duplicate business logic spread across multiple components and suggests consolidation. Use when asking "where is this logic duplicated?", "find common…
Development
Skill
/core-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals
Install
$ npx -y skills add tech-leads-club/agent-skills --skill core-web-vitals --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/core-web-vitals
Context preview
The summary Claude sees to decide when to auto-load this skill.
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals
SKILL.md
core-web-vitals.SKILL.mdname: core-web-vitals
description: Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web performance (use perf-web-optimization), Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
license: MIT
metadata:
author: web-quality-skills
version: '1.0'
Core Web Vitals optimization
Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience.
The three metrics
| Metric | Measures | Good | Needs work | Poor | | ------- | ---------------- | ------- | ------------- | ------- | | **LCP** | Loading | ≤ 2.5s | 2.5s – 4s | > 4s | | **INP** | Interactivity | ≤ 200ms | 200ms – 500ms | > 500ms | | **CLS** | Visual Stability | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Google measures at the **75th percentile** — 75% of page visits must meet "Good" thresholds.
---
LCP: Largest Contentful Paint
LCP measures when the largest visible content element renders. Usually this is:
- Hero image or video
- Large text block
- Background image
- `<svg>` element
Common LCP issues
**1. Slow server response (TTFB > 800ms)**
Fix: CDN, caching, optimized backend, edge rendering
**2. Render-blocking resources**
<!-- ❌ Blocks rendering -->
<link rel="stylesheet" href="/all-styles.css" />
<!-- ✅ Critical CSS inlined, rest deferred -->
<style>
/* Critical above-fold CSS */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
**3. Slow resource load times**
<!-- ❌ No hints, discovered late -->
<img src="/hero.jpg" alt="Hero" />
<!-- ✅ Preloaded with high priority -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high" />
<img src="/hero.webp" alt="Hero" fetchpriority="high" />
**4. Client-side rendering delays**
// ❌ Content loads after JavaScript
useEffect(() => {
fetch('/api/hero-text')
.then((r) => r.json())
.then(setHeroText)
}, [])
// ✅ Server-side or static rendering
// Use SSR, SSG, or streaming to send HTML with content
export async function getServerSideProps() {
const heroText = await fetchHeroText()
return { props: { heroText } }
}LCP optimization checklist
- [ ] TTFB < 800ms (use CDN, edge caching)
- [ ] LCP image preloaded with fetchpriority="high"
- [ ] LCP image optimized (WebP/AVIF, correct size)
- [ ] Critical CSS inlined (< 14KB)
- [ ] No render-blocking JavaScript in <head>
- [ ] Fonts don't block text rendering (font-display: swap)
- [ ] LCP element in initial HTML (not JS-rendered)
LCP element identification
// Find your LCP element
new PerformanceObserver((list) => {
const entries = list.getEntries()
const lastEntry = entries[entries.length - 1]
console.log('LCP element:', lastEntry.element)
console.log('LCP time:', lastEntry.startTime)
}).observe({ type: 'largest-contentful-paint', buffered: true })---
INP: Interaction to Next Paint
INP measures responsiveness across ALL interactions (clicks, taps, key presses) during a page visit. It reports the worst interaction (at 98th percentile for high-traffic pages).
INP breakdown
Total INP = **Input Delay** + **Processing Time** + **Presentation Delay**
| Phase | Target | Optimization | | ------------ | ------- | --------------------------- | | Input Delay | < 50ms | Reduce main thread blocking | | Processing | < 100ms | Optimize event handlers | | Presentation | < 50ms | Minimize rendering work |
Common INP issues
**1. Long tasks blocking main thread**
// ❌ Long synchronous task
function processLargeArray(items) {
items.forEach((item) => expensiveOperation(item))
}
// ✅ Break into chunks with yielding
async function processLargeArray(items) {
const CHUNK_SIZE = 100
for (let i = 0; i < items.length; i += CHUNK_SIZE) {
const chunk = items.slice(i, i + CHUNK_SIZE)
chunk.forEach((item) => expensiveOperation(item))
// Yield to main thread
await new Promise((r) => setTimeout(r, 0))
// Or use scheduler.yield() when available
}
}**2. Heavy event handlers**
// ❌ All work in handler
button.addEventListener('click', () => {
// Heavy computation
const result = calculateComplexThing()
// DOM updates
updateUI(result)
// Analytics
trackEvent('click')
})
// ✅ Prioritize visual feedback
button.addEventListener('click', () => {
// Immediate visual feedback
button.classList.add('loading')
// Defer non-critical work
requestAnimationFrame(() => {
const result = calculateComplexThing()
updateUI(result)
})
// Use requestIdleCallback for analytics
requestIdleCallback(() => trackEvent('click'))
})**3. Third-party scripts**
// ❌ Eagerly loaded, blocks interactions
;<script src="https://heavy-widget.com/widget.js"></script>
// ✅ Lazy loaded on interaction or visibility
const loadWidget = () => {
import('https://heavy-widget.com/widget.js').then((widget) => widget.init())
}
button.addEventListener('click', loadWidget, { once: true })**4. Excessive re-renders (React/Vue)**
// ❌ Re-renders entire tree
function App() {
const [count, setCount] = useState(0)
return (
<div>
<Counter count={count} />
<ExpensiveComponent /> {/* Re-renders on every count change */}
</div>
)
}
// ✅ Memoized expensive components
const MemoizedExpensive = React.memo(ExpensiveComponent)
function App() {
const [count, setCount] = useState(0)
return (
<div>
<Counter count={count} />
<MemoizedExpensive />
</div>
)
}INP optimization checklist
Read more
name: core-web-vitals description: Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web performance (use perf-web-optimization), Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro). license: MIT metadata: author: web-quality-skills version: '1.0'
Core Web Vitals optimization
Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience.
The three metrics
| Metric | Measures | Good | Needs work | Poor | | ------- | ---------------- | ------- | ------------- | ------- | | **LCP** | Loading | ≤ 2.5s | 2.5s – 4s | > 4s | | **INP** | Interactivity | ≤ 200ms | 200ms – 500ms | > 500ms | | **CLS** | Visual Stability | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Google measures at the **75th percentile** — 75% of page visits must meet "Good" thresholds.
---
LCP: Largest Contentful Paint
LCP measures when the largest visible content element renders. Usually this is:
- Hero image or video
- Large text block
- Background image
- `<svg>` element
Common LCP issues
**1. Slow server response (TTFB > 800ms)**
Fix: CDN, caching, optimized backend, edge rendering
**2. Render-blocking resources**
<!-- ❌ Blocks rendering --> <link rel="stylesheet" href="/all-styles.css" /> <!-- ✅ Critical CSS inlined, rest deferred --> <style> /* Critical above-fold CSS */ </style> <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
**3. Slow resource load times**
<!-- ❌ No hints, discovered late --> <img src="/hero.jpg" alt="Hero" /> <!-- ✅ Preloaded with high priority --> <link rel="preload" href="/hero.webp" as="image" fetchpriority="high" /> <img src="/hero.webp" alt="Hero" fetchpriority="high" />
**4. Client-side rendering delays**
// ❌ Content loads after JavaScript
useEffect(() => {
fetch('/api/hero-text')
.then((r) => r.json())
.then(setHeroText)
}, [])
// ✅ Server-side or static rendering
// Use SSR, SSG, or streaming to send HTML with content
export async function getServerSideProps() {
const heroText = await fetchHeroText()
return { props: { heroText } }
}LCP optimization checklist
- [ ] TTFB < 800ms (use CDN, edge caching) - [ ] LCP image preloaded with fetchpriority="high" - [ ] LCP image optimized (WebP/AVIF, correct size) - [ ] Critical CSS inlined (< 14KB) - [ ] No render-blocking JavaScript in <head> - [ ] Fonts don't block text rendering (font-display: swap) - [ ] LCP element in initial HTML (not JS-rendered)
LCP element identification
// Find your LCP element
new PerformanceObserver((list) => {
const entries = list.getEntries()
const lastEntry = entries[entries.length - 1]
console.log('LCP element:', lastEntry.element)
console.log('LCP time:', lastEntry.startTime)
}).observe({ type: 'largest-contentful-paint', buffered: true })---
INP: Interaction to Next Paint
INP measures responsiveness across ALL interactions (clicks, taps, key presses) during a page visit. It reports the worst interaction (at 98th percentile for high-traffic pages).
INP breakdown
Total INP = **Input Delay** + **Processing Time** + **Presentation Delay**
| Phase | Target | Optimization | | ------------ | ------- | --------------------------- | | Input Delay | < 50ms | Reduce main thread blocking | | Processing | < 100ms | Optimize event handlers | | Presentation | < 50ms | Minimize rendering work |
Common INP issues
**1. Long tasks blocking main thread**
// ❌ Long synchronous task
function processLargeArray(items) {
items.forEach((item) => expensiveOperation(item))
}
// ✅ Break into chunks with yielding
async function processLargeArray(items) {
const CHUNK_SIZE = 100
for (let i = 0; i < items.length; i += CHUNK_SIZE) {
const chunk = items.slice(i, i + CHUNK_SIZE)
chunk.forEach((item) => expensiveOperation(item))
// Yield to main thread
await new Promise((r) => setTimeout(r, 0))
// Or use scheduler.yield() when available
}
}**2. Heavy event handlers**
// ❌ All work in handler
button.addEventListener('click', () => {
// Heavy computation
const result = calculateComplexThing()
// DOM updates
updateUI(result)
// Analytics
trackEvent('click')
})
// ✅ Prioritize visual feedback
button.addEventListener('click', () => {
// Immediate visual feedback
button.classList.add('loading')
// Defer non-critical work
requestAnimationFrame(() => {
const result = calculateComplexThing()
updateUI(result)
})
// Use requestIdleCallback for analytics
requestIdleCallback(() => trackEvent('click'))
})**3. Third-party scripts**
// ❌ Eagerly loaded, blocks interactions
;<script src="https://heavy-widget.com/widget.js"></script>
// ✅ Lazy loaded on interaction or visibility
const loadWidget = () => {
import('https://heavy-widget.com/widget.js').then((widget) => widget.init())
}
button.addEventListener('click', loadWidget, { once: true })**4. Excessive re-renders (React/Vue)**
// ❌ Re-renders entire tree
function App() {
const [count, setCount] = useState(0)
return (
<div>
<Counter count={count} />
<ExpensiveComponent /> {/* Re-renders on every count change */}
</div>
)
}
// ✅ Memoized expensive components
const MemoizedExpensive = React.memo(ExpensiveComponent)
function App() {
const [count, setCount] = useState(0)
return (
<div>
<Counter count={count} />
<MemoizedExpensive />
</div>
)
}INP optimization checklist
Ships withtech-leads-club-agent-skills
The secure, validated skill registry for professional AI coding agents. Extend Antigravity, Claude Code, Cursor, Copilot and more with absolute confidence.
Get the whole plugin
Stats
5,939
Stars
511
Forks
Active
Maintenance
TypeScript
Language
2d ago
Last commit
7mo ago
Created
Repo: tech-leads-club/agent-skills
Other skills on tech-leads-club-agent-skills.
Skill
component-flattening-a…
Detects misplaced classes and fixes component hierarchy problems — finds code that should belong inside a component but sits at the root level. Use when asking…
Skill
component-identificati…
Maps architectural components in a codebase and measures their size to identify what should be extracted first. Use when asking "how big is each module?",…
Skill
coupling-analysis
Analyzes coupling between modules using the three-dimensional model (strength, distance, volatility) from "Balancing Coupling in Software Design". Use when…
Skill
decomposition-planning…
Creates step-by-step decomposition plans and migration roadmaps for breaking apart monolithic applications. Use when asking "what order should I extract…
Skill
domain-analysis
Maps business domains and suggests service boundaries in any codebase using DDD Strategic Design. Use when asking "what are the domains in this codebase?",…