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

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

इंस्टॉल करना

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

modern-web-guidance सीएलआई (सुझाया गया)

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

Antigravity

Antigravity डाउनलोड करें और इंस्टॉलेशन के दौरान "modern-web-guidance" को चालू करें. इसके अलावा, सेटिंग पेज पर जाकर, पसंद के मुताबिक बनाएं और फिर Build with 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

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

ध्यान दें: आपके पास इंस्टॉल करने के लिए कोई दूसरा टारगेट चुनने का विकल्प भी होता है. यह विकल्प, इंस्टॉल करें मेन्यू में भी उपलब्ध होता है.

GitHub CLI

gh skill install GoogleChrome/modern-web-guidance

npx skills

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin marketplace add GoogleChrome/modern-web-guidance
claude plugin install modern-web-guidance@googlechrome

Codex

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

Copilot सीएलआई

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

Kimi Code

/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":"ui-behaviors","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":"ui-behaviors","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":"ui-behaviors","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 को किसी मान्य गाइड आईडी से बदलें.

Modern Web Guidance का इस्तेमाल क्यों करें?

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

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

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

Modern Web Guidance में क्या है?

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

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

यहां हर कैटगरी की कुछ गाइड दी गई हैं. सभी गाइड देखने के लिए, गाइड की पूरी सूची देखें.

बेसलाइन

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

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

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

This project's Baseline target is Baseline 2024.

<other project info...>

अहम जानकारी: अगर आपने Modern Web Guidance इंस्टॉल किया है, लेकिन अपने प्रोजेक्ट के लिए बेसलाइन टारगेट को कॉन्फ़िगर नहीं किया है, तो Modern Web Guidance डिफ़ॉल्ट रूप से, बेसलाइन के तहत 'ज़्यादातर ब्राउज़र पर उपलब्ध' पर सेट हो जाएगा.

Modern Web Guidance और सुविधा के फ़ॉलबैक

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

यह कैसे पक्का किया जाता है कि जानकारी सटीक है?

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

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

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

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

अस्थिर सुविधाओं के लिए दिशा-निर्देश चालू करना

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

npx modern-web-guidance@latest set-allow-volatile-features

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

ऑरिजिन ट्रायल में सुविधाओं के लिए दिशा-निर्देश चालू करें

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

npx modern-web-guidance@latest set-allow-origin-trials

अगले चरण

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