{
  "id": "page:docs-reference-repos-addyosmani-web-quality-skills-research",
  "_kind": "Page",
  "_file": "wiki/docs/reference-repos/addyosmani/web-quality-skills/research.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/reference-repos/addyosmani/web-quality-skills/research.md",
    "sourceKind": "repo-docs",
    "title": "addyosmani/web-quality-skills",
    "displayName": "addyosmani/web-quality-skills",
    "slug": "docs/reference-repos/addyosmani/web-quality-skills/research",
    "articlePath": "wiki/docs/reference-repos/addyosmani/web-quality-skills/research.md",
    "article": "\n# addyosmani/web-quality-skills\r\n\r\n- **GitHub**: https://github.com/addyosmani/web-quality-skills\r\n- **Stars**: 1,730\r\n- **License**: MIT\r\n- **Last pushed**: 2026-03-13\r\n- **Topics**: accessibility, agent-skills, claude-skills, core-web-vitals, lighthouse, skills, testing, web-performance\r\n- **Source**: gh-search\r\n\r\n## Description\r\n\r\nComprehensive 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).\r\n\r\n## Archetype\r\n\r\n**domain-skill-pack** -- A focused collection of 6 web quality skills covering performance, accessibility, SEO, best practices, and Core Web Vitals.\r\n\r\n## Structure\r\n\r\n- `skills/` -- 6 skill directories, each with SKILL.md:\r\n  - `web-quality-audit/` -- Comprehensive orchestrator skill that coordinates all other skills\r\n  - `performance/` -- Loading speed, runtime efficiency, resource optimization (50+ patterns)\r\n  - `core-web-vitals/` -- LCP, INP, CLS specific optimizations\r\n  - `accessibility/` -- WCAG 2.2 compliance, screen readers, keyboard navigation (40+ rules)\r\n  - `seo/` -- Search engine optimization, crawlability, structured data (30+ requirements)\r\n  - `best-practices/` -- Security, modern APIs, code quality (20+ patterns)\r\n- `CLAUDE.md` -- Claude Code instructions\r\n- `AGENTS.md` -- GitHub Copilot agent instructions\r\n\r\n## Key Capabilities\r\n\r\n- Encodes 150+ Lighthouse audit patterns\r\n- Core Web Vitals optimization (LCP, INP, CLS)\r\n- WCAG 2.2 accessibility standards\r\n- Framework-agnostic patterns\r\n- Orchestrator skill (`web-quality-audit`) that coordinates sub-skills\r\n\r\n---\r\n\r\n## Processes\r\n\r\n### 1. Web Quality Audit Process\r\n\r\n- **Placement**: `specializations/domains/science/web-engineering/` or `specializations/shared/` (cross-domain, applies to any web project)\r\n- **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.\r\n- **Steps**:\r\n  1. Discover project framework and tech stack\r\n  2. Run performance audit (critical rendering path, JS bundling, image optimization, font loading, caching)\r\n  3. Run Core Web Vitals check (LCP, INP, CLS with specific thresholds)\r\n  4. Run accessibility audit (WCAG 2.2 level AA, keyboard navigation, screen reader compatibility)\r\n  5. Run SEO audit (meta tags, structured data, crawlability, canonical URLs)\r\n  6. Run best practices check (security headers, HTTPS, modern APIs, deprecated patterns)\r\n  7. Consolidate findings with severity levels and prioritized fix list\r\n  8. Breakpoint: present findings and recommended fixes for approval\r\n  9. Apply approved fixes\r\n  10. Re-audit to verify improvements\r\n- **Why it fits**: This is a genuine multi-step workflow with clear phases, breakpoints, and verification -- not just instructions but an orchestratable process.\r\n\r\n## Plugin Ideas\r\n\r\n### 1. Web Quality Audit Plugin\r\n\r\n- **Category**: Quality Assurance & Testing\r\n- **Plugin name**: `web-quality-audit`\r\n- **Description**: Wraps Lighthouse/CWV audit patterns as a babysitter plugin with configurable thresholds, framework detection, and CI/CD integration.\r\n- **install.md approach**: Install Lighthouse CI or use Chrome DevTools Protocol, configure quality thresholds in plugin settings, add pre-commit or pre-deploy hooks\r\n- **Key features**:\r\n  - Configurable quality thresholds (e.g., LCP < 2.5s, CLS < 0.1, accessibility score > 90)\r\n  - Framework-specific optimization suggestions (Next.js, Nuxt, Astro, etc.)\r\n  - Pre-deploy quality gate via breakpoints\r\n  - Progressive improvement tracking across runs\r\n  - WCAG compliance level configuration (A, AA, AAA)\r\n- **Integration surface**: hooks (`pre-commit`, `post-planning`), commands (`quality:audit`, `quality:report`), breakpoint rules (block deploy if scores below threshold)\r\n\r\n## Library Mapping\r\n\r\n| Extractable Process | Library Status | Action | Existing Path | Target Placement |\r\n|-------------------|----------------|--------|---------------|------------------|\r\n| Web Quality Audit Process | NEW | Multi-step web quality audit workflow with performance, accessibility, SEO, and best practices checks | - | specializations/frontend/web-quality-audit.js |\r\n| Core Web Vitals Optimization | NEW | LCP, INP, CLS optimization methodology with framework-specific patterns | - | specializations/frontend/core-web-vitals-optimization.js |\r\n| WCAG Accessibility Audit | NEW | WCAG 2.2 compliance checking with screen reader and keyboard navigation validation | - | specializations/frontend/wcag-accessibility-audit.js |\r\n| Web Performance Analysis | NEW | Critical rendering path, JS bundling, and resource optimization analysis | - | specializations/frontend/web-performance-analysis.js |\r\n\r\n## Plugin Marketplace Mapping\r\n\r\n| Plugin Idea | Marketplace Status | Action | Existing Plugin | Target Placement |\r\n|-------------|-------------------|--------|-----------------|------------------|\r\n| Web Quality Audit | NEW | Lighthouse/CWV audit integration with configurable thresholds and CI/CD hooks | - | plugins/a5c/marketplace/plugins/web-quality-audit/ |\r\n\r\n## Skipped\r\n\r\n- Individual skill content (SKILL.md bodies) are instruction sets, not processes -- they provide guidelines but not orchestratable workflows\r\n- The skills themselves follow the agentskills.io format which is a different ecosystem from babysitter plugins\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-reference-repos",
      "to": "page:docs-reference-repos-addyosmani-web-quality-skills-research",
      "kind": "contains_page"
    }
  ]
}