Modern Web Guidance



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

Установка с помощью интерфейса командной строки modern-web-guidance (рекомендуется)

npx modern-web-guidance@latest install
Начать Посмотреть на GitHub

Работает с вашим любимым ИИ-агентом программирования

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

Установите Modern Web Guidance в проект, используя навыки агента Vercel:

npx skills add GoogleChrome/modern-web-guidance

Установите Modern Web Guidance из плагинов Claude Code:

claude plugin install modern-web-guidance@claude-plugins-official

Установите навыки Modern Web Guidance для Copilot CLI:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Установите навыки Modern Web Guidance для Antigravity CLI:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Посмотрите сеанс Modern Web Guidance на Google I/O, чтобы узнать больше о навыках и о том, как они улучшают рабочий процесс веб-разработки с помощью ИИ.
Смотреть

Подсказки для улучшения пользовательского опыта

Попробуйте несколько примеров запросов, чтобы вызвать Modern Web Guidance в рабочем процессе программирования с помощью ИИ для создания новых функций, модернизации устаревшего кода и ускорения работы приложения. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Узнайте, как направлять ИИ-помощников разработчика, чтобы они создавали современный и совместимый веб-код. В этой практической работе вы проверите устаревшее веб-приложение и с помощью инструмента Modern Web Guidance подскажете агентам, как использовать современные рекомендации. Узнайте, как задавать целевые браузеры Baseline, оптимизировать Core Web Vitals и превращать стандартные результаты ИИ в высокоэффективные веб-решения.
Начать
Используйте инструменты разработчика Chrome для агентов вместе с навыками Modern Web Guidance, чтобы улучшить рабочий процесс веб-разработки. Проводите аудит производительности в реальном времени, проверяйте деревья специальных возможностей и записывайте журналы консоли, а затем автоматически применяйте точные исправления кода для современных веб-страниц.
Подробнее

Узнайте, как сделать Google Карты лучше

У вас есть идеи, как улучшить Modern Web Guidance? Узнайте, как внести свой вклад.
Подробнее