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

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

इंस्टॉलेशन

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

हमारा सुझाव है कि आप 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 सीएलआई

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 Code के साथ मॉडर्न वेब गाइडेंस का इस्तेमाल करने के लिए, इसे तीन चरणों में इंस्टॉल किया जाता है:

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

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

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

अगले चरण

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