Modern Web Guidance — скиллы от Google Chrome, которые учат кодинг-агентов современному вебу

Команды Google Chrome и Microsoft Edge вместе с веб-сообществом выпустили Modern Web Guidance — набор скиллов, которые встраивают в кодинг-агентов экспертизу по современным возможностям веб-платформы. Проект распространяется по лицензии Apache-2.0, собрал уже более 2000 звёзд на GitHub и находится в статусе preview-релиза.

Зачем это нужно

Кодинг-агенты регулярно скатываются в устаревшие паттерны: обучающие данные LLM переполнены legacy-кодом, поэтому модель генерирует раздутый JavaScript там, где платформа давно предлагает нативное, производительное решение. Даже если модель знает о существовании API, ей часто не хватает плотности реальных современных паттернов, необходимых для production-кода.

Modern Web Guidance закрывает этот разрыв. CLI скилла возвращает адресные, составленные экспертами рекомендации прямо в контекстное окно агента, с фокусом на три вещи:

• Современные браузерные API — помощь моделям в корректном структурировании API, которые они часто используют неправильно.
• Производительность и доступность — приоритет платформенным API, которые браузер может оптимизировать и в которых уже есть встроенные механизмы доступности.
• Ответственные фолбэки — лёгкие, ситуативные решения вместо тяжёлых полифилов и legacy-библиотек.

Что внутри

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

Покрытие по дисциплинам:

• User Experience — плавные визуальные состояния: View Transitions, анимации входа и выхода, параллакс-скролл, CSS scrollbar-color.
• CSS Layout — современные раскладки: container queries, subgrid, цветовые пространства вроде oklch, тонкая настройка text-wrap.
• Performance — мгновенная предзагрузка, диагностика Interaction to Next Paint (INP), планирование задач через scheduler.yield.
• Forms & UI — нативные компоненты: Anchor Positioning для тултипов, Popover API, диалоги, валидация через :user-invalid, авторазмер полей.
• Accessibility — работа скринридеров и клавиатурная навигация, обнаруживаемость контента.
• Built-in AI — локальные клиентские модели: нативные API перевода, суммаризации и определения языка.

В сумме это 108 современных функций платформы (54 в CSS и раскладках, 21 в HTML и DOM, 33 в JavaScript и API) и 135 практических руководств под реальные задачи разработчиков — от анимации переходов между состояниями до passkey-аутентификации, приватности и WebMCP. Пример такого руководства — navigation-drawer: выдвижная навигационная панель на нативных оверлеях.

Отдельный блок — безопасное внедрение современных функций:

• Progressive enhancement — различие между чисто аддитивными улучшениями (спекулятивная предзагрузка), которые старые браузеры молча игнорируют, и критичным поведением (управление диалогами, сетевые beacon), где нужны продуманные фолбэки.
• Лёгкие фолбэки — приоритет компактным решениям до 50 строк или условно загружаемым полифилам вместо тяжёлых сторонних бандлов.
• Подводные камни — документирование скрытых ограничений платформы: квота 64KB у fetchLater(), специфика скроллбаров на macOS.
• Baseline-данные — интеграция с проектом Baseline: агент адаптируется к актуальной поддержке функций браузерами.

Как это работает

Механика из трёх шагов:

1. Активация — агент активирует скилл modern-web-guidance, когда задача релевантна, и получает инструкцию обращаться к его CLI для запросов о веб-платформе.
2. Локальный семантический поиск — агент запускает search с запросом; инструмент сопоставляет его с лучшим руководством через офлайн-модель на TensorFlow.js. Без сетевых запросов и API-ключей.
3. Получение руководства — команда retrieve <guide-id> вставляет в контекстное окно агента адресные паттерны кода, подводные камни и фолбэки.

Пакет самодостаточен: без лишних зависимостей, что обеспечивает и низкую задержку, и защиту от supply-chain атак.

Установка

Основной способ — интерактивный мастер установки:

npx modern-web-guidance@latest install

Без установки можно просто попробовать:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

Есть и альтернативные способы под конкретные агенты:

# Claude Code / GitHub Copilot CLI
/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome

Также поддерживаются Vercel Skills CLI (npx skills add), GitHub CLI (gh skill install), OpenAI Codex, Google Antigravity, Grok Build CLI и Kimi Code. Обновление после установки через npx — npx modern-web-guidance@latest update.

Доступны два скилл-пака, выбор — через флаг --choose:

• modern-web-guidance (~234 токена) — общий пакет по браузерным API, раскладкам и производительности.
• chrome-extensions (~181 токен) — Manifest V3, background-воркеры, API расширений и публикация в Chrome Web Store.

Проверено эвалами

Проект не полагается на ощущение «стало лучше», а меряет. Автоматизированный конвейер валидации работает в замкнутом цикле:

• смоделированные задачи разработчика без упоминания конкретных API — проверяется, находит ли агент нужные руководства сам;
• браузерные ассерты через Playwright: точное поведение в рантайме, computed styles, состояния доступности;
• самокалибрующиеся грейдеры против эталонной реализации (цель — 100% прохождение) и контрольной страницы (цель — 0%);
• E2E-сравнение агентов с руководством и без него: ключевые метрики — opportunity (сколько можно улучшить) и uplift (сколько реально улучшилось).

Свежие результаты показывают стабильный рост: claude_code на sonnet-5 — с 54% до 87% (+33 п.п.), antigravity на gemini-3.8-flash-medium — с 65% до 91% (+26 п.п.), codex_cli на gpt-5.6-sol — с 59% до 81% (+22 п.п.). Если uplift маленький, значит модель и так справляется — такое руководство пересматривают.

Приватность

Google собирает анонимную телеметрию: количество установок, ID полученных руководств и поисковые запросы, сгенерированные агентом. Сырые пользовательские промпты не собираются. Что именно отправляется, можно посмотреть в исходном коде — сам репозиторий modern-web-guidance является только целью публикации для чистой установки скиллов, разработка идёт в отдельном репозитории.

Отключить телеметрию можно переменной окружения:

export DISABLE_TELEMETRY=1

Итог

Modern Web Guidance — редкий случай, когда экспертиза платформы упакована в формат, который агент реально использует: поиск по 135 руководствам офлайн, вставка в контекст ровно того, что нужно, и эвалы, доказывающие эффект. Для тех, кто пишет веб-код с помощью агентов, это один из самых дешёвых способов поднять качество генерации.