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.

Ir para a instalação Revisar arquivos

Repositório: nucliweb/webperf-snippets
Última atividade na origem: 15 de outubro de 2026 às 23:10
Idioma detectado do SKILL.md: inglês
Estrelas: 1.451
Forks: 89

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

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

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

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

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

SKILL.md

Instruções da origem · Visualização somente leitura

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.
context: fork
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

Ver no GitHub

Voltar à pesquisa Voltar à instalação

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

Ver todas deste repositório

webperf

Informações da origem

Opções de instalação

Instalar com um assistente de IA

Revise os arquivos de origem

Mais deste repositório

Instalar com um assistente de IA

Mais deste repositório