मॉडर्न वेब गाइडेंस का इस्तेमाल शुरू करना

मॉडर्न वेब गाइडेंस, कौशल का एक सेट है. इसमें वेब प्लैटफ़ॉर्म की विशेषज्ञता, सबसे सही तरीके, और ब्राउज़र की कंपैटिबिलिटी का डेटा सीधे तौर पर आपके कोडिंग एजेंट में शामिल होता है. इससे आपके कोडिंग एजेंट को पुराने पैटर्न से दूर रहने और मॉडर्न वेब प्लैटफ़ॉर्म की सुविधाओं और क्षमताओं का इस्तेमाल करने वाले समाधानों की ओर बढ़ने में मदद मिलती है.

इंस्टॉल करने की सुविधा

मॉडर्न वेब गाइडेंस को ऐसे किसी भी कोडिंग एजेंट के साथ इंस्टॉल और इस्तेमाल किया जा सकता है जो कौशल की सुविधा के साथ काम करता है.

हमारा सुझाव है कि आप Chrome टीम की बनाई गई modern-web-guidance सीएलआई का इस्तेमाल करके, मॉडर्न वेब गाइडेंस को इंस्टॉल करें. modern-web-guidance सीएलआई का इस्तेमाल करके, मॉडर्न वेब गाइडेंस को इंस्टॉल करने पर, यह अपने-आप अपडेट हो जाएगा. modern-web-guidance सीएलआई से, इस तरह इंस्टॉल किया जा सकता है:

npx modern-web-guidance@latest install

अगर Chrome एक्सटेंशन डेवलप किए जा रहे हैं, तो हमारा सुझाव है कि आप यह कमांड इस्तेमाल करें:

npx modern-web-guidance@latest install --choose

इससे, इंटरैक्टिव विज़र्ड चलता है. इसकी मदद से, अपनी प्राथमिकताओं के हिसाब से कौशल इंस्टॉल किए जा सकते हैं.

अगर आपको modern-web-guidance सीएलआई का इस्तेमाल किए बिना, मॉडर्न वेब गाइडेंस इंस्टॉल करना है, तो एजेंट के हिसाब से दिए गए ये निर्देश देखें. ध्यान दें कि इनमें से ज़्यादातर विकल्पों में, अपने-आप अपडेट होने की सुविधा काम नहीं करती.

Antigravity

Antigravity डाउनलोड करें और इंस्टॉल करने के दौरान "modern-web-guidance" को चालू करें. इसके अलावा, सेटिंग पेज पर जाकर, कस्टमाइज़ेशन में Google प्लगिन के साथ बनाएं को चुनें.

Antigravity CLI

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Gemini CLI

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

JetBrains WebStorm

मॉडर्न वेब गाइडेंस, स्किल मैनेजर में उपलब्ध है. इसे ऐक्सेस करने के लिए, सेटिंग > एआई असिस्टेंट > कौशल पर जाएं. किसी स्किल की ज़्यादा जानकारी वाला पेज खोलने के लिए, उसे चुनें. कौशल इंस्टॉल करने के लिए, इंस्टॉल करें बटन पर क्लिक करें. इससे, यह मौजूदा आईडीई इंस्टेंस पर लागू हो जाएगा.

GitHub CLI

gh skill install GoogleChrome/modern-web-guidance

npx skills

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

Claude Code CLI

Claude Code CLI के साथ इस्तेमाल करने के लिए, मॉडर्न वेब गाइडेंस को तीन चरणों में इंस्टॉल किया जा सकता है:

1. मार्केटप्लेस जोड़ें:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. मार्केटप्लेस से प्लगिन इंस्टॉल करें:

/plugin install modern-web-guidance@googlechrome

3. प्लगिन फिर से लोड करें:

/reload-plugins

Copilot CLI

Copilot के साथ इस्तेमाल करने के लिए, मॉडर्न वेब गाइडेंस को दो चरणों में इंस्टॉल किया जा सकता है:

1. मार्केटप्लेस जोड़ें:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. मार्केटप्लेस से प्लगिन इंस्टॉल करें:

/plugin install modern-web-guidance@googlechrome

बत्तख

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

इंस्टॉल करने से पहले एक्सप्लोर करना

मॉडर्न वेब गाइडेंस की गाइड लाइब्रेरी को इंस्टॉल करने से पहले, उसका आकलन करें. इसके लिए, कोई क्वेरी खोजें या आईडी की मदद से हमारी गाइड पाएं. इसके लिए, प्रॉम्प्ट का इस्तेमाल करके, इस्तेमाल के उदाहरण का आईडी ढूंढने के लिए, सीएलआई के search कमांड का इस्तेमाल करें:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

इससे, आपके टर्मिनल में JSON ऑब्जेक्ट दिखेगा:

[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]

description वैल्यू पढ़कर, id चुनें. यह वैल्यू, आपके लक्ष्य को सबसे अच्छी तरह से दिखाती है. इसके बाद, retrieve कमांड का इस्तेमाल करें:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

इस मामले में, इस्तेमाल के उदाहरण के लिए गाइड Markdownanimate-to-from-top-layer टर्मिनल में दिखेगा. इस्तेमाल के अन्य उदाहरणों के लिए, animate-to-from-top-layer को इस्तेमाल के किसी मान्य उदाहरण के आईडी से बदलें.

मॉडर्न वेब गाइडेंस का इस्तेमाल क्यों करें?

वेब डेवलपर को, बिना सहायता वाले एआई मॉडल के मुकाबले मॉडर्न वेब गाइडेंस से तीन अलग-अलग वजहों से फ़ायदा मिलता है:

  1. एआई कोडिंग एजेंट, मॉडर्न वेब डेवलपमेंट की समस्याओं के लिए, पुराने और आउटडेटेड समाधानों का इस्तेमाल करते हैं. इन समाधानों में अक्सर JavaScript शामिल होती है. इससे उन समस्याओं को हल किया जाता है जिन्हें मॉडर्न सीएसएस और एचटीएमएल एपीआई की मदद से बेहतर तरीके से हल किया जा सकता है.
  2. पहले, एआई मॉडल को वेब प्लैटफ़ॉर्म की नई सुविधाओं के बारे में जानकारी नहीं होती थी या उनके बारे में गलत जानकारी होती थी.
  3. आखिर में, एआई मॉडल आउटडेटेड सुझाव देते हैं. इनमें प्रोजेक्ट की ज़रूरी शर्तें या ब्राउज़र की कंपैटिबिलिटी के मानदंड शामिल नहीं होते. इसके बजाय, वे किसी प्रोजेक्ट की बेसलाइन की ज़रूरी शर्तों के हिसाब से गाइडेंस नहीं देते.

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

मॉडर्न वेब गाइडेंस में क्या शामिल है?

मॉडर्न वेब गाइडेंस में, कई मुख्य विषयों में वेब डेवलपमेंट के 100 से ज़्यादा इस्तेमाल के उदाहरणों के लिए सबसे सही तरीके शामिल हैं. यह एक एजेंट स्किल है. यह आपके कोडिंग एजेंट को, इस्तेमाल के उदाहरण के लिए सबसे अच्छी गाइडेंस ढूंढने और पाने के लिए, modern-web-guidance सीएलआई को कॉल करने का तरीका बताती है.

  • उपयोगकर्ता अनुभव: व्यू ट्रांज़िशन, सीएसएस scrollbar-color स्टाइलिंग, और ऑब्जेक्ट को सीन में शामिल करने और हटाने पर दिखने वाले ऐनिमेशन.
  • सीएसएस: कंटेनर क्वेरी, मॉडर्न कलर स्पेस जैसे कि oklch, सीएसएस सबग्रिड लेआउट, text-wrap, और टाइपोग्राफ़ी लाइन-हाइट ट्रिमिंग.
  • परफ़ॉर्मेंस: पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) की गड़बड़ी की पहचान, लंबे टास्क को ब्रेकअप करने के लिए scheduler.yield, बैकग्राउंड टास्क शेड्यूलिंग, और इमेज लोडिंग की प्राथमिकता तय करना.
  • फ़ॉर्म: इनपुट फ़ील्ड का साइज़ अपने-आप तय होना (field-sizing: content), और :user-invalid के साथ सटीक पुष्टि करने वाली स्टाइल.
  • इन-बिल्ट यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट: डायलॉग पर सीधे तौर पर कंट्रोल, टूलटिप के लिए सीएसएस ऐंकर पोज़िशनिंग, और popover.
  • सुलभता: गड़बड़ी की जानकारी देने वाली सुलभ सूचनाएं और कीबोर्ड फ़ोकस मैनेजमेंट.
  • इन-बिल्ट एआई: स्थानीय, उपयोगकर्ता के डिवाइस पर मौजूद क्लाइंट मॉडल (नेटिव लैंग्वेज डिटेक्शन, समराइज़ेशन, और ट्रांसलेशन एपीआई) का इस्तेमाल करना.
  • पासकी: पासकी रजिस्टर करना, पुष्टि करना, और मैनेज करना.

ये हर विषय के कुछ इस्तेमाल के उदाहरण हैं. इस्तेमाल के सभी उदाहरण देखने के लिए, इस्तेमाल के उदाहरणों की पूरी सूची देखें.

बेसलाइन

बेसलाइन की मदद से, डेवलपर को यह जानकारी मिलती है कि मुख्य ब्राउज़र इंजन में, वेब की कौनसी सुविधाएं इंटरऑपरेबल हैं. अगर कोई वेब सुविधा बेसलाइन है, तो ब्राउज़र की कंपैटिबिलिटी के लेवल पर भरोसा किया जा सकता है. वेब की सुविधाएं, बेसलाइन के हिसाब से तय की गई तीन कैटगरी में से किसी एक में आती हैं:

  • सीमित उपलब्धता का मतलब है कि सुविधा इंटरऑपरेबल नहीं है.
  • हाल ही में उपलब्ध का मतलब है कि सुविधा, पिछले 30 महीनों में इंटरऑपरेबल हुई है.
  • ज़्यादातर जगहों पर उपलब्ध का मतलब है कि सुविधा, कम से कम 30 महीनों या उससे ज़्यादा समय से इंटरऑपरेबल है.

बेसलाइन, वेब की सुविधा की इंटरऑपरेबिलिटी की परिभाषा है. साथ ही, यह आपके प्रोजेक्ट का कॉन्फ़िगर किया जा सकने वाला पहलू भी है. बेसलाइन टारगेट चुना जा सकता है. इसके बाद, अपने प्रोजेक्ट को कॉन्फ़िगर करके, उसका इस्तेमाल किया जा सकता है. इसके लिए, उसे अपनी AGENTS.md या CLAUDE.md फ़ाइल में जोड़ें. उदाहरण के लिए:

This project's Baseline target is Baseline 2024.

<other project info...>

मॉडर्न वेब गाइडेंस और सुविधा के फ़ॉलबैक

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

सटीकता कैसे पक्की की जाती है?

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

इस्तेमाल के उदाहरणों के आकलन, एजेंट के सही व्यवहार की जांच करने के लिए, ऑटोमेटेड क्यूए हार्नेस चलाते हैं. इसमें Playwright अहम भूमिका निभाता है:

  1. हर गाइड के लिए, Playwright स्क्रिप्ट डेवलप की जाती है. इससे यह जांच की जाती है कि गाइड के लागू करने से जुड़ी जानकारी का पालन किया गया है या नहीं. उदाहरण के लिए, अगर @media (prefers-reduced-motion: reduce) को वहां देखा गया है जहां यह ज़रूरी है.
  2. ये Playwright स्क्रिप्ट, "सही" रेफ़रंस डेमो लागू करने के हिसाब से लगातार कैलिब्रेट की जाती हैं. इसमें 100% पास रेट की उम्मीद होती है. वहीं दूसरी ओर, स्क्रिप्ट, जान-बूझकर गड़बड़ी वाले लागू करने के हिसाब से जांच करती हैं. इसमें 0% पास रेट की उम्मीद होती है.
  3. अगर "सही" और जान-बूझकर गड़बड़ी वाले लागू करने में से कोई एक या दोनों, क्रमशः 100% और 0% पास रेट नहीं देते हैं, तो जनरेटर, कॉन्टेक्स्ट का इस्तेमाल करके, 100% कैलिब्रेशन हासिल होने तक अपने-आप फिर से कोशिश करता है.
  4. आखिर में, बेस ऐप्लिकेशन पर एंड-टू-एंड आकलन लागू किए जाते हैं. इनमें से एक आकलन, बिना गाइडेंस के किया जाता है. यह एक कंट्रोल है. इसमें किसी टास्क को पूरा करने के लिए, मॉडर्न वेब गाइडेंस को लागू किए बिना, डिफ़ॉल्ट ट्रेनिंग डेटा का इस्तेमाल किया जाता है. एक और आकलन (एक्सपेरिमेंट) में, मॉडर्न वेब गाइडेंस का इस्तेमाल करके, उसी टास्क को पूरा किया जाता है.

हमारे आकलन, हर हफ़्ते कई बार, बेहतरीन मॉडल और कोडिंग एजेंट के साथ किए जाते हैं. इससे हमें यह साफ़ तौर पर पता चलता है कि एजेंट, हमारी गाइडेंस के साथ और उसके बिना, कितनी अच्छी परफ़ॉर्मेंस देते हैं. शुरुआती नतीजों से पता चलता है कि मॉडर्न वेब गाइडेंस का इस्तेमाल करने पर, एजेंट मॉडर्न सबसे सही तरीकों का 37 प्रतिशत पॉइंट बेहतर तरीके से पालन करते हैं. हालांकि, आपके नतीजे, प्रोजेक्ट की ज़रूरी शर्तों, मॉडल, आपके लिखे गए प्रॉम्प्ट, और कोडिंग के लिए आपके पसंदीदा एजेंटिक टूल के हिसाब से अलग-अलग हो सकते हैं.

अगले चरण

अब आपको मॉडर्न वेब गाइडेंस की सामान्य जानकारी मिल गई है. साथ ही, यह भी पता चल गया है कि एआई कोडिंग के वर्कफ़्लो में, मॉडर्न वेब के सबसे सही तरीकों को अपनाना कितना आसान हो सकता है. अब मॉडर्न वेब गाइडेंस की मदद से, विषयों और इस्तेमाल के उदाहरणों के बारे में पढ़ा जा सकता है.