网页质量技能合集

衡量并改善网页性能、无障碍、SEO 和工程质量。

Addy Osmani 的跨框架库整合 Lighthouse 审查、Core Web Vitals 分析、无障碍检查和网页最佳实践。

适用场景

• 诊断加载缓慢或布局不稳定
• 审查无障碍、SEO 和整体网页质量

使用方法

修改前建立测量基线，有 Chrome DevTools MCP 时使用实时审查与性能轨迹，修改后用相同指标验证效果。

Skills

• accessibility

  Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

  addyosmani/web-quality-skills

• best-practices

  Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".

  addyosmani/web-quality-skills

• core-web-vitals

  Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

  addyosmani/web-quality-skills

• performance

  Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".

  addyosmani/web-quality-skills

• seo

  Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".

  addyosmani/web-quality-skills

• web-quality-audit

  Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".

  addyosmani/web-quality-skills