catalog/repos/addyosmani--web-quality-skills.md

# 网页质量优化技能集

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

# 网页质量技能集

一个（非官方的）综合性 [Agent Skills](https://agentskills.io/) 集合，基于 [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) 指南和 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](#web-quality-audit)** | 跨所有类别的综合质量评审 | "审计我的网站"、"质量检查"、"Lighthouse 审计" |
| **[performance](#performance)** | 加载速度、运行时效率、资源优化 | "优化性能"、"加速网站"、"修复加载慢" |
| **[core-web-vitals](#core-web-vitals)** | LCP、INP、CLS 专项优化 | "改善 Core Web Vitals"、"修复 LCP"、"减少 CLS" |
| **[accessibility](#accessibility)** | WCAG 合规、屏幕阅读器支持、键盘导航 | "改善无障碍访问"、"WCAG 审计"、"a11y 检查" |
| **[seo](#seo)** | 搜索引擎优化、可抓取性、结构化数据 | "SEO 优化"、"提升搜索排名"、"修复 meta 标签" |
| **[best-practices](#best-practices)** | 安全性、现代 API、代码质量规范 | "应用最佳实践"、"安全审计"、"代码质量检查" |

## 快速开始

### 安装

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

```bash
npx skills add addyosmani/web-quality-skills
```

或

```
npx add-skill addyosmani/web-quality-skills
```

也可以手动安装：

```bash
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 规范](https://agentskills.io/specification)。

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

## 相关资源

- [Google Lighthouse 文档](https://developer.chrome.com/docs/lighthouse/)
- [web.dev 性能学习](https://web.dev/learn/performance/)
- [Core Web Vitals](https://web.dev/articles/vitals)
- [WCAG 2.2 指南](https://www.w3.org/WAI/WCAG22/quickref/)
- [Agent Skills 规范](https://agentskills.io/specification)

## 许可证

MIT 许可证 - 详见 [LICENSE](LICENSE)。

---

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