webperf-core-web-vitals
Intelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.
What this skill does
# WebPerf: Core Web Vitals 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`. ## Scripts - `scripts/CLS.js` — Cumulative Layout Shift (CLS) - `scripts/INP.js` — Interaction to Next Paint (INP) - `scripts/LCP-Image-Entropy.js` — LCP Image Entropy - `scripts/LCP-Subparts.js` — LCP Subparts - `scripts/LCP-Trail.js` — LCP Trail - `scripts/LCP-Video-Candidate.js` — LCP Video Candidate - `scripts/LCP.js` — Largest Contentful Paint (LCP) ## Common Workflows ### Complete Core Web Vitals Audit When the user asks for a comprehensive Core Web Vitals analysis or "audit CWV": 1. **LCP.js** - Measure Largest Contentful Paint 2. **CLS.js** - Measure Cumulative Layout Shift 3. **INP.js** - Measure Interaction to Next Paint 4. **LCP-Subparts.js** - Break down LCP timing phases 5. **LCP-Trail.js** - Track LCP candidate evolution ### LCP Deep Dive When LCP is slow or the user asks "debug LCP" or "why is LCP slow": 1. **LCP.js** - Establish baseline LCP value 2. **LCP-Subparts.js** - Break down into TTFB, resource load, render delay 3. **LCP-Trail.js** - Identify all LCP candidates and changes 4. **LCP-Image-Entropy.js** - Check if LCP image has visual complexity issues 5. **LCP-Video-Candidate.js** - Detect if LCP is a video (poster or video element) ### CLS Investigation 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** _(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) ### INP Debugging When interactions feel slow or the user asks "debug INP" or "slow interactions": 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 When LCP is a video element (detected by LCP-Video-Candidate.js): 1. **LCP-Video-Candidate.js** - Identify video as LCP candidate 2. **Video-Element-Audit.js** (from Media skill) - Audit video loading strategy 3. **LCP-Subparts.js** - Analyze video loading phases 4. Cross-reference with **webperf-loading** skill: - Resource-Hints-Validation.js (check for video preload) - Priority-Hints-Audit.js (check for fetchpriority on video) ### Image as LCP Investigation When LCP is an image (most common case): 1. **LCP.js** - Measure LCP timing 2. **LCP-Subparts.js** - Break down timing phases 3. **LCP-Image-Entropy.js** - Analyze image complexity 4. Cross-reference with **webperf-media** skill: - Image-Element-Audit.js (check format, dimensions, lazy loading) 5. Cross-reference with **webperf-loading** skill: - Find-Above-The-Fold-Lazy-Loaded-Images.js (check if incorrectly lazy) - Priority-Hints-Audit.js (check for fetchpriority="high") - Resource-Hints-Validation.js (check for preload) ## Decision Tree Use this decision tree to automatically run follow-up snippets based on results: ### After LCP.js - **If LCP > 2.5s** → Run **LCP-Subparts.js** to diagnose which phase is slow - **If LCP > 4.0s (poor)** → Run full LCP deep dive workflow (5 snippets) - **If LCP candidate is an image** → Run **LCP-Image-Entropy.js** and **webperf-media:Image-Element-Audit.js** - **If LCP candidate is a video** → Run **LCP-Video-Candidate.js** and **webperf-media:Video-Element-Audit.js** - **Always run** → **LCP-Trail.js** to understand candidate evolution ### After LCP-Subparts.js - **If TTFB phase > 600ms** → Switch to **webperf-loading** skill and run TTFB-Sub-Parts.js - **If Resource Load Time > 1500ms** → Run: 1. **webperf-loading:Resource-Hints-Validation.js** (check for preload/preconnect) 2. **webperf-loading:Priority-Hints-Audit.js** (check fetchpriority) 3. **webperf-loading:Find-render-blocking-resources.js** (competing resources) - **If Render Delay > 200ms** → Run: 1. **webperf-loading:Find-render-blocking-resources.js** (blocking CSS/JS) 2. **webperf-loading:Script-Loading.js** (parser-blocking scripts) 3. **webperf-interaction:Long-Animation-Frames.js** (main thread blocking) ### After LCP-Trail.js - **If many LCP candidate changes (>3)** → This causes visual instability, investigate: 1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (late-loading images) 2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font swaps) 3. **CLS.js** (layout shifts contributing to LCP changes) - **If final LCP candidate appears late** → Run **webperf-loading:Resource-Hints-Validation.js** - **If early candidate was replaced** → Understand why initial content was pushed down (likely CLS issue) ### After LCP-Image-Entropy.js - **If entropy is very high** → Image is visually complex, recommend: - Modern formats (WebP, AVIF) - Appropriate compression - Potentially a placeholder strategy - **If entropy is low** → Image may be over-optimized or placeholder-like - **If large file size detected** → Run **webperf-media:Image-Element-Audit.js** for format/sizing analysis ### After LCP-Video-Candidate.js - **If video is LCP** → Run: 1. **webperf-media:Video-Element-Audit.js** (check poster, preload, formats) 2. **webperf-loading:Priority-Hints-Audit.js** (check fetchpriority on poster) 3. **LCP-Subparts.js** (analyze video loading phases) - **If poster image is LCP** → Treat as image LCP (run image workflows) ### After CLS.js - **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) 3. **webperf-loading:Critical-CSS-Detection.js** (late-loading styles) 4. **webperf-media:Image-Element-Audit.js** (missing width/height) - **If CLS = 0** → Confirm with multiple page loads (might be timing-dependent) ### After INP.js - **If INP > 200ms** → Run **webperf-interaction:Interactions.js** to identify slow interactions - **If INP > 500ms (poor)** → Run full INP debugging workflow: 1. **webperf-interaction:Interactions.js** (list all interactions) 2. **webperf-interaction:Input-Latency-Breakdown.js** (phase breakdown) 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-Subparts.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
Related in AI Agents
skill-development
IncludedComprehensive meta-skill for creating, managing, validating, auditing, and distributing Claude Code skills and slash commands (unified in v2.1.3+). Provides skill templates, creation workflows, validation patterns, audit checklists, naming conventions, YAML frontmatter guidance, progressive disclosure examples, and best practices lookup. Use when creating new skills, validating existing skills, auditing skill quality, understanding skill architecture, needing skill templates, learning about YAML frontmatter requirements, progressive disclosure patterns, tool restrictions (allowed-tools), skill composition, skill naming conventions, troubleshooting skill activation issues, creating custom slash commands, configuring command frontmatter, using command arguments ($ARGUMENTS, $1, $2), bash execution in commands, file references in commands, command namespacing, plugin commands, MCP slash commands, Skill tool configuration, or deciding between skills vs slash commands. Delegates to docs-management skill for official documentation.
reprompter
IncludedTransform messy prompts into well-structured, effective prompts — single or multi-agent. Use when: "reprompt", "reprompt this", "clean up this prompt", "structure my prompt", rough text needing XML tags and best practices, "reprompter teams", "repromptception", "run with quality", "smart run", "smart agents", multi-agent tasks, audits, parallel work, anything going to agent teams. Don't use when: simple Q&A, pure chat, immediate execution-only tasks. See "Don't Use When" section for details. Outputs: Structured XML/Markdown prompt, quality score (before/after), optional team brief + per-agent sub-prompts, agent team output files. Success criteria: Single mode quality score ≥ 7/10; Repromptception per-agent prompt quality score 8+/10; all required sections present, actionable and specific.
adaptive-compaction
IncludedAdaptive add-on policy and recovery layer that decides WHEN to compact, prune, snapshot, or fork -- replacing fixed-percent auto-compaction across Claude Code, Codex, and MCP-capable hosts. Trigger on auto-compact timing or damage: "when should I compact", "is it safe to compact now or start a fresh session", "auto-compact fires too early/mid-task", "switching to an unrelated task but the window still has space", "context rot", "answers get worse the longer the session runs", "the agent forgot the plan or my decisions after it summarized", "add a layer on top that manages context without changing the agent", raising autoCompactWindow to give the policy room, or installing/tuning a cross-tool compaction policy or PreCompact hook -- even when "compaction" is never said but the problem is context-window pressure or post-summarization memory loss. Do NOT use to summarize a conversation, build RAG, write a summarization prompt (decides WHEN not HOW), or answer max-context-length trivia.
agent-skill-creator
IncludedCreate cross-platform agent skills from workflow descriptions. Activates when users ask to create an agent, automate a repetitive workflow, create a custom skill, or need advanced agent creation. Triggers on phrases like create agent for, automate workflow, create skill for, every day I have to, daily I need to, turn process into agent, need to automate, create a cross-platform skill, validate this skill, export this skill, migrate this skill. Supports single skills, multi-agent suites, transcript processing, template-based creation, interactive configuration, cross-platform export, and spec validation.
llm-wiki
IncludedUse when building or maintaining a persistent personal knowledge base (second brain) in Obsidian where an LLM incrementally ingests sources, updates entity/concept pages, maintains cross-references, and keeps a synthesis current. Triggers include "second brain", "Obsidian wiki", "personal knowledge management", "ingest this paper/article/book", "build a research wiki", "compound knowledge", "Memex", or whenever the user wants knowledge to accumulate across sessions instead of being re-derived by RAG on every query.
skill-master
IncludedAgent Skills authoring, evaluation, and optimization. Create, edit, validate, benchmark, and improve skills following the agentskills.io specification. Use when designing SKILL.md files, structuring skill folders (references, scripts, assets), ingesting external documentation into skills, running trigger evals, benchmarking skill quality, optimizing descriptions, or performing blind A/B comparisons. Keywords: agentskills.io, SKILL.md, skill authoring, eval, benchmark, trigger optimization.