Modern Web Guidance – это набор навыков, которые позволяют агентам программирования использовать знания о веб-платформе, рекомендации и данные о совместимости с браузерами. Это помогает увести ваших агентов кодирования от устаревших шаблонов и вместо этого направить их к решениям, которые используют мощь и возможности современной веб-платформы.
Установка
Modern Web Guidance можно установить и использовать с любым агентом программирования, который поддерживает навыки.
modern-web-guidance CLI (рекомендуется)
Рекомендуемый способ установки – через интерфейс командной строки modern-web-guidance, созданный командой Chrome. Если вы установите Modern Web Guidance через интерфейс командной строки modern-web-guidance, автоматические обновления будут включены. Вы можете установить его из CLI modern-web-guidance следующим образом:
npx modern-web-guidance@latest install
Если вы разрабатываете расширения Chrome, рекомендуем выполнить следующую команду:
npx modern-web-guidance@latest install --choose
Запустится интерактивный мастер, который поможет установить навыки в соответствии с вашими предпочтениями.
Если вы хотите установить Modern Web Guidance без использования CLI modern-web-guidance, следуйте инструкциям ниже. Обратите внимание, что большинство этих вариантов не поддерживают автоматическое обновление.
Antigravity
Скачайте Antigravity и включите modern-web-guidance во время установки или на странице Settings (Настройки) в разделе Customizations (Настройки) > Build with Google Plugins (Плагины Build with Google).
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Найти Modern Web Guidance можно в Менеджере навыков. Для этого выберите Настройки > ИИ-помощник > Навыки. Выберите навык, чтобы открыть страницу с подробными сведениями о нем. Чтобы установить навык, нажмите кнопку Установить. Он будет применен к текущему экземпляру IDE.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Claude Code CLI
Чтобы установить Modern Web Guidance для использования с Claude Code CLI, выполните три шага:
1. Добавьте торговую площадку:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Установите плагин из каталога:
/plugin install modern-web-guidance@googlechrome
3. Перезагрузить плагины:
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
Чтобы установить Modern Web Guidance для использования с Copilot, выполните два шага:
1. Добавьте торговую площадку:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Установите плагин из каталога:
/plugin install modern-web-guidance@googlechrome
Гусь
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Изучите приложение перед установкой
Прежде чем устанавливать библиотеку руководств Modern Web Guidance, вы можете ознакомиться с ней, выполнив поиск по запросу или получив руководства по идентификатору. Для этого используйте команду search в CLI, чтобы найти идентификатор варианта использования с помощью запроса:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
В терминале появится объект JSON:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
Прочитав значения description, вы можете выбрать id, который лучше всего отражает вашу цель, и использовать команду retrieve:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
В этом случае в терминале отобразится руководство по Markdown для сценария использования animate-to-from-top-layer. Для других руководств замените animate-to-from-top-layer на любой действительный идентификатор руководства.
Зачем использовать Modern Web Guidance?
Modern Web Guidance имеет три преимущества для веб-разработчика перед ИИ-моделями, работающими без помощи человека.
- ИИ-агенты для программирования обычно предлагают устаревшие решения для современных проблем веб-разработки. Часто в таких решениях используется JavaScript, чтобы обеспечить функциональность, которую лучше реализовать с помощью современных API CSS и HTML.
- ИИ-модели исторически не знали о последних функциях веб-платформы или имели о них неверную информацию.
- Наконец, модели искусственного интеллекта склонны давать устаревшие рекомендации, которые не учитывают требования проекта или критерии поддержки браузера, а не адаптируют рекомендации к Baseline требованиям данного проекта.
Modern Web Guidance решает эти проблемы и гарантирует, что в вашем рабочем процессе написания кода с помощью ИИ будут инструменты для внедрения новых функций веб-платформы с учетом резервных вариантов.
Что входит в Modern Web Guidance?
Modern Web Guidance содержит рекомендации для более чем 100 сценариев веб-разработки по нескольким основным дисциплинам. По сути, это навык агента, который указывает вашему агенту по программированию, как вызывать CLI modern-web-guidance, чтобы находить и получать лучшие рекомендации для вашего случая использования.
- Удобство для пользователей. Переходы между представлениями, стили CSS
scrollbar-color, анимация при появлении и исчезновении. - CSS: запросы контейнеров, современные цветовые пространства, такие как
oklch, макеты CSS Subgrid,text-wrapи обрезка высоты строки в типографике. - Производительность. Диагностика Interaction to Next Paint (INP),
scheduler.yieldдля разбиения длительных задач, планирование фоновых задач и приоритизация загрузки изображений. - Формы. Поля ввода с автоматическим изменением размера (
field-sizing: content) и точные стили проверки с помощью:user-invalid. - Встроенные компоненты интерфейса. Прямое управление диалоговыми окнами, позиционирование привязки CSS для подсказок и
popover. - Специальные возможности. Доступные сообщения об ошибках и управление фокусом клавиатуры.
- Встроенный ИИ. Используйте локальные модели на устройстве (встроенные API для определения языка, краткого пересказа и перевода).
- Ключи доступа. Регистрация, аутентификация и управление ключами доступа.
Ниже приведены некоторые из них. Вы также можете посмотреть полный список руководств.
Контрольное значение
Baseline помогает разработчикам понять, какие веб-функции совместимы с основными браузерными движками. Если веб-функция входит в Baseline, вы можете быть уверены в ее совместимости с браузерами. Веб-функции делятся на три категории, определенные Baseline:
- Ограниченная доступность означает, что функция несовместима.
- Новые – функции, которые стали совместимыми в течение последних 30 месяцев.
- Широко доступно означает, что функция совместима с другими браузерами не менее 30 месяцев.
Baseline – это не только определение совместимости веб-функций, но и настраиваемый аспект вашего проекта. Вы можете выбрать целевую версию Baseline, а затем настроить проект для ее использования, добавив ее в файл AGENTS.md или CLAUDE.md, например:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance и резервные функции
В Modern Web Guidance используется множество современных веб-технологий. Некоторые из них могут быть недавно или широко доступны в Baseline, а некоторые – иметь ограниченную доступность. Если функция не является широкодоступной, в руководствах по вариантам использования агенты найдут инструкции о том, как обеспечить совместимость с браузерами, которые не поддерживают эту функцию. Во многих случаях резервные варианты реализуются как прогрессивные улучшения, когда современная функция может использоваться везде, где она поддерживается. Если для неподдерживаемых браузеров нужны полифилы, агенты всегда получают инструкции загружать их условно, чтобы они использовались только при необходимости.
Как обеспечивается точность?
Каждый вариант использования в Modern Web Guidance содержит набор оценок, которые постоянно калибруются для обеспечения качества выходных данных.
Для оценки вариантов использования запускается автоматизированный контроль качества, который проверяет правильность поведения агента. При этом центральную роль играет Playwright:
- Для каждого руководства разрабатывается скрипт Playwright, который проверяет, соблюдаются ли требования, например используется ли
@media (prefers-reduced-motion: reduce), если это необходимо. - Эти скрипты Playwright постоянно калибруются по "правильной" эталонной демореализации, которая ожидает 100 % успешных прохождений. С другой стороны, скрипты проверяют намеренно ошибочную реализацию, которая ожидает 0 % успешных прохождений.
- Если "правильная" или намеренно ошибочная реализация не дает 100 % и 0 % успешных результатов соответственно, генератор автоматически повторяет попытку, используя контекст, пока не будет достигнута 100 % калибровка.
- Наконец, выполняется сквозная оценка базового приложения. Одна из оценок – контрольная, без подсказок. В ней используются данные для обучения по умолчанию, а Modern Web Guidance не вызывается для выполнения задачи. Другая оценка (эксперимент) решает ту же задачу с помощью Modern Web Guidance.
Мы проводим оценки несколько раз в неделю, используя современные модели и агентов программирования. Это позволяет нам четко понимать, насколько хорошо агенты справляются с задачами как с нашими подсказками, так и без них. По предварительным данным, агенты, использующие Modern Web Guidance, в среднем на 37 процентных пунктов лучше соблюдают современные рекомендации. Однако результаты могут отличаться в зависимости от требований проекта, модели, написанных вами запросов и предпочитаемых вами инструментов агентного программирования.
Включить подсказки для нестабильных функций
Нестабильные функции – это экспериментальные веб-функции, реализованные только в одном движке браузера и подверженные критическим изменениям. Чтобы включить рекомендации для этих функций, выполните следующую команду в корневом каталоге проекта:
npx modern-web-guidance@latest set-allow-volatile-features
Включить подсказки для функций в эксперименте с источником
Когда экспериментальные функции только появляются, они обычно скрыты за флагом или доступны на рабочих сайтах только в рамках экспериментов с источником. Некоторые руководства Modern Web Guidance используют эти функции, но инструкции по ним по умолчанию недоступны вашему агенту по программированию. Чтобы получить инструкции по этим функциям, выполните в корневом каталоге проекта следующую команду:
npx modern-web-guidance@latest set-allow-origin-trials
Дальнейшие действия
Теперь вы знаете, что такое Modern Web Guidance и как этот инструмент помогает применять современные рекомендации по веб-разработке в рабочих процессах с использованием ИИ. Теперь вы можете изучить руководства, предоставленные Modern Web Guidance.