Навыки web-performance-seo
📦

web-performance-seo

Безопасно

Исправление ошибок контрастности Lighthouse Accessibility

Этот навык исправляет ошибки доступности PageSpeed Insights и Lighthouse, вызванные проблемами контрастности цветов. Он сканирует CSS-паттерны, которые вызывают сбои аудита доступности, и предоставляет проверенные шаблоны исправлений для улучшения вашей SEO-производительности.

Поддерживает: Claude Codex Code(CC)
🥉 74 Бронза
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «web-performance-seo». Мой веб-сайт показывает '!' в доступности Lighthouse вместо оценки

Ожидаемый результат:

'!' указывает на сбой аудита. Распространённые причины включают: CSS backdrop-blur или фильтры, цвета OKLCH/OKLAB, фоны с низкой непрозрачностью (< 0.4), градиентный текст с прозрачным цветом или текст поверх изображений без оверлеев. Я рекомендую просканировать вашу кодовую базу с помощью: `rg -n "backdrop-blur|filter:|mix-blend-mode" .` и подобных команд для идентификации проблемных паттернов.

Использование «web-performance-seo». Как мне исправить цвета OKLCH в моём CSS для доступности?

Ожидаемый результат:

Конвертируйте OKLCH в HSL или RGB. Например, `--primary: oklch(0.55 0.22 264);` становится `--primary: hsl(250, 60%, 50%);`. Используйте пипетку цветов или инструмент для сопоставления визуального вида при использовании стандартного пространства цветов, которое Lighthouse может корректно анализировать.

Аудит безопасности

Безопасно
v1 • 2/24/2026

Static analysis detected external_commands patterns and weak cryptographic algorithms. Evaluation reveals these are FALSE POSITIVES. The 'external_commands' are CLI command examples in markdown documentation (ripgrep commands for code scanning), not executable code. The 'weak cryptographic algorithm' detections are OKLCH/OKLAB CSS color space specifications misidentified as crypto algorithms. This skill provides documentation and code patterns for fixing accessibility contrast issues - no security risks present.

1
Просканировано файлов
93
Проанализировано строк
2
находки
1
Всего аудитов
Проблемы среднего риска (1)
SKILL.md:32-37SKILL.md:37-41SKILL.md:41-46SKILL.md:46-49SKILL.md:49-54SKILL.md:54-61SKILL.md:61-74SKILL.md:74-77SKILL.md:77-83
Documentation CLI Commands Detected
Static scanner detected 'external_commands' patterns in markdown code blocks. These are CLI command examples (ripgrep) shown as documentation for users to run on their own code, not executable code within the skill itself.
Проблемы низкого риска (1)
SKILL.md:3SKILL.md:23
OKLCH/OKLAB Color Space Misidentified as Crypto
Static scanner flagged 'weak cryptographic algorithm' at lines 3 and 23. This is a FALSE POSITIVE - OKLCH/OKLAB are CSS color space specifications (CSS Color Level 4), not cryptographic algorithms.
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
50
Сообщество
98
Безопасность
91
Соответствие спецификации

Что вы можете построить

Исправление сбойных аудитов доступности

Когда Lighthouse показывает '!' вместо оценки в разделе доступности, используйте этот навык для идентификации и исправления CSS-паттернов, вызывающих сбой.

Улучшение SEO через доступность

Доступность является фактором ранжирования. Используйте этот навык для исправления проблем контрастности, которые негативно влияют на позиции в поисковых системах.

Аудит доступности кода

Проверяйте CSS и компоненты на проблемы доступности перед развёртыванием, чтобы выявить проблемы контрастности на ранних этапах.

Попробуйте эти промпты

Базовый запрос исправления контрастности 
Мой аудит доступности Lighthouse показывает '!' вместо оценки. Аудит color-contrast не проходит. Помогите мне идентифицировать и исправить CSS-паттерны, вызывающие эту проблему.
Конвертация цвета OKLCH 
Я использую цвета OKLCH в моём CSS, и они вызывают проблемы доступности в Lighthouse. Покажите, как конвертировать OKLCH в доступные альтернативы HSL или RGB.
Доступность градиентного текста 
Мой веб-сайт использует градиентный текст, но Lighthouse отмечает проблемы color-contrast. Предоставьте паттерн для градиентного текста с надлежащими цветовыми фоллбэками, которые проходят аудиты доступности.
Наложение текста на изображения 
У меня текст поверх изображений, и контрастность не проходит аудиты доступности. Покажите правильный паттерн для добавления оверлеев, чтобы обеспечить достаточные коэффициенты контрастности.

Лучшие практики

  • Всегда тестируйте локально с помощью Lighthouse или axe перед развёртыванием
  • Повышайте непрозрачность фона до 0.4 или выше (предпочтительно 0.6+)
  • Используйте медиа-запрос forced-colors для поддержки режима высокой контрастности Windows
  • Проверяйте, что коэффициенты контрастности соответствуют 4.5:1 для обычного текста и 3:1 для крупного текста

Избегать

  • Использование CSS-фильтров или backdrop-blur без проверки влияния на доступность
  • Использование цветов OKLCH/OKLAB без тестирования в Lighthouse
  • Установка прозрачного цвета текста поверх градиентных фонов
  • Размещение текста непосредственно поверх изображений без надлежащего оверлея

Часто задаваемые вопросы

Что означает '!' в доступности Lighthouse?
'!' указывает, что аудит доступности полностью провалился и не смог вычислить оценку. Это обычно происходит, когда Lighthouse не может проанализировать определённые CSS-паттерны, такие как фильтры или пространства цветов.
Может ли этот навык запускать тесты Lighthouse за меня?
Нет. Этот навык предоставляет рекомендации и шаблоны кода. Вам нужно самостоятельно запустить Lighthouse или PageSpeed Insights для верификации исправлений.
Почему цвета OKLCH вызывают проблемы?
Lighthouse использует getImageData для анализа цветов, что имеет ограниченную поддержку новых пространств цветов CSS, таких как OKLCH и OKLAB. Конвертация в HSL или RGB обеспечивает точный анализ.
Какой уровень непрозрачности безопасен для доступности?
Используйте непрозрачность фона 0.4 или выше. Предпочтительно 0.6 или выше для лучшей контрастности. Классы Tailwind /10 и /20 слишком низкие; используйте /40, /60 или выше.
Помогает ли исправление доступности действительно SEO?
Да. Доступность является фактором ранжирования Google. Сайты с лучшими оценками доступности могут показывать лучшие результаты в поисковой выдаче.
Как мне тестировать исправления локально перед развёртыванием?
Используйте Lighthouse в Chrome DevTools или расширение браузера axe. Запускайте тесты локально для верификации исправлений перед развёртыванием в продакшн.

Сведения для разработчиков

Автор

ZhanlinCui

Лицензия

MIT

Репозиторий

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-performance-seo

Ссылка

main

Структура файлов

📄 SKILL.md