Modern Web Rehberi, geliştirme sürecinizi "varsayılan olarak doğru" bir yaklaşıma yönlendirmeyi amaçlasa da bazen ajan etkinleştirme, uygulama doğruluğu veya özellik keşfi ile ilgili sorunlarla karşılaşabilirsiniz. Bu bölümde, Modern Web becerisinin istemleriniz tarafından düzgün şekilde tetiklenmesini sağlama veya kod yedeklerinin projenizin belirlenen temel durumuyla uyumlu olduğunu doğrulama gibi yaygın sorunları çözmenize yardımcı olacak teşhis adımları yer almaktadır. Sürekli olarak teknik engellerle karşılaşırsanız veya güncel olmayan bilgiler tespit ederseniz bu kaynakların doğru ve etkili kalmasına yardımcı olmak için sorun bildirmenizi öneririz.
Modern Web Rehberi'nin temsilciniz tarafından kullanılmaması sorununu teşhis etme
Modern Web Rehberi yüklendiğinde, temsilcilere tüm web geliştirme görevlerinde bu aracı kullanmaları talimatı verilir. Ancak bazen bu talimatlar göz ardı edilebilir.
İsteminizin sonuna "use modern-web-guidance" (Modern Web Rehberi'ni kullan) gibi bir ifade ekleyerek aracıya Modern Web Rehberi'ni kullanmasını açıkça söyleyebilirsiniz.
Bazı aracıların, aracıya bağlı olarak /modern-web-guidance veya $modern-web-guidance gibi belirli bir söz dizimi kullanarak becerilerin doğrudan çağrılmasına da olanak tanıdığını unutmayın.
Temsilcinizin dokümanlarına bakın veya emin değilseniz doğrudan modern-web-guidance becerisini nasıl çağıracağınızı temsilcinize sorun.
"Halüsinasyon" kodu veya tahmin edilen uygulamaları teşhis etme
Bu, LLM'nin uyarı vermeden bilgi boşluklarını doldurduğu yaygın bir durumdur. Ajanın bilgi uydurmasını önlemek için istemlerinize aşağıdaki talimatı eklemenin çok faydalı olduğunu tespit ettik:
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions.
Belirli rehberliklerin tetiklenememesini teşhis etme
Belirli bir özellik kullanım alanını hedefliyorsanız ve bu alanın aracı tarafından keşfedilmediğini görüyorsanız istemlerinizin, uygun şekilde keşfedilebilmesi için belirli anahtar kelimeler ve temel gereksinimler içerdiğinden emin olun. Bu, temsilcinin ilgili rehberlik parçasını (örneğin: "görünüm geçişleri", "LCP optimizasyonu") belirlemesine yardımcı olur.
Ajanın düşünme sürecini izleyin:
modern-web-guidancebecerisinin çağrılıp çağrılmadığını görmek için çıkışı kontrol edin.- Arama çağrısını (ör.
npx -y modern-web-guidance@latest search "carousel scroll snap") bulun ve anahtar kelimelerin ve sonuçtaki kılavuzların beklediğiniz gibi olup olmadığını belirleyin. - Alma çağrısında ilgili kılavuzun istenip istenmediğini kontrol edin (örneğin:
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));
}
- Arama sorgunuzla eşleşen kılavuzları görmek için arama komutlarını terminalde kendiniz de çalıştırabilirsiniz.
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"
Geri bildirim
Bu yeni özelliklerle ilgili başka sorularınız veya geri bildirimleriniz varsa GitHub depomuzda sorun bildirmeden önce Modern Web Guidance'a nasıl katkıda bulunacağınız hakkında bilgi edinin. Sorunu oluştururken ilk aracı istemlerini, aracının düşünce sürecinin ekran görüntülerini ve günlüklerini ve bu düşünceye dayalı olarak önerilen son kod değişikliğini sağlayın.