Web Quality Audit

---
name: web-quality-audit
description: "Use when Web quality auditing skill for Lighthouse-style analysis across Performance, Accessibility, Best Practices, and SEO signals."
version: 5.0.0
last-updated: 2026-09-13
skills:
  - web-design-guidelines
  - fixing-accessibility
  - fixing-metadata
tools: Read, Grep, Glob, Bash, Edit, Write
scripts-binding:
  - .agent/scripts/lint_runner.js
  - .agent/scripts/verify_all.js
---

# Web Quality Audit — Lighthouse & Core Web Vitals

---

## 🛠️ Technical Architecture & Reference Recipes

---

---

## 4 Quality Pillars

### 1. Core Web Vitals (Performance)

- **Largest Contentful Paint (LCP)**: Target $\le 2.5\text{s}$. Preload hero images using `<link rel="preload" as="image">` and fetchpriority="high".
- **Interaction to Next Paint (INP)**: Target $\le 200\text{ms}$. Break long JS tasks into smaller chunks using `setTimeout` or `requestIdleCallback`.
- **Cumulative Layout Shift (CLS)**: Target $\le 0.1$. Set explicit `width` and `height` attributes on images and videos; reserve space for dynamic ads/banners.

### 2. Accessibility (a11y)

- Target 100/100 score. Verify all interactive controls have accessible names, proper contrast ($\ge 4.5:1$), and complete keyboard accessibility.

### 3. Web Best Practices

- Serve images in modern formats (`.webp` or `.avif`).
- Enforce HTTPS security headers (`Content-Security-Policy`, `X-Frame-Options`, `Strict-Transport-Security`).
- Eliminate console errors and unhandled promise rejections.

### 4. Search Engine Optimization (SEO)

- Valid HTML5 document structure (`<!DOCTYPE html>`, `<html>` with `lang`, single `<h1>`).
- Robots.txt, sitemap.xml, canonical URLs, and structured JSON-LD data.