qa-perflisted
Install: claude install-skill christopherlouet/claude-base
# Performance Optimization (pointer)
Canonical thresholds, current Web Vitals (LCP/INP/CLS — note INP replaced FID in 2024), and Chrome perf-team remediation patterns are at:
- **`addyosmani/web-quality-skills`** — [github.com/addyosmani/web-quality-skills](https://github.com/addyosmani/web-quality-skills) (MIT, 1.8k★, maintained by Addy Osmani — Chrome DevTools / Lighthouse engineering lead). Covers Core Web Vitals, perf, a11y, SEO.
- **web.dev/vitals** — [web.dev/vitals](https://web.dev/vitals) (Google's canonical Web Vitals reference)
- **Vercel React best practices** — see `vercel-react-best-practices` skill (foundation-installed) for React-specific patterns
## Foundation workflow (when to invoke this skill)
`qa-perf` is dispatched by `qa-loop` during the AUDIT phase, in parallel with `qa-security` / `wcag-audit` / `qa-claudemd`. It's a **measurement workflow**, not an optimisation cookbook:
1. **Measure first**: run Lighthouse / WebPageTest / DevTools Performance against a *known scope* (the URL, page, or endpoint from `argument-hint`).
2. **Compare to canonical thresholds** (see table below).
3. **Identify the bottleneck axis**: render-blocking JS? N+1 DB query? Image weight? Bundle size? Each axis has a dedicated vendor remediation guide.
4. **Recommend with quantified impact** (e.g. "lazy-loading hero image saves ~400ms LCP per Lighthouse run #3").
5. **Re-measure after the fix** — a perf change without before/after numbers is theatre.
## Canonical Web Vitals th