मॉडर्न वेब गाइडेंस, वेब प्लैटफ़ॉर्म की विशेषज्ञता, सबसे सही तरीके, और ब्राउज़र के साथ काम करने से जुड़ा डेटा है. इसे सीधे तौर पर आपके कोडिंग एजेंट में शामिल किया जाता है. इससे आपके कोडिंग एजेंट, लेगसी पैटर्न से हटकर, ऐसे समाधानों की ओर बढ़ पाते हैं जो मॉडर्न वेब प्लैटफ़ॉर्म की सुविधाओं और क्षमताओं का इस्तेमाल करते हैं.
इंस्टॉल करना
Modern Web Guidance को, स्किल के साथ काम करने वाले किसी भी कोडिंग एजेंट के साथ इंस्टॉल और इस्तेमाल किया जा सकता है.
modern-web-guidance सीएलआई (सुझाया गया)
हमारा सुझाव है कि आप Chrome टीम की बनाई गई 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
आपको मॉडर्न वेब गाइडेंस की सुविधाएं, स्किल मैनेजर में मिलेंगी. यह सेटिंग > एआई असिस्टेंट > स्किल में उपलब्ध है. किसी स्किल की ज़्यादा जानकारी वाला पेज खोलने के लिए, उसे चुनें. स्किल इंस्टॉल करने के लिए, इंस्टॉल करें बटन पर क्लिक करें, ताकि इसे मौजूदा आईडीई इंस्टेंस पर लागू किया जा सके.
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
इंस्टॉल करने से पहले एक्सप्लोर करना
इंस्टॉल करने से पहले, 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 को इस्तेमाल के किसी मान्य उदाहरण के आईडी से बदलें.
मॉडर्न वेब गाइडेंस का इस्तेमाल क्यों करें?
मॉडर्न वेब गाइडेंस की सुविधाएं, वेब डेवलपर के लिए बिना किसी मदद के काम करने वाले एआई मॉडल की तुलना में ज़्यादा फ़ायदेमंद होती हैं. इसकी तीन वजहें हैं:
- एआई कोडिंग एजेंट, वेब डेवलपमेंट से जुड़ी आधुनिक समस्याओं के लिए, पुराने और काम न करने वाले समाधानों का इस्तेमाल करते हैं. इन समाधानों में अक्सर JavaScript होती है, ताकि उन समस्याओं के लिए फ़ंक्शन उपलब्ध कराए जा सकें जिन्हें आधुनिक सीएसएस और एचटीएमएल एपीआई की मदद से बेहतर तरीके से हल किया जा सकता है.
- पहले, एआई मॉडल को वेब प्लैटफ़ॉर्म की नई सुविधाओं के बारे में जानकारी नहीं होती थी या उनके पास गलत जानकारी होती थी.
- आखिर में, एआई मॉडल ऐसे सुझाव देते हैं जो पुराने होते हैं. इनमें प्रोजेक्ट की ज़रूरी शर्तों या ब्राउज़र के साथ काम करने की शर्तों को ध्यान में नहीं रखा जाता. इसके बजाय, ये किसी प्रोजेक्ट की बेसलाइन की ज़रूरी शर्तों के हिसाब से दिशा-निर्देश देते हैं.
वेब गाइडेंस की आधुनिक सुविधाओं की मदद से, इन कमियों को दूर किया जा सकता है. साथ ही, यह पक्का किया जा सकता है कि एआई की मदद से कोडिंग करने के वर्कफ़्लो में, वेब प्लैटफ़ॉर्म की नई सुविधाओं को सबसे पहले इस्तेमाल करने के लिए टूल मौजूद हों. साथ ही, फ़ॉलबैक के बारे में भी ध्यान रखा गया हो.
मॉडर्न वेब गाइडेंस में क्या-क्या शामिल है?
मॉडर्न वेब गाइड में, वेब डेवलपमेंट के 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 की अहम भूमिका होती है:
- हर गाइड के लिए, एक Playwright स्क्रिप्ट तैयार की जाती है. इससे यह जांच की जाती है कि गाइड में दिए गए निर्देशों का पालन किया गया है या नहीं. उदाहरण के लिए, यह जांच की जाती है कि
@media (prefers-reduced-motion: reduce)को ज़रूरी जगह पर इस्तेमाल किया गया है या नहीं. - ये Playwright स्क्रिप्ट, "सही" रेफ़रंस डेमो के साथ लगातार कैलिब्रेट होती हैं. इसमें 100% पास रेट की उम्मीद की जाती है. दूसरी ओर, स्क्रिप्ट की जांच जान-बूझकर गलत तरीके से लागू किए गए कोड के आधार पर की जाती है. इसमें पास होने की दर 0% होती है.
- अगर "सही" और जान-बूझकर गलत तरीके से लागू किए गए दोनों में से कोई एक या दोनों, क्रमशः 100% और 0% पास रेट नहीं दे पाते हैं, तो जनरेटर, कॉन्टेक्स्ट का इस्तेमाल करके अपने-आप फिर से कोशिश करता है. ऐसा तब तक होता है, जब तक 100% कैलिब्रेशन हासिल नहीं हो जाता.
- आखिर में, किसी बुनियादी ऐप्लिकेशन पर एंड-टू-एंड आकलन लागू किए जाते हैं. इनमें से एक आकलन बिना किसी निर्देश के किया जाता है. यह एक कंट्रोल है. इसमें किसी टास्क को पूरा करने के लिए, मॉडर्न वेब गाइडेंस की सुविधाओं का इस्तेमाल किए बिना, डिफ़ॉल्ट ट्रेनिंग डेटा का इस्तेमाल किया जाता है. एक अन्य आकलन (एक्सपेरिमेंट) में, मॉडर्न वेब गाइडेंस की सुविधाओं का इस्तेमाल करके इसी टास्क को पूरा किया जाता है.
हमारा आकलन हर दिन, बेहतरीन मॉडल और कोडिंग एजेंट की मदद से किया जाता है. इससे हमें यह पता चलता है कि एजेंट, हमारी मदद के साथ और हमारी मदद के बिना कितना अच्छा परफ़ॉर्म करते हैं. शुरुआती नतीजों से पता चला है कि मॉडर्न वेब गाइडेंस की मदद से, एजेंटों को आधुनिक सबसे सही तरीकों का पालन करने में औसतन 37 प्रतिशत पॉइंट का सुधार मिला है. हालांकि, आपके प्रोजेक्ट की ज़रूरतों, मॉडल, लिखे गए प्रॉम्प्ट, और कोडिंग के लिए इस्तेमाल किए जाने वाले टूल के हिसाब से, आपको अलग-अलग नतीजे मिल सकते हैं.
अगले चरण
अब आपको मॉडर्न वेब गाइडेंस के बारे में सामान्य जानकारी मिल गई है. साथ ही, आपको यह भी पता चल गया है कि यह आपके एआई कोडिंग वर्कफ़्लो में, मॉडर्न वेब के सबसे सही तरीकों को आसानी से अपनाने में कैसे मदद कर सकता है. अब मॉडर्न वेब गाइडेंस की मदद से, स्किल्स के बारे में जानें और इस्तेमाल के उदाहरण देखें.