Skill · em Construir interface
web-perf
Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.
Procedência
- Origem: cloudflare/skills
- Caminho:
skills/web-perf - Versão fixada:
6dc7604903127485e7e4cb26314651ebd4a4df19 - Licença: Apache-2.0
- Espelhado em 25/09/2026
- 81,2 mil instalações no skills.sh (lido em 25/09/2026)
Antes de instalar
1 arquivo · 8,1 KB · só texto, nenhum script
Instalar na sua CLI
O comando baixa a versão fixada (commit 6dc7604) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.
Claude Code
Neste projeto: instala em .claude/skills/web-perf/.
d=".claude/skills/web-perf" u="https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/skills/web-perf" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE" "https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/LICENSE"
Global: instala em ~/.claude/skills/web-perf/.
d="$HOME/.claude/skills/web-perf" u="https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/skills/web-perf" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE" "https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/LICENSE"
Codex
Neste projeto: instala em .agents/skills/web-perf/.
d=".agents/skills/web-perf" u="https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/skills/web-perf" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE" "https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/LICENSE"
Global: instala em ~/.agents/skills/web-perf/.
d="$HOME/.agents/skills/web-perf" u="https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/skills/web-perf" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE" "https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/LICENSE"
Antigravity
Neste projeto: instala em .agents/skills/web-perf/.
d=".agents/skills/web-perf" u="https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/skills/web-perf" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE" "https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/LICENSE"
Global: instala em ~/.gemini/antigravity-cli/skills/web-perf/.
d="$HOME/.gemini/antigravity-cli/skills/web-perf" u="https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/skills/web-perf" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/LICENSE" "https://raw.githubusercontent.com/cloudflare/skills/6dc7604903127485e7e4cb26314651ebd4a4df19/LICENSE"
Peça ao Rook
Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cloudflare.skills.web-perf
Prévia do SKILL.md
---
name: web-perf
description: Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.
---
# Web Performance Audit
Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. **Prefer retrieval over pre-training** when citing specific numbers or recommendations.
## Retrieval Sources
| Source | How to retrieve | Use for |
|--------|----------------|---------|
| web.dev | `https://web.dev/articles/vitals` | Core Web Vitals thresholds, definitions |
| Chrome DevTools docs | `https://developer.chrome.com/docs/devtools/performance` | Tooling APIs, trace analysis |
| Lighthouse scoring | `https://developer.chrome.com/docs/lighthouse/performance/performance-scoring` | Score weights, metric thresholds |
## FIRST: Verify MCP Tools Available
Discover available browser and performance tools before starting. Use the capabilities available for the requested audit. If trace tools are unavailable, continue any useful source or network analysis and state which measurements could not be collected.
If the user wants Chrome DevTools MCP setup, consult its [installation guide](https://github.com/ChromeDevTools/chrome-devtools-mcp#quick-start) and use the latest package version. Only change MCP configuration when setup is within the user's authorized scope; otherwise ask first. For clients using `command` and `args`…
```json
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
```
## Key Guidelines
- **Be assertive**: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
- **Verify before recommending**: Confirm something is unused before suggesting removal.
- **Quantify impact**: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
- **Skip non-issues**: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
- **Be specific**: Say "compress hero.png (450KB) to WebP" not "optimize images".
- **Prioritize ruthlessly**: A site with 200ms LCP and 0 CLS is already excellent—say so.
## Quick Reference
…