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

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

इंस्टॉल करना

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

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

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

/plugin marketplace add GoogleChrome/modern-web-guidance

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

/plugin install modern-web-guidance@googlechrome

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

/reload-plugins

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

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

इंस्टॉल करने से पहले, मॉडर्न वेब गाइडेंस की गाइड लाइब्रेरी का आकलन करें. इसके लिए, कोई क्वेरी खोजें या आईडी के हिसाब से हमारी गाइड पाएं. इसके लिए, प्रॉम्प्ट का इस्तेमाल करके, इस्तेमाल के उदाहरण का आईडी ढूंढने के लिए, सीएलआई के 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. आखिर में, एआई मॉडल ऐसे सुझाव देते हैं जो पुराने होते हैं. इनमें प्रोजेक्ट की ज़रूरी शर्तों या ब्राउज़र के साथ काम करने की शर्तों को ध्यान में नहीं रखा जाता. इसके बजाय, किसी प्रोजेक्ट की बेसलाइन की ज़रूरी शर्तों के हिसाब से दिशा-निर्देश दिए जाते हैं.

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

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

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

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

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

बेसलाइन

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

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

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

This project's Baseline target is Baseline 2024.

<other project info...>

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

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

सटीक जानकारी कैसे दी जाती है?

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

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

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

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

अगले चरण

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