AI TOOLS RADAR
All skills / NUCLIWEB
nucliweb/webperf-snippets

webperf

Web performance measurement and debugging toolkit.

View source

How to use

  1. Copy the installation command and review the source package before installing it in your own agent environment.
  2. Check the source document for required tools, credentials and supported hosts.
  3. Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf

Before you start

  • Installation does not include a model subscription, API allowance or permission to access your files.
  • Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document

Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.

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

SkillSnippetsTrigger phrases
webperf-core-web-vitals7"debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness"
webperf-loading34"TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker"
webperf-interaction10"jank", "scroll performance", "long tasks", "animation frames", "INP debug"
webperf-media4"image audit", "lazy loading", "image optimization", "video audit"
webperf-resources1"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
  1. Interpret results using the thresholds defined in the skill
  2. Provide actionable recommendations based on findings

Related by task

mattpocock
Community

diagnosing-bugs

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.

installs
842.2K
GitHub stars
303.4K
Updated
Oct 22
MIT3 Files
View skill details →

Why explore this: Testing & security

morluto
Community

rea-ci-tests-audit

Audit REA CI and test suites for correctness, fixture drift, false passes, and measured performance; use for suite or workflow investigations and efficiency changes, rather than ordinary feature testing or a single test failure.

installs
3
GitHub stars
385.7K
Updated
Oct 25
MIT3 Files
View skill details →

Why explore this: Testing & security

mattpocock
Community

code-review

Review the changes since a fixed point (commit, branch, tag, or merge-base) along two axes: Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what the originating issue/spec asked for?). Runs both reviews in parallel sub-agents and reports them side by side. Use when the user wants to review a branch, a PR, work-in-progress changes, or asks to \"review since X\".

installs
796.7K
GitHub stars
303.4K
Updated
Oct 22
MIT2 Files
View skill details →

Why explore this: Testing & security

affaan-m
Community

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support.

installs
3
GitHub stars
286.1K
Updated
Oct 20
MIT1 Files
View skill details →

Why explore this: Testing & security

from this repository

More skills

All skills
nucliweb
Community

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 interacti

installs
1
GitHub stars
1.4K
Updated
Oct 13
MIT10 Files
View skill details →
nucliweb
Community

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 correla

installs
1
GitHub stars
1.4K
Updated
Oct 13
MIT13 Files
View skill details →
nucliweb
Community

webperf-media

Intelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy or below-fold eager). Features workflows for complete media audit, LCP image investigation, video performance (poster optimization), and SVG embedded bitmap detection. Cross-skill integration with Core Web Vitals (LCP/CLS

installs
1
GitHub stars
1.4K
Updated
Oct 13
MIT7 Files
View skill details →