[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74897":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":14,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},74897,"web-quality-skills","addyosmani\u002Fweb-quality-skills","addyosmani","Agent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.","",null,"Shell",2210,201,23,3,0,60,301,69,28.92,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33],"accessibility","agent-skills","claude-skills","core-web-vitals","lighthouse","skills","testing","web-performance","2026-06-12 02:03:29","# Web Quality Skills\n\nAn (unofficial) comprehensive collection of [Agent Skills](https:\u002F\u002Fagentskills.io\u002F) for optimizing web projects based on [Google Lighthouse](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Flighthouse\u002Foverview\u002F) 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\u002Fweb-quality-skills\n```\n\nor\n\n```\nnpx add-skill addyosmani\u002Fweb-quality-skills\n```\n\nOr manually:\n\n```bash\ncp -r skills\u002F* ~\u002F.claude\u002Fskills\u002F\n```\n\n#### Claude Code (plugin)\n\nInstall as a versioned, namespaced plugin from inside Claude Code:\n\n```text\n\u002Fplugin marketplace add addyosmani\u002Fweb-quality-skills\n\u002Fplugin install web-quality-skills@addy-web-quality-skills\n```\n\nSkills are then namespaced (e.g. `\u002Fweb-quality-skills:performance`) and update with `\u002Fplugin update`. The plugin reads the same `skills\u002F` 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\u002Fweb-quality-skills\n```\n\nOnce installed, invoke skills in chat using `@` (e.g. `@performance`, `@accessibility`). See [docs\u002Fcodex-setup.md](docs\u002Fcodex-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:\u002F\u002Fgithub.com\u002Faddyosmani\u002Fweb-quality-skills\n```\n\nSkills are auto-discovered by Gemini and activate when prompts match their description. See [docs\u002Fgemini-setup.md](docs\u002Fgemini-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\u002Fbest 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 | > 4.0s |\n| INP | ≤ 200ms | 200ms – 500ms | > 500ms |\n| CLS | ≤ 0.1 | 0.1 – 0.25 | > 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\u002FNext.js:** Use `next\u002Fimage`, `React.lazy()`, `Suspense`, `useCallback`\u002F`useMemo` for INP  \n**Vue\u002FNuxt:** Use `nuxt\u002Fimage`, async components, `v-once`, computed properties  \n**Svelte\u002FSvelteKit:** Use `{#await}`, `svelte:image`, reactive statements  \n**Astro:** Use `\u003CImage>`, partial hydration, view transitions  \n**Static HTML:** Use native lazy loading, `\u003Cpicture>`, preconnect hints\n\n## Contributing\n\nContributions welcome! Please follow the [Agent Skills specification](https:\u002F\u002Fagentskills.io\u002Fspecification).\n\n1. Fork the repository\n2. Create your skill in `skills\u002F{skill-name}\u002FSKILL.md`\n3. Keep SKILL.md under 500 lines (use `references\u002F` for details)\n4. Include practical examples and patterns\n5. Submit a pull request\n\n## Resources\n\n- [Google Lighthouse Documentation](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Flighthouse\u002F)\n- [web.dev Learn Performance](https:\u002F\u002Fweb.dev\u002Flearn\u002Fperformance\u002F)\n- [Core Web Vitals](https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals)\n- [WCAG 2.2 Guidelines](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002Fquickref\u002F)\n- [Agent Skills Specification](https:\u002F\u002Fagentskills.io\u002Fspecification)\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","该项目旨在通过基于Lighthouse和Core Web Vitals的指导原则来优化网页质量。它提供了一系列Agent Skills，用于在性能、可访问性、SEO及最佳实践等方面对网站进行全面评估与优化，支持包括React、Vue、Angular等在内的多种前端框架。适用于需要提升网站加载速度、改善用户体验、确保无障碍访问或提高搜索引擎排名的各种Web开发场景。其核心功能涵盖了150多个Lighthouse审计项以及针对关键Web指标（如LCP、INP、CLS）的具体优化策略，帮助开发者遵循WCAG 2.2标准并满足现代SEO要求。",2,"2026-06-11 03:51:21","high_star"]