modern-web-guidance
Инструмент поиска лучших практик современной веб-разработки. Обязателен к первому запуску для задач с HTML, CSS и JS, так как веб-API быстро устаревают. Актуален для UI, анимаций, производительности (CWV) и новых API.
AIgooglechrome
official
Разработка
★ 2.4k
Что делает навык
Инструмент для поиска актуальных лучших практик веб-разработки и получения руководств по их реализации. Помогает избегать устаревших решений, ad-hoc кода и ненужных зависимостей, обеспечивая соответствие современным стандартам браузера.
Когда применять
- Начало реализации любой веб-функции или компонента
- Проверка наличия стандартизированных паттернов перед созданием нового компонента
- Избегание реализации нестандартных решений или загрузки крупных зависимостей
- Верификация соответствия кода извлеченным руководствам перед завершением задачи
Как работает
- Выполнить поиск по запросу с помощью команды npx -y modern-web-guidance@latest search "<query>" --skill-version 2026_09_04-7de96777
- При неясных результатах или низком сходстве выполнить команду list для просмотра всех руководств
- Извлечь полное руководство по найденным id с помощью команды retrieve "<id>"
- При обрезанном выводе повторить команду с перенаправлением в файл и прочитать его
- Сопоставить сгенерированный код с извлеченным руководством, применяя современные паттерны и необходимые fallback-стратегии
- Убедиться, что реализация полностью удовлетворяет запрос пользователя и соответствует политике поддержки браузеров
Примеры запросов агенту
Реализуй кнопку с анимацией нажатия, используя современные CSS-свойства
Оптимизируй приоритет загрузки изображений для Largest Contentful Paint
Создай компонент, откладывающий рендеринг тяжелого контента за пределами экрана
Что понадобится
- Доступ к сети для загрузки и выполнения пакета через npx или pnpx
- Разрешение на выполнение команды npx -y modern-web-guidance@latest * (или pnpx) в разрешенных списках
- Настройка переменной окружения NPM_CONFIG_CACHE=/tmp/npm-cache в средах с ограниченным доступом к ~/.npm
Описание составлено по SKILL.md навыка, сверено 07.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «modern-web-guidance» из репозитория:
# https://github.com/googlechrome/modern-web-guidance
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r modern-web-guidance/ ~/.claude/skills/modern-web-guidance/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.