什么是 Agent Skills从 0 开始理解 web-quality-skills 如何让 AI 编程助手学会优化网页【免费下载链接】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 编程助手能写代码却经常不懂网页质量——页面慢、CLS 抖动、SEO 缺标签web-quality-skills 是一个开源的Agent Skills技能包把 150 次 Lighthouse 审计沉淀成 6 个网页优化技能让 AI 编程助手Claude Code、Codex、Cursor 等像资深前端专家一样帮你优化加载速度、可访问性、Core Web Vitals 和 SEO。什么是 Agent Skills给 AI 的技能说明书可以把 Agent Skills 理解成给 AI 编程助手的专业技能包每个技能就是一个文件夹核心是一份 SKILL.md用 Markdown 写清什么时候触发、怎么做、参考哪些资料文件开头有一段YAML frontmattername descriptionAI 靠 description 里的触发词判断这事归我管技能是渐进式披露的主文件控制在 500 行以内详细资料放references/子目录脚本放scripts/自动执行不占用 AI 的上下文。一句话Skills 不改变 AI 的大脑而是给它一本随时翻阅的专家手册。项目的 AGENTS.md 和 CLAUDE.md 还专门解释了这套技能包的组织规范。web-quality-skills 技能总览6 个技能覆盖网页质量全链路 这套技能包与框架无关React、Vue、Angular、Svelte、纯 HTML 都能用共 6 个技能技能擅长什么典型触发说法文件位置web-quality-audit全站综合质量审计150 检查项Audit my siteskills/web-quality-audit/performance加载速度、资源瘦身Speed up my siteskills/performance/core-web-vitalsLCP / INP / CLS 专项优化Fix LCP, reduce CLSskills/core-web-vitals/accessibilityWCAG 2.2 无障碍合规a11y auditskills/accessibility/seo搜索引擎优化与结构化数据Make this SEO-readyskills/seo/best-practicesHTTPS、安全头、代码质量Security auditskills/best-practices/其中web-quality-audit 是总指挥会调度其他 5 个技能做全站审计并按 Critical → Low 四级严重度输出整改建议还附带自动化脚本 analyze.sh 直接产出机器可读的审计数据。技能内部是怎么组织的以无障碍技能为例目录结构一目了然skills/accessibility/ ├── SKILL.md # 主技能说明WCAG 2.2 检查清单 └── references/ ├── A11Y-PATTERNS.md # 无障碍模式与代码示例 └── WCAG.md # WCAG 标准速查性能技能同理把 LCP 优化细节拆到 references/LCP.md主文件只保留决策路径——这正是渐进式披露让 AI 用得又快又准的关键。三种安装方式把网页优化技能装进 AI 助手方式一add-skill 命令行一键安装推荐npx skills add addyosmani/web-quality-skills # 或 npx add-skill addyosmani/web-quality-skills方式二手动复制到本地技能目录cp -r skills/* ~/.claude/skills/方式三以插件形式安装Claude Code/plugin marketplace add后安装技能带命名空间如/web-quality-skills:performance升级只需/plugin updateCodex一条codex plugin marketplace add即可之后在对话里用performance、accessibility直接调用详见 docs/codex-setup.md。提示仓库本身也可以先克隆到本地再按上述方式安装clone 地址见项目主页。上手即用说人话就能触发对应技能 ✅安装后不需要记任何命令用日常语言描述需求技能会自动激活帮我审计这个页面的网页质量问题 → 触发 web-quality-audit优化性能修复 Core Web Vitals → 触发 performance core-web-vitals审查表单的可访问性 → 触发 accessibility让这页对 SEO 友好 → 触发 seo审计结果会按固定格式输出Critical 问题立即修→ 高优先级上线前修→ 中低优先级排期修每个问题都给出文件位置、影响说明和具体改法。关键指标速查判断网页质量的 3 个数字 技能内置了清晰的及格线这也是 AI 给出建议的依据Core Web Vitals含义Good 阈值LCP最大内容绘制首屏最大元素多久渲染出来≤ 2.5sINP交互到下一次绘制点击后多久有响应≤ 200msCLS累计布局偏移页面会不会跳动≤ 0.1再配合性能预算整页 1.5 MB、JS 300 KB、CSS 100 KB和 Lighthouse 目标分性能 ≥ 90、无障碍 100、SEO ≥ 95AI 给出的每条优化建议都有据可依。新手从 0 到 1三步开始使用安装选上面任意一种方式把 6 个技能装进你的 AI 编程助手试水对一个小页面说audit my site看看 web-quality-audit 的完整报告长什么样专项优化针对报告中的短板追问如先把 LCP 修到 2.5s 以内或补齐图片 alt 和 meta 标签。常见问题Q必须用某个框架吗不需要。技能刻意保持框架无关先给原生 HTML/CSS/JS 方案再附 React/Next、Vue/Nuxt、Svelte、Astro 等框架的具体做法。QAI 为什么能学会优化网页因为技能把专家经验显式写成了规则触发词、检查清单、阈值表格、正反代码示例AI 按清单逐项核对并引用 LCP.md、WCAG.md 等参考资料作答。Q项目有运行时依赖吗没有。技能是纯 Markdown 可选 shell 脚本零依赖、MIT 协议开源。写在最后Agent Skills 的本质是把网页质量专家的检查清单变成 AI 编程助手可自动加载的知识包。web-quality-skills 用 6 个技能、150 检查项覆盖了从加载速度到无障碍再到 SEO 的完整链路你只负责提出需求AI 负责按清单干活——这就是从会写代码的 AI到懂质量标准的 AI的一步跨越。【免费下载链接】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），仅供参考