·webperf-media
*

webperf-media

✓
nucliweb/webperf-snippetsGitHub: nucliweb/webperf-snippetsSource: nucliweb/webperf-snippets

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 impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP.

nucliweb·webperf·media
12Installs·1Trend·@nucliweb

Installation

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

How to Install webperf-media

Quickly install webperf-media AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: nucliweb/webperf-snippets.

SKILL.md

View raw

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcpchrome-devtoolsevaluatescript, capture output with mcpchrome-devtoolsgetconsolemessage.

| Image Element Audit | Audits all elements on the page against image performance best practices — covering loading st | scripts/Image-Element-Audit.js | | SVG Embedded Bitmap Analysis | Scans all SVG resources on the page — both external files and inline elements — and flags any | scripts/SVG-Embedded-Bitmap-Analysis.js |

| Video Element Audit | Audits all elements on the page against video performance best practices — covering preload | scripts/Video-Element-Audit.js |

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 impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP. Source: nucliweb/webperf-snippets.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media
Source
nucliweb/webperf-snippets
Category
*Creative Media
Verified
✓
First Seen
2026-03-09
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/nucliweb/webperf-snippets/webperf-media

Browse more skills from nucliweb/webperf-snippets

Quick answers

What is 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 impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP. Source: nucliweb/webperf-snippets.

How do I install webperf-media?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/nucliweb/webperf-snippets

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-03-09

Related Skills

webperf
13 Installs
webperf-core-web-vitals
12 Installs
webperf-interaction
11 Installs
webperf-loading
11 Installs
webperf-resources
11 Installs