Создавайте веб-сайты, руководствуясь современными стандартами.

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

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

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

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

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

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

npx skills add GoogleChrome/modern-web-guidance

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

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

Установите современные навыки веб-управления для 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 в Gemini CLI:

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

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

Попробуйте несколько из приведенных ниже примеров подсказок, чтобы внедрить современные веб-инструкции в ваш рабочий процесс кодирования с использованием ИИ для создания новых функций, модернизации устаревшего кода и ускорения работы вашего приложения. 
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.

Используйте навыки работы с современными веб-инструментами в Chrome DevTools для агентов.

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

Узнайте, как внести свой вклад.

Есть идеи по улучшению Modern Web Guidance? Узнайте, как вы можете внести свой вклад!
Подробнее