Современные рекомендации по веб-разработке — это набор навыков, которые внедряют экспертные знания о веб-платформах, лучшие практики и данные о совместимости с браузерами непосредственно в ваши агенты разработки. Это помогает направлять ваших агентов разработки от устаревших шаблонов к решениям, использующим возможности современной веб-платформы.
Установка
Modern Web Guidance можно установить и использовать с любым агентом программирования, поддерживающим навыки.
Инструмент командной строки modern-web-guidance (рекомендуется)
Рекомендуемый способ установки — через интерфейс командной строки modern-web-guidance разработанный командой Chrome. Установка Modern Web Guidance через modern-web-guidance CLI включит автоматические обновления. Вы можете установить его из modern-web-guidance CLI следующим образом:
npx modern-web-guidance@latest install
В качестве дополнительной опции, если вы разрабатываете расширения для Chrome, мы рекомендуем использовать следующую команду:
npx modern-web-guidance@latest install --choose
Это запустит интерактивный мастер для установки навыков в соответствии с вашими предпочтениями.
Если вы предпочитаете установить Modern Web Guidance без использования интерфейса командной строки 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
Перед установкой проверьте все параметры.
Evaluate the Modern Web Guidance guide library prior to installation by searching with a query or retrieving our guides by ID. To do this, use the CLI's search command to find the use case ID using a prompt:
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 устраняет эти недостатки и гарантирует, что ваш рабочий процесс кодирования с использованием ИИ будет иметь инструменты для предварительного внедрения новых функций веб-платформы — с учетом резервных вариантов.
Что содержится в руководстве по современной веб-разработке?
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...>
Современные рекомендации по веб-разработке и резервные варианты функций.
В руководстве по использованию современных веб-технологий используется широкий спектр современных функций веб-разработки. Некоторые из них могут быть базовыми, новыми или широко доступными, а некоторые — ограниченными по доступности. В случаях, когда функция не является широко доступной, руководства по использованию предоставляют агентам конкретные инструкции по обеспечению более широкой совместимости в браузерах, которые не поддерживают эту функцию. Во многих случаях резервные варианты реализуются в виде поэтапных улучшений, позволяющих использовать современную функцию везде, где она поддерживается. Если для неподдерживаемых браузеров требуются полифилы, агентам всегда дается указание загружать их условно, чтобы затраты возникали только там, где это необходимо.
Как обеспечивается точность?
В каждом примере использования в руководстве по современной веб-разработке содержится набор оценок, которые постоянно корректируются для обеспечения высокого качества результата.
В рамках оценки вариантов использования запускается автоматизированная система контроля качества для проверки корректности поведения агента, при этом Playwright играет центральную роль:
- Для каждого руководства разрабатывается сценарий Playwright для проверки соблюдения деталей реализации руководства — например, было ли указано
@media (prefers-reduced-motion: reduce)там, где это требуется. - Эти сценарии Playwright постоянно калибруются по отношению к «правильной» эталонной демонстрационной реализации, которая ожидает 100% успешного прохождения. С другой стороны, сценарии проверяются по отношению к намеренно некорректной реализации, которая ожидает 0% успешного прохождения.
- Если ни одна из «правильных» и намеренно ошибочных реализаций, ни одна из них не обеспечивают 100% и 0% успешного прохождения теста соответственно, генератор автоматически повторяет попытку, используя контекст, до тех пор, пока не будет достигнута 100% калибровка.
- Наконец, проводится сквозная оценка базового приложения. Одна из этих оценок является контрольной, без использования инструментов веб-разработки по умолчанию, с применением стандартных обучающих данных без вызова Modern Web Guidance для выполнения задачи. Другая оценка (эксперимент) решает ту же задачу с использованием Modern Web Guidance.
Наши оценки проводятся несколько раз в неделю с использованием самых современных моделей и программных агентов, что позволяет нам получить четкое представление о том, насколько хорошо агенты работают с нашим руководством и без него. В среднем, предварительные результаты показывают улучшение на 37 процентных пунктов в соблюдении современных передовых методов, когда агенты оснащены современными веб-инструкциями. Однако ваши результаты могут отличаться в зависимости от требований вашего проекта, модели, создаваемых вами подсказок и предпочитаемых вами инструментов для работы с агентами.
Следующие шаги
Теперь у вас есть общее представление о Modern Web Guidance и о том, как он может упростить внедрение лучших практик современного веб-разработки в ваш рабочий процесс кодирования ИИ. Вы можете ознакомиться с дисциплинами и примерами использования, предоставляемыми Modern Web Guidance.