मॉडर्न वेब गाइडेंस का मकसद, डेवलपमेंट को "डिफ़ॉल्ट रूप से सही" अप्रोच की ओर ले जाना है. हालांकि, आपको कभी-कभी एजेंट को चालू करने, लागू करने की सटीकता या सुविधा की खोज से जुड़ी समस्याएं आ सकती हैं. इस सेक्शन में, सामान्य समस्याओं को हल करने के लिए डाइग्नोस्टिक के तरीके दिए गए हैं. जैसे, यह पक्का करना कि आपके प्रॉम्प्ट से मॉडर्न वेब स्किल सही तरीके से ट्रिगर हो रही है या यह पुष्टि करना कि कोड फ़ॉलबैक, आपके प्रोजेक्ट के तय किए गए बेसलाइन स्टेटस के मुताबिक हैं. अगर आपको लगातार तकनीकी समस्याओं का सामना करना पड़ रहा है या आपको लगता है कि दिशा-निर्देश पुराने हो गए हैं, तो हम आपसे अनुरोध करते हैं कि आप समस्या की शिकायत करें. इससे हमें इन संसाधनों को सटीक और असरदार बनाए रखने में मदद मिलेगी.
यह पता लगाना कि आपका एजेंट, मॉडर्न वेब गाइडेंस का इस्तेमाल क्यों नहीं कर रहा है
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.
किसी खास दिशा-निर्देश को ट्रिगर न कर पाने की वजह का पता लगाना
अगर आपको किसी खास सुविधा के इस्तेमाल के उदाहरण को टारगेट करना है और आपको नहीं दिख रहा है कि एजेंट उसे खोज पा रहा है, तो पक्का करें कि आपके प्रॉम्प्ट में, खोजे जाने के लिए खास कीवर्ड और ऐंकर की ज़रूरी शर्तें शामिल हों. इससे एजेंट को काम के दिशा-निर्देशों वाले ट्रैक की पहचान करने में मदद मिलती है. उदाहरण के लिए: "व्यू ट्रांज़िशन", "एलसीपी ऑप्टिमाइज़ेशन".
एजेंट के सोचने की प्रोसेस को ट्रैक करें:
- आउटपुट की जांच करके देखें कि इसमें
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"
सुझाव/राय दें या शिकायत करें
अगर आपको इन नई सुविधाओं के बारे में कोई और सवाल पूछना है या कोई सुझाव/राय देनी है या शिकायत करनी है, तो हमारी GitHub रिपॉज़िटरी में कोई समस्या सबमिट करने से पहले, मॉडर्न वेब गाइडेंस में योगदान देने के तरीके के बारे में पढ़ें. समस्या बनाते समय, एजेंट के शुरुआती प्रॉम्प्ट, एजेंट की सोच के प्रोसेस के स्क्रीनशॉट और लॉग, और उस सोच के आधार पर कोड में बदलाव करने का सुझाव दें.