मॉडर्न वेब गाइडेंस से जुड़ी समस्या हल करना

मॉडर्न वेब गाइडेंस का मकसद, आपके डेवलपमेंट को "डिफ़ॉल्ट रूप से सही" अप्रोच की ओर ले जाना है. हालांकि, कभी-कभी आपको एजेंट को चालू करने, लागू करने की सटीकता या सुविधा की खोज से जुड़ी समस्याएं आ सकती हैं. इस सेक्शन में, डाइग्नोस्टिक के चरण दिए गए हैं. इनसे आपको सामान्य समस्याओं को हल करने में मदद मिलती है. जैसे, यह पक्का करना कि आपके प्रॉम्प्ट से मॉडर्न वेब स्किल सही तरीके से ट्रिगर हो रही है या यह पुष्टि करना कि कोड फ़ॉलबैक, आपके प्रोजेक्ट के तय किए गए बेसलाइन स्टेटस के मुताबिक हैं. अगर आपको लगातार तकनीकी समस्याओं का सामना करना पड़ रहा है या आपको लगता है कि दिशा-निर्देश पुराने हो चुके हैं, तो हम आपसे अनुरोध करते हैं कि आप समस्या की शिकायत करें. इससे हमें इन संसाधनों को सटीक और असरदार बनाए रखने में मदद मिलेगी.

यह पता लगाना कि एजेंट, मॉडर्न वेब स्किल का इस्तेमाल क्यों नहीं कर रहा है

जिस प्रॉम्प्ट ने कौशल एक्सटेंशन इंस्टॉल किया है उसे किसी न किसी तरह से "मॉडर्न वेब गाइडेंस" का इस्तेमाल करके, इसे चालू करना चाहिए. हालांकि, अगर किसी वजह से आपके इस्तेमाल किए जा रहे एजेंट को इसे चालू करने में समस्या आ रही है, तो इसे सीधे तौर पर इस तरह कॉल किया जा सकता है:

/modern-web-guidance <your prompt>

यह npx skills add <skill-extension> को स्वीकार करने वाले, एआई की मदद से काम करने वाले आईडीई पर लागू होता है.

"भ्रमित" कोड या अनुमानित तौर पर लागू किए गए कोड का विश्लेषण करना

ऐसा अक्सर होता है, जब एलएलएम मॉडल बिना किसी चेतावनी के जानकारी के अंतर को भर देता है. एजेंट को जानकारी गढ़ने से रोकने के लिए, हमने पाया है कि अपने प्रॉम्प्ट में यहां दिया गया निर्देश जोड़ने से काफ़ी मदद मिलती है

Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions."

किसी खास दिशा-निर्देश को ट्रिगर न कर पाने की वजह का पता लगाना

अगर आपको किसी खास सुविधा के इस्तेमाल के उदाहरण को टारगेट करना है और आपको नहीं दिख रहा है कि एजेंट उसे खोज पा रहा है, तो पक्का करें कि आपके प्रॉम्प्ट में, खोजे जाने के लिए खास कीवर्ड और ऐंकर की ज़रूरी शर्तें शामिल हों. इससे एजेंट को काम के दिशा-निर्देशों वाले ट्रैक की पहचान करने में मदद मिलती है. उदाहरण के लिए: "व्यू ट्रांज़िशन", "एलसीपी ऑप्टिमाइज़ेशन".

/modern-web-guidance Execute LCP optimization against my Progressive Web App.

एजेंट की सोचने की प्रोसेस को ट्रैक करें:

• अगर इसे मॉडर्न वेब गाइडेंस स्किल (जैसे, modern-web/SKILL.md) के बारे में पता चला है, तो इसका पालन करें.
• खोज के लिए किए गए कॉल का पता लगाएं. उदाहरण के लिए, node modern-web.mjs search "scroll snap". इसके बाद, यह पता लगाएं कि कीवर्ड और उनसे मिली गाइड आपकी उम्मीद के मुताबिक थीं या नहीं. खोज के नतीजों में सबसे ऊपर दिखने वाली गाइड को आपके प्रॉम्प्ट के लिए चुना गया है.

/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`.

• काम की गाइड के लिए, खोज से जुड़ा निर्देश खुद लागू करें:

# Search for relevant guides
npx modern-web-guidance@latest search "scroll snap"

कुछ वेब ब्राउज़र सुविधाओं के लिए, फ़ॉलबैक के मौजूद न होने की वजह का पता लगाना

यह आपके प्रोजेक्ट में सेट की गई बेसलाइन की स्थिति पर निर्भर करता है. अगर एपीआई को हाल ही में रिलीज़ किया गया है, तो हो सकता है कि एजेंट के पास भरोसा करने के लिए कोई फ़ॉलबैक न हो. इसके अलावा, ऐसा भी हो सकता है कि यह सुविधा "बेसलान वाइडली" के तौर पर काफ़ी समय से उपलब्ध हो, ताकि फ़ॉलबैक या पॉलीफ़िल की ज़रूरत न पड़े.

ट्रेनिंग डेटा में मौजूद पक्षपात की जांच करना

अगर एजेंट, मॉडर्न ब्राउज़र एपीआई के बजाय किसी पुरानी लाइब्रेरी का सुझाव देता है, तो ऐसा हो सकता है कि वह अपने बुनियादी ट्रेनिंग डेटा पर भरोसा कर रहा हो. इसके अलावा, यह भी हो सकता है कि आपके बेसलाइन स्टेटस को इस तरह से कॉन्फ़िगर किया गया हो कि वह सुविधा अभी काम न करे और फ़ॉलबैक लागू किया गया हो.

दोबारा जांच करने के लिए, सीएलआई का इस्तेमाल करके गाइडेंस लाइब्रेरी को साफ़ तौर पर खोजें, ताकि स्किल को प्राथमिकता दी जा सके:

# Search for a specific feature
npx modern-web-guidance search "<feature>"

पुराने दिशा-निर्देशों की वजह से होने वाली समस्याओं का पता लगाना

यह बेहद ज़रूरी है कि हमारी जानकारी अप-टू-डेट हो. इसलिए, अगर आपको ऐसा कोड मिलता है जिसे किसी गाइड से लागू किया गया था और वह पुराना हो चुका है, तो कृपया रिपॉज़िटरी में समस्या की शिकायत करें. ऐसा करते समय, इस बात का सबूत इकट्ठा करें कि एजेंट ने आपको जो सुझाव दिया है वह modern-web स्किल और उसके दिशा-निर्देशों से लिया गया है. यह एलएलएम मॉडल के बुनियादी ट्रेनिंग डेटा से नहीं लिया गया है. ऐसा हो सकता है कि एआई की मदद से काम करने वाला आपका आईडीई, एलएलएम मॉडल का इस्तेमाल कर रहा हो.

आपको एजेंट विंडो या टर्मिनल में, यह पता चल सकता है कि एआई ने कोड में बदलाव करने के बारे में कैसे सोचा. हालांकि, यह भी पूछा जा सकता है कि एआई ने कोड में बदलाव करने का फ़ैसला कैसे लिया. जब आपको यह पता चल जाए कि यह वाकई में किसी स्किल से मिला सुझाव या राय है, तो हमें इसकी जानकारी दें और सबूत भेजें.

सुझाव/राय दें या शिकायत करें

अगर आपको इन नई सुविधाओं के बारे में कोई और सवाल पूछना है या इनके बारे में सुझाव/राय देनी है या शिकायत करनी है, तो हमारी Github रिपॉज़िटरी में कोई समस्या सबमिट करने से पहले, मॉडर्न वेब गाइडेंस में योगदान देने का तरीका जानें. समस्या बनाते समय, एजेंट के शुरुआती प्रॉम्प्ट, एजेंट की सोचने की प्रोसेस के स्क्रीनशॉट और लॉग, और एजेंट की सोचने की प्रोसेस के आधार पर सुझाया गया कोड में बदलाव दें.