220 lines
6.9 KiB
Markdown
220 lines
6.9 KiB
Markdown
# 网页质量优化技能集
|
||
|
||
`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 体验。 |