重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
webperf-media by nucliweb/webperf-snippets
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-media用于在 Chrome DevTools 中测量 Web 性能的 JavaScript 代码片段。使用 mcp__chrome-devtools__evaluate_script 执行,使用 mcp__chrome-devtools__get_console_message 捕获输出。
scripts/Image-Element-Audit.js — 图片元素审计scripts/SVG-Embedded-Bitmap-Analysis.js — SVG 内嵌位图分析scripts/Video-Element-Audit.js — 视频元素审计当用户要求媒体优化或"审计图片和视频"时:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
当用户要求"优化图片"或"检查图片性能"时:
当用户要求"优化视频"或"检查视频性能"时:
当 LCP 是图片且需要优化时:
当 CLS 由缺少尺寸的图片引起时:
当用户询问 SVG 性能或文件大小过大时:
使用此决策树根据结果自动运行后续代码片段:
如果图片缺少 width/height 属性 → 存在布局偏移风险,运行:
如果图片使用了错误的格式(图形用 JPEG,照片用 PNG) → 建议:
如果图片尺寸远大于显示尺寸 → 建议:
如果首屏图片被懒加载 → 运行:
如果 LCP 图片缺少 fetchpriority="high" → 运行:
如果非首屏图片没有懒加载 → 运行:
如果图片同时具有 loading="lazy" 和 fetchpriority="high" → 运行:
如果图片与关键资源竞争 → 运行:
如果图片缺少 alt 文本 → 无障碍访问问题,建议添加描述性 alt 文本
如果视频是 LCP 候选 → 运行:
如果视频缺少海报图 → 建议:
如果视频使用 preload="auto" → 带宽问题,评估:
如果自动播放视频没有静音 → 浏览器将阻止,建议:
如果视频缺少多种格式 → 建议:
如果视频文件过大(>5MB) → 建议:
如果在 SVG 中发现位图图片 → 建议:
<image> 元素从 SVG 引用图片如果内嵌位图过大(>100KB) → 严重低效:
如果 SVG 中有多个小位图 → 考虑:
使用这些阈值来触发建议:
图片文件大小:
图片格式:
图片尺寸:
视频文件大小:
懒加载:
优先级提示:
references/snippets.md — 每个脚本的描述和阈值references/schema.md — 用于解释脚本输出的返回值模式周安装量
51
仓库
GitHub 星标数
1.4K
首次出现
2026年3月4日
安全审计
安装于
github-copilot50
gemini-cli50
cursor50
opencode50
codex50
kimi-cli50
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcp__chrome-devtools__evaluate_script, capture output with mcp__chrome-devtools__get_console_message.
scripts/Image-Element-Audit.js — Image Element Auditscripts/SVG-Embedded-Bitmap-Analysis.js — SVG Embedded Bitmap Analysisscripts/Video-Element-Audit.js — Video Element AuditWhen the user asks for media optimization or "audit images and videos":
When the user asks "optimize images" or "check image performance":
When the user asks "optimize videos" or "check video performance":
When LCP is an image and needs optimization:
When CLS is caused by images without dimensions:
When the user asks about SVG performance or file sizes are large:
Use this decision tree to automatically run follow-up snippets based on results:
If images missing width/height attributes → Layout shift risk, run:
If images using wrong format (JPEG for graphics, PNG for photos) → Recommend:
If images much larger than display size → Recommend:
If above-the-fold images are lazy-loaded → Run:
If LCP image lacks fetchpriority="high" → Run:
If video is LCP candidate → Run:
If video missing poster → Recommend:
If video uses preload="auto" → Bandwidth concern, evaluate:
If autoplay video without muted → Browser will block, recommend:
If video missing multiple formats → Recommend:
If large video files ( >5MB) → Recommend:
If bitmap images found in SVGs → Recommend:
If large embedded bitmaps ( >100KB) → Critical inefficiency:
If multiple small bitmaps in SVG → Consider:
Use these thresholds to trigger recommendations:
Image File Sizes:
Image Formats:
Image Dimensions:
Video File Sizes:
Lazy Loading:
Priority Hints:
references/snippets.md — Descriptions and thresholds for each scriptreferences/schema.md — Return value schema for interpreting script outputWeekly Installs
51
Repository
GitHub Stars
1.4K
First Seen
Mar 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot50
gemini-cli50
cursor50
opencode50
codex50
kimi-cli50
Convex性能审计指南 - 诊断修复Convex应用性能问题与优化方案
19,300 周安装
OpenAI DOCX技能:专业文档处理与格式渲染指南 | Python-docx、LibreOffice
775 周安装
AI产品上市策略:企业级AI智能体销售框架、定位与责任管理指南
807 周安装
PowerPoint自动化生成工具:HTML转PPT,高保真布局与模板编辑工作流
777 周安装
Claude Code Agent Skill 编写器 - 创建结构良好、符合最佳实践的技能指南
771 周安装
Go响应式编程库samber/ro:异步流处理、声明式管道与150+操作符详解
778 周安装
Go语言samber/mo单子库:函数式编程Option/Result/Either类型安全处理
779 周安装
If below-the-fold images are NOT lazy-loaded → Run:
If images have both loading="lazy" AND fetchpriority="high" → Run:
If images competing with critical resources → Run:
If images missing alt text → Accessibility issue, recommend adding descriptive alt text