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

Repositório: nucliweb/webperf-snippets
Última atividade na origem: 13 de junho de 2026 às 10:45
Idioma detectado do SKILL.md: inglês
Estrelas: 1.443
Forks: 86

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 Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

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

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-06-13

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-06-13

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-06-13

Ver todas deste repositório

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":"1.2.0","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"}

WebPerf Snippets Toolkit

A collection of 49 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	29	"TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker"
webperf-interaction	9	"jank", "scroll performance", "long tasks", "animation frames", "INP debug"
webperf-media	3	"image audit", "lazy loading", "image optimization", "video audit"
webperf-resources	1	"network quality", "bandwidth", "connection type", "save-data"

Workflow

Identify the relevant skill based on the user's question (see Quick Reference above)
Load the skill's skill.md to see available snippets and thresholds
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
Interpret results using the thresholds defined in the skill
Provide actionable recommendations based on findings

webperf

Informações da origem

Opções de instalação

Revise os arquivos de origem

Mais deste repositório

Mais deste repositório

WebPerf Snippets Toolkit

Quick Reference

Workflow

WebPerf Snippets Toolkit

Quick Reference

Workflow