新闻详情

新闻详情

首页 / 资讯中心 / 详情

如何为 AI 编程助手编写自定义技能?基于 web-quality-skills 的 SKILL.md 开发完全指南

发布时间:2026/10/1 8:47:51来源:尧图网络
如何为 AI 编程助手编写自定义技能?基于 web-quality-skills 的 SKILL.md 开发完全指南
如何为 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),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

Linux下Brother打印机驱动安装与排坑指南:从CUPS到扫描配置 2026/10/1 9:43:23

Linux下Brother打印机驱动安装与排坑指南:从CUPS到扫描配置

前阵子帮朋友在 Linux 上搞定了一台 Brother 打印机驱动,过程比我预想的要曲折一些。因为这台打印机既要做打印,又要跑扫描,而且不同 Linux 发行版的处置方式还不一样,踩了几个坑才彻底弄顺。今天把整个安装过程、原理和排坑经验整…

阅读更多 →
VMware Workstation Pro 16安装CentOS7与NAT配置 2026/10/1 9:43:23

VMware Workstation Pro 16安装CentOS7与NAT配置

装 CentOS7 这件事,我在自己机器、公司测试机、给同事远程指导的电脑上前后做过十几次,从 VMware Workstation Pro 16 一路踩到老版本的 15,从 BIOS 引导踩到 UEFI,从桥接踩到 NAT,最后发现新手真正卡住的从来不是&quo…

阅读更多 →
云监控速查表精讲:覆盖 AWS、Azure、GCP 与开源工具的可观测性体系九大核心环节(System Design 101) 2026/10/1 9:43:22

云监控速查表精讲:覆盖 AWS、Azure、GCP 与开源工具的可观测性体系九大核心环节(System Design 101)

后端文档教程 【免费下载链接】system-design-101 Explain complex systems using visuals and simple terms. Help you prepare for system design interviews. 项目地址: https://gitcode.com/GitHub_Trending/sy/system-design-101 点击查看 免费下载 在云上构建…

阅读更多 →
JavaScript深拷贝与浅拷贝:原理、应用场景与常见坑 2026/10/1 9:43:21

JavaScript深拷贝与浅拷贝:原理、应用场景与常见坑

写 JavaScript 这几年,要说被问得最多的基础题,浅拷贝和深拷贝的区别绝对能排进前三。不管你是做前端、写 Node 后端,还是搞小程序,只要代码里出现对象、数组之间互相赋值,迟早会撞上这个问题。简单说,浅拷…

阅读更多 →
motion 中 layoutId 交叉淡化与 scale 动画叠加导致的视觉过冲:投影机制溯源、复现与规避方案(issue-2284 复盘) 2026/10/1 9:43:20

motion 中 layoutId 交叉淡化与 scale 动画叠加导致的视觉过冲:投影机制溯源、复现与规避方案(issue-2284 复盘)

前端UI组件 【免费下载链接】motion A modern animation library for React and JavaScript 项目地址: https://gitcode.com/GitHub_Trending/mo/motion 点击查看 免费下载 layoutId 共享元素动画是 motion(framer-motion)最受欢迎的能力之一…

阅读更多 →
RHEL7.9/CentOS7.9双网卡bonding生产级配置与故障排查 2026/10/1 9:43:14

RHEL7.9/CentOS7.9双网卡bonding生产级配置与故障排查

1. 为什么在RHEL7.9/CentOS7.9上做双网卡bonding不是“锦上添花”,而是生产环境的刚性门槛你可能已经遇到过这样的场景:一台部署在IDC机柜里的RHEL7.9业务服务器,某天凌晨三点突然失联。运维同事冲到机房拔插网线、重启交换机端口、抓包查ARP…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉