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/ultimate-agent-skills-collection
chat-compactor
Generate structured session summaries optimized for future AI agent consumption. Use when (1) ending a coding/debugging session, (2) user says "compact", "summarize session", "save context", or "wrap up", (3) context window is getting long and continuity matters, (4) before switching tasks or taking a break. Produces machine-readable handoff documents that let the next session start fluently without re-explaining.
45ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
27obsidian-helper
|
21google-official-seo-guide
Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation
20obsidian-bases
Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.
18vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
18