Modern Web Guidance - Навыки для современных веб-практик в кодинг-агентах
Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives
Modern Web Guidance — это набор навыков, который встраивает экспертизу веб-платформы, лучшие практики и данные о совместимости браузеров прямо в ваши кодинг-агенты. Проект, поддерживаемый командами Google Chrome, Microsoft Edge, Mozilla Firefox и MDN, помогает агентам избегать устаревших паттернов и использовать современные возможности веба, такие как View Transitions, Container Queries, Popover API и другие. Установка через npx modern-web-guidance@latest install добавляет в контекст агента токен-эффективные руководства, охватывающие 250 современных функций и 203 реальных сценария использования. Инструмент также позволяет сканировать кодовую базу на предмет легаси-паттернов и предлагать их современные аналоги.
Modern Web Guidance устраняет разрыв между устаревшими паттернами в обучающих данных LLM и современными возможностями веб-платформы, направляя ваших кодинг-агентов к созданию более легкого, производительного и доступного кода.
- surround
Вот список браузерных фич, которые навыки будут предлагать вашему агенту использовать, — они стабильны в Chrome, но не поддерживаются в Firefox и Safari:
CSS @function
CSS calc-size()
CSS interpolate-size
CSS corner-shape
CSS border-shape
CSS flex-wrap: balance
CSS text-fit
CSS text-decoration-skip-spaces
CSS scroll-axis-lock
CSS scroll-target-group
CSS :target-current
CSS scroll-initial-target
CSS container scroll-state queries
событие scrollsnapchange
событие scrollsnapchanging
HTML focusgroup
Element.startViewTransition()
CSS view-transition-scope
Interest Invokers (interestfor)
LanguageModel (Prompt API)
LanguageDetector
Translator
Summarizer API
Window.fetchLater()
Speculation Rules API
Long Animation Frames API
VisibilityStateEntry
PerformanceSoftNavigation
InteractionContentfulPaint
Connection-Allowlist
модификатор CSS url() integrity()
HTML meta name="text-scale"
HTML template for
HTML processing instructions
PasswordCredential
scroll-методы, возвращающие Promise
Web App Origin Migration
разрешения Local Network Access
Request.targetAddressSpace
событие beforeinstallprompt
Справедливости ради, навыки также рекомендуют ~11 фич, которые не поддерживаются самим Chrome. И проект, похоже, озабочен совместимостью: «Направляем модели использовать разумные, лёгкие фолбэки».
- simonw
Предложение по распространению: в дополнение к npm-пакетам, которые у вас уже есть, настройте GitHub Pages, чтобы публиковать markdown-индекс навыков по адресу https://googlechrome.github.io/modern-web-guidance-src/skill... (сейчас там 404)
Эта индексная страница должна ссылаться на обычные markdown-версии всех документов и быть рассчитанной на поиск через grep, чтобы находить нужные ответы.
Так мне вообще не придётся ничего устанавливать — при условии, что мой агент умеет делать HTTP-запросы, я могу сказать ему: «Поищи советы на https://googlechrome.github.io/modern-web-guidance-src/skill...», и он загрузит индекс, а затем перейдёт к самым релевантным документам — без MCP, npm и установки вообще.
- advisedwang
У Chrome и так слишком много власти в мире браузерных стандартов. Меньше всего нам нужно, чтобы LLM всех подряд следовали рекомендациям команды Chrome о том, как делать веб-разработку. Эта дорога ведёт обратно к «Чтобы просмотреть этот сайт, откройте его в [ДОМИНИРУЮЩЕМ БРАУЗЕРЕ]».
- chalmovsky
Потрясающе! Я как раз пишу статью о том, как цитата Алекса Рассела про «React — это устаревшая технология», к сожалению, была полностью проигнорирована.
И тут это просто свалилось мне в руки! Некоторые аргументы, которые я хотел привести, кажется, здесь уже есть. Не было возможности как следует посмотреть, но выглядит очень многообещающе и классно!
Спасибо!
- flossly
Я предпочитаю держать свои шаблоны на компилируемом языке: не передавать map строк в строку с точками интерполяции, а по-настоящему «просто код», в котором я определяю HTML-билдеры, комбинируя шаблоны/лейауты/компоненты в том же «просто коде».
Вроде HtmlFlow (Java/Kotlin) или kotlinx.html.
Вместе с этим подходом я выбираю Tailwind и Alpine.js, потому что: я хочу SSR-first (с небольшими улучшениями на JS там, где они важнее всего), то есть НЕ SPA, я хочу, чтобы стилизация была рядом с HTML-кодом, который стилизуется (не нужно сопоставлять определение CSS и его использование), а ещё я предпочитаю держать свои крошечные кусочки JS рядом с HTML, с которым они работают (Alpine делает это простым и даёт понятный путь для реализации 99% моих нужд в JS).
Как и у всех, LLM пишет это за меня :) Но результат легко осмыслить и мне самому, и моей LLM. Немного ванильного JS. Никакого jQuery. В основном просто привязанные к HTML инструкции Alpine. И Tailwind повсюду. Так я могу посмотреть в одно место, чтобы увидеть, как это работает: или CTRL-кликнуть, чтобы добраться до него.
- phyzix5761
«Лучшие практики» в эпоху ИИ практически умерли. Скоро никто не будет читать код, который производит ИИ, и это пугающая мысль.
- bakkoting
Но как? Надеюсь, создание issue в репозитории modern-web-guidance-src — правильное место? В общем, я создал один насчёт использования fromBase64 и toBase64 вместо atob и btoa.
Но раз уж вы всё равно полностью за агентов, вам стоит подумать о том, чтобы один из них просмотрел хотя бы все коммиты в спецификации JS, DOM и HTML за последние 3–5 лет и автоматически отсортировал те, что явно являются улучшениями и не используются агентами. Было бы довольно просто.
---
Кстати, я думаю, было бы очень полезно автоматически предоставлять версии этого в зависимости от того, на какие браузеры вы ориентируетесь. Я, например, не хочу использовать ничего, что не было доступно во всех evergreen-браузерах хотя бы год; думаю, у большинства разработчиков похожий стандарт, или по крайней мере они не хотят использовать самое передовое. И хотя получить это из вашего репозитория _возможно_, это требует некоторых усилий — либо написать скрипт, либо позволить агенту использовать собственное суждение для каждой фичи. Это работа, которую вы могли бы сделать на своей стороне и избавить остальных нас от необходимости.
- internet2000
НЕТ, СПАСИБО. Не хочу, чтобы мои агенты способствовали монокультуре Chrome. Chrome — это новый IE6.