Skip to main content

​
Web Quality Skills

A comprehensive collection of Agent Skills for optimizing web projects based on Google Lighthouse guidelines and Core Web Vitals best practices. Stack-agnostic. Works with any framework: React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, plain HTML, and more.

​
Why Web Quality Skills?

While interface guidelines tell you what to build, Web Quality Skills tell you how to build it performantly, accessibly, and optimally for search engines. These skills encode the collective wisdom from:

150+ Lighthouse Audits

Comprehensive checks across Performance, Accessibility, SEO, and Best Practices

Core Web Vitals

LCP, INP, and CLS optimization patterns that affect Google Search ranking

WCAG 2.1 Standards

Full accessibility compliance following international guidelines

Real-World Patterns

Battle-tested performance engineering and modern SEO requirements

​
Key Features

Works seamlessly with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, or plain HTML. Skills provide vanilla patterns with framework-specific optimizations.
AI agents automatically detect quality issues and provide specific, actionable recommendations with code examples.
Issues categorized by impact (Critical, High, Medium, Low) so you know what to fix first.
Clear performance budgets and metrics targets:
  • Core Web Vitals: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1
  • Lighthouse scores: Performance ≥ 90, Accessibility = 100
  • Resource budgets: Total < 1.5 MB, JS < 300 KB, CSS < 100 KB

​
Available Skills

Web Quality Skills provides six specialized skills that AI coding agents can invoke:

Web Quality Audit

Comprehensive quality review across all categories. Use for full-site audits.Triggers: “audit my site”, “quality review”, “lighthouse audit”

Performance

Loading speed, runtime efficiency, and resource optimization.Triggers: “speed up”, “optimize performance”, “reduce load time”

Core Web Vitals

LCP, INP, and CLS specific optimizations for page experience.Triggers: “improve Core Web Vitals”, “fix LCP”, “reduce CLS”

Accessibility

WCAG compliance, screen reader support, keyboard navigation.Triggers: “improve accessibility”, “WCAG audit”, “a11y review”

SEO

Search engine optimization, crawlability, and structured data.Triggers: “optimize for SEO”, “improve search ranking”

Best Practices

Security headers, modern APIs, and code quality patterns.Triggers: “apply best practices”, “security audit”

​
Real-World Use Cases

Challenge: Product pages loading slowly, impacting conversion rates.Solution: Use the Performance and Core Web Vitals skills to:
  • Optimize hero product images with WebP/AVIF formats
  • Implement lazy loading for below-fold images
  • Reduce JavaScript bundle size with code splitting
  • Achieve LCP < 2.5s for better user experience
Result: 40% faster page loads, improved search rankings, higher conversion rates.

​
Get Started

Quick Start

Run your first audit in under 5 minutes

Installation

Install skills for your AI coding agent

Skills Overview

Learn about all available skills

​
Performance Targets

Here are the recommended thresholds that Web Quality Skills help you achieve:

​
Core Web Vitals

MetricGoodNeeds ImprovementPoor
LCP (Largest Contentful Paint)≤ 2.5s2.5s – 4.0s> 4.0s
INP (Interaction to Next Paint)≤ 200ms200ms – 500ms> 500ms
CLS (Cumulative Layout Shift)≤ 0.10.1 – 0.25> 0.25

​
Performance Budgets

Resource TypeBudgetRationale
Total page weight< 1.5 MB3G loads in ~4s
JavaScript (compressed)< 300 KBParsing + execution time
CSS (compressed)< 100 KBRender blocking
Images (above-fold)< 500 KBLCP impact
Fonts< 100 KBFOIT/FOUT prevention
Third-party scripts< 200 KBUncontrolled latency

​
Lighthouse Score Targets

CategoryTarget Score
Performance≥ 90
Accessibility100
Best Practices≥ 95
SEO≥ 95
Google measures Core Web Vitals at the 75th percentile — meaning 75% of your page visits must meet “Good” thresholds to pass.

​
Framework Support

Web Quality Skills are framework-agnostic, but include specific optimization patterns for popular frameworks: 
// Use next/image for automatic optimization
import Image from 'next/image'

<Image 
  src="/hero.jpg" 
  priority 
  width={1200} 
  height={600}
  alt="Hero image"
/>

// Dynamic imports for code splitting
const HeavyComponent = dynamic(() => import('./Heavy'), { 
  ssr: false 
})

​
Community and Support

GitHub Repository

View source code, report issues, and contribute

Agent Skills Spec

Learn about the Agent Skills specification

Lighthouse Docs

Official Google Lighthouse documentation

Web Vitals Guide

Learn more about Core Web Vitals
Built with insights from the Chrome DevTools team, web performance experts, and accessibility advocates to help developers create high-quality web experiences.

Build docs developers (and LLMs) love

Get started for freeTalk to us