Stats
Actions
Tags
From design-qa
Use when measuring Lighthouse / Core Web Vitals (LCP, INP, CLS, TBT) on a deployed page. Runs both mobile and desktop profiles, reports actual measured numbers, and identifies top opportunities.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-qa:core-web-vitalsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Measure performance on `<url>` using `playwright-lighthouse`.
Measure performance on <url> using playwright-lighthouse.
If the script fails (URL unreachable, auth required, Lighthouse crashes), say so plainly. Do not invent numbers. Surface the failure to the parent agent.
${CLAUDE_PLUGIN_ROOT}/bin/run-lighthouse.sh <url> runs:
web.dev/measure and the only profile that matters for Core Web Vitals as a search ranking signal.Each run outputs HTML + JSON to .claude/design-qa/reports/<timestamp>/lighthouse/<profile>/.
Pull these fields:
| Field | JSON path |
|---|---|
| LCP | audits.largest-contentful-paint.numericValue (ms) |
| INP | audits.interaction-to-next-paint.numericValue (ms, may be null if no interactions captured) |
| CLS | audits.cumulative-layout-shift.numericValue |
| TBT | audits.total-blocking-time.numericValue (ms) |
| FCP | audits.first-contentful-paint.numericValue (ms) |
| Perf score | categories.performance.score (0-1) |
| A11y score | categories.accessibility.score |
| Best Practices | categories.best-practices.score |
| SEO | categories.seo.score |
| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5s | 2.5–4.0s | > 4.0s |
| INP | ≤ 200ms | 200–500ms | > 500ms |
| CLS | ≤ 0.1 | 0.1–0.25 | > 0.25 |
| TBT | ≤ 200ms | 200–600ms | > 600ms |
Pull audits where details.type === 'opportunity' and sort by numericValue (estimated savings in ms or bytes). Surface the top 3:
1. eliminate-render-blocking-resources — saves ~1,400ms (CSS/JS in head)
2. unused-javascript — saves ~340KB across 4 bundles
3. modern-image-formats — saves ~180KB (5 images served as PNG, could be AVIF/WebP)
## Core Web Vitals & Lighthouse
| Metric | Mobile | Desktop |
|---|---|---|
| LCP | 3.2s ⚠️ | 1.4s ✅ |
| INP | 142ms ✅ | 38ms ✅ |
| CLS | 0.04 ✅ | 0.02 ✅ |
| TBT | 210ms ⚠️ | 30ms ✅ |
| Perf | 71 ⚠️ | 96 ✅ |
| A11y | 96 ✅ | 96 ✅ |
| BP | 100 ✅ | 100 ✅ |
| SEO | 100 ✅ | 100 ✅ |
### Top opportunities (mobile)
1. ...
2. ...
3. ...
Reports: `lighthouse/mobile/report.html`, `lighthouse/desktop/report.html`
npx claudepluginhub my-stacks/claude-code-skills --plugin design-qaProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.