web-performance-seo
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
More from zhanlincui/agent-skills-hunter
project-to-obsidian
|
4web-access
|
4daily-news
|
3pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
2web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
2canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
2