mcpField
W
web-performance-seo

web-performance-seo

github.com/zhanlincui设计与 UI19388 次安装33 周前更新
代码仓库

关于 web-performance-seo

用于排查网站 Lighthouse 和 PSI 无障碍颜色对比度审计失败的 Skill，指导开发者扫描常见代码诱因、按优先级修复并验证结果。

主要功能

  1. 01扫描常见 CSS 和颜色诱因
  2. 02按优先级修复相关代码
  3. 03使用 Lighthouse 或 axe 验证
  4. 04部署后检查 PSI 结果

适用场景

  1. 01排查 Lighthouse 无障碍错误
  2. 02修复颜色对比度审计失败
  3. 03验证部署前后的对比度修改

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/zhanlincui/agent-skills-hunter --skill web-performance-seo

安装后在 Claude Code 中输入/web-performance-seo确认已加载。

详细介绍

Web 性能 SEO：无障碍对比度错误修复

适用场景

  • PSI/Lighthouse 无障碍检查显示“！”或错误，而非数值评分
  • 颜色对比度审核报错或 getImageData 失败
  • 需要改善影响 SEO 的无障碍信号

工作流

  1. 复现问题
    • 运行 Lighthouse 或 PSI；记录失败的审核项名称。
  2. 扫描代码中的常见诱因
    • CSS 滤镜/背景模糊、mix-blend-mode
    • OKLCH/OKLAB 颜色
    • 低透明度背景（< 0.4）
    • 使用 color: transparent 的渐变文字
    • 图片上方的文字没有不透明叠加层
  3. 按优先级修复
    • 移除滤镜/混合模式
    • 将 OKLCH/OKLAB 转换为 HSL/RGB
    • 提高透明度阈值
    • 为渐变文字添加纯色回退
    • 在图片上的文字后方添加叠加层
  4. 使用 Lighthouse/axe 在本地验证
  5. 部署后使用 PSI 验证

快速扫描命令

rg -n "backdrop-blur|filter:|mix-blend-mode" .
rg -n "oklch|oklab" .
rg -n "/10|/20|/30|opacity-25|opacity-0" .
rg -n "background-clip.*text|color.*transparent" .

修复模式

移除滤镜（关键）
// Before
<div className="bg-card/50 backdrop-blur-sm">...</div>
// After
<div className="bg-card/80">...</div>
将 OKLCH/OKLAB 转换为 HSL/RGB
/* Before */
:root { --primary: oklch(0.55 0.22 264); }
/* After */
:root { --primary: hsl(250, 60%, 50%); }
提高透明度阈值
  • 背景 >= 0.4（建议 >= 0.6）
  • 将 /10 替换为 /40，将 /20 替换为 /40，将 /30 替换为 /60
渐变文字回退
.title { color: #111111; }
@media (prefers-contrast: no-preference) {
  .title.with-gradient {
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .title.with-gradient { background: none; color: CanvasText; }
}
为图片上的文字添加叠加层
<div className="relative">
  <img src="/hero.jpg" alt="Hero" />
  <div className="absolute inset-0 bg-black/60"></div>
  <h1 className="relative text-white">Title</h1>
</div>

验收标准

  • 无障碍评分为数值（而非“！”）
  • 颜色对比度审核通过或列出可采取行动的事项
  • 对比度至少达到：普通文字 4.5:1，大号文字 3:1

说明

  • “！”表示审核失败，而非评分低。
  • 请务必先在本地测试，再等待 PSI 更新。

评论

支持 Markdown