← ClaudeAtlas

qa-perflisted

Application performance optimization. Trigger when the user wants to improve speed, reduce latency, or optimize resources.
christopherlouet/claude-base · ★ 4 · AI & Automation · score 83
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