Add 260+ Claude Code skills from skills.sh
Complete collection of AI agent skills including: - Frontend Development (Vue, React, Next.js, Three.js) - Backend Development (NestJS, FastAPI, Node.js) - Mobile Development (React Native, Expo) - Testing (E2E, frontend, webapp) - DevOps (GitHub Actions, CI/CD) - Marketing (SEO, copywriting, analytics) - Security (binary analysis, vulnerability scanning) - And many more... Synchronized from: https://skills.sh/ Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
193
web-perf/skill.md
Normal file
193
web-perf/skill.md
Normal file
@@ -0,0 +1,193 @@
|
||||
---
|
||||
name: web-perf
|
||||
description: Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.
|
||||
---
|
||||
|
||||
# Web Performance Audit
|
||||
|
||||
Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.
|
||||
|
||||
## FIRST: Verify MCP Tools Available
|
||||
|
||||
**Run this before starting.** Try calling `navigate_page` or `performance_start_trace`. If unavailable, STOP—the chrome-devtools MCP server isn't configured.
|
||||
|
||||
Ask the user to add this to their MCP config:
|
||||
|
||||
```json
|
||||
"chrome-devtools": {
|
||||
"type": "local",
|
||||
"command": ["npx", "-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
|
||||
|
||||
| Task | Tool Call |
|
||||
|------|-----------|
|
||||
| Load page | `navigate_page(url: "...")` |
|
||||
| Start trace | `performance_start_trace(autoStop: true, reload: true)` |
|
||||
| Analyze insight | `performance_analyze_insight(insightSetId: "...", insightName: "...")` |
|
||||
| List requests | `list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])` |
|
||||
| Request details | `get_network_request(reqid: <id>)` |
|
||||
| A11y snapshot | `take_snapshot(verbose: true)` |
|
||||
|
||||
## Workflow
|
||||
|
||||
Copy this checklist to track progress:
|
||||
|
||||
```
|
||||
Audit Progress:
|
||||
- [ ] Phase 1: Performance trace (navigate + record)
|
||||
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
|
||||
- [ ] Phase 3: Network analysis
|
||||
- [ ] Phase 4: Accessibility snapshot
|
||||
- [ ] Phase 5: Codebase analysis (skip if third-party site)
|
||||
```
|
||||
|
||||
### Phase 1: Performance Trace
|
||||
|
||||
1. Navigate to the target URL:
|
||||
```
|
||||
navigate_page(url: "<target-url>")
|
||||
```
|
||||
|
||||
2. Start a performance trace with reload to capture cold-load metrics:
|
||||
```
|
||||
performance_start_trace(autoStop: true, reload: true)
|
||||
```
|
||||
|
||||
3. Wait for trace completion, then retrieve results.
|
||||
|
||||
**Troubleshooting:**
|
||||
- If trace returns empty or fails, verify the page loaded correctly with `navigate_page` first
|
||||
- If insight names don't match, inspect the trace response to list available insights
|
||||
|
||||
### Phase 2: Core Web Vitals Analysis
|
||||
|
||||
Use `performance_analyze_insight` to extract key metrics.
|
||||
|
||||
**Note:** Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the `insightSetId` from the trace response to discover available insights.
|
||||
|
||||
Common insight names:
|
||||
|
||||
| Metric | Insight Name | What to Look For |
|
||||
|--------|--------------|------------------|
|
||||
| LCP | `LCPBreakdown` | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |
|
||||
| CLS | `CLSCulprits` | Elements causing layout shifts (images without dimensions, injected content, font swaps) |
|
||||
| Render Blocking | `RenderBlocking` | CSS/JS blocking first paint |
|
||||
| Document Latency | `DocumentLatency` | Server response time issues |
|
||||
| Network Dependencies | `NetworkRequestsDepGraph` | Request chains delaying critical resources |
|
||||
|
||||
Example:
|
||||
```
|
||||
performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
|
||||
```
|
||||
|
||||
**Key thresholds (good/needs-improvement/poor):**
|
||||
- TTFB: < 800ms / < 1.8s / > 1.8s
|
||||
- FCP: < 1.8s / < 3s / > 3s
|
||||
- LCP: < 2.5s / < 4s / > 4s
|
||||
- INP: < 200ms / < 500ms / > 500ms
|
||||
- TBT: < 200ms / < 600ms / > 600ms
|
||||
- CLS: < 0.1 / < 0.25 / > 0.25
|
||||
- Speed Index: < 3.4s / < 5.8s / > 5.8s
|
||||
|
||||
### Phase 3: Network Analysis
|
||||
|
||||
List all network requests to identify optimization opportunities:
|
||||
```
|
||||
list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
|
||||
```
|
||||
|
||||
**Look for:**
|
||||
|
||||
1. **Render-blocking resources**: JS/CSS in `<head>` without `async`/`defer`/`media` attributes
|
||||
2. **Network chains**: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
|
||||
3. **Missing preloads**: Critical resources (fonts, hero images, key scripts) not preloaded
|
||||
4. **Caching issues**: Missing or weak `Cache-Control`, `ETag`, or `Last-Modified` headers
|
||||
5. **Large payloads**: Uncompressed or oversized JS/CSS bundles
|
||||
6. **Unused preconnects**: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.
|
||||
|
||||
For detailed request info:
|
||||
```
|
||||
get_network_request(reqid: <id>)
|
||||
```
|
||||
|
||||
### Phase 4: Accessibility Snapshot
|
||||
|
||||
Take an accessibility tree snapshot:
|
||||
```
|
||||
take_snapshot(verbose: true)
|
||||
```
|
||||
|
||||
**Flag high-level gaps:**
|
||||
- Missing or duplicate ARIA IDs
|
||||
- Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
|
||||
- Focus traps or missing focus indicators
|
||||
- Interactive elements without accessible names
|
||||
|
||||
## Phase 5: Codebase Analysis
|
||||
|
||||
**Skip if auditing a third-party site without codebase access.**
|
||||
|
||||
Analyze the codebase to understand where improvements can be made.
|
||||
|
||||
### Detect Framework & Bundler
|
||||
|
||||
Search for configuration files to identify the stack:
|
||||
|
||||
| Tool | Config Files |
|
||||
|------|--------------|
|
||||
| Webpack | `webpack.config.js`, `webpack.*.js` |
|
||||
| Vite | `vite.config.js`, `vite.config.ts` |
|
||||
| Rollup | `rollup.config.js`, `rollup.config.mjs` |
|
||||
| esbuild | `esbuild.config.js`, build scripts with `esbuild` |
|
||||
| Parcel | `.parcelrc`, `package.json` (parcel field) |
|
||||
| Next.js | `next.config.js`, `next.config.mjs` |
|
||||
| Nuxt | `nuxt.config.js`, `nuxt.config.ts` |
|
||||
| SvelteKit | `svelte.config.js` |
|
||||
| Astro | `astro.config.mjs` |
|
||||
|
||||
Also check `package.json` for framework dependencies and build scripts.
|
||||
|
||||
### Tree-Shaking & Dead Code
|
||||
|
||||
- **Webpack**: Check for `mode: 'production'`, `sideEffects` in package.json, `usedExports` optimization
|
||||
- **Vite/Rollup**: Tree-shaking enabled by default; check for `treeshake` options
|
||||
- **Look for**: Barrel files (`index.js` re-exports), large utility libraries imported wholesale (lodash, moment)
|
||||
|
||||
### Unused JS/CSS
|
||||
|
||||
- Check for CSS-in-JS vs. static CSS extraction
|
||||
- Look for PurgeCSS/UnCSS configuration (Tailwind's `content` config)
|
||||
- Identify dynamic imports vs. eager loading
|
||||
|
||||
### Polyfills
|
||||
|
||||
- Check for `@babel/preset-env` targets and `useBuiltIns` setting
|
||||
- Look for `core-js` imports (often oversized)
|
||||
- Check `browserslist` config for overly broad targeting
|
||||
|
||||
### Compression & Minification
|
||||
|
||||
- Check for `terser`, `esbuild`, or `swc` minification
|
||||
- Look for gzip/brotli compression in build output or server config
|
||||
- Check for source maps in production builds (should be external or disabled)
|
||||
|
||||
## Output Format
|
||||
|
||||
Present findings as:
|
||||
|
||||
1. **Core Web Vitals Summary** - Table with metric, value, and rating (good/needs-improvement/poor)
|
||||
2. **Top Issues** - Prioritized list of problems with estimated impact (high/medium/low)
|
||||
3. **Recommendations** - Specific, actionable fixes with code snippets or config changes
|
||||
4. **Codebase Findings** - Framework/bundler detected, optimization opportunities (omit if no codebase access)
|
||||
Reference in New Issue
Block a user