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

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

इंस्टॉल करना

Modern Web Guidance को किसी भी ऐसे कोडिंग एजेंट के साथ इंस्टॉल और इस्तेमाल किया जा सकता है जो स्किल के साथ काम करता है.

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

npx modern-web-guidance@latest install

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

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

इससे एक इंटरैक्टिव विज़र्ड शुरू होता है, जो आपकी प्राथमिकताओं के हिसाब से स्किल इंस्टॉल करता है.

अगर आपको modern-web-guidance CLI का इस्तेमाल किए बिना 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

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

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

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

Copilot CLI

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

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

Grok

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

किमी कोड

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

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

इंस्टॉल करने से पहले, 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"

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

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

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

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

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

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

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

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

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

बेसलाइन

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

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

Baseline, वेब फ़ीचर इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) की परिभाषा है. साथ ही, यह आपके प्रोजेक्ट का कॉन्फ़िगर किया जा सकने वाला पहलू भी है. कोई बेसलाइन टारगेट चुना जा सकता है. इसके बाद, इसे इस्तेमाल करने के लिए अपने प्रोजेक्ट को कॉन्फ़िगर करें. इसके लिए, इसे अपनी 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 प्रतिशत पॉइंट तक बेहतर तरीके से करते हैं. हालांकि, आपके प्रोजेक्ट की ज़रूरतों, मॉडल, लिखे गए प्रॉम्प्ट, और कोडिंग के लिए इस्तेमाल किए जाने वाले टूल के हिसाब से, आपको अलग-अलग नतीजे मिल सकते हैं.

अगले चरण

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