web-vitals-checklist

Measure LCP, INP, CLS, FCP, and TTFB to diagnose web performance gaps.

Updated Mar 18, 2025
One-click install
npx skills add https://github.com/zzoohub/mealio --skill web-vitals-checklist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-vitals-checklist
Source: https://github.com/zzoohub/mealio/tree/main/.claude/skills/web-vitals-checklist
Command: npx skills add https://github.com/zzoohub/mealio --skill web-vitals-checklist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Core Web Vitals are essential for fast, reliable user experiences, but teams often struggle to consistently verify targets, budgets, and remediation efforts across projects.

Core Features & Use Cases

  • Defines concrete LCP, INP, CLS, FCP, and TTFB targets and provides a structured checklist for each metric.
  • Guides budget setting and performance regression checks during code reviews, audits, and product planning.
  • Useful for QA, frontend performance engineers, and reviews to ensure consistent performance quality across web apps.

Quick Start

Run the web-vitals-checklist on your project to identify gaps against LCP, INP, CLS, FCP, and TTFB targets.

Frequently Asked Questions about web-vitals-checklist

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

FAQPage Schema
How do I check Core Web Vitals performance issues across my web project?

To check Core Web Vitals performance issues, you measure LCP, INP, CLS, FCP, and TTFB across pages to diagnose gaps and guide optimizations. This provides a structured checklist verifying targets for each metric.

What is the best way to set performance budgets for LCP and CLS during code reviews?

Setting performance budgets for LCP and CLS involves defining concrete metric targets and applying structured checklists during code reviews. This ensures consistent performance quality and catches regressions before deployment.

Does the Core Web Vitals auditing process work across different frontend frameworks?

Core Web Vitals auditing applies to web projects across frameworks, diagnosing performance gaps regardless of the specific stack. It measures standard metrics like TTFB and INP to verify targets consistently.

Why does my LCP performance target verification fail during product planning?

LCP performance target verification fails when teams lack structured checklists to consistently measure and diagnose gaps across pages. Applying concrete targets during planning guides budget setting and prevents regressions.

Can I automate Core Web Vitals checks for QA and frontend performance engineering?

Automating Core Web Vitals checks is supported through the web-vitals-auditor sub-agent, which identifies and verifies performance issues. It integrates with downstream remediation workflows for efficient performance engineering.

What metrics should I measure to diagnose web performance gaps?

To diagnose web performance gaps, measure LCP, INP, CLS, FCP, and TTFB. These Core Web Vitals provide concrete targets and a structured checklist to identify issues across pages.