Modern Web Guidance 1.0: Claude Code, Codex और Cursor में सेटअप

Modern Web Guidance 1.0 को प्रोजेक्ट स्किल के रूप में लगाएँ और पूरे रिपॉज़िटरी में अपनाने से पहले एक फ़्रंटएंड कार्य पर उसकी गाइड का उपयोग जाँचें। legacy-scan से समीक्षा योग्य आधुनिकीकरण प्रस्ताव बनवाएँ, बिना निगरानी के कोड दोबारा न लिखवाएँ। Modern Web Guidance के इस्तेमाल की टेलीमेट्री नहीं भेजनी है, तो पहली कमांड से पहले DISABLE_TELEMETRY=1 सेट करें।

Modern Web Guidance 1.0 से क्या बदलता है

Modern Web Guidance आपके मौजूदा कोडिंग एजेंट को कोड लिखने से पहले ब्राउज़र सुविधाओं के लिए प्रासंगिक निर्देश देता है। 10 नवंबर 2026 को जारी 1.0 रिलीज़ में विशिष्ट कामों के लिए 203 गाइड हैं। ये वेब प्लेटफ़ॉर्म की 250 सुविधाओं को कवर करती हैं। Chrome, Edge, Firefox और MDN की टीमें समुदाय के योगदानकर्ताओं के साथ प्रोजेक्ट की देखरेख करती हैं।

स्किल एजेंट के लिए निर्देशों का पैकेज है। यह एजेंट को संबंधित गाइड खोजने, उसका पाठ प्राप्त करने और उसके नियम लागू करने को कहती है। इनमें संगतता बनाए रखने के वैकल्पिक उपाय, यानी फ़ॉलबैक, भी शामिल हैं।

खोज में लोकल एम्बेडिंग मॉडल और BM25 साथ काम करते हैं। BM25 मुख्य शब्दों के आधार पर परिणामों को क्रम देता है। आधिकारिक प्रोजेक्ट README के अनुसार, खोज में मिलान करने के लिए बाहरी मॉडल API या API-की की ज़रूरत नहीं होती।

यह तब उपयोगी है जब एजेंट को ब्राउज़र API का पता हो, लेकिन वह ट्रांज़िशन के व्यवहार या संगतता के फ़ॉलबैक जैसी बारीकियाँ छोड़ दे। समर्थित ब्राउज़र तय करना, बदलावों की समीक्षा करना और ऐप्लिकेशन के टेस्ट चलाना फिर भी आपकी ज़िम्मेदारी है।

Claude Code, Codex या Cursor में कैसे इंस्टॉल करें

तीनों एजेंट के लिए प्रोजेक्ट स्तर पर वही CLI स्थापना प्रक्रिया इस्तेमाल करें। स्थापना का रैपर Vercel Skills को चलाता है। 2026-11-13 के अनुसार, Skills इंस्टॉलर की मौजूदा आवश्यकता पूरी करने के लिए Node.js 22.20 या नया संस्करण इस्तेमाल करें।

आपको npm/npx और ज़रूरी पैकेज डाउनलोड करने की अनुमति भी चाहिए। प्रोजेक्ट के रूट में Bash खोलें। आधिकारिक इंस्टॉल कमांड चलाने से पहले Modern Web Guidance की टेलीमेट्री बंद करें:

export DISABLE_TELEMETRY=1
npx modern-web-guidance@latest install

इंटरैक्टिव इंस्टॉलर में एजेंट चुने जा सकते हैं। Claude Code, Codex, Cursor या इनमें से जिनका इस्तेमाल करते हैं, उन्हें चुनें। एक रिपॉज़िटरी में परीक्षण के लिए स्थापना का दायरा प्रोजेक्ट तक रखें। इंस्टॉलर डिफ़ॉल्ट रूप से यही दायरा इस्तेमाल करता है।

इस CLI स्थापना के बाद प्रोजेक्ट में ये फ़ाइलें और स्किल चलाने के तरीके जाँचें:

एजेंट	प्रोजेक्ट में स्किल की फ़ाइल	स्पष्ट रूप से चलाने का तरीका
Claude Code	.claude/skills/modern-web-guidance/SKILL.md	/modern-web-guidance दर्ज करें।
Codex	.agents/skills/modern-web-guidance/SKILL.md	/skills इस्तेमाल करें या $modern-web-guidance का उल्लेख करें।
Cursor	.agents/skills/modern-web-guidance/SKILL.md	Agent चैट में / लिखें और स्किल चुनें।

ये डायरेक्टरी मौजूदा इंस्टॉलर में प्रत्येक एजेंट के लिए तय स्थान हैं। ये प्लगइन-कैश या ग्लोबल स्थापना के पथ नहीं हैं।

उसी रिपॉज़िटरी में एजेंट का नया सत्र शुरू करें और पहली जाँच के लिए स्किल को स्पष्ट रूप से चलाएँ। स्किल नहीं दिखे, तो दोबारा इंस्टॉल करने से पहले चुना गया एजेंट, स्थापना का दायरा और फ़ाइल का स्थान जाँचें।

CLI से इंस्टॉल की गई स्किल अपडेट करने के लिए प्रोजेक्ट डायरेक्टरी से चलाएँ:

npx modern-web-guidance@latest update

अपडेट के बाद बदली हुई स्किल फ़ाइलों की समीक्षा करें और नीचे दी गई गाइड प्राप्त करने की जाँच दोहराएँ। ये कमांड @latest इस्तेमाल करती हैं। इसलिए यह न मानें कि अगला अपडेट भी संस्करण 1.0 पर ही रहेगा।

प्लगइन मार्केटप्लेस से स्थापना एक अलग तरीका है। उसकी अपडेट प्रक्रिया को इस CLI प्रक्रिया से अलग रखें। Claude Code के प्लगइन पैकेज और उनके प्रबंधन के लिए प्लगइन इंस्टॉल करने, जाँचने और हटाने की गाइड देखें।

खोज, गाइड प्राप्त करना और एजेंट का वास्तविक उपयोग कैसे जाँचें

CLI के साथ यह भी जाँचें कि एजेंट उसके परिणाम का उपयोग कर रहा है। टर्मिनल में कमांड का सफल होना अकेले यह साबित नहीं करता कि एजेंट ने स्किल लोड की है।

दस्तावेज़ में दिया गया डायलॉग का उदाहरण Bash में चलाएँ:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

खोज से गाइड के ID और विवरण वाला JSON मिलता है। गाइड प्राप्त करने पर उसका पाठ मिलता है। बड़ा आउटपुट होने पर CLI उसकी जगह सहेजी गई फ़ाइल का पथ दिखा सकता है। एजेंट से वह फ़ाइल पूरी पढ़वाएँ।

अब इंस्टॉल की गई स्किल चलाएँ और एजेंट को सीमित दायरे का कार्य दें। नीचे का अनुरोध मौजूदा फ़्रेमवर्क और ब्राउज़र समर्थन नीति बनाए रखने तथा संपादन से पहले गाइड प्राप्त करने को कहता है:

Use the modern-web-guidance skill to add an animated modal dialog.
Keep the existing framework and browser support policy.
Retrieve the relevant guidance before editing.
Afterward, report the guide IDs, required fallbacks, and tests run.

टूल कॉल के रिकॉर्ड में वास्तविक खोज और गाइड प्राप्त करने की कार्रवाई देखें। अंतिम रिपोर्ट में गाइड की पहचान और उसके आधार पर लिए गए कार्यान्वयन संबंधी निर्णय होने चाहिए। केवल यह कहना कि एजेंट ने “सर्वोत्तम तरीके अपनाए”, पर्याप्त प्रमाण नहीं है।

रिलीज़ में शामिल डायलॉग ऐनिमेशन गाइड समीक्षा के लिए एक ठोस बिंदु देती है। कोड में transition की संक्षिप्त घोषणा इस्तेमाल हो, तो transition-behavior: allow-discrete उसके बाद आना चाहिए। अन्यथा transition उस मान को रीसेट कर देगा।

डायलॉग खुलने और बंद होने का व्यवहार जाँचें। कम ऐनिमेशन की प्राथमिकता और डायलॉग के मौजूदा इंटरैक्शन भी जाँचें।

पहली कमांड खोज परिणाम देने से पहले विफल हो, तो पहले Node.js और पैकेज डाउनलोड की अनुमतियाँ जाँचें। रिलीज़ में शामिल स्किल निर्देश पैकेज डाउनलोड और ऑफ़लाइन संचालन को अलग बताते हैं। ज़रूरी पैकेज की कमांड को अनुमति दें, किसी भी npx कमांड को चलाने की खुली अनुमति नहीं।

खोज परिणाम प्रासंगिक न हों, तो “confirmation modal dialog” जैसे ठोस ब्राउज़र व्यवहार वाला अनुरोध आज़माएँ। प्रक्रिया को सफल दिखाने के लिए असंबंधित गाइड प्राप्त न करें।

legacy-scan से समीक्षा करें, अपने आप कोड न बदलवाएँ

रिपॉज़िटरी या डायरेक्टरी में आधुनिकीकरण योग्य हिस्से खोजने के लिए legacy-scan इस्तेमाल करें। किसी विशिष्ट कंपोनेंट में बदलाव के लिए खोज और गाइड प्राप्त करने का तरीका अपनाएँ। आधुनिकीकरण प्रक्रिया के दस्तावेज़ यही अंतर बताते हैं।

आसानी से पढ़े जा सकने वाले परिणाम के लिए प्रोजेक्ट रूट से चलाएँ:

npx modern-web-guidance@latest legacy-scan .

एजेंट की समीक्षा के लिए संरचित आउटपुट चाहिए, तो चलाएँ:

npx modern-web-guidance@latest legacy-scan . --json

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

एजेंट से दस्तावेज़ में दी गई चार चरणों की प्रक्रिया अपनाने को कहें:

1. चुनी गई डायरेक्टरी स्कैन करे और संभावित बदलावों के नतीजे जुटाए।
2. हर नतीजे को आसपास के कोड और उसके keepWhen/dropWhen नियमों के आधार पर जाँचे। हर मिलान को ज़रूरी बदलाव मानने के बजाय गलती से पुराने पैटर्न के रूप में चिह्नित नतीजे हटाए।
3. सत्यापित नतीजों और प्रस्तावित बदलावों की रिपोर्ट दे। आधुनिकीकरण शुरू करने से पहले आपकी स्वीकृति ले।
4. स्वीकृत बदलावों के लिए संबंधित गाइड प्राप्त करके उन्हें लागू करे। मौजूदा टेस्ट चलाए और बदले हुए दायरे को फिर स्कैन करे।

जानबूझकर रखे गए फ़ॉलबैक और सुविधा की उपलब्धता जाँचने वाले संगतता कोड पर विशेष ध्यान दें। पुराना दिखने वाला कार्यान्वयन आपकी ब्राउज़र समर्थन नीति के कारण अब भी ज़रूरी हो सकता है।

संस्करण 1.0 का स्कैनर लगभग 20% गाइड कवर करता है। ये वे गाइड हैं जिनके लिए पुराने पैटर्न पहचानने के निश्चित नियम मौजूद हैं। यह गाइड के कैटलॉग का हिस्सा है, आपके कोडबेस का प्रतिशत नहीं। इसलिए कोई नतीजा न मिलना पूर्ण आधुनिकीकरण, सुलभता या सही व्यवहार का प्रमाण नहीं है।

आधुनिकीकरण से पहले ब्राउज़र नीति और .mwgrc सेट करें

संगतता की आवश्यकताएँ स्पष्ट रखें और ज़रूरत न हो तो प्रयोगात्मक गाइड बंद रहने दें। डिफ़ॉल्ट रूप से स्किल Baseline Widely available सुविधाओं को बिना फ़ॉलबैक के इस्तेमाल योग्य मानती है।

Baseline कॉन्फ़िगरेशन निर्देश बताते हैं कि प्रोजेक्ट का लक्ष्य AGENTS.md या CLAUDE.md में कैसे दर्ज करें। अपनी वास्तविक समर्थन नीति अपनाएँ। केवल प्रस्तावित बदलाव स्वीकार करने के लिए उसे न बदलें।

प्रोजेक्ट रूट में वैकल्पिक .mwgrc JSON फ़ाइल प्रयोगात्मक गाइड की अनुमति नियंत्रित करती है। सावधानीपूर्ण नीति दर्ज करने के लिए मौजूदा कॉन्फ़िगरेशन में ये फ़ील्ड जोड़ें या अपडेट करें:

{
  "allowOriginTrials": false,
  "allowVolatileFeatures": false
}

अस्थिर, यानी volatile, सुविधाओं की गाइड केवल एक ब्राउज़र इंजन में उपलब्ध सुविधाओं को कवर करती हैं। इनमें पिछले 3 महीनों में जारी हुई या अभी स्थिर हो रही सुविधाएँ आती हैं। ऐसी गाइड खोज में दिखती रहती हैं, लेकिन उनका पाठ प्राप्त करने के लिए स्पष्ट अनुमति चाहिए। Origin Trial की गाइड के लिए अलग अनुमति है।

volatile सुविधाओं की गाइड की अनुमति देने के लिए अपने इंटरैक्टिव Bash टर्मिनल में यह कमांड चलाएँ:

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

Origin Trial की गाइड के लिए अलग कमांड केवल ज़रूरत पड़ने पर चलाएँ:

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

कमांड पुष्टि माँगती हैं और संबंधित बूलियन मान true कर देती हैं। दिखाया गया कॉन्फ़िगरेशन पथ और बदली हुई कुंजी जाँचें। फिर गाइड प्राप्त करने की कोशिश दोहराएँ।

एजेंट के भीतर या गैर-इंटरैक्टिव शेल में इनकार होना जानबूझकर रखा गया व्यवहार है। अनुमति देने वाले कोड को इंसान के नियंत्रण वाला इंटरैक्टिव टर्मिनल चाहिए। एजेंट से यह जाँच पार करने का रास्ता न निकलवाएँ।

ये विकल्प केवल गाइड खोलते हैं। ये ब्राउज़र की सुविधा चालू नहीं करते, आपकी साइट का Origin Trial में पंजीकरण नहीं करते और समर्थित ब्राउज़र की नीति नहीं बढ़ाते।

टेलीमेट्री और कॉन्टेक्स्ट का खर्च नियंत्रित करें

टेलीमेट्री उसी परिवेश में बंद करें जहाँ से Modern Web Guidance वास्तव में चलता है, केवल किसी अलग टर्मिनल में नहीं। प्रोजेक्ट का गोपनीयता अनुभाग बताता है कि एकत्रित जानकारी में इंस्टॉल की संख्या, एजेंट के नाम, प्राप्त गाइड के ID और एजेंट की बनाई खोज क्वेरी शामिल हैं। उसके अनुसार, उपयोगकर्ता के मूल प्रॉम्प्ट एकत्रित नहीं किए जाते।

फिर भी खोज क्वेरी कार्य की जानकारी उजागर कर सकती हैं। Bash की स्टार्टअप कॉन्फ़िगरेशन, जैसे .bashrc, में export DISABLE_TELEMETRY=1 जोड़ें। सुनिश्चित करें कि एजेंट की कमांड चलने वाले परिवेश को यह वैरिएबल मिले। ज़रूरत हो तो पहले से चल रहे एजेंट या IDE को अपडेट किए गए परिवेश के साथ फिर शुरू करें।

टूल कॉल वाले Bash परिवेश में यह जाँच मान को दिखाए बिना उसकी पुष्टि करती है:

test "${DISABLE_TELEMETRY:-}" = 1

एग्ज़िट स्टेटस 0 का अर्थ है कि उस परिवेश में वैरिएबल का मान 1 है। यह नेटवर्क ट्रैफ़िक का ऑडिट नहीं है। इससे एजेंट प्रदाता या अन्य टूल की टेलीमेट्री सेटिंग का पता नहीं चलता।

ऑफ़लाइन खोज का अर्थ यह भी नहीं है कि पूरी प्रक्रिया ऑफ़लाइन है। पैकेज डाउनलोड के लिए नेटवर्क चाहिए। Modern Web Guidance की टेलीमेट्री बंद किए जाने तक चालू रहती है।

कॉन्टेक्स्ट का बजट बनाते समय ध्यान रखें कि README में modern-web-guidance के लिए लगभग 205 tokens बताए गए हैं। chrome-extensions के लिए लगभग 175 tokens बताए गए हैं। ये संख्याएँ एजेंट के पूरे कार्य की अधिकतम सीमा नहीं हैं। प्राप्त गाइड का पाठ कॉन्टेक्स्ट विंडो में जुड़ता है। समीक्षा और संपादन के लिए एजेंट को आगे भी काम करना पड़ता है।

प्रतिनिधि कार्यों पर वास्तविक उपयोग मापें। केवल स्किल के बताए गए आकार से बचत की गणना न करें।

मूल्यांकन के लाभ देखकर अपने कार्यों पर परीक्षण करें

Google के परिणाम स्किल आज़माने का आधार देते हैं, लेकिन सार्वभौमिक सफलता दर या टोकन बचत की गारंटी नहीं देते। 2026-11-08 के आधिकारिक README में दर्ज परिणाम ये हैं:

एजेंट और मॉडल का नाम	कार्य / जाँचें	गाइड के बिना	गाइड के साथ	वृद्धि
claude_code / opus-5-5	215 / 1801	57%	88%	31 प्रतिशत अंक
codex_cli / gpt-6.1-sol	215 / 1795	54%	82%	28 प्रतिशत अंक
antigravity_cli / gemini-4-argon	214 / 1673	58%	94%	36 प्रतिशत अंक

ये अलग-अलग जाँचों में सफल होने की दरें हैं, सफलतापूर्वक पूरे किए गए प्रोडक्शन प्रोजेक्ट का प्रतिशत नहीं। पंक्तियों में कार्य और जाँचों की संख्या भी अलग है। इसलिए इसे एक ही कार्यभार पर नियंत्रित तुलना से बनी मॉडल रैंकिंग न मानें।

मूल्यांकन डैशबोर्ड की पद्धति के अनुसार, सफलता दर सफल जाँचों को कुल चली हुई जाँचों से भाग देकर निकाली जाती है। मूल्यांकन से पहले क्रैश होने या समय सीमा पार करने वाले रन हटा दिए जाते हैं। उनके साथ जोड़े गए दूसरे रन भी हटाए जाते हैं।

Google ने मूल्यांकन अपनी गाइड के आधार पर बनाया है। एजेंट की आम ग़लतियों की व्याख्या बताती है कि आउटपुट को गाइड में निर्धारित अपेक्षाओं से मिलाया जाता है। इन्हें टूल बनाने वाले के मूल्यांकन के परिणाम समझें, अपने ऐप्लिकेशन की गुणवत्ता का स्वतंत्र सत्यापन नहीं।

प्रोजेक्ट में अपनाने से पहले एक प्रतिनिधि कंपोनेंट कार्य गाइड के साथ और बिना गाइड के करवाकर तुलना करें। मॉडल, प्रॉम्प्ट और ब्राउज़र नीति समान रखें। ब्राउज़र का संबंधित व्यवहार, रिग्रेशन टेस्ट, लगा समय और वास्तविक उपयोग देखें।

खर्च के निर्णय में केवल टोकन की कीमत के बजाय पूरे हुए कोडिंग कार्य की लागत देखें। Modern Web Guidance तभी बनाए रखें जब वह आपके रिपॉज़िटरी की महत्वपूर्ण जाँचों में सुधार करे और समीक्षा या उपयोग का खर्च अस्वीकार्य न बढ़ाए।