メニュー
Measure and optimize Core Web Vitals (LCP, INP, CLS). Use when implementing CWV tracking or debugging performance.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Instrument API requests with spans and distributed tracing. Use when tracking request latency or debugging API issues.
Monitor JavaScript bundle size and execution performance. Use when tracking bundle size, identifying large chunks, or optimizing load performance.
Set up error tracking with actionable context. Use when configuring error capture or error boundaries.
Measure SSR hydration timing and issues. Use when tracking hydration performance, debugging hydration mismatches, or optimizing SSR/SSG applications.
Plan what to measure in web applications. Use when starting observability or prioritizing instrumentation.
Measure time from navigation to page fully loaded and interactive. Use when tracking SPA navigation, route changes, or slow page transitions.
| name | core-web-vitals |
| description | Measure and optimize Core Web Vitals (LCP, INP, CLS). Use when implementing CWV tracking or debugging performance. |
| triggers | ["core web vitals","LCP optimization","INP tracking","CLS issues"] |
| priority | 1 |
Measure the three metrics Google uses to assess user experience.
| Metric | Measures | Good | Poor |
|---|---|---|---|
| LCP | Loading - Largest Contentful Paint | ≤2.5s | >4.0s |
| INP | Interactivity - Interaction to Next Paint | ≤200ms | >500ms |
| CLS | Visual Stability - Cumulative Layout Shift | ≤0.1 | >0.25 |
| Without | With |
|---|---|
| "LCP is 3.2s" | "LCP is 3.2s, caused by hero-image.jpg" |
| Can't fix | Actionable |
See templates/web-vitals.ts for production-ready code.
Use Read tool to load template when generating implementation.
See references/anti-patterns.md for:
skills/hydration-performance - SSR impact on LCPskills/bundle-performance - JS impact on INPreferences/core-web-vitals.md - Deep dive