web-perf

elithrar/dotfiles · Agent Skill

使用瀏覽器追蹤、網路證據和原始碼來診斷頁面載入和互動的效能,並對Core Web Vitals和layout-shift進行調查

前往安裝 ↓

總覽

發布者elithrar社群
儲存庫elithrar/dotfiles ↗
技能資料夾web-perf
星221
分支16
附帶檔案3
授權MIT
最近更新2026年10月18日
連結技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性
低風險 · 未發現明顯風險 — 完整報告會顯示細節
相容性
僅含說明 — 適用於多數代理
相似技能
找到 62 個相似技能
訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理,在專案根目錄的終端機(macOS、Linux 或 Windows 的 Git Bash)執行指令。

把提示貼到 Claude、Codex 或其他助理:它會自行檢查並安裝技能。

Install the “web-perf” skill from mozgi.io (https://mozgi.io/skills/elithrar-web-perf/) for me.

1. Download the archive: https://mozgi.io/skills/elithrar-web-perf/download
   If it fails, take the skill folder from the source: https://github.com/elithrar/dotfiles/tree/main/.agents/skills/web-perf
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “web-perf” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/web-perf/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

技能檔案

3 個檔案 下載 ZIP

安裝前請先檢視 SKILL.md 與相關檔案。點擊檔案即可預覽。

SKILL.md 內容

作者原文 · 唯讀

Web performance investigation

Identify the target page, reported symptom, and relevant device conditions. For audit requests, report findings. For optimization or fix requests, implement the supported changes and validate their effect within the requested scope.

Choose the evidence path

Inspect the available browser and profiling tools before calling them. Prefer Chrome DevTools traces when available; read references/devtools.md ↗ for trace and network investigation. Use the installed tool schemas rather than assuming example parameters match the current version.

If that MCP server is unavailable, use existing trace or Lighthouse artifacts, another available profiler, or relevant source code. Complete the analysis those sources support and state what could not be measured. Missing profiling tools do not justify stopping source inspection or forcing an MCP installation.

Diagnose

Record the page/build, viewport, device or emulation, network/CPU throttling, cache state, and interactions relevant to the result. Reloading alone does not establish a cold cache. Keep mobile and desktop observations distinct.

Separate field Core Web Vitals from laboratory measurements. A load-only trace does not establish INP; TBT is a diagnostic lab metric, not a substitute INP measurement. Use the current metric definitions when assigning ratings, and label missing measurements as unavailable.

Follow the bottleneck from trace insight to request, element, or source path. Inspect the relevant LCP phases, layout-shift participants, long tasks, late resource discovery, or cache headers. Confirm ownership and use before recommending removal, especially for third-party scripts or resources used only in later interactions. Zero estimated savings is not evidence of a material problem, but one trace cannot prove a resource is never useful.

Validate and report

Prioritize findings by observed user impact and confidence. Distinguish measured values, tool estimates, and unmeasured hypotheses; avoid promising additive savings from overlapping insights.

For a fix, compare the affected behavior under equivalent conditions. Repeat measurements when variance or the size of the claimed improvement warrants it. Broaden testing only for an unresolved regression risk or a project gate, then finish.

Report the measured symptom, its supported cause, the concrete fix or recommendation, and the relevant verification limit. Add a metric table when several measurements help comparison. Do not expand a performance request into a mandatory accessibility or whole-codebase audit.

常見問題

web-perf 技能有什麼用途?

使用瀏覽器追蹤、網路證據和原始碼來診斷頁面載入和互動的效能,並對Core Web Vitals和layout-shift進行調查

如何安裝 web-perf?

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI:那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示,讓助理自行檢查並安裝技能。

web-perf 適用哪些 AI 模型?

技能是純 Markdown 指示(Agent Skills 格式),因此 web-perf 適用任何讀取 SKILL.md 的代理:Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時,模型才會載入指示。

web-perf 是免費的嗎?

此技能由 elithrar 公開發布,採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎?

技能是代理會遵循的指示,安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作,不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同?

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程:如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

相關技能

所有技能 →