Skills for Real Engineers. Straight from my .agents directory.
39 skills
webperf-media
Agent skill from
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.
How to install webperf-media
install webperf-media
# install the webperf-snippets pack with the skills CLI
npx skills add nucliweb/webperf-snippets# or add only this skill to Claude Code: copy the folder
skills/webperf-media/
# into
~/.claude/skills/webperf-media/ (all projects)
.claude/skills/webperf-media/ (one project)
1# WebPerf: Media Performance23JavaScript snippets for measuring web performance in Chrome DevTools.45## Running a script671. Run the script with `mcp__chrome-devtools__evaluate_script`, passing the file instead of its code: `sourcePath` with the absolute path of `scripts/<Name>.js` in this skill, and `format: "script"`, since a script runs by itself and is not a function. Read the object it returns. The scripts have no console output, so the returned object is the result: `script`, `status` and the metric data (`value`, `rating`, `details`, `items`, `issues`), as described in `references/schema.md`.82. When `status` is `"tracking"`, the script keeps observing the page. After the interactions, call the function named in `getDataFn` with another `mcp__chrome-devtools__evaluate_script` call, as an arrow function in `function`, for example `() => getINP()`, and read the object it returns.93. When `status` is `"error"` or `"unsupported"`, read `error`: the page may not have loaded yet, or the browser lacks the API.10…
Excerpt shown under the repository's MIT license.
More skills in webperf-snippets
Keep exploring
Similar skill repositories
An agentic skills framework & software development methodology that works.
15 skills
A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
CC1 skill
Public repository for Agent Skills
20 skills
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
CCCU6 skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
CCCXCUGH6 skills