mc-skills/catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
catalog/repos/addyosmani--web-quality-skills.md

6.9 KiB
Raw Permalink Blame History

网页质量优化技能集

Lighthouse 性能优化 无障碍访问 SEO Core Web Vitals Agent Skills

网页质量技能集

一个（非官方的）综合性 Agent Skills 集合，基于 Google Lighthouse 指南和 Core Web Vitals 最佳实践，用于优化 Web 项目。

框架无关。 适用于任何框架：React、Vue、Angular、Svelte、Next.js、Nuxt、Astro、纯 HTML 等。

为什么需要网页质量技能集？

界面规范告诉你构建什么，而网页质量技能集告诉你如何构建出高性能、无障碍且对搜索引擎友好的产品。这些技能凝聚了以下领域的集体智慧：

  • 150+ 条 Lighthouse 审计规则，涵盖性能、无障碍访问、SEO 和最佳实践
  • Core Web Vitals 优化模式（LCP、INP、CLS）
  • 真实世界的性能工程经验
  • WCAG 2.2 无障碍标准
  • 现代 SEO 要求

可用技能

技能 描述 适用场景
web-quality-audit 跨所有类别的综合质量评审 "审计我的网站"、"质量检查"、"Lighthouse 审计"
performance 加载速度、运行时效率、资源优化 "优化性能"、"加速网站"、"修复加载慢"
core-web-vitals LCP、INP、CLS 专项优化 "改善 Core Web Vitals"、"修复 LCP"、"减少 CLS"
accessibility WCAG 合规、屏幕阅读器支持、键盘导航 "改善无障碍访问"、"WCAG 审计"、"a11y 检查"
seo 搜索引擎优化、可抓取性、结构化数据 "SEO 优化"、"提升搜索排名"、"修复 meta 标签"
best-practices 安全性、现代 API、代码质量规范 "应用最佳实践"、"安全审计"、"代码质量检查"

快速开始

安装

add-skill 是一个强大的 CLI 工具，可以从 git 仓库将 Agent Skills 安装到你的编程智能体中。无论你使用 OpenCode、Claude Code、Codex 还是 Cursor，add-skill 都能让你轻松地用专业指令集扩展智能体的能力。使用 add-skill 可以自动化发布说明、创建 Pull Request、集成外部工具等。只需运行 npx add-skill 即可开始。

npx skills add addyosmani/web-quality-skills

或

npx add-skill addyosmani/web-quality-skills

也可以手动安装：

cp -r skills/* ~/.claude/skills/

claude.ai

将技能添加到你的项目知识库，或将 SKILL.md 的内容粘贴到对话中。

使用方式

当你的请求与技能描述匹配时，技能会自动激活。示例：

审计这个页面的网页质量问题

优化性能并修复 Core Web Vitals

检查无障碍访问并给出改进建议

让这个页面符合 SEO 要求

技能详情

web-quality-audit

综合技能，负责协调所有其他技能。适用于全站审计，或当你不确定哪个具体领域需要关注时使用。

触发词： "审计我的网站"、"质量检查"、"Lighthouse 审计"、"检查网页质量"

检查内容：

  • 所有 Core Web Vitals 指标
  • 50+ 条性能规范
  • 40+ 条无障碍访问规则
  • 30+ 条 SEO 要求
  • 20+ 条安全/最佳实践规范

performance

深入分析加载性能和运行时性能优化。

触发词： "加速"、"优化性能"、"减少加载时间"、"修复缓慢"

关键优化点：

  • 关键渲染路径
  • JavaScript 打包与代码分割
  • 图片优化（格式、尺寸、懒加载）
  • 字体加载策略
  • 缓存与预加载
  • 服务器响应优化

core-web-vitals

针对影响 Google 搜索排名的三项 Core Web Vitals 的专项技能。

触发词： "Core Web Vitals"、"LCP"、"INP"、"CLS"、"页面体验"

涵盖指标：

  • LCP（最大内容绘制）< 2.5s
  • INP（下次绘制交互时间）< 200ms
  • CLS（累积布局偏移）< 0.1

accessibility

遵循 WCAG 2.2 指南的综合无障碍访问审计。

触发词： "无障碍访问"、"a11y"、"WCAG"、"屏幕阅读器"、"键盘导航"

分类：

  • 可感知性（文本替代、字幕、对比度）
  • 可操作性（键盘、时序、防抽搐、导航）
  • 可理解性（可读、可预测、输入辅助）
  • 鲁棒性（与辅助技术兼容）

seo

搜索引擎优化，提升可见性与排名。

触发词： "SEO"、"搜索优化"、"meta 标签"、"结构化数据"、"站点地图"

涵盖内容：

  • 技术 SEO（可抓取性、可索引性）
  • 页面内 SEO（meta 标签、标题、内容结构）
  • 结构化数据（JSON-LD、schema.org）
  • 移动端友好性
  • 性能信号

best-practices

现代 Web 开发标准与安全实践。

触发词： "最佳实践"、"安全审计"、"现代标准"、"代码质量"

涵盖领域：

  • HTTPS 与安全响应头
  • 现代 JavaScript API
  • 浏览器兼容性
  • 错误处理
  • 控制台整洁度

阈值参考

Core Web Vitals

指标 良好 需要改进 较差
LCP ≤ 2.5s 2.5s – 4.0s > 4.0s
INP ≤ 200ms 200ms – 500ms > 500ms
CLS ≤ 0.1 0.1 – 0.25 > 0.25

性能预算建议

资源类型 预算
页面总体积 < 1.5 MB
JavaScript < 300 KB（压缩后）
CSS < 100 KB（压缩后）
图片 首屏以上 < 500 KB
字体 < 100 KB
第三方资源 < 200 KB

Lighthouse 评分目标

类别 目标分数
性能 ≥ 90
无障碍访问 100
最佳实践 ≥ 95
SEO ≥ 95

框架专项说明

这些技能与框架无关，但以下是一些常见框架的典型模式：

React/Next.js： 使用 next/image、React.lazy()、Suspense、useCallback/useMemo 优化 INP
Vue/Nuxt： 使用 nuxt/image、异步组件、v-once、计算属性
Svelte/SvelteKit： 使用 {#await}、svelte:image、响应式语句
Astro： 使用 <Image>、部分水合、视图过渡
纯 HTML： 使用原生懒加载、<picture>、preconnect 提示

贡献

欢迎贡献！请遵循 Agent Skills 规范。

  1. Fork 仓库
  2. 在 skills/{skill-name}/SKILL.md 中创建你的技能
  3. 保持 SKILL.md 在 500 行以内（详细内容放入 references/ 目录）
  4. 包含实际示例和使用模式
  5. 提交 Pull Request

相关资源

许可证

MIT 许可证 - 详见 LICENSE。

本项目汇聚了 Chrome DevTools 团队、Web 性能专家和无障碍倡导者的见解，旨在帮助开发者打造高质量的 Web 体验。