webperf

Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.

Jump to install Review files

Repository: nucliweb/webperf-snippets
Last source activity: October 15, 2026 at 23:10
Detected SKILL.md language: English
Stars: 1,451
Forks: 89

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/nucliweb/webperf-snippets/tree/main/dist/antigravity/webperf.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

name: webperf
description: Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
kind: inline
model: gemini-2.5-flash
temperature: 0.1
max_turns: 5
license: MIT
metadata: {"author":"Joan Leon | @nucliweb","version":"2.0.1","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"}

# WebPerf Snippets Toolkit A collection of 56 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results. ## Quick Reference | Skill | Snippets | Trigger phrases | |-------|----------|-----------------| | webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" | | webperf-loading | 34 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" | | webperf-interaction | 10 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | | webperf-media | 4 | "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 (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 - `mcp__chrome-devtools__evaluate_script` → run the snippet - `mcp__chrome-devtools__get_console_message` → read results 4. Interpret results using the thresholds defined in the skill 5. Provide actionable recommendations based on findings

View on GitHub

Back to search Back to installation

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.

2026-10-15

webperf-interaction

Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.

2026-10-15

webperf-loading

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. Includes decision trees that automatically analyze TTFB sub-parts when slow, detect script loading anti-patterns (async/defer/preload conflicts), identify render-blocking resources, and validate resource hints usage. Features workflows for complete loading audit (6 phases), backend performance investigation, and priority optimization. Cross-skill integration with Core Web Vitals (LCP resource loading), Interaction (script execution blocking), and Media (lazy loading strategy). Use when the user asks about TTFB, FCP, render-blocking, slow loading, font performance, script optimization, or resource hints. Compatible with Chrome DevTools MCP.

2026-10-15

View all from this repository

webperf

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository