वेब डेवलपमेंट लाइफ़साइकल के मौजूदा चरण के हिसाब से, मॉडर्न वेब गाइडेंस में बताई गई स्किल चुनें. इसमें शुरुआती स्टाइलिंग से लेकर सुरक्षा से जुड़े आखिरी चरण तक की जानकारी शामिल है.
वेब की अहम स्किल
ऑर्केस्ट्रेटर की मदद से, वेब की अहम स्किल के हिसाब से अपने काम को बेहतर बनाएं और उस पर फ़ोकस करें.
accessibility
/modern-web-guidance accessibility
यह आपकी मुख्य ऑडिट गाइड के तौर पर काम करती है. इसकी मदद से, अपने पूरे ऐप्लिकेशन में सुलभता से जुड़े पैटर्न का आकलन किया जा सकता है. साथ ही, उन्हें ठीक किया जा सकता है और लागू किया जा सकता है.
GitHub पर accessibility स्किल देखें
performance
/modern-web-guidance performance
इसकी मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को ऑप्टिमाइज़ किया जा सकता है. साथ ही, पेज लोड होने में लगने वाले समय को कम किया जा सकता है और उपयोगकर्ता के इनपुट पर मिलने वाले रिस्पॉन्स को बेहतर बनाया जा सकता है.
GitHub पर performance स्किल देखें
user-experience
/modern-web-guidance user-experience
यह आपके यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर काम करती है. इसकी मदद से, रिस्पॉन्सिव कस्टम एलिमेंट, स्मूद ट्रांज़िशन, और मॉडर्न स्टाइलिंग पैटर्न को तुरंत लागू किया जा सकता है.
GitHub पर user-experience स्किल देखें
वेब टेक्नोलॉजी
ये अहम स्किल, किसी भी मॉडर्न ऐप्लिकेशन के लिए ज़रूरी बिल्डिंग ब्लॉक उपलब्ध कराती हैं. इससे यह पक्का होता है कि आपका प्रोजेक्ट, सिमैंटिक एचटीएमएल, स्पीड, और इंटरऑपरेबिलिटी को ध्यान में रखते हुए, मॉडर्न सबसे सही तरीकों के साथ शुरू हो.
html
/modern-web-guidance html
मॉडर्न एचटीएमएल आर्किटेक्चर, सिमैंटिक, नेटिव इंटरैक्टिव एपीआई (डायलॉग, पॉपओवर, डीटेल), फ़ोकस मैनेजमेंट, और संसाधन प्राथमिकता के लिए, कार्रवाई पर फ़ोकस करने वाले दिशा-निर्देश. वेब दस्तावेज़ों को स्ट्रक्चर करते समय, नेटिव ओवरले लागू करते समय या संसाधन लोड करने के क्रम को ऑप्टिमाइज़ करते समय, इस गाइड का इस्तेमाल करें.
css
/modern-web-guidance css
मॉडर्न सीएसएस आर्किटेक्चर, लेआउट, और परफ़ॉर्मेंस के लिए, कार्रवाई पर फ़ोकस करने वाले दिशा-निर्देश. स्टाइल ऑथर करते समय, डिज़ाइन सिस्टम मैनेज करते समय या वेब रेंडरिंग को ऑप्टिमाइज़ करते समय, इस गाइड का इस्तेमाल करें.
css-layout
/modern-web-guidance css-layout
मॉडर्न सीएसएस लेआउट, जैसे कि फ़्लेक्सबॉक्स, ग्रिड, सबग्रिड, कंटेनर क्वेरी, ऐंकर पोज़िशनिंग, और इंट्रिंसिक साइज़िंग. रिस्पॉन्सिव यूआई कॉम्पोनेंट या पेज लेआउट डिज़ाइन करते समय, इस स्किल का इस्तेमाल करें.
GitHub पर css-layout स्किल देखें
forms
/modern-web-guidance forms
सुलभ, सुरक्षित, और इस्तेमाल में आसान वेब फ़ॉर्म बनाने के सबसे सही तरीके. फ़ॉर्म, इनपुट, और सबमिशन फ़्लो बनाते या उनमें बदलाव करते समय, इस गाइड का इस्तेमाल करें.
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
WebAssembly का इस्तेमाल करके, मॉडर्न वेब के लिए C और C++ को कंपाइल करना. C++ कोड पोर्ट करने, Emscripten की मदद से C++ लाइब्रेरी बनाने या ब्राउज़र में हाई-परफ़ॉर्मेंस C++ कॉम्पोनेंट सेट अप करने के लिए, इस स्किल का इस्तेमाल करें.
GitHub पर cpp-on-the-web स्किल देखें
ब्राउज़र की सुविधाएं (ऑप्ट-इन)
इन स्किल की मदद से, Chrome एक्सटेंशन डेवलप किए जा सकते हैं. ये एक्सटेंशन, Manifest V3 जैसे मॉडर्न स्टैंडर्ड के मुताबिक होते हैं. साथ ही, मेटाडेटा, निजता नीतियों, और अनुमतियों की वजहें तैयार करने में मदद मिलती है. इससे Chrome Web Store पर पब्लिश करने की प्रोसेस आसान हो जाती है. ये स्किल ऑप्ट-इन हैं और डिफ़ॉल्ट रूप से चालू नहीं होती हैं.
chrome-extensions
/modern-web-guidance chrome-extensions
Manifest V3 के तहत, सुरक्षित और नियमों के मुताबिक Chrome एक्सटेंशन बनाएं. इनमें सर्विस वर्कर लाइफ़साइकल और सैंडबॉक्सिंग से जुड़ी आम समस्याएं नहीं होती हैं. ऑप्ट-इन करने के लिए, आपको chrome-extensions स्किल तय करनी होगी:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
GitHub पर chrome-extensions स्किल देखें
सुरक्षा, भरोसा, और पहचान
इन स्किल की मदद से, ऐप्लिकेशन को XSS जैसे क्लाइंट-साइड एक्सप्लॉइट से सुरक्षित रखकर, लोगों का भरोसा जीता जा सकता है. इसके लिए, डिफ़ेंसिव एचटीटीपी हेडर और ऑरिजिन आइसोलेशन का इस्तेमाल किया जाता है. डेवलपर, पासकी की मदद से पुष्टि करने के फ़्लो भी डेवलप कर सकते हैं. साथ ही, तीसरे पक्ष की ट्रैकिंग को कम किया जा सकता है और C/C++ लाइब्रेरी को WebAssembly मॉड्यूल में पोर्ट करने के लिए, स्किल का इस्तेमाल किया जा सकता है.
security
/modern-web-guidance security
वेब डेवलपर के लिए, सुरक्षा से जुड़े दिशा-निर्देश (XSS, CSP, कुकी, क्रॉस-ऑरिजिन आइसोलेशन). ऑडिट करने, टेस्ट करने, और सुरक्षा नीतियों को सुरक्षित तरीके से डिप्लॉय करने की प्रोसेस के लिए, इस स्किल का इस्तेमाल करें.
GitHub पर security स्किल देखें
passkeys
/modern-web-guidance passkeys
वेब ऐप्लिकेशन में WebAuthn और पासकी लागू करने के लिए, पूरी जानकारी और क्रॉस-कटिंग सिद्धांत. पासकी के रजिस्ट्रेशन, पुष्टि, मैनेजमेंट या फिर से पुष्टि करने के लिए, इस गाइड का इस्तेमाल करें.
GitHub पर passkeys स्किल देखें
privacy
/modern-web-guidance privacy
वेब डेवलपर के लिए, कार्रवाई पर फ़ोकस करने वाले दिशा-निर्देश. इनकी मदद से, डिज़ाइन के हिसाब से निजता, डेटा मिनिमाइज़ेशन, तीसरे पक्ष के ऑडिट, और डेटा को सुरक्षित तरीके से मैनेज किया जा सकता है. ऐप्लिकेशन डिज़ाइन करते समय, तीसरे पक्ष की सेवाओं को इंटिग्रेट करते समय, उपयोगकर्ता डेटा मैनेज करते समय या सुरक्षा हेडर कॉन्फ़िगर करते समय, इस स्किल का इस्तेमाल करें.
एजेंट की तरह काम करने वाले सिस्टम
इन स्किल की मदद से, WebMCP का इस्तेमाल करके, अपने वेब ऐप्लिकेशन और एआई वर्कफ़्लो के बीच का अंतर कम किया जा सकता है. क्लाइंट-साइड ब्राउज़र की सुविधाओं को इंटरैक्टिव टूल के तौर पर दिखाकर, एआई एजेंट को ऐप्लिकेशन की सुविधाओं के साथ सीधे इंटरैक्ट करने के निर्देश दिए जा सकते हैं.
webmcp
/modern-web-guidance webmcp
WebMCP लागू करें, ताकि क्लाइंट-साइड ब्राउज़र की सुविधाओं को एआई एजेंट के लिए इंटरैक्टिव टूल के तौर पर दिखाया जा सके.
अगले चरण
अब मॉडर्न वेब गाइडेंस के बारे में जानकारी मिल गई है, तो इसे आज़माएं! मॉडर्न वेब गाइडेंस में काम करने वाली सुविधाओं और इस्तेमाल के उदाहरणों के बारे में जानें. साथ ही, शुरू करने के लिए कुछ सैंपल प्रॉम्प्ट आज़माएं.