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 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 体验。