This project provides a collection of agent skills designed to optimize web quality, focusing on Google Lighthouse guidelines and Core Web Vitals. It targets developers across all frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, plain HTML) seeking to improve website performance, accessibility, SEO, and adherence to best practices, offering actionable insights derived from extensive audits and real-world engineering experience.

How It Works

The skills encode collective wisdom from over 150 Lighthouse audits, Core Web Vitals optimization patterns, and practical performance engineering. They are framework-agnostic and activate automatically based on user requests, covering comprehensive audits, performance tuning, Core Web Vitals improvements (LCP, INP, CLS), WCAG 2.1 accessibility standards, modern SEO requirements, and security/code quality best practices.

Quick Start & Requirements

Installation is straightforward using the add-skill CLI tool: npx add-skill addyosmani/web-quality-skills or npx skills add addyosmani/web-quality-skills. Alternatively, skills can be manually installed by copying skills/* to ~/.claude/skills/. No specific non-default prerequisites are listed.

Highlighted Details

• Core Web Vitals Targets: Aims for LCP ≤ 2.5s, INP ≤ 200ms, and CLS ≤ 0.1.
• Performance Budgets: Recommends limits such as < 1.5 MB total page weight, < 300 KB for JavaScript, and < 500 KB for above-the-fold images.
• Lighthouse Score Targets: Seeks ≥ 90 for Performance, 100 for Accessibility, ≥ 95 for Best Practices, and ≥ 95 for SEO.
• Framework Agnostic: Provides specific optimization notes for React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Astro, and static HTML.

Maintenance & Community

Contributions are welcomed following the Agent Skills specification. The project leverages insights from the Chrome DevTools team and web performance experts. No specific community channels (e.g., Discord, Slack) or roadmap links are provided in the README.

Licensing & Compatibility

The project is released under the MIT License, permitting commercial use and integration with closed-source projects.

Limitations & Caveats

This collection is described as "unofficial." While framework-agnostic, it offers framework-specific guidance, suggesting that deeper, custom integrations might require additional effort.