Oleksandr Kuzmenko, РедакторОпубліковано 4 хв читанняЗа участі AI · перевірено редактором
TL;DR
- Запобігає генерації застарілих поліфілів завдяки інтеграції нативних стандартів у контекст моделі.
- Надає CLI для аудиту локального репозиторію на наявність застарілих фронтенд-патернів.
- Оптимізований для економії токенів у контекстних вікнах AI-агентів.
Ключові факти
- Розробники
- Google Chrome, Microsoft Edge, Mozilla Firefox, MDN
- Дистрибуція
- npm / npx CLI (modern-web-guidance)
- Технологічне покриття
- Anchor Positioning, Popover API, subgrid, container queries, scheduler.yield
Усунення застарілих патернів у коді AI-асистентів
Кодингові помічники в Cursor і Claude Code часто спираються на старі підходи, генеруючи масивний JavaScript для функцій, які сучасні браузери підтримують нативно. Проєкт Modern Web Guidance, створений спільними зусиллями команд Google Chrome, Microsoft Edge, Mozilla Firefox та MDN, інтегрує знання актуальних стандартів безпосередньо в роботу агентів.
Економія токенів і фокус на нативних API
Замість перевантаження контекстного вікна розлогими мануалами інструмент надає лаконічні посібники, що мінімізують споживання токенів. Серед охоплених технологій:
- Нативні інтерфейси: Anchor Positioning для підказок, Popover API та модальні елементи
<dialog>. - Сучасний CSS: Container queries, subgrid, простори кольорів
oklchта стан форми:user-invalid. - Продуктивність і клієнтський AI: Планування через
scheduler.yield, аналіз метрики INP та браузерний Prompt API.
Аудит кодової бази через CLI
Розробники можуть запустити перевірку проєкту командою npx modern-web-guidance@latest legacy-scan ., щоб виявити застарілі конструкції, або отримувати окремі специфікації безпосередньо в системні промпти агентів.
Спробуй за 2 хвилини
npx modern-web-guidance@latest legacy-scan .Коли використовувати
- Генерація сучасних адаптивних компонентів за допомогою агентів у Cursor або Claude Code.
- Аудит фронтенд-кодової бази для заміни застарілих поліфілів нативними функціями платформи.
Коли НЕ варто
- Розробка під застарілі браузери чи вбудовані WebView без підтримки сучасних веб-стандартів.
- Бекенд-сервіси на Node.js чи Go, де робота з браузерними API не застосовується.
Що зробити сьогодні
- Виконайте npx modern-web-guidance@latest legacy-scan . у веб-проєкті для виявлення застарілих патернів.
- Додайте відповідні інструкції з посібника до системних правил Cursor або Claude Code.
Назви кроків узяті з блоку «Що зробити сьогодні».
Назви кроків узяті з блоку «Що зробити сьогодні». Виконайте npx modern-web-guidance@latest legacy-scan . у веб-проєкті для виявлення застарілих патернів.. Додайте відповідні інструкції з посібника до системних правил Cursor або Claude Code.
- Виконайте npx modern-web-guidance@latest legacy-scan . у веб-проєкті для виявлення застарілих патернів.
- Додайте відповідні інструкції з посібника до системних правил Cursor або Claude Code.
Що каже спільнота
If created properly, skills are already something like that. You have a front matter summary always available to the agent. The agent can request the full skill content on demand...
If you rename that file to "llms.txt" it'll be a bit more discoverable.