Хотя руководство по современной веб-разработке призвано приблизить вашу разработку к подходу «правильно по умолчанию», вы можете иногда сталкиваться с проблемами активации агента, точностью реализации или обнаружением функций. В этом разделе представлены диагностические шаги, которые помогут вам решить распространенные проблемы, такие как обеспечение правильного запуска навыка современной веб-разработки в ответ на ваши запросы или проверка соответствия резервных вариантов кода установленному базовому статусу вашего проекта. Если вы столкнетесь с постоянными техническими трудностями или обнаружите устаревшие рекомендации, мы рекомендуем вам сообщить о проблеме, чтобы помочь нам поддерживать точность и эффективность этих ресурсов.
Диагностика: Ваш агент не использует Modern Web Guidance.
После установки Modern Web Guidance агентам дается указание использовать его для любых задач веб-разработки. Однако иногда агенты игнорируют эти инструкции.
Вы можете явно указать агенту использовать Modern Web Guidance, добавив в конец запроса фразу типа "use modern-web-guidance".
Некоторые агенты также поддерживают прямой вызов навыка с использованием определенного синтаксиса, например /modern-web-guidance или $modern-web-guidance , в зависимости от агента.
Обратитесь к документации вашего агента или спросите его, как напрямую активировать навык modern-web-guidance если вы не уверены.
Диагностика «галлюцинаторного» кода или предполагаемых реализаций.
Часто случается, что агент без предупреждения заполняет пробелы в знаниях. Чтобы предотвратить самопроизвольное изложение информации, мы обнаружили, что добавление следующей инструкции к вашим запросам очень полезно:
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions.
Диагностика неспособности активировать конкретные указания.
Если вы ориентируетесь на конкретный сценарий использования функции, и агент его не обнаруживает, убедитесь, что ваши подсказки содержат определенные ключевые слова и требования к привязке для обеспечения корректного обнаружения. Это поможет агенту определить соответствующий путь навигации (например: «переходы между представлениями», «оптимизация LCP»).
Отследите ход мыслей агента:
- Проверьте вывод, чтобы убедиться, что активировался навык
modern-web-guidance. - Найдите поисковый запрос — например,
npx -y modern-web-guidance@latest search "carousel scroll snap"— и определите, соответствуют ли ключевые слова и полученные руководства вашим ожиданиям. - Убедитесь, что при запросе на получение данных был запрошен соответствующий раздел руководства, например:
npx -y modern-web-guidance@latest retrieve "carousel-snap-highlights,carousel-slide-effects,scroll-snap-state-sync".
Create a new folder and create a carousel web app for me that implements scroll-snap.
...
● Bash(npx -y modern-web-guidance@latest search "carousel scroll snap" --skill-version 2026_05_16-c5e7870)
⎿ [{"id":"carousel-snap-highlights","description":"Visually highlight the currently snapped non-interactive item in scroll-snapping carousels, galleries, or full-page swipe experiences. For example, expanding a card when snapped, or revealing hidden
content.","category":"user-experience","featuresUsed":["Container scroll-state queries"],"tokenCount":1442,"similarity":0.7783},
{"id":"carousel-slide-effects","description":"Create a carousel of slides with images or other visual elements, where each slide animates as they enter/center/exit their scroller. For example, the slides may fade-in/fade-out, rotate, get bigger or smaller,
etc.","category":"user-experience","featuresUsed":["Scroll-driven animations","Scroll snap"],"tokenCount":2105,"similarity":0.6625},
{"id":"scroll-snap-state-sync","description":"Synchronize navigation indicators, linked content panels, and analytics tracking with the actively snapped item in a scrollable container.","category":"user-experience","featuresUsed":["Scroll snap events","Scroll
snap"],"tokenCount":1053,"similarity":0.6166},
{"id":"scroll-snap-realtime-feedback","description":"Provide real-time visual feedback in linked UI elements while a user scrolls through snap-aligned content, before the scroll gesture completes.","category":"user-experience","featuresUsed":["Scroll snap events","Scroll
snap"],"tokenCount":1886,"similarity":0.5664},
{"id":"navigation-drawer","description":"Create a navigation drawer component that, when triggered from a menu button, slides in from the side overlayed on top of existing page content, and slides out when dismissed (by swiping away, tapping outside, or pressing
escape).","category":"user-experience","featuresUsed":["inert","Intersection observer","Popover","Registered custom properties","Scroll-driven animations","scroll-initial-target","Scroll snap"],"tokenCount":4317,"similarity":0.5099}]
● Bash(npx -y modern-web-guidance@latest retrieve "carousel-snap-highlights,carousel-slide-effects,scroll-snap-state-sync")
⎿ <output +158 lines>
}, undefined);
if (topEntry) setSelectedParagraph(topEntry.id);
},
{ root: main, threshold: 0.9 // Adjust based on your use case },
);
// Observe all snap targets (e.g., section headers)
document.querySelectorAll('h2').forEach(header => observer.observe(header));
}
- Вы также можете самостоятельно выполнить поисковые команды в терминале, чтобы увидеть, какие руководства соответствуют вашему поисковому запросу.
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"
Обратная связь
Если у вас возникли дополнительные вопросы или замечания по поводу этих новых функций, сначала ознакомьтесь с информацией о том, как внести свой вклад в Modern Web Guidance , прежде чем создавать заявку в нашем репозитории GitHub. При создании заявки укажите первоначальные подсказки агента, скриншоты и журналы его мыслительного процесса, а также рекомендуемое окончательное изменение кода, основанное на этих размышлениях.