{"id":43214416,"url":"https://github.com/addyosmani/web-quality-skills","last_synced_at":"2026-06-22T08:01:59.912Z","repository":{"id":355323890,"uuid":"1136782037","full_name":"addyosmani/web-quality-skills","owner":"addyosmani","description":"Agent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.","archived":false,"fork":false,"pushed_at":"2026-05-03T01:26:06.000Z","size":59,"stargazers_count":1843,"open_issues_count":7,"forks_count":160,"subscribers_count":22,"default_branch":"main","last_synced_at":"2026-05-03T03:26:32.556Z","etag":null,"topics":["accessibility","agent-skills","claude-skills","core-web-vitals","lighthouse","skills","testing","web-performance"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/addyosmani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-18T10:53:04.000Z","updated_at":"2026-05-03T02:14:16.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/addyosmani/web-quality-skills","commit_stats":null,"previous_names":["addyosmani/web-quality-skills"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/addyosmani/web-quality-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fweb-quality-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fweb-quality-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fweb-quality-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fweb-quality-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/addyosmani","download_url":"https://codeload.github.com/addyosmani/web-quality-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fweb-quality-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34639715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","agent-skills","claude-skills","core-web-vitals","lighthouse","skills","testing","web-performance"],"created_at":"2026-02-01T08:00:30.280Z","updated_at":"2026-06-22T08:01:59.904Z","avatar_url":"https://github.com/addyosmani.png","language":"Shell","funding_links":[],"categories":["Agent Skills","Source Catalog","6 つのトラック","🧠 Agent Skills","📦 Skill Collections","測試 Testing","Testing and QA Skills"],"sub_categories":["Tier 4：GTM / マーケティング / Launch","Remix / React Router"],"readme":"# Web Quality Skills\n\nAn (unofficial) comprehensive collection of [Agent Skills](https://agentskills.io/) for optimizing web projects based on [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) guidelines and Core Web Vitals best practices.\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 encode the collective wisdom from:\n\n- **150+ Lighthouse audits** across Performance, Accessibility, SEO, and Best Practices\n- **Core Web Vitals** optimization patterns (LCP, INP, CLS)\n- **Real-world performance engineering** experience\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)** | Comprehensive quality review across all categories | \"Audit my site\", \"Review this for quality\", \"Check web quality\" |\n| **[performance](#performance)** | Loading speed, runtime efficiency, resource optimization | \"Optimize performance\", \"Speed up my site\", \"Fix slow loading\" |\n| **[core-web-vitals](#core-web-vitals)** | LCP, INP, CLS specific optimizations | \"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## 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## Skill details\n\n### web-quality-audit\n\nThe comprehensive skill that orchestrates all other skills. Use this for full-site audits or when you're unsure which specific area needs attention.\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- 50+ performance patterns\n- 40+ accessibility rules\n- 30+ SEO requirements\n- 20+ security/best practice patterns\n\n### performance\n\nDeep-dive into loading and runtime performance optimization.\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 affect Google Search ranking.\n\n**Trigger phrases:** \"Core Web Vitals\", \"LCP\", \"INP\", \"CLS\", \"page experience\"\n\n**Metrics covered:**\n- **LCP** (Largest Contentful Paint) \u003c 2.5s\n- **INP** (Interaction to Next Paint) \u003c 200ms\n- **CLS** (Cumulative Layout Shift) \u003c 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 | \u003e 4.0s |\n| INP | ≤ 200ms | 200ms – 500ms | \u003e 500ms |\n| CLS | ≤ 0.1 | 0.1 – 0.25 | \u003e 0.25 |\n\n### Performance budget recommendations\n\n| Resource type | Budget |\n|---------------|--------|\n| Total page weight | \u003c 1.5 MB |\n| JavaScript | \u003c 300 KB (compressed) |\n| CSS | \u003c 100 KB (compressed) |\n| Images | \u003c 500 KB total above-fold |\n| Fonts | \u003c 100 KB |\n| Third-party | \u003c 200 KB |\n\n### Lighthouse score targets\n\n| Category | Target score |\n|----------|--------------|\n| Performance | ≥ 90 |\n| Accessibility | 100 |\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 `\u003cImage\u003e`, partial hydration, view transitions  \n**Static HTML:** Use native lazy loading, `\u003cpicture\u003e`, 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- [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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faddyosmani%2Fweb-quality-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faddyosmani%2Fweb-quality-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faddyosmani%2Fweb-quality-skills/lists"}