Modern Web Guidance, geliştirme sürecinizi "varsayılan olarak doğru" bir yaklaşıma yönlendirmeyi amaçlasa da bazen aracı 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 belirlenmiş temel durumuyla uyumlu olduğunu doğrulama gibi yaygın sorunları çözmenize yardımcı olacak teşhis adımları yer alır. Sürekli olarak teknik sorunlarla 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 Becerisi'nin aracı tarafından alınmaması sorununu teşhis etme
Beceri uzantısının yüklendiği tüm istemler, "modern web rehberliği"ni bir şekilde kullanarak uzantıyı etkinleştirebilmelidir. Ancak kullandığınız aracıda herhangi bir nedenle zorluk yaşanıyorsa doğrudan şu şekilde çağırabilirsiniz:
/modern-web-guidance <your prompt>
Bu, npx skills add <skill-extension>'yı kabul eden yapay zeka destekli IDE'ler için geçerlidir.
"Halüsinasyon" kodu veya tahmin edilen uygulamaları teşhis etme
Bu, LLM modelinin 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şfedildiğini görmü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.
/modern-web-guidance Execute LCP optimization against my Progressive Web App.
Aracının düşünme sürecini izleme:
- Modern Web Rehberliği becerisi keşfedildiyse (ör.
modern-web/SKILL.md) takip edin. - Arama çağrısını (ör.
node modern-web.mjs search "scroll snap") bulun ve anahtar kelimelerin ve sonuçtaki kılavuzların beklediğiniz gibi olup olmadığını belirleyin. Arama sonuçlarındaki en üstteki kılavuz, isteminize uygulanmak üzere seçilen kılavuzdur.
/modern-web-guidance Create a new folder and create a carousel web app for me that implements scroll-snap.
...
● Bash(node --experimental-strip-types serving/bin/modern-web.ts search "carousel scroll-snap")
⎿ [{"id":"carousel-item-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"]},
{"id":"light-dismiss-content-overlay","description":"Create swipeable layered navigation menus using native overlays and scroll gestures.","category":"user-experience","featuresUsed":["Popover","Scroll snap","inert"]},
{"id":"scroll-target-on-load","description":"Build a scrollable list of elements (e.g. a carousel of images or a chat conversation thread) that can be displayed with a particular element scrolled into view on the initial render.","category":"user-experience","featuresUsed":["scroll-initial-target","scrollIntoView()"]},
{"id":"parallax-scroll-effects","description":"Create scroll-based effects (such as parallax) where foreground and background layers move at different rates, creating a sense
of depth as the user scrolls.","category":"user-experience","featuresUsed":["Scroll-driven animations"]},
{"id":"pull-to-reveal","description":"Build a pull-to-reveal feature that would enable the user to pull down on the screen to reveal more content, like a search bar.", "category":"user-experience","featuresUsed":["scroll-initial-target","Scroll snap"]}]
...
▾ Thought for 1s
Ah, let's look at the actual folder names under `guides/user-experience/` that we listed earlier to find the exact ID mapping.
Let's see the folders we found earlier:
- `carousel-slide-effects`
- `carousel-snap-highlights`
- `scroll-snap-realtime-feedback`
- `scroll-snap-state-sync`
Ah! The ID in the filesystem is `carousel-slide-effects`, while the search index returns `carousel-item-effects`.
- İlgili kılavuzlar için arama komutunu kendiniz çalıştırın:
# Search for relevant guides
npx modern-web-guidance@latest search "scroll snap"
Belirli web tarayıcısı özellikleri için eksik yedekleri teşhis etme
Bu, projenizde belirlediğiniz temel durumuna bağlıdır. API çok kısa süre önce yayınlandıysa aracı, kullanabileceği eşdeğer bir yedekleme olmayabilir veya bu, yedeklemelerin ya da polyfill'lerin gerekli olmayabileceği kadar uzun bir süredir "Baseline Widely" (Geniş Çapta Temel) olarak kullanılabilen bir özellik olabilir.
Eski eğitim verilerinden kaynaklanan veri yanlılığını teşhis etme
Aracı, modern bir tarayıcı API'si yerine daha eski bir kitaplık öneriyorsa büyük olasılıkla temel eğitim verilerini kullanıyordur veya temel durumunuz henüz bu özelliği desteklemeyecek şekilde yapılandırılmıştır ve yedek çözüm uygulanmıştır.
Tekrar kontrol etmek için KSA'yı kullanarak rehberlik kitaplığında açıkça arama yaparak becerinin öncelikli olmasını sağlayabilirsiniz:
# Search for a specific feature
npx modern-web-guidance search "<feature>"
Eski yönergeleri teşhis etme
Bilgilerimizin güncel olması son derece önemlidir. Bu nedenle, bir kılavuzdan uygulanan kodun güncel olmadığını fark ederseniz lütfen depoda bir sorun kaydı oluşturun. Bunu yaparken, aracının size önerdiği bilgilerin, yapay zeka destekli IDE'nizin kullanabileceği LLM modelindeki temel eğitim verilerinden değil, modern-web becerisinden ve kılavuzlarından geldiğine dair kanıt toplayın.
Aracı pencerenizde veya terminalinizde düşünme sürecini takip edebilirsiniz. Ayrıca, kod değişikliği sonucuna nasıl ulaştığı konusunda sizi bilgilendirmesini de isteyebilirsiniz. Geri bildirimin gerçekten beceriden geldiği sonucuna vardıktan sonra bu geri bildirimi ve kanıtı bize iletin.
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üşünme sürecinin ekran görüntülerini ve günlüklerini ve bu düşünme sürecine dayalı olarak önerilen son kod değişikliğini sağlayın.