Modern Web Guidance — это навык агента, который применяет современные лучшие практики к вашему рабочему процессу кодирования с помощью ИИ. Он помогает направлять вашего агента кодирования от устаревших обходных путей для распространенных проблем веб-разработки к решениям, которые должны использовать более новые возможности веб-платформы.
Установка
Современные навыки веб-подсказок можно установить в самые разные агенты, что позволяет сохранить предпочитаемый рабочий процесс, одновременно получая выгоду от предоставляемых ими подсказок.
Инструмент командной строки modern-web-guidance (рекомендуется)
Рекомендуемый способ установки — через CLI modern-web-guidance разработанный командой Chrome. Установка навыков через 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 и включите параметр "modern-web-guidance" во время установки или на странице настроек в разделе "Настройка" , затем "Создать с помощью плагинов Google" .
Антигравитационный 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
Кодекс Клода
Установка Modern Web Guidance для использования с Claude Code состоит из трех шагов:
1. Добавьте маркетплейс:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Установите плагин из магазина приложений:
/plugin install modern-web-guidance@googlechrome
3. Перезагрузка плагинов:
/reload-plugins
Интерфейс командной строки второго пилота
Установка 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
Перед установкой проверьте все параметры.
Перед установкой ознакомьтесь с библиотекой руководств по современным веб-технологиям, выполнив поиск по запросу или получив наши руководства по идентификатору. Для этого используйте команду search в командной строке, чтобы найти идентификатор варианта использования, используя подсказку:
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":"user-experience","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":"user-experience","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":"user-experience","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?
Современные навыки веб-разработки предоставляют веб-разработчику преимущества перед моделями искусственного интеллекта без посторонней помощи по трем основным причинам:
- Агенты ИИ в программировании, как правило, по умолчанию используют устаревшие решения для современных задач веб-разработки. Эти решения часто содержат JavaScript для обеспечения функциональности, которая лучше решается с помощью современных API CSS и HTML.
- Исторически сложилось так, что модели искусственного интеллекта либо не знали о новейших функциях веб-платформ, либо обладали неверной информацией о них.
- Наконец, модели ИИ, как правило, дают устаревшие рекомендации, которые не учитывают требования проекта или критерии поддержки браузеров, вместо того чтобы адаптировать рекомендации к базовым требованиям конкретного проекта.
Современные навыки веб-разработки устраняют эти недостатки и гарантируют, что ваш рабочий процесс кодирования с использованием ИИ будет иметь инструменты для предварительного внедрения новых функций веб-платформы — с учетом резервных вариантов.
Что содержится в руководстве по современной веб-разработке?
Modern Web Guidance включает в себя лучшие практики для более чем 100 сценариев веб-разработки в различных ключевых областях. По сути, это единый навык агента, который инструктирует вашего агента кодирования, как вызвать CLI modern-web-guidance , чтобы найти и получить лучшие рекомендации для вашего сценария использования.
- Пользовательский опыт: Анимация перехода между окнами, стилизация
scrollbar-colorCSS, а также анимация входа и выхода. - CSS: запросы контейнеров, современные цветовые пространства, такие как
oklch, CSS-подсетка,text-wrapи обрезка межстрочного интервала в типографике. - Производительность: диагностика взаимодействия с функцией 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 uses a wide array of modern web features. Some of these might be Baseline Newly or Widely available, but some might be Limited availability. In cases where a feature isn't Widely available, use case guides provide agents with specific instructions on how to ensure broader compatibility in browsers that don't support the feature. In many cases, fallbacks are implemented as progressive enhancements where the modern feature is able to be used wherever it's supported. If a polyfill is needed for unsupported browsers, agents are always instructed to load them conditionally so they only incur a cost where necessary.
Как обеспечивается точность?
В руководстве по современным веб-технологиям каждый сценарий использования содержит инструкцию, и большинство сценариев постоянно корректируются, чтобы направлять работу агентов ИИ к получению качественных результатов.
В калиброванных сценариях использования применяется автоматизированная система контроля качества для проверки корректности поведения агента, при этом центральную роль играет Playwright :
- Для каждого руководства разрабатывается сценарий Playwright для проверки соблюдения деталей реализации руководства — например, было ли указано
@media (prefers-reduced-motion: reduce)там, где это требуется. - Эти сценарии Playwright постоянно калибруются по отношению к «правильной» эталонной демонстрационной реализации, которая ожидает 100% успешного прохождения. С другой стороны, сценарии проверяются по отношению к намеренно некорректной реализации, которая ожидает 0% успешного прохождения.
- Если ни одна из «правильных» и намеренно ошибочных реализаций, ни одна из них не обеспечивают 100% и 0% успешного прохождения теста соответственно, генератор автоматически повторяет попытку, используя контекст, до тех пор, пока не будет достигнута 100% калибровка.
- Наконец, проводится сквозная оценка базового приложения. Одна из этих оценок является контрольной, без использования инструментов веб-разработки, с применением стандартных обучающих данных без вызова навыков веб-разработки для выполнения задачи. Другая оценка (эксперимент) решает ту же задачу с использованием навыков веб-разработки.
Our evals run daily with state-of-the-art models and coding agents, giving us a clear picture of how well agents perform with and without our guidance. On average, early results show a 37 percentage point improvement in adherence to modern best practices when agents are equipped with Modern Web Guidance. However, your results may vary depending on your project requirements, model, the prompts you write, and your preferred agentic coding tools.
Следующие шаги
Теперь у вас есть общее представление о Modern Web Guidance и о том, как он может упростить внедрение лучших практик современного веб-разработки в ваш рабочий процесс кодирования ИИ. Теперь вы можете изучить навыки и примеры использования, предоставляемые Modern Web Guidance.