Начало работы с Modern Web Guidance

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

Установка

Modern Web Guidance можно установить и использовать с любым агентом программирования, который поддерживает навыки.

Рекомендуемый способ установки – через интерфейс командной строки modern-web-guidance, созданный командой Chrome. Если вы установите Modern Web Guidance через CLI 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 дает веб-разработчикам преимущество перед ИИ-моделями без поддержки по трем причинам:

  1. ИИ-агенты для программирования обычно предлагают устаревшие решения для современных проблем веб-разработки. Часто в таких решениях используется JavaScript, чтобы обеспечить функциональность, которую лучше реализовать с помощью современных API CSS и HTML.
  2. Модели ИИ исторически не знали о последних функциях веб-платформы или имели неверную информацию о них.
  3. Наконец, модели искусственного интеллекта склонны давать устаревшие рекомендации, которые не учитывают требования проекта или критерии поддержки браузера, а не адаптируют рекомендации к Baseline требованиям данного проекта.

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

Что входит в Modern Web Guidance?

Modern Web Guidance включает рекомендации для более чем 100 сценариев веб-разработки в нескольких основных дисциплинах. По сути, это навык агента, который указывает вашему агенту по программированию, как вызывать CLI modern-web-guidance, чтобы находить и получать лучшие рекомендации для вашего случая использования.

  • Удобство для пользователей. Переходы между страницами, стили CSS scrollbar-color, а также анимация при появлении и исчезновении.
  • CSS: запросы контейнеров, современные цветовые пространства, такие как oklch, макеты подсеток CSS, 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:

  1. Для каждого руководства разрабатывается скрипт Playwright, который проверяет, соблюдаются ли требования, например используется ли @media (prefers-reduced-motion: reduce) там, где это необходимо.
  2. Эти скрипты Playwright постоянно калибруются по "правильной" эталонной демореализации, которая ожидает 100% успешных прохождений. С другой стороны, скрипты проверяют намеренно ошибочную реализацию, которая должна дать 0% успешных результатов.
  3. Если "правильная" или намеренно ошибочная реализация не дает 100% и 0% успешных результатов соответственно, генератор автоматически повторяет попытку, используя контекст, пока не будет достигнута 100% калибровка.
  4. Наконец, выполняется сквозная оценка базового приложения. Одна из оценок – контрольная, без подсказок. В ней используются данные для обучения по умолчанию, а Modern Web Guidance не вызывается. Другая оценка (эксперимент) решает ту же задачу с помощью Modern Web Guidance.

Мы проводим оценку несколько раз в неделю, используя современные модели и агентов программирования. Это позволяет нам четко понимать, насколько хорошо агенты справляются с задачами как с нашими подсказками, так и без них. Первые результаты показывают, что агенты, использующие Modern Web Guidance, в среднем на 37 процентных пунктов лучше соблюдают современные рекомендации. Однако результаты могут различаться в зависимости от требований проекта, модели, написанных вами запросов и предпочитаемых вами инструментов агентного программирования.

Дальнейшие действия

Теперь вы знаете, что такое Modern Web Guidance и как этот инструмент может помочь вам применять современные рекомендации по веб-разработке в рабочих процессах с использованием ИИ. Теперь вы можете изучить руководства, предоставленные Modern Web Guidance.