skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-web-vitals

Measure Core Web Vitals and performance regressions on live web pages.

Updated May 22, 2026
Search Tags:#performance#web vitals#lighthouse#lcp#inp#cls#ttfb
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-web-vitals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-web-vitals
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-web-vitals
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-web-vitals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill identifies performance problems that degrade user experience, such as slow loading, unstable layouts, sluggish interactions, and heavy main-thread blocking.

Core Features & Use Cases

  • Core Web Vitals measurement: Captures LCP, CLS, INP, FCP, TTFB, and TBT directly in the browser.
  • Performance issue detection: Flags poor thresholds for loading speed, layout stability, responsiveness, and blocking tasks.
  • DOM and runtime health checks: Reports excessive DOM size and long tasks that can make pages feel slow or frozen.
  • Use case: Run it on a critical route after a release to find regressions that Lighthouse-style thresholds would classify as needing attention.

Quick Start

Use the qa-detect-web-vitals skill to measure the current page and report any Core Web Vitals regressions.

Frequently Asked Questions about qa-detect-web-vitals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure Core Web Vitals like LCP, INP, and CLS on live web pages?▼

Core Web Vitals measurement captures LCP, CLS, INP, FCP, TTFB, and TBT directly in the browser using in-page PerformanceObserver measurement and threshold evaluation to detect loading, stability, and responsiveness regressions.

What's the best way to detect web vitals regressions after a frontend release?▼

Detecting web vitals regressions after a frontend release involves running browser-based audits on critical routes to flag poor thresholds for loading speed, layout stability, and responsiveness that need attention.

Why does my page feel slow, and how can I check for long tasks or excessive DOM size?▼

Pages feel slow due to heavy main-thread blocking and excessive DOM size. You can identify these runtime health issues by performing DOM and runtime health checks that report long tasks and excessive DOM size directly in the browser.

Can I evaluate Interaction to Next Paint (INP) safely during a performance audit?▼

You can evaluate INP during performance audits by applying safe interaction probing techniques alongside PerformanceObserver measurement to capture responsiveness metrics without destabilizing the UI state.

Does this approach work for auditing interactive UI states across frontend applications?▼

Yes, this browser-based audit approach applies to critical routes, page loads, and interactive UI states across frontend applications, measuring performance regressions directly within the live page environment.

Related Skills

Explore More Software Engineering Skills→
The13thNodeThe13thNode
3

canary

Monitors web apps for availability, console errors, visual regressions, and performance metrics after deployment.

Community
Intermediate
charl-krugercharl-kruger
5

web-perf

Measure Core Web Vitals and profile resource timing with Chrome DevTools MCP.

Community
Advanced
Gabrielloopes33Gabrielloopes33

perf-lighthouse

Run Lighthouse audits locally via CLI or Node API to measure performance and enforce budgets.

Community
Intermediate
KrismithReddy12KrismithReddy12

benchmark

Measure web performance metrics and compare against baselines to detect regressions.

Community
Advanced