如何为 AI 编程助手编写自定义技能基于 web-quality-skills 的 SKILL.md 开发完全指南【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skillsweb-quality-skills 是一套基于 Google Lighthouse 与 Core Web Vitals 构建的 AI 编程助手自定义技能Agent Skills开源合集。本文以它内置的 6 个实战技能为例手把手带你看懂 SKILL.md 开发从目录结构、前置元数据写作到安装验证新手也能快速上手。什么是 SKILL.md 自定义技能一句话解释SKILL.md 就是给 AI 编程助手按需加载的指令包。当你的输入匹配到某个技能的描述时助手会自动读取对应的 SKILL.md并按其中的专业知识完成任务——比如优化网页性能、审查无障碍合规、调整 SEO 配置。该项目与框架无关React、Vue、Angular、Svelte、Next.js、Nuxt、Astro 乃至纯 HTML 都能用内置 6 个技能技能入口文件作用web-quality-auditskills/web-quality-audit/SKILL.md全站质量审计150 项检查performanceskills/performance/SKILL.md加载速度与资源优化core-web-vitalsskills/core-web-vitals/SKILL.mdLCP / INP / CLS 指标优化accessibilityskills/accessibility/SKILL.mdWCAG 2.2 无障碍合规seoskills/seo/SKILL.md搜索引擎优化best-practicesskills/best-practices/SKILL.md安全与现代标准 目录结构主文件、参考资料与脚本的三层设计每个技能是一个独立目录唯一必需的文件就是 SKILL.md。详细资料与自动化脚本放在子目录中按需加载。项目遵循渐进式披露原则主文件只保留核心指令AI 需要时才深入加载细节。skills/ ├── performance/ # 技能目录kebab-case │ ├── SKILL.md # 必需主指令文件 │ ├── scripts/ # 可选自动化脚本kebab-case.sh │ └── references/ # 可选参考资料UPPERCASE.md └── core-web-vitals/ ├── SKILL.md └── references/ └── LCP.md # 单一主题参考文件命名约定详见 AGENTS.md技能目录用 kebab-case如core-web-vitals主文件固定为大写的SKILL.md参考资料用大写字母命名如 LCP.md单个文件建议不超过 200 行自动化脚本用 kebab-case.sh脚本输出不占用对话上下文✍️ 第一步写好 YAML 前置元数据——技能的身份证文件顶部的前置元数据frontmatter决定了助手能否识别并自动激活这个技能。以 skills/performance/SKILL.md 为例--- name: performance description: Optimize web performance for faster loading and better user experience. Use when asked to speed up my site, optimize performance, reduce load time. license: MIT metadata: author: web-quality-skills version: 1.0 ---三个写作要点name 与目录名保持一致kebab-casedescription 是技能之魂——写成做什么 何时用并必须包含触发短语用户可能说的自然语言metadata 记录作者与版本更新技能时递增版本号并保留原有触发短语以维持兼容性。6 个技能的常用触发短语汇总见 CLAUDE.md技能用户常说触发词performancespeed up、optimize、load timecore-web-vitalsLCP、INP、CLSaccessibilitya11y、WCAG、accessibleseoSEO、meta tags、searchweb-quality-auditaudit、quality review、lighthouse 第二步用四段式结构组织正文项目内每个 SKILL.md 都遵循统一模板让 AI 能高效理解一句话概述技能做什么How it works编号步骤说明处理流程Guidelines按类别分组规则每条采用加粗标题 简明解释 具体阈值Examples用 ❌ 反例 / ✅ 正例的对比展示问题 → 修复References链接到本目录内的参考资料。最关键的习惯是用数字不用模糊词。比如TTFB 800ms、颜色对比度 ≥ 4.5:1、LCP ≤ 2.5s并用表格呈现阈值——这正是技能可执行、可落地的关键。真实范例可以阅读 skills/web-quality-audit/SKILL.md 与 skills/accessibility/SKILL.md。✅ 第三步用脚本与参考资料分担复杂度适合重复执行的检查写成 shell 脚本而不是塞进主文件。项目中的标准实践见 skills/web-quality-audit/scripts/analyze.sh用set -e快速失败避免半截结果误导 AI进度信息写 stderr结果以 JSON 写 stdout便于程序解析结果由脚本产出不污染对话上下文。而深度资料LCP 逐项优化、WCAG 条款详解则放references/每个文件聚焦单一主题、可独立阅读。 安装与验证让技能真正跑起来技能写好后可以安装到你的 AI 编程助手中# 一键安装 npx add-skill addyosmani/web-quality-skills # 或手动复制以 Claude Code 为例 cp -r skills/* ~/.claude/skills/Codex 用户可直接添加插件市场要求 v0.122细节见 docs/codex-setup.mdClaude Code 也可以走插件市场安装。安装后在对话里直接说Audit this page for web quality issues或用调用如performance、accessibility助手会自动匹配对应技能。提交前检查清单来自 AGENTS.md前置元数据是合法 YAMLname与目录名一致description包含清晰的激活触发短语SKILL.md 控制在 500 行以内所有引用的文件真实存在示例确实可用小结编写自定义技能本质上是三件事清晰的 frontmatter让 AI 知道何时用、带阈值可执行规则让 AI 做对、主文件与参考分离的三层目录让 AI 按需加载。以本项目 6 个真实技能为范本动手写你的第一个 SKILL.mdAI 编程助手就能真正按专业标准干活。【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考