Web Quality Skills

Неофициальная комплексная коллекция Agent Skills для оптимизации веб-проектов на основе рекомендаций Google Lighthouse и лучших практик Core Web Vitals.

Не привязан к стеку. Работает с любым фреймворком: React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, чистым HTML и другими.

Зачем нужны web-quality-skills?

Если руководства по интерфейсам объясняют что строить, то Web Quality Skills объясняют как строить это производительно, доступно и оптимально для поисковых систем. Навыки аккумулируют коллективный опыт из:

• 150+ аудитов Lighthouse по категориям Performance, Accessibility, SEO и Best Practices
• Паттернов оптимизации Core Web Vitals (LCP, INP, CLS)
• Практического опыта performance-инжиниринга
• Стандартов доступности WCAG 2.2
• Современных требований SEO

Доступные навыки

Навык	Описание	Когда использовать
web-quality-audit	Комплексная проверка качества по всем категориям	«Проверь мой сайт», «Ревью на качество», «Аудит веб-качества»
performance	Скорость загрузки, эффективность выполнения, оптимизация ресурсов	«Оптимизируй производительность», «Ускорь сайт», «Исправь медленную загрузку»
core-web-vitals	Оптимизация LCP, INP, CLS	«Улучши Core Web Vitals», «Исправь LCP», «Снизь CLS»
accessibility	Соответствие WCAG, поддержка скринридеров, навигация с клавиатуры	«Улучши доступность», «Аудит WCAG», «Ревью a11y»
seo	Поисковая оптимизация, индексируемость, структурированные данные	«Оптимизируй под SEO», «Улучши позиции в поиске», «Исправь мета-теги»
best-practices	Безопасность, современные API, паттерны качества кода	«Применить лучшие практики», «Аудит безопасности», «Ревью качества кода»

Быстрый старт

Установка

add-skill — мощный CLI-инструмент для установки agent skills на ваших coding-агентов из git-репозиториев. Поддерживает OpenCode, Claude Code, Codex и Cursor. Позволяет автоматизировать release notes, создавать pull requests, интегрироваться с внешними инструментами и многое другое.

npx skills add addyosmani/web-quality-skills

или

npx add-skill addyosmani/web-quality-skills

Или вручную:

cp -r skills/* ~/.claude/skills/

claude.ai

Добавьте навыки в базу знаний проекта или вставьте содержимое SKILL.md в диалог.

Использование

Навыки активируются автоматически, когда запрос соответствует их описанию. Примеры:

Проверь эту страницу на проблемы с веб-качеством Оптимизируй производительность и исправь Core Web Vitals Проверь доступность и предложи улучшения Подготовь это к SEO

Описание навыков

web-quality-audit

Комплексный навык, оркестрирующий все остальные. Используйте для полного аудита сайта или когда неясно, какая именно область требует внимания.

Фразы-триггеры: «проверь мой сайт», «ревью качества», «аудит lighthouse», «проверь веб-качество»

Что проверяет:

• Все метрики Core Web Vitals
• 50+ паттернов производительности
• 40+ правил доступности
• 30+ требований SEO
• 20+ паттернов безопасности и лучших практик

performance

Глубокий анализ и оптимизация производительности загрузки и выполнения.

Фразы-триггеры: «ускорь», «оптимизируй производительность», «сократи время загрузки», «исправь медленную работу»

Ключевые оптимизации:

• Критический путь рендеринга
• Бандлинг JavaScript и code splitting
• Оптимизация изображений (форматы, размеры, lazy loading)
• Стратегии загрузки шрифтов
• Кэширование и предзагрузка
• Оптимизация ответа сервера

core-web-vitals

Специализированный навык для трёх Core Web Vitals, влияющих на ранжирование в Google Search.

Фразы-триггеры: «Core Web Vitals», «LCP», «INP», «CLS», «page experience»

Охватываемые метрики:

• LCP (Largest Contentful Paint) < 2.5s
• INP (Interaction to Next Paint) < 200ms
• CLS (Cumulative Layout Shift) < 0.1

accessibility

Комплексный аудит доступности по рекомендациям WCAG 2.2.

Фразы-триггеры: «доступность», «a11y», «WCAG», «скринридер», «навигация с клавиатуры»

Категории:

• Воспринимаемость (текстовые альтернативы, субтитры, контрастность)
• Управляемость (клавиатура, тайминг, защита от эпилепсии, навигация)
• Понятность (читаемость, предсказуемость, помощь при вводе)
• Надёжность (совместимость со вспомогательными технологиями)

seo

Поисковая оптимизация для улучшения видимости и позиций в выдаче.

Фразы-триггеры: «SEO», «поисковая оптимизация», «мета-теги», «структурированные данные», «sitemap»

Что охватывает:

• Техническое SEO (индексируемость, обходимость)
• On-page SEO (мета-теги, заголовки, структура контента)
• Структурированные данные (JSON-LD, schema.org)
• Мобильная адаптация
• Сигналы производительности

best-practices

Современные стандарты веб-разработки и практики безопасности.

Фразы-триггеры: «лучшие практики», «аудит безопасности», «современные стандарты», «качество кода»

Охватываемые области:

• HTTPS и заголовки безопасности
• Современные JavaScript API
• Совместимость с браузерами
• Обработка ошибок
• Чистота консоли

Справочник пороговых значений

Core Web Vitals

Метрика	Хорошо	Требует улучшения	Плохо
LCP	≤ 2.5s	2.5s – 4.0s	> 4.0s
INP	≤ 200ms	200ms – 500ms	> 500ms
CLS	≤ 0.1	0.1 – 0.25	> 0.25

Рекомендации по performance budget

Тип ресурса	Бюджет
Общий вес страницы	< 1.5 MB
JavaScript	< 300 KB (сжатый)
CSS	< 100 KB (сжатый)
Изображения	< 500 KB суммарно выше fold
Шрифты	< 100 KB
Сторонние ресурсы	< 200 KB

Целевые показатели Lighthouse

Категория	Целевой балл
Performance	≥ 90
Accessibility	100
Best Practices	≥ 95
SEO	≥ 95

Примечания по фреймворкам

Навыки не привязаны к конкретному фреймворку, однако содержат специфические рекомендации для популярных стеков, включая React, Vue, Angular, Svelte, Next.js, Nuxt и Astro.