addyosmani/web-quality-skills

• **GitHub**: https://github.com/addyosmani/web-quality-skills
• **Stars**: 1,730
• **License**: MIT
• **Last pushed**: 2026-03-13
• **Topics**: accessibility, agent-skills, claude-skills, core-web-vitals, lighthouse, skills, testing, web-performance
• **Source**: gh-search

Description

Comprehensive collection of Agent Skills for optimizing web projects based on Google Lighthouse guidelines and Core Web Vitals best practices. Stack-agnostic (React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, plain HTML). Follows the Agent Skills specification format (agentskills.io).

Archetype

**domain-skill-pack** -- A focused collection of 6 web quality skills covering performance, accessibility, SEO, best practices, and Core Web Vitals.

Structure

- web-quality-audit/ -- Comprehensive orchestrator skill that coordinates all other skills - performance/ -- Loading speed, runtime efficiency, resource optimization (50+ patterns) - core-web-vitals/ -- LCP, INP, CLS specific optimizations - accessibility/ -- WCAG 2.2 compliance, screen readers, keyboard navigation (40+ rules) - seo/ -- Search engine optimization, crawlability, structured data (30+ requirements) - best-practices/ -- Security, modern APIs, code quality (20+ patterns)

• skills/ -- 6 skill directories, each with SKILL.md:
• CLAUDE.md -- Claude Code instructions
• AGENTS.md -- GitHub Copilot agent instructions

Key Capabilities

• Encodes 150+ Lighthouse audit patterns
• Core Web Vitals optimization (LCP, INP, CLS)
• WCAG 2.2 accessibility standards
• Framework-agnostic patterns
• Orchestrator skill (web-quality-audit) that coordinates sub-skills

---

Processes

1. Web Quality Audit Process

1. Discover project framework and tech stack 2. Run performance audit (critical rendering path, JS bundling, image optimization, font loading, caching) 3. Run Core Web Vitals check (LCP, INP, CLS with specific thresholds) 4. Run accessibility audit (WCAG 2.2 level AA, keyboard navigation, screen reader compatibility) 5. Run SEO audit (meta tags, structured data, crawlability, canonical URLs) 6. Run best practices check (security headers, HTTPS, modern APIs, deprecated patterns) 7. Consolidate findings with severity levels and prioritized fix list 8. Breakpoint: present findings and recommended fixes for approval 9. Apply approved fixes 10. Re-audit to verify improvements

• **Placement**: specializations/domains/science/web-engineering/ or specializations/shared/ (cross-domain, applies to any web project)
• **Description**: Multi-step web quality audit workflow modeled after the web-quality-audit orchestrator skill. Runs performance, accessibility, SEO, and best practices checks in sequence, producing a consolidated report with prioritized findings.
• **Steps**:
• **Why it fits**: This is a genuine multi-step workflow with clear phases, breakpoints, and verification -- not just instructions but an orchestratable process.

Plugin Ideas

1. Web Quality Audit Plugin

- Configurable quality thresholds (e.g., LCP < 2.5s, CLS < 0.1, accessibility score > 90) - Framework-specific optimization suggestions (Next.js, Nuxt, Astro, etc.) - Pre-deploy quality gate via breakpoints - Progressive improvement tracking across runs - WCAG compliance level configuration (A, AA, AAA)

• **Category**: Quality Assurance & Testing
• **Plugin name**: web-quality-audit
• **Description**: Wraps Lighthouse/CWV audit patterns as a babysitter plugin with configurable thresholds, framework detection, and CI/CD integration.
• **install.md approach**: Install Lighthouse CI or use Chrome DevTools Protocol, configure quality thresholds in plugin settings, add pre-commit or pre-deploy hooks
• **Key features**:
• **Integration surface**: hooks (pre-commit, post-planning), commands (quality:audit, quality:report), breakpoint rules (block deploy if scores below threshold)

Library Mapping

Plugin Marketplace Mapping

Skipped

• Individual skill content (SKILL.md bodies) are instruction sets, not processes -- they provide guidelines but not orchestratable workflows
• The skills themselves follow the agentskills.io format which is a different ecosystem from babysitter plugins