{
  "markdown": "# Web Quality Skills\n\nAn (unofficial) measurement-first collection of [Agent Skills](https://agentskills.io/) for optimizing web projects with [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/), Chrome DevTools for agents, Core Web Vitals, WCAG, and search guidance.\n\n**Stack-agnostic.** Works with any framework: React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, plain HTML, and more.\n\n## Why web quality skills?\n\nWhile 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 combine:\n\n- **Live Lighthouse audits for agents** across Accessibility, SEO, Best Practices, and Agentic Browsing when Chrome DevTools MCP is available\n- **Performance traces and Insights** for diagnosing LCP, INP, CLS, network, and main-thread bottlenecks\n- **Field plus lab measurement** using CrUX for real-user context and controlled browser runs for repeatable diagnosis\n- **Core Web Vitals** optimization patterns for LCP, INP, and CLS\n- **WCAG 2.2** accessibility standards\n- **Modern SEO** requirements\n\n## Available skills\n\n| Skill | Description | Use when |\n|-------|-------------|----------|\n| **[web-quality-audit](#web-quality-audit)** | Evidence-led review across Lighthouse and source categories | \"Audit my site\", \"Review this for quality\", \"Check web quality\" |\n| **[performance](#performance)** | Field/lab measurement, traces, loading and runtime fixes | \"Optimize performance\", \"Speed up my site\", \"Fix slow loading\" |\n| **[core-web-vitals](#core-web-vitals)** | Measured LCP, INP, and CLS diagnosis and optimization | \"Improve Core Web Vitals\", \"Fix LCP\", \"Reduce CLS\" |\n| **[accessibility](#accessibility)** | WCAG compliance, screen reader support, keyboard navigation | \"Improve accessibility\", \"WCAG audit\", \"a11y review\" |\n| **[seo](#seo)** | Search engine optimization, crawlability, structured data | \"Optimize for SEO\", \"Improve search ranking\", \"Fix meta tags\" |\n| **[best-practices](#best-practices)** | Security, modern APIs, code quality patterns | \"Apply best practices\", \"Security audit\", \"Code quality review\" |\n\n## Measurement model\n\nThe performance skills keep four evidence types explicit:\n\n| Evidence | Answers |\n|----------|---------|\n| CrUX field data | How eligible real Chrome users experienced the URL or origin over the recent aggregation window |\n| First-party RUM | How the site's own users experience routes, releases, devices, and interactions |\n| DevTools trace or Lighthouse lab run | What happened in one controlled browser session and why |\n| Static source inspection | What might be a problem when the page cannot run |\n\nField data determines user impact. Lab traces reproduce and diagnose it. A `PerformanceObserver` snippet run in one browser is a lab observation, not real-user data by itself.\n\n## Quick start\n\n### Installation\n\nadd-skill is a powerful CLI tool that lets you install agent skills onto your coding agents from git repositories. Whether you're using OpenCode, Claude Code, Codex, or Cursor, the add-skill tool makes it simple to extend your agent's capabilities with specialized instruction sets. Use add-skill to automate release notes, create pull requests, integrate with external tools, and more. Simply run npx add-skill to get started.\n\n```bash\nnpx skills add addyosmani/web-quality-skills\n```\n\nor\n\n```\nnpx add-skill addyosmani/web-quality-skills\n```\n\nOr manually:\n\n```bash\ncp -r skills/* ~/.claude/skills/\n```\n\n#### Claude Code (plugin)\n\nInstall as a versioned, namespaced plugin from inside Claude Code:\n\n```text\n/plugin marketplace add addyosmani/web-quality-skills\n/plugin install web-quality-skills@addy-web-quality-skills\n```\n\nSkills are then namespaced (e.g. `/web-quality-skills:performance`) and update with `/plugin update`. The plugin reads the same `skills/` directory as the manual copy above — no duplication.\n\n#### Codex\n\nInstall directly via the Codex plugin marketplace (Codex CLI v0.122+):\n\n```bash\ncodex plugin marketplace add addyosmani/web-quality-skills\n```\n\nOnce installed, invoke skills in chat using `@` (e.g. `@performance`, `@accessibility`). See [docs/codex-setup.md](docs/codex-setup.md) for local installation and troubleshooting.\n\n#### Gemini CLI\n\nInstall directly via Gemini CLI extensions:\n\n```bash\ngemini extensions install https://github.com/addyosmani/web-quality-skills\n```\n\nSkills are auto-discovered by Gemini and activate when prompts match their description. See [docs/gemini-setup.md](docs/gemini-setup.md) for workspace mode and troubleshooting.\n\n#### claude.ai\n\nAdd skills to your project knowledge or paste the SKILL.md contents into your conversation.\n\n### Usage\n\nSkills activate automatically when your request matches their description. Examples:\n\n```\nAudit this page for web quality issues\n```\n\n```\nOptimize performance and fix Core Web Vitals\n```\n\n```\nReview accessibility and suggest improvements\n```\n\n```\nMake this SEO-ready\n```\n\n### Optional Chrome DevTools integration\n\nWhen the agent exposes equivalent live-browser capabilities, the skills prefer them. With [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp), the current tool names are:\n\n- `performance_start_trace` and focused Performance Insights for performance work, including CrUX context when eligible field data exists\n- `lighthouse_audit` for Accessibility, SEO, Best Practices, and Agentic Browsing\n- rendered accessibility snapshots, console messages, and network requests for issue-level diagnosis\n\nThis integration is optional. Without it, the skills fall back to Lighthouse CLI, PageSpeed Insights/CrUX tools, manual browser checks, and static inspection rather than stopping the task.\n\n## Skill details\n\n### web-quality-audit\n\nThe comprehensive skill that orchestrates all other skills. It starts with live evidence when a page is runnable and keeps measured failures separate from source-code hypotheses.\n\n**Trigger phrases:** \"audit my site\", \"quality review\", \"lighthouse audit\", \"check web quality\"\n\n**What it checks:**\n- All Core Web Vitals metrics\n- Performance Insights, network delivery, and runtime bottlenecks\n- Automated and manual accessibility signals\n- Crawl, index, metadata, and structured-data requirements\n- Security, compatibility, and browser best-practice patterns\n- Agentic Browsing signals such as agent-facing semantics and optional WebMCP/`llms.txt` checks\n\n### performance\n\nDeep-dive into loading and runtime performance optimization, using CrUX or first-party RUM to prioritize user impact and DevTools traces to diagnose causes.\n\n**Trigger phrases:** \"speed up\", \"optimize performance\", \"reduce load time\", \"fix slow\"\n\n**Key optimizations:**\n- Critical rendering path\n- JavaScript bundling and code splitting\n- Image optimization (formats, sizing, lazy loading)\n- Font loading strategies\n- Caching and preloading\n- Server response optimization\n\n### core-web-vitals\n\nSpecialized skill for the three Core Web Vitals that describe loading, responsiveness, and visual stability. Google uses Core Web Vitals in its page-experience systems, but a passing score does not promise a ranking change.\n\n**Trigger phrases:** \"Core Web Vitals\", \"LCP\", \"INP\", \"CLS\", \"page experience\"\n\n**Metrics covered:**\n- **LCP** (Largest Contentful Paint) < 2.5s\n- **INP** (Interaction to Next Paint) < 200ms\n- **CLS** (Cumulative Layout Shift) < 0.1\n\n### accessibility\n\nComprehensive accessibility audit following WCAG 2.2 guidelines.\n\n**Trigger phrases:** \"accessibility\", \"a11y\", \"WCAG\", \"screen reader\", \"keyboard navigation\"\n\n**Categories:**\n- Perceivable (text alternatives, captions, contrast)\n- Operable (keyboard, timing, seizures, navigation)\n- Understandable (readable, predictable, input assistance)\n- Robust (compatible with assistive technologies)\n\n### seo\n\nSearch engine optimization for better visibility and ranking.\n\n**Trigger phrases:** \"SEO\", \"search optimization\", \"meta tags\", \"structured data\", \"sitemap\"\n\n**What it covers:**\n- Technical SEO (crawlability, indexability)\n- On-page SEO (meta tags, headings, content structure)\n- Structured data (JSON-LD, schema.org)\n- Mobile-friendliness\n- Performance signals\n\n### best-practices\n\nModern web development standards and security practices.\n\n**Trigger phrases:** \"best practices\", \"security audit\", \"modern standards\", \"code quality\"\n\n**Areas covered:**\n- HTTPS and security headers\n- Modern JavaScript APIs\n- Browser compatibility\n- Error handling\n- Console cleanliness\n\n## Thresholds reference\n\n### Core Web Vitals\n\n| Metric | Good | Needs improvement | Poor |\n|--------|------|-------------------|------|\n| LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |\n| INP | ≤ 200ms | 200ms – 500ms | > 500ms |\n| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |\n\nField Core Web Vitals are assessed at the 75th percentile; these thresholds are not a claim about a single lab run.\n\n### Starting performance budget recommendations\n\nThese are initial guardrails, not universal thresholds. Set budgets from the product's target devices, networks, page types, and user journeys.\n\n| Resource type | Budget |\n|---------------|--------|\n| Total page weight | < 1.5 MB |\n| JavaScript | < 300 KB (compressed) |\n| CSS | < 100 KB (compressed) |\n| Images | < 500 KB total above-fold |\n| Fonts | < 100 KB |\n| Third-party | < 200 KB |\n\n### Example automated audit guardrails\n\nScores help catch regressions but do not prove accessibility, security, SEO ranking, or user experience. Preserve project-specific targets and compare runs made with the same tool version and conditions.\n\n| Category | Example guardrail |\n|----------|-------------------|\n| Performance | ≥ 90 |\n| Accessibility | Aim for 100 automated coverage; complete manual checks |\n| Best Practices | ≥ 95 |\n| SEO | ≥ 95 |\n\n## Framework-specific notes\n\nThese skills are framework-agnostic, but some common patterns:\n\n**React/Next.js:** Use `next/image`, `React.lazy()`, `Suspense`, `useCallback`/`useMemo` for INP  \n**Vue/Nuxt:** Use `nuxt/image`, async components, `v-once`, computed properties  \n**Svelte/SvelteKit:** Use `{#await}`, `svelte:image`, reactive statements  \n**Astro:** Use `<Image>`, partial hydration, view transitions  \n**Static HTML:** Use native lazy loading, `<picture>`, preconnect hints\n\n## Contributing\n\nContributions welcome! Please follow the [Agent Skills specification](https://agentskills.io/specification).\n\n1. Fork the repository\n2. Create your skill in `skills/{skill-name}/SKILL.md`\n3. Keep SKILL.md under 500 lines (use `references/` for details)\n4. Include practical examples and patterns\n5. Submit a pull request\n\n## Resources\n\n- [Google Lighthouse Documentation](https://developer.chrome.com/docs/lighthouse/)\n- [Lighthouse audits with AI agents](https://developer.chrome.com/docs/devtools/agents/use-cases/lighthouse-audit)\n- [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp)\n- [Chrome UX Report](https://developer.chrome.com/docs/crux/)\n- [web.dev Learn Performance](https://web.dev/learn/performance/)\n- [Core Web Vitals](https://web.dev/articles/vitals)\n- [WCAG 2.2 Guidelines](https://www.w3.org/WAI/WCAG22/quickref/)\n- [Agent Skills Specification](https://agentskills.io/specification)\n\n## License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n---\n\nBuilt with insights from the Chrome DevTools team, web performance experts, and accessibility advocates to help developers create high-quality web experiences.\n",
  "bytes": 11410,
  "sha": "0cef8773a21f03db19fc08ab21e56261a459525273e90e4a6cef746d8e3ee768",
  "repo_slug": "addyosmani/web-quality-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_addyosmani_web_quality_skills_best_pract_0fdbd0a1/readme"
}