Agent Skills › ZhanlinCui/Agent-Skills-Hunter › web-performance-seo

web-performance-seo

GitHub

修复因对比度问题导致的 Lighthouse/PSI 无障碍“!”错误，解决 CSS 滤镜、OKLCH 颜色及低透明度引发的 SEO 性能调试与修复。

seo/web-performance-seo/SKILL.md ZhanlinCui/Agent-Skills-Hunter

Trigger Scenarios

PSI/Lighthouse 显示“!”或数值异常 color-contrast 审计失败 getImageData 报错

Install

npx skills add ZhanlinCui/Agent-Skills-Hunter --skill web-performance-seo -g -y

More Options

Non-standard path

npx skills add https://github.com/ZhanlinCui/Agent-Skills-Hunter/tree/main/seo/web-performance-seo -g -y

Use without installing

npx skills use ZhanlinCui/Agent-Skills-Hunter@web-performance-seo

指定 Agent (Claude Code)

npx skills add ZhanlinCui/Agent-Skills-Hunter --skill web-performance-seo -a claude-code -g -y

安装 repo 全部 skill

npx skills add ZhanlinCui/Agent-Skills-Hunter --all -g -y

预览 repo 内 skill

npx skills add ZhanlinCui/Agent-Skills-Hunter --list

SKILL.md

Frontmatter

{
    "name": "web-performance-seo",
    "description": "Fix PageSpeed Insights\/Lighthouse accessibility \"!\" errors caused by contrast audit failures (CSS filters, OKLCH\/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO\/performance debugging and remediation."
}

Web Performance SEO: Accessibility Contrast Error Fix

When to use

PSI/Lighthouse accessibility shows "!" or error instead of a numeric score
color-contrast audit errors or getImageData failures
Need to improve accessibility signals that impact SEO

Workflow

Reproduce
- Run Lighthouse or PSI; capture failing audit names.
Scan code for common triggers
- CSS filters/backdrop blur, mix-blend-mode
- OKLCH/OKLAB colors
- Low opacity backgrounds (< 0.4)
- Gradient text with color: transparent
- Text over images without opaque overlays
Fix in priority order
- Remove filters/blend modes
- Convert OKLCH/OKLAB to HSL/RGB
- Raise opacity thresholds
- Add solid-color fallback for gradient text
- Add overlay behind text on images
Verify locally with Lighthouse/axe
Verify in PSI after deployment

Fast scan commands

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" .

Fix patterns

Remove filters (critical)

// Before
<div className="bg-card/50 backdrop-blur-sm">...</div>
// After
<div className="bg-card/80">...</div>

Convert OKLCH/OKLAB to HSL/RGB

/* Before */
:root { --primary: oklch(0.55 0.22 264); }
/* After */
:root { --primary: hsl(250, 60%, 50%); }

Raise opacity thresholds

Backgrounds >= 0.4 (prefer >= 0.6)
Replace /10 -> /40, /20 -> /40, /30 -> /60

Gradient text fallback

.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; }
}

Overlay for text on images

<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>